hotfix(dataset): improve dataset classification UI and data handling
- Updated the Dataset and Submitter Category Vue components to enhance the UI for library classification. The collection names and numbers are now displayed with distinct styling using `span` elements with specific classes for better readability. - Modified the DatasetController and Editor/DatasetController to filter collection roles by 'ddc' and 'ccs' names when preloading collections, improving data retrieval efficiency. - Added `left_id` and `right_id` columns to the `collections` table in the `dataset_7_collections.ts` migration file. - Added a migration to reorder the collection_roles table.
This commit is contained in:
parent
be6b38d0a3
commit
0bf442be96
9 changed files with 3058 additions and 467 deletions
|
|
@ -36,7 +36,8 @@
|
|||
'cursor-pointer p-2 border border-gray-200 rounded hover:bg-sky-50 text-sky-700 text-sm': true,
|
||||
'bg-sky-100 border-sky-500': selectedToplevelCollection && selectedToplevelCollection.id === col.id
|
||||
}" @click="onToplevelCollectionSelected(col)">
|
||||
{{ `${col.name} (${col.number})` }}
|
||||
<span class="text-sky-700">{{ col.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ col.number }}</span>
|
||||
</li>
|
||||
<li v-if="collections.length === 0" class="text-gray-800 dark:text-slate-400">
|
||||
No collections available.
|
||||
|
|
@ -55,7 +56,8 @@
|
|||
<template #item="{ element: parent }">
|
||||
<li :key="parent.id" :draggable="!parent.inUse" :class="getChildClasses(parent)"
|
||||
@click="onCollectionSelected(parent)">
|
||||
{{ `${parent.name} (${parent.number})` }}
|
||||
<span class="text-sky-700">{{ parent.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ parent.number }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
|
|
@ -79,11 +81,13 @@
|
|||
'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})` }}
|
||||
<span class="text-sky-700">{{ element.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ element.number }}</span>
|
||||
</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>
|
||||
|
|
@ -92,7 +96,8 @@
|
|||
<template #item="{ element: child }">
|
||||
<li :key="child.id" :draggable="!child.inUse" :class="getChildClasses(child)"
|
||||
@click="onCollectionSelected(child)">
|
||||
{{ `${child.name} (${child.number})` }}
|
||||
<span class="text-sky-700">{{ child.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ child.number }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
|
|
@ -118,7 +123,8 @@
|
|||
<template #item="{ element }">
|
||||
<div :key="element.id"
|
||||
class="p-2 m-1 bg-sky-200 text-sky-800 rounded flex items-center gap-2 h-7">
|
||||
<span>{{ element.name }} ({{ element.number }})</span>
|
||||
<span class="text-sky-700">{{ element.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ element.number }}</span>
|
||||
<button
|
||||
@click="selectedCollectionList = selectedCollectionList.filter(item => item.id !== element.id)"
|
||||
class="hover:text-sky-600 flex items-center">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Classify"></Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiLibraryShelves" title="Library Classification" main>
|
||||
|
|
@ -33,29 +34,30 @@
|
|||
</h2>
|
||||
<ul class="flex flex-wrap gap-2">
|
||||
<li v-for="col in collections" :key="col.id" :class="{
|
||||
'cursor-pointer p-2 border border-gray-200 rounded hover:bg-sky-50 text-sky-700 text-sm': true,
|
||||
'cursor-pointer p-2 border border-gray-200 rounded hover:bg-sky-50 flex items-center': true,
|
||||
'bg-sky-100 border-sky-500': selectedToplevelCollection && selectedToplevelCollection.id === col.id
|
||||
}" @click="onToplevelCollectionSelected(col)">
|
||||
{{ `${col.name} (${col.number})` }}
|
||||
<span class="text-sky-700">{{ col.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ col.number }}</span>
|
||||
</li>
|
||||
<li v-if="collections.length === 0" class="text-gray-800 dark:text-slate-400">
|
||||
No collections available.
|
||||
</li>
|
||||
</ul>
|
||||
</CardBox>
|
||||
|
||||
<!-- Collections Listing -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<!-- Broader Collection (Parent) -->
|
||||
<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">Broader Collection</h2>
|
||||
<h2 class="text-lg font-bold text-gray-800 dark:text-slate-400 mb-2">Broader Collection</h2>
|
||||
<draggable v-if="broaderCollections.length > 0" v-model="broaderCollections"
|
||||
:group="{ name: 'collections' }" tag="ul" class="flex flex-wrap gap-2 max-h-60 overflow-y-auto">
|
||||
<template #item="{ element: parent }">
|
||||
<li :key="parent.id" :draggable="!parent.inUse" :class="getChildClasses(parent)"
|
||||
@click="onCollectionSelected(parent)">
|
||||
{{ `${parent.name} (${parent.number})` }}
|
||||
<span class="text-sky-700">{{ parent.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ parent.number }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
|
|
@ -69,30 +71,35 @@
|
|||
<!-- 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">
|
||||
<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})` }}
|
||||
<span class="text-sky-700">{{ element.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ element.number }}</span>
|
||||
</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>
|
||||
<h2 class="text-lg font-bold text-gray-800 dark:text-slate-400 mb-2">Narrower Collections</h2>
|
||||
<draggable v-if="narrowerCollections.length > 0" v-model="narrowerCollections"
|
||||
:group="{ name: 'collections' }" tag="ul" class="flex flex-wrap gap-2 max-h-60 overflow-y-auto">
|
||||
<template #item="{ element: child }">
|
||||
<li :key="child.id" :draggable="!child.inUse" :class="getChildClasses(child)"
|
||||
@click="onCollectionSelected(child)">
|
||||
{{ `${child.name} (${child.number})` }}
|
||||
<span class="text-sky-700">{{ child.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ child.number }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
|
|
@ -106,19 +113,21 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-4 rounded-lg">
|
||||
<div v-if="selectedCollection || selectedCollectionList.length > 0" class="bg-gray-100 shadow rounded-lg p-6 mb-6" :class="{ 'opacity-50': selectedCollection && selectedCollectionList.length === 0 }">
|
||||
<div v-if="selectedCollection || selectedCollectionList.length > 0"
|
||||
class="bg-gray-100 shadow rounded-lg p-6 mb-6"
|
||||
:class="{ 'opacity-50': selectedCollection && selectedCollectionList.length === 0 }">
|
||||
<p class="mb-4 text-gray-700">Please drag your collections here to classify your previously created
|
||||
dataset
|
||||
according to library classification standards.</p>
|
||||
<draggable v-model="selectedCollectionList" :group="{ name: 'collections' }"
|
||||
class="min-h-36 border-dashed border-2 border-gray-400 p-4 text-sm flex flex-wrap gap-2 max-h-60 overflow-y-auto"
|
||||
tag="ul"
|
||||
:disabled="selectedCollection === null && selectedCollectionList.length > 0"
|
||||
tag="ul" :disabled="selectedCollection === null && selectedCollectionList.length > 0"
|
||||
:style="{ opacity: (selectedCollection === null && selectedCollectionList.length > 0) ? 0.5 : 1, pointerEvents: (selectedCollection === null && selectedCollectionList.length > 0) ? 'none' : 'auto' }">
|
||||
<template #item="{ element }">
|
||||
<div :key="element.id"
|
||||
class="p-2 m-1 bg-sky-200 text-sky-800 rounded flex items-center gap-2 h-7">
|
||||
<span>{{ element.name }} ({{ element.number }})</span>
|
||||
<span class="text-sky-700">{{ element.name }}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full">{{ element.number }}</span>
|
||||
<button
|
||||
@click="selectedCollectionList = selectedCollectionList.filter(item => item.id !== element.id)"
|
||||
class="hover:text-sky-600 flex items-center">
|
||||
|
|
@ -131,7 +140,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 border-t border-gray-100 dark:border-slate-800">
|
||||
|
|
@ -199,10 +208,10 @@ 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
|
||||
}
|
||||
get: () => (selectedCollection.value ? [selectedCollection.value] : []),
|
||||
set: (value: Collection[]) => {
|
||||
selectedCollection.value = value.length ? value[0] : null
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -299,7 +308,7 @@ const fetchCollections = async (collectionId: number) => {
|
|||
selectedCollection.value = { ...selectedCollection.value, inUse: true };
|
||||
} else if (selectedCollection.value) {
|
||||
selectedCollection.value = { ...selectedCollection.value, inUse: false };
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in fetchCollections:', error);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue