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:
Kaimbacher 2025-05-06 17:43:37 +02:00
parent be6b38d0a3
commit 0bf442be96
9 changed files with 3058 additions and 467 deletions

View file

@ -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">