Fix Canvas and picklists

src/components/DynamicPicker.vue

@@ -8,20 +8,22 @@
             <MultiSelect
                 v-if="dataSource === 'videoGroups'"
                 v-model="selectedValue"
-                :options="options"
-                
+                :options="safeOptions"
+                optionLabel="name"
                 :filter="true"
                 :placeholder="placeholder || 'Select VideoGroups'"
                 :disabled="disabled"
                 :loading="loading"
-                class="w-full md:w-80"
+                :virtualScrollerOptions="{ itemSize: 50 }"
+                class="w-full"
+                panelClass="video-groups-panel"
                 @change="onSelectionChange"
             >
                 <template #option="slotProps">
-                    <div class="flex align-items-center">
-                        <i class="pi pi-video mr-2"></i>
-                        <div>
-                            <div>{{ slotProps.option.name }}</div>
+                    <div class="flex align-items-center p-3 hover:bg-gray-50">
+                        <i class="pi pi-video mr-3 text-blue-600"></i>
+                        <div class="flex-1">
+                            <div class="font-medium text-sm">{{ slotProps.option.name }}</div>
                             <small class="text-muted" v-if="slotProps.option.description">
                                 {{ slotProps.option.description }}
                             </small>
@@ -34,20 +36,22 @@
             <MultiSelect
                 v-else-if="dataSource === 'ksDocuments'"
                 v-model="selectedValue"
-                :options="options"
-                
+                :options="safeOptions"
+                optionLabel="fileName"
                 :filter="true"
                 :placeholder="placeholder || 'Select Documents'"
                 :disabled="disabled"
                 :loading="loading"
-                class="w-full md:w-80"
+                :virtualScrollerOptions="{ itemSize: 50 }"
+                class="w-full"
+                panelClass="ks-documents-panel"
                 @change="onSelectionChange"
             >
                 <template #option="slotProps">
-                    <div class="flex align-items-center">
-                        <i :class="getFileIcon(slotProps.option)" class="mr-2"></i>
-                        <div>
-                            <div>{{ slotProps.option.fileName }}</div>
+                    <div class="flex align-items-center p-3 hover:bg-gray-50">
+                        <i :class="getFileIcon(slotProps.option)" class="mr-3"></i>
+                        <div class="flex-1">
+                            <div class="font-medium text-sm">{{ slotProps.option.fileName }}</div>
                             <small class="text-muted" v-if="slotProps.option.description">
                                 {{ slotProps.option.description }}
                             </small>
@@ -60,8 +64,8 @@
             <Dropdown
                 v-else-if="multiple === false"
                 v-model="selectedValue"
-                :options="options"
-                
+                :options="safeOptions"
+                optionLabel="name"
                 :filter="true"
                 :placeholder="placeholder || 'Select an option'"
                 :disabled="disabled"
@@ -72,15 +76,17 @@
 
             <!-- MultiSelect generico per altri tipi -->
             <MultiSelect
-                v-else
+                v-else-if="safeOptions && safeOptions.length > 0"
                 v-model="selectedValue"
-                :options="options"
-                
+                :options="safeOptions"
+                optionLabel="name"
                 :filter="true"
                 :placeholder="placeholder || 'Select options'"
                 :disabled="disabled"
                 :loading="loading"
-                class="w-full md:w-80"
+                :virtualScrollerOptions="{ itemSize: 50 }"
+                class="w-full"
+                panelClass="generic-multiselect-panel"
                 @change="onSelectionChange"
             />
         </div>
@@ -175,6 +181,11 @@ const selectedValue = computed({
     }
 });
 
+// Computed property per garantire che le options siano sempre un array valido
+const safeOptions = computed(() => {
+    return Array.isArray(props.options) ? props.options : [];
+});
+
 const getFileIcon = (document) => {
     if (!document) return 'pi pi-file';
 
@@ -226,3 +237,52 @@ const onSelectionChange = (event) => {
     color: #6c757d;
 }
 </style>
+
+<style>
+/* Personalizzazione delle panel dei MultiSelect per migliorare la visualizzazione */
+.ks-documents-panel .p-multiselect-panel,
+.video-groups-panel .p-multiselect-panel,
+.generic-multiselect-panel .p-multiselect-panel {
+    min-width: 350px;
+    max-width: 500px;
+}
+
+.ks-documents-panel .p-multiselect-items,
+.video-groups-panel .p-multiselect-items,
+.generic-multiselect-panel .p-multiselect-items {
+    max-height: 300px;
+}
+
+.ks-documents-panel .p-multiselect-item,
+.video-groups-panel .p-multiselect-item,
+.generic-multiselect-panel .p-multiselect-item {
+    padding: 0.75rem;
+    border-bottom: 1px solid #e9ecef;
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+}
+
+.ks-documents-panel .p-multiselect-item:last-child,
+.video-groups-panel .p-multiselect-item:last-child,
+.generic-multiselect-panel .p-multiselect-item:last-child {
+    border-bottom: none;
+}
+
+.ks-documents-panel .p-multiselect-item:hover,
+.video-groups-panel .p-multiselect-item:hover,
+.generic-multiselect-panel .p-multiselect-item:hover {
+    background-color: #f8f9fa;
+}
+
+/* Stili per le icone dei file */
+.ks-documents-panel .pi {
+    font-size: 1.2rem;
+    min-width: 1.5rem;
+}
+
+.video-groups-panel .pi-video {
+    font-size: 1.2rem;
+    min-width: 1.5rem;
+}
+</style>