Arno Kaimbacher
88e37bfee8
Some checks failed
build.yaml / feat: Enhance Dataset Index with Dynamic Legend and Improved State Management for submitter, editor and reviewer (push) Failing after 0s
- Added a collapsible legend to display dataset states and available actions. - Implemented localStorage persistence for legend visibility. - Refactored dataset state handling with dynamic classes and labels. - Improved table layout and styling for better user experience. - Updated Tailwind CSS configuration to define new background colors for dataset states.
348 lines
No EOL
20 KiB
Vue
348 lines
No EOL
20 KiB
Vue
<script setup lang="ts">
|
|
// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
|
|
import { Head, usePage } from '@inertiajs/vue3';
|
|
import { ComputedRef } from 'vue';
|
|
import { mdiSquareEditOutline, mdiAlertBoxOutline, mdiShareVariant, mdiBookEdit, mdiUndo, mdiLibraryShelves, mdiAccountArrowLeft, mdiAccountArrowRight, mdiFingerprint, mdiPublish, mdiChevronDown, mdiChevronUp, mdiTrayArrowDown, mdiCheckDecagram } from '@mdi/js';
|
|
import { computed, ref, onMounted } from 'vue';
|
|
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
import BaseButtons from '@/Components/BaseButtons.vue';
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
|
import Pagination from '@/Components/Pagination.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
|
|
const props = defineProps({
|
|
datasets: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
filters: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
can: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const flash: ComputedRef<any> = computed(() => {
|
|
return usePage().props.flash;
|
|
});
|
|
|
|
// Legend visibility state with localStorage persistence
|
|
const showLegend = ref(true);
|
|
|
|
onMounted(() => {
|
|
const savedState = localStorage.getItem('datasetLegendVisible');
|
|
if (savedState !== null) {
|
|
showLegend.value = savedState === 'true';
|
|
}
|
|
});
|
|
|
|
const toggleLegend = () => {
|
|
showLegend.value = !showLegend.value;
|
|
localStorage.setItem('datasetLegendVisible', String(showLegend.value));
|
|
};
|
|
|
|
const getRowClass = (dataset) => {
|
|
// Return Tailwind classes that will be defined in tailwind.config
|
|
const stateClasses = {
|
|
'released': 'bg-released dark:bg-released-dark',
|
|
'editor_accepted': 'bg-editor-accepted dark:bg-editor-accepted-dark',
|
|
'rejected_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
|
|
'reviewed': 'bg-reviewed dark:bg-reviewed-dark',
|
|
'published': 'bg-published dark:bg-published-dark',
|
|
};
|
|
|
|
return stateClasses[dataset.server_state] || '';
|
|
};
|
|
|
|
|
|
// Method to get state badge color
|
|
const getStateColor = (state: string) => {
|
|
const stateColors = {
|
|
'inprogress': 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200',
|
|
'released': 'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-200',
|
|
'editor_accepted': 'bg-teal-200 text-teal-900 dark:bg-teal-900 dark:text-teal-200',
|
|
'rejected_reviewer': 'bg-amber-200 text-amber-900 dark:bg-amber-900 dark:text-amber-200',
|
|
'rejected_to_reviewer': 'bg-yellow-200 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200',
|
|
'rejected_editor': 'bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200',
|
|
'reviewed': 'bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200',
|
|
'published': 'bg-green-300 text-green-900 dark:bg-green-900 dark:text-green-200',
|
|
'approved': 'bg-cyan-200 text-cyan-900 dark:bg-cyan-900 dark:text-cyan-200',
|
|
'reviewer_accepted': 'bg-lime-200 text-lime-900 dark:bg-lime-900 dark:text-lime-200',
|
|
};
|
|
return stateColors[state] || 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200';
|
|
};
|
|
|
|
// Dynamic legend definitions
|
|
const datasetStates = [
|
|
{ key: 'released', label: 'Submitted' },
|
|
{ key: 'editor_accepted', label: 'In Approval' },
|
|
// { key: 'approved', label: 'Ready for Review' },
|
|
// { key: 'reviewer_accepted', label: 'In Review' },
|
|
{ key: 'reviewed', label: 'Reviewed' },
|
|
{ key: 'published', label: 'Published' },
|
|
{ key: 'rejected_reviewer', label: 'Rejected by Reviewer' },
|
|
];
|
|
const getLabel = (key: string) => {
|
|
return datasetStates.find(s => s.key === key)?.label || 'Unknown'
|
|
}
|
|
|
|
const availableActions = [
|
|
{ icon: mdiSquareEditOutline, label: 'Edit', color: 'text-blue-500' },
|
|
{ icon: mdiTrayArrowDown, label: 'Receive', color: 'text-cyan-500' },
|
|
{ icon: mdiCheckDecagram, label: 'Approve (Send to Reviewer)', color: 'text-teal-600' },
|
|
{ icon: mdiAccountArrowLeft, label: 'Reject to Submitter', color: 'text-amber-600' },
|
|
{ icon: mdiAccountArrowRight, label: 'Reject to Reviewer', color: 'text-yellow-600' },
|
|
{ icon: mdiLibraryShelves, label: 'Classify', color: 'text-blue-500' },
|
|
{ icon: mdiPublish, label: 'Publish', color: 'text-green-600' },
|
|
{ icon: mdiFingerprint, label: 'Mint DOI', color: 'text-cyan-600' },
|
|
];
|
|
|
|
const truncateTitle = (text: string, length = 50) => {
|
|
if (!text) return '';
|
|
return text.length > length ? text.substring(0, length) + '...' : text;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<LayoutAuthenticated>
|
|
<Head title="Editor Datasets" />
|
|
<SectionMain>
|
|
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
|
{{ flash.message }}
|
|
</NotificationBar>
|
|
<NotificationBar v-if="flash.warning" color="warning" :icon="mdiAlertBoxOutline">
|
|
{{ flash.warning }}
|
|
</NotificationBar>
|
|
<NotificationBar v-if="flash.error" color="danger" :icon="mdiAlertBoxOutline">
|
|
{{ flash.error }}
|
|
</NotificationBar>
|
|
|
|
<!-- Legend -->
|
|
<CardBox class="mb-4">
|
|
<!-- Legend Header with Toggle -->
|
|
<div
|
|
class="flex items-center justify-between cursor-pointer select-none p-4 border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors"
|
|
@click="toggleLegend"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
|
Legend - States & Actions
|
|
</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ showLegend ? 'Click to hide' : 'Click to show' }}
|
|
</span>
|
|
<BaseIcon
|
|
:path="showLegend ? mdiChevronUp : mdiChevronDown"
|
|
:size="20"
|
|
class="text-gray-500 dark:text-gray-400 transition-transform"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsible Legend Content -->
|
|
<transition
|
|
enter-active-class="transition-all duration-300 ease-out"
|
|
enter-from-class="max-h-0 opacity-0"
|
|
enter-to-class="max-h-96 opacity-100"
|
|
leave-active-class="transition-all duration-300 ease-in"
|
|
leave-from-class="max-h-96 opacity-100"
|
|
leave-to-class="max-h-0 opacity-0"
|
|
>
|
|
<div v-show="showLegend" class="overflow-hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
|
|
<!-- State Colors Legend -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
Dataset States
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-2 text-xs">
|
|
<div v-for="state in datasetStates" :key="state.key" class="flex items-center gap-2">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full" :class="getStateColor(state.key)">
|
|
{{ state.label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions Legend -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Available Actions
|
|
</h3>
|
|
<div class="grid grid-cols-1 gap-1.5 text-xs">
|
|
<div v-for="action in availableActions" :key="action.label" class="flex items-center gap-2">
|
|
<BaseIcon :path="action.icon" :size="16" :class="action.color" />
|
|
<span class="text-gray-700 dark:text-gray-300">{{ action.label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</CardBox>
|
|
|
|
<!-- table -->
|
|
<CardBox class="mb-6" has-table>
|
|
<div v-if="props.datasets.data.length > 0">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Submitter</th>
|
|
<th>State</th>
|
|
<th>Editor</th>
|
|
<th>Modified</th>
|
|
<th v-if="can.edit || can.delete">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="dataset in props.datasets.data" :key="dataset.id"
|
|
:class="['hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors', getRowClass(dataset)]">
|
|
<td data-label="Title">
|
|
<div class="max-w-xs">
|
|
<span
|
|
class="text-gray-700 dark:text-gray-300 text-sm font-medium"
|
|
:title="dataset.main_title"
|
|
>
|
|
{{ truncateTitle(dataset.main_title) }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td data-label="Submitter">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">
|
|
{{ dataset.user.login }}
|
|
</span>
|
|
</td>
|
|
<td data-label="State">
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
|
|
:class="getStateColor(dataset.server_state)">
|
|
{{ getLabel(dataset.server_state) }}
|
|
</span>
|
|
<div v-if="dataset.server_state === 'rejected_reviewer' && dataset.reject_reviewer_note"
|
|
class="relative group">
|
|
<button
|
|
class="w-5 h-5 rounded-full bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">
|
|
i
|
|
</button>
|
|
<div
|
|
class="absolute left-0 top-full mt-1 w-64 bg-white dark:bg-slate-800 shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100 border border-gray-200 dark:border-slate-700">
|
|
<p class="text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
|
|
{{ dataset.reject_reviewer_note }}
|
|
</p>
|
|
<div class="absolute -top-1 left-1 w-2 h-2 bg-white dark:bg-slate-800 border-l border-t border-gray-200 dark:border-slate-700 transform rotate-45">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td data-label="Editor" v-if="dataset.server_state === 'released'">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 italic" :title="dataset.server_date_modified">
|
|
Preferred: {{ dataset.preferred_reviewer }}
|
|
</span>
|
|
</td>
|
|
<td data-label="Editor"
|
|
v-else-if="dataset.server_state === 'editor_accepted' || dataset.server_state === 'rejected_reviewer'">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 italic" :title="dataset.server_date_modified">
|
|
In approval: {{ dataset.editor?.login }}
|
|
</span>
|
|
</td>
|
|
<td data-label="Editor" v-else>
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">
|
|
{{ dataset.editor?.login || '—' }}
|
|
</span>
|
|
</td>
|
|
|
|
<td data-label="Modified">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400" :title="dataset.server_date_modified">
|
|
{{ dataset.server_date_modified }}
|
|
</span>
|
|
</td>
|
|
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
|
|
<BaseButtons type="justify-start lg:justify-end" no-wrap>
|
|
<BaseButton v-if="can.receive && (dataset.server_state == 'released')"
|
|
:route-name="stardust.route('editor.dataset.receive', [dataset.id])"
|
|
color="info" :icon="mdiTrayArrowDown" small
|
|
title="Receive edit task" />
|
|
|
|
<BaseButton
|
|
v-if="can.approve && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
|
|
:route-name="stardust.route('editor.dataset.approve', [dataset.id])"
|
|
color="success" :icon="mdiCheckDecagram" small
|
|
title="Approve (Send to Reviewer)" />
|
|
|
|
<BaseButton
|
|
v-if="can.approve && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
|
|
:route-name="stardust.route('editor.dataset.reject', [dataset.id])"
|
|
color="danger" :icon="mdiAccountArrowLeft" small
|
|
title="Reject to Submitter" />
|
|
|
|
<BaseButton
|
|
v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
|
|
:route-name="stardust.route('editor.dataset.edit', [Number(dataset.id)])"
|
|
color="info" :icon="mdiSquareEditOutline" small
|
|
title="Edit" />
|
|
|
|
<BaseButton
|
|
v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
|
|
:route-name="stardust.route('editor.dataset.categorize', [dataset.id])"
|
|
color="info" :icon="mdiLibraryShelves" small
|
|
title="Classify" />
|
|
|
|
<BaseButton v-if="can.publish && (dataset.server_state == 'reviewed')"
|
|
:route-name="stardust.route('editor.dataset.rejectToReviewer', [dataset.id])"
|
|
color="warning" :icon="mdiAccountArrowRight" small
|
|
title="Reject to Reviewer" />
|
|
|
|
<BaseButton v-if="can.publish && (dataset.server_state == 'reviewed')"
|
|
:route-name="stardust.route('editor.dataset.publish', [dataset.id])"
|
|
color="success" :icon="mdiPublish" small
|
|
title="Publish" />
|
|
|
|
<BaseButton
|
|
v-if="can.publish && (dataset.server_state == 'published' && !dataset.identifier)"
|
|
:route-name="stardust.route('editor.dataset.doi', [dataset.id])"
|
|
color="info" :icon="mdiFingerprint" small
|
|
title="Mint DOI" />
|
|
</BaseButtons>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div v-else>
|
|
<div class="text-center py-12">
|
|
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
|
|
<p class="text-lg font-medium mb-2">No datasets found</p>
|
|
<p class="text-sm">Datasets will appear here when they are submitted</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-4">
|
|
<Pagination v-bind:data="datasets.meta" />
|
|
</div>
|
|
</CardBox>
|
|
</SectionMain>
|
|
</LayoutAuthenticated>
|
|
</template> |