geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 1
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

hotfix: ensure selected collection is draggable

Browse source 
- Update draggable attribute and class logic so that the selected collection remains draggable
- Preserve proper styling while allowing user interaction with the selected collection
This commit is contained in:
Kaimbacher 2025-03-18 12:51:19 +01:00
parent 0d259b6464
commit a934626721
1 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
resources/js/Pages/Submitter/Dataset/Category.vue
View file

@ -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'
]">
{{ `${selectedCollection.name} (${selectedCollection.number})` }}
</p>
]"></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'
]">
{{ `${element.name} (${element.number})` }}
</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);
}