- fix: Update TablePersons component for improved UI and functionality;
Some checks failed
build.yaml / - fix: Update TablePersons component for improved UI and functionality; (push) Failing after 0s

- refactor file scan options
This commit is contained in:
Kaimbacher 2025-10-16 12:04:46 +02:00
commit 04269ce9cf
2 changed files with 196 additions and 120 deletions

View file

@ -2,8 +2,8 @@
import { computed, ref, watch } from 'vue';
import { mdiTrashCan } from '@mdi/js';
import { mdiDragVariant, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
import { mdiAccount, mdiDomain } from '@mdi/js';
import BaseIcon from '@/Components/BaseIcon.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import BaseButton from '@/Components/BaseButton.vue';
import { Person } from '@/Dataset';
import Draggable from 'vuedraggable';
@ -21,25 +21,6 @@ interface Props {
canReorder?: boolean;
}
// const props = defineProps({
// checkable: Boolean,
// persons: {
// type: Array<Person>,
// default: () => [],
// },
// relation: {
// type: String,
// required: true,
// },
// contributortypes: {
// type: Object,
// default: () => ({}),
// },
// errors: {
// type: Object,
// default: () => ({}),
// },
// });
const props = withDefaults(defineProps<Props>(), {
checkable: false,
persons: () => [],
@ -63,15 +44,18 @@ const perPage = ref(5);
const currentPage = ref(0);
const dragEnabled = ref(props.canReorder);
// Name type options
const nameTypeOptions = {
'Personal': 'Personal',
'Organizational': 'Org'
};
// Computed properties
const items = computed({
get() {
return props.persons;
},
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.persons.length = 0;
props.persons.push(...value);
},
@ -122,19 +106,19 @@ const pagesList = computed(() => {
return pages;
});
// const removeAuthor = (key: number) => {
// items.value.splice(key, 1);
// };
// Methods
const removeAuthor = (index: number) => {
const actualIndex = perPage.value * currentPage.value + index;
const person = items.value[actualIndex];
if (confirm(`Are you sure you want to remove ${person.first_name || ''} ${person.last_name || person.email}?`)) {
const displayName = person.name_type === 'Organizational'
? person.last_name || person.email
: `${person.first_name || ''} ${person.last_name || person.email}`.trim();
if (confirm(`Are you sure you want to remove ${displayName}?`)) {
items.value.splice(actualIndex, 1);
emit('remove-person', actualIndex, person);
// Adjust current page if needed
if (itemsPaginated.value.length === 0 && currentPage.value > 0) {
currentPage.value--;
}
@ -144,6 +128,12 @@ const removeAuthor = (index: number) => {
const updatePerson = (index: number, field: keyof Person, value: any) => {
const actualIndex = perPage.value * currentPage.value + index;
const person = items.value[actualIndex];
// Handle name_type change - clear first_name if switching to Organizational
if (field === 'name_type' && value === 'Organizational') {
person.first_name = '';
}
(person as any)[field] = value;
emit('person-updated', actualIndex, person);
};
@ -170,7 +160,6 @@ const handleDragEnd = (evt: any) => {
watch(
() => props.persons.length,
() => {
// Reset to first page if current page is out of bounds
if (currentPage.value >= numPages.value && numPages.value > 0) {
currentPage.value = numPages.value - 1;
}
@ -189,18 +178,16 @@ const perPageOptions = [
<template>
<div class="card">
<!-- Table Controls -->
<div v-if="hasMultiplePages" class="flex justify-between items-center p-3 border-b border-gray-200 dark:border-slate-700">
<div v-if="hasMultiplePages" class="flex justify-between items-center px-4 py-2.5 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
Showing {{ currentPage * perPage + 1 }} to
{{ Math.min((currentPage + 1) * perPage, items.length) }}
of {{ items.length }} entries
<span class="text-xs text-gray-600 dark:text-gray-400">
{{ currentPage * perPage + 1 }}-{{ Math.min((currentPage + 1) * perPage, items.length) }} of {{ items.length }}
</span>
</div>
<select
v-model="perPage"
@change="currentPage = 0"
class="px-3 py-1 text-sm border rounded-md dark:bg-slate-800 dark:border-slate-600"
class="px-2 py-1 text-xs border rounded dark:bg-slate-800 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option v-for="option in perPageOptions" :key="option.value" :value="option.value">
{{ option.label }}
@ -210,22 +197,22 @@ const perPageOptions = [
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full">
<table class="w-full table-compact">
<thead>
<tr class="border-b border-gray-200 dark:border-slate-700">
<th v-if="canReorder" class="w-10 p-3" />
<th scope="col" class="text-left p-3">#</th>
<th scope="col">Id</th>
<th>First Name</th>
<th>Last Name / Organization</th>
<th>Orcid</th>
<th>Email</th>
<th v-if="showContributorTypes" scope="col" class="text-left p-3">Type</th>
<th v-if="canDelete" class="w-20 p-3">Actions</th>
<tr class="bg-gray-50 dark:bg-slate-800/50 border-b border-gray-200 dark:border-slate-700">
<th v-if="canReorder" class="w-8 px-2 py-2" />
<th scope="col" class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 w-10">#</th>
<th class="text-left px-2 py-2 text-[10px] font-semibold text-gray-600 dark:text-gray-300 w-40">Type</th>
<th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[120px]">First Name</th>
<th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[160px]">Last Name / Org</th>
<th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[140px]">ORCID</th>
<th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[160px]">Email</th>
<th v-if="showContributorTypes" scope="col" class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 w-32">Role</th>
<th v-if="canDelete" class="w-16 px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300">Actions</th>
</tr>
</thead>
<!-- <tbody> -->
<!-- <tr v-for="(client, index) in itemsPaginated" :key="client.id"> -->
<!-- Draggable tbody for non-paginated view -->
<draggable
v-if="canReorder && !hasMultiplePages"
tag="tbody"
@ -236,114 +223,167 @@ const perPageOptions = [
handle=".drag-handle"
>
<template #item="{ index, element }">
<tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800">
<td class="p-3">
<div class="drag-handle cursor-move text-gray-400 hover:text-gray-600">
<BaseIcon :path="mdiDragVariant" />
<tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors">
<td v-if="canReorder" class="px-2 py-2">
<div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<BaseIcon :path="mdiDragVariant" :size="18" />
</div>
</td>
<td class="p-3">{{ index + 1 }}</td>
<td data-label="Id" class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
<td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ index + 1 }}</td>
<!-- First Name - Hidden for Organizational -->
<td class="p-3" data-label="First Name" v-if="element.name_type !== 'Organizational'">
<!-- Name Type Selector -->
<td class="px-2 py-2">
<div class="flex items-center gap-1.5">
<BaseIcon
:path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount"
:size="16"
:class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
:title="element.name_type"
/>
<FormControl
required
v-model="element.name_type"
type="select"
:options="nameTypeOptions"
:is-read-only="element.status == true"
class="text-[8px] compact-select-mini flex-1"
/>
</div>
<div class="text-red-500 text-[8px] mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.name_type`])">
{{ errors[`${relation}.${index}.name_type`][0] }}
</div>
</td>
<!-- First Name - Only shown for Personal type -->
<td class="px-2 py-2">
<FormControl
v-if="element.name_type !== 'Organizational'"
required
v-model="element.first_name"
type="text"
:is-read-only="element.status == true"
placeholder="[FIRST NAME]"
placeholder="First name"
class="text-xs compact-input"
/>
<div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.first_name`])">
{{ errors[`${relation}.${index}.first_name`].join(', ') }}
<span v-else class="text-gray-400 text-xs italic"></span>
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.first_name`])">
{{ errors[`${relation}.${index}.first_name`][0] }}
</div>
</td>
<td v-else></td>
<!-- Empty cell for organizational entries -->
<!-- Last Name / Organization Name -->
<td :data-label="element.name_type === 'Organizational' ? 'Organization Name' : 'Last Name'">
<td class="px-2 py-2">
<FormControl
required
v-model="element.last_name"
type="text"
:is-read-only="element.status == true"
:placeholder="element.name_type === 'Organizational' ? '[ORGANIZATION NAME]' : '[LAST NAME]'"
:placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
class="text-xs compact-input"
/>
<div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])">
{{ errors[`${relation}.${index}.last_name`].join(', ') }}
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])">
{{ errors[`${relation}.${index}.last_name`][0] }}
</div>
</td>
<!-- Orcid -->
<td data-label="Orcid">
<td class="px-2 py-2">
<FormControl
v-model="element.identifier_orcid"
type="text"
:is-read-only="element.status == true"
placeholder="0000-0000-0000-0000"
class="text-xs compact-input font-mono"
/>
<div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])">
{{ errors[`${relation}.${index}.identifier_orcid`].join(', ') }}
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])">
{{ errors[`${relation}.${index}.identifier_orcid`][0] }}
</div>
</td>
<!-- Email -->
<td data-label="Email">
<td class="px-2 py-2">
<FormControl
required
v-model="element.email"
type="text"
type="email"
:is-read-only="element.status == true"
placeholder="[EMAIL]"
placeholder="email@example.com"
class="text-xs compact-input"
/>
<div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])">
{{ errors[`${relation}.${index}.email`].join(', ') }}
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])">
{{ errors[`${relation}.${index}.email`][0] }}
</div>
</td>
<!-- Contributor Type -->
<td v-if="Object.keys(contributortypes).length">
<td v-if="Object.keys(contributortypes).length" class="px-2 py-2">
<FormControl
required
v-model="element.pivot_contributor_type"
type="select"
:options="contributortypes"
placeholder="[relation type]"
placeholder="Role"
class="text-xs compact-select"
/>
<div
class="text-red-500 text-xs mt-0.5"
v-if="errors && Array.isArray(errors[`${relation}.${index}.pivot_contributor_type`])"
>
<div
class="text-red-400 text-sm"
v-if="errors && Array.isArray(errors[`${relation}.${index}.pivot_contributor_type`])"
>
{{ errors[`${relation}.${index}.pivot_contributor_type`].join(', ') }}
</div>
</FormControl>
{{ errors[`${relation}.${index}.pivot_contributor_type`][0] }}
</div>
</td>
<!-- Actions -->
<td class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeAuthor(index)" />
</BaseButtons>
<td class="px-2 py-2 whitespace-nowrap">
<BaseButton
color="danger"
:icon="mdiTrashCan"
small
@click.prevent="removeAuthor(index)"
class="compact-button"
/>
</td>
</tr>
</template>
</draggable>
<!-- </tbody> -->
<!-- Non-draggable tbody for paginated view -->
<tbody v-else>
<tr
v-for="(element, index) in itemsPaginated"
:key="element.id || index"
class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800"
class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors"
>
<td v-if="canReorder" class="p-3 text-gray-400">
<BaseIcon :path="mdiDragVariant" />
<td v-if="canReorder" class="px-2 py-2 text-gray-400">
<BaseIcon :path="mdiDragVariant" :size="18" />
</td>
<td class="p-3">{{ currentPage * perPage + index + 1 }}</td>
<td class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
<td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td>
<!-- Same field structure as draggable version -->
<td class="p-3">
<!-- Name Type Selector -->
<td class="px-2 py-2">
<BaseIcon
:path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount"
:size="16"
:class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
:title="element.name_type"
/>
<FormControl
required
:model-value="element.name_type"
@update:model-value="updatePerson(index, 'name_type', $event)"
type="select"
:options="nameTypeOptions"
:is-read-only="element.status || !canEdit"
class="text-xs compact-select"
:error="getFieldError(index, 'name_type')"
/>
<div v-if="getFieldError(index, 'name_type')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'name_type') }}
</div>
</td>
<!-- First Name -->
<td class="px-2 py-2">
<FormControl
v-if="element.name_type !== 'Organizational'"
required
@ -351,59 +391,68 @@ const perPageOptions = [
@update:model-value="updatePerson(index, 'first_name', $event)"
type="text"
:is-read-only="element.status || !canEdit"
placeholder="[FIRST NAME]"
placeholder="First name"
class="text-xs compact-input"
:error="getFieldError(index, 'first_name')"
/>
<span v-else class="text-gray-400">-</span>
<div v-if="getFieldError(index, 'first_name')" class="text-red-400 text-sm">
<span v-else class="text-gray-400 text-xs italic"></span>
<div v-if="getFieldError(index, 'first_name')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'first_name') }}
</div>
</td>
<td class="p-3">
<!-- Last Name / Organization -->
<td class="px-2 py-2">
<FormControl
required
:model-value="element.last_name"
@update:model-value="updatePerson(index, 'last_name', $event)"
type="text"
:is-read-only="element.status || !canEdit"
:placeholder="element.name_type === 'Organizational' ? '[ORGANIZATION NAME]' : '[LAST NAME]'"
:placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
class="text-xs compact-input"
:error="getFieldError(index, 'last_name')"
/>
<div v-if="getFieldError(index, 'last_name')" class="text-red-400 text-sm">
<div v-if="getFieldError(index, 'last_name')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'last_name') }}
</div>
</td>
<td class="p-3">
<!-- Orcid -->
<td class="px-2 py-2">
<FormControl
:model-value="element.identifier_orcid"
@update:model-value="updatePerson(index, 'identifier_orcid', $event)"
type="text"
:is-read-only="element.status || !canEdit"
placeholder="0000-0000-0000-0000"
class="text-xs compact-input font-mono"
:error="getFieldError(index, 'identifier_orcid')"
/>
<div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-400 text-sm">
<div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'identifier_orcid') }}
</div>
</td>
<td class="p-3">
<!-- Email -->
<td class="px-2 py-2">
<FormControl
required
:model-value="element.email"
@update:model-value="updatePerson(index, 'email', $event)"
type="email"
:is-read-only="element.status || !canEdit"
placeholder="[EMAIL]"
placeholder="email@example.com"
class="text-xs compact-input"
:error="getFieldError(index, 'email')"
/>
<div v-if="getFieldError(index, 'email')" class="text-red-400 text-sm">
<div v-if="getFieldError(index, 'email')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'email') }}
</div>
</td>
<td v-if="showContributorTypes" class="p-3">
<!-- Contributor Type -->
<td v-if="showContributorTypes" class="px-2 py-2">
<FormControl
required
:model-value="element.pivot_contributor_type"
@ -411,15 +460,39 @@ const perPageOptions = [
type="select"
:options="contributortypes"
:is-read-only="element.status || !canEdit"
placeholder="[Select type]"
placeholder="Role"
class="text-xs compact-select"
:error="getFieldError(index, 'pivot_contributor_type')"
/>
<div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-400 text-sm">
<div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'pivot_contributor_type') }}
</div>
</td>
<td v-if="canDelete" class="p-3">
<!-- Actions -->
<td v-if="canDelete" class="px-2 py-2 whitespace-nowrap">
<BaseButton
color="danger"
:icon="mdiTrashCan"
small
@click="removeAuthor(index)"
:disabled="element.status || !canEdit"
title="Remove person"
class="compact-button"
/>
</td>
</tr>
<!-- Empty State -->
<!-- <tr v-if="items.length === 0">
<td :colspan="showContributorTypes ? 9 : 8" class="text-center py-12 text-gray-400">
<div class="flex flex-col items-center gap-2">
<BaseIcon :path="mdiBookOpenPageVariant" :size="32" class="text-gray-300" />
<span class="text-sm">No persons added yet</span>
</div>
</td>
</tr>
</tbody>-if="canDelete" class="p-3">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton
color="danger"
@ -433,10 +506,12 @@ const perPageOptions = [
</td>
</tr>
<!-- Empty State -->
<tr v-if="items.length === 0">
<td :colspan="canReorder ? 8 : 7" class="text-center p-8 text-gray-500">No persons added yet</td>
</tr>
<td :colspan="showContributorTypes ? 10 : 9" class="text-center p-8 text-gray-500">
No persons added yet
</td>
</tr> -->
</tbody>
</table>
</div>
@ -467,7 +542,9 @@ const perPageOptions = [
/>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400"> Page {{ currentPageHuman }} of {{ numPages }} </span>
<span class="text-sm text-gray-600 dark:text-gray-400">
Page {{ currentPageHuman }} of {{ numPages }}
</span>
</div>
</div>
</template>
@ -481,7 +558,6 @@ const perPageOptions = [
@apply bg-white dark:bg-slate-900 rounded-lg shadow-sm;
}
/* Improve table responsiveness */
@media (max-width: 768px) {
table {
font-size: 0.875rem;

View file

@ -45,8 +45,8 @@ async function scanFileForViruses(filePath: string | undefined, options: Options
active: true, // If true, this module will consider using the clamdscan binary
host: options.host, // IP of host to connect to TCP interface,
port: options.port, // Port of host to use when connecting to TCP interface
socket: '/var/run/clamav/clamd.socket', // Socket file for connecting via socket
localFallback: false, // Use local clamscan binary if socket/tcp fails
// socket: '/var/run/clamav/clamd.socket', // Socket file for connecting via socket
// localFallback: false, // Use local clamscan binary if socket/tcp fails
// port: options.port,
multiscan: true, // Scan using all available cores! Yay!
},