hotfix: ensure selected collection is draggable

- Update draggable attribute and class logic so that the selected collection remains draggable
- Preserve proper styling while allowing user interaction with the selected collection

resources/js/Pages/Submitter/Dataset/Category.vue

@@ -69,14 +69,21 @@
                 <!-- Selected Collection Details -->
                 <CardBox v-if="selectedCollection" class="rounded-lg p-4" has-form-data>
                     <h3 class="text-xl font-bold text-gray-800 dark:text-slate-400 mb-2">Selected Collection</h3>
-                    <p :class="[
+                     <!-- <p :class="[
                         'cursor-pointer p-2 border border-gray-200 rounded text-sm',
                         selectedCollection.inUse ? 'bg-gray-200 text-gray-500 drag-none' : 'bg-green-50 text-green-700 hover:bg-green-100 hover:underline cursor-move'
+                    ]"></p> -->
+                    <draggable v-model="selectedCollectionArray" :group="{ name: 'collections', pull: 'clone', put: false }" tag="ul" class="flex flex-wrap gap-2 max-h-60 overflow-y-auto">
+                        <template #item="{ element }">
+                            <li :key="element.id" :class="[
+                                'p-2 border border-gray-200 rounded text-sm',
+                                element.inUse ? 'bg-gray-200 text-gray-500 drag-none' : 'bg-green-50 text-green-700 hover:bg-green-100 hover:underline cursor-move'
                             ]">
-                        {{ `${selectedCollection.name} (${selectedCollection.number})` }}
+                                {{ `${element.name} (${element.number})` }}
-                    </p>
+                            </li>
+                        </template>
+                    </draggable>
                 </CardBox>
-
                 <!-- Narrower Collections (Children) -->
                 <CardBox v-if="selectedCollection" class="rounded-lg p-4" has-form-data>
                     <h2 class="text-lg font-bold text-gray-800 dark:text-slate-400 mb-2">Narrower Collections</h2>                  
@@ -189,6 +196,16 @@ const broaderCollections = ref<Collection[]>([]);
 // Reactive list that holds collections dropped by the user
 const selectedCollectionList: Ref<Collection[]> = ref<Collection[]>([]);
 
+
+// Wrap selectedCollection in an array for draggable (always expects an array)
+const selectedCollectionArray = computed({
+  get: () => (selectedCollection.value ? [selectedCollection.value] : []),
+  set: (value: Collection[]) => {
+    selectedCollection.value = value.length ? value[0] : null
+  }
+})
+
+
 const form = useForm({
     collections: [] as number[],
 });
@@ -277,6 +294,12 @@ const fetchCollections = async (collectionId: number) => {
             const alreadyDropped = selectedCollectionList.value.find(dc => dc.id === collection.id);
             return alreadyDropped ? { ...collection, inUse: true } : { ...collection, inUse: false };
         });
+        // Check if selected collection is in the selected list
+        if (selectedCollection.value && selectedCollectionList.value.find(dc => dc.id === selectedCollection.value.id)) {
+            selectedCollection.value = { ...selectedCollection.value, inUse: true };
+        } else if (selectedCollection.value) {
+            selectedCollection.value = { ...selectedCollection.value, inUse: false };
+        }    
     } catch (error) {
         console.error('Error in fetchCollections:', error);
     }