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

fix: Update TablePersons components for improved event handling and layout consistency
Some checks failed
build.yaml / fix: Update TablePersons components for improved event handling and layout consistency (push) Failing after 0s
Details

Browse source
This commit is contained in:
Kaimbacher 2025-11-05 15:38:28 +01:00
commit 38c05f6714
4 changed files with 84 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/js/Components/CardBox.vue
View file

@ -67,7 +67,7 @@ const submit = (e) => {
<BaseIcon v-if="icon" :path="icon" class="mr-3" /> <BaseIcon v-if="icon" :path="icon" class="mr-3" />
{{ title }} {{ title }}
</div> </div>
<button v-if="showHeaderIcon" class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring" @click="headerIconClick"> <button v-if="showHeaderIcon" class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring" @click.stop="headerIconClick">
<BaseIcon :path="computedHeaderIcon" /> <BaseIcon :path="computedHeaderIcon" />
</button> </button>
</header> </header>

121
resources/js/Components/TablePersons.vue
View file

@ -46,8 +46,8 @@ const dragEnabled = ref(props.canReorder);
// Name type options // Name type options
const nameTypeOptions = { const nameTypeOptions = {
'Personal': 'Personal', Personal: 'Personal',
'Organizational': 'Org' Organizational: 'Org',
}; };
// Computed properties // Computed properties
@ -111,9 +111,10 @@ const removeAuthor = (index: number) => {
const actualIndex = perPage.value * currentPage.value + index; const actualIndex = perPage.value * currentPage.value + index;
const person = items.value[actualIndex]; const person = items.value[actualIndex];
const displayName = person.name_type === 'Organizational' const displayName =
? person.last_name || person.email person.name_type === 'Organizational'
: `${person.first_name || ''} ${person.last_name || person.email}`.trim(); ? person.last_name || person.email
: `${person.first_name || ''} ${person.last_name || person.email}`.trim();
if (confirm(`Are you sure you want to remove ${displayName}?`)) { if (confirm(`Are you sure you want to remove ${displayName}?`)) {
items.value.splice(actualIndex, 1); items.value.splice(actualIndex, 1);
@ -128,12 +129,12 @@ const removeAuthor = (index: number) => {
const updatePerson = (index: number, field: keyof Person, value: any) => { const updatePerson = (index: number, field: keyof Person, value: any) => {
const actualIndex = perPage.value * currentPage.value + index; const actualIndex = perPage.value * currentPage.value + index;
const person = items.value[actualIndex]; const person = items.value[actualIndex];
// Handle name_type change - clear first_name if switching to Organizational // Handle name_type change - clear first_name if switching to Organizational
if (field === 'name_type' && value === 'Organizational') { if (field === 'name_type' && value === 'Organizational') {
person.first_name = ''; person.first_name = '';
} }
(person as any)[field] = value; (person as any)[field] = value;
emit('person-updated', actualIndex, person); emit('person-updated', actualIndex, person);
}; };
@ -178,7 +179,10 @@ const perPageOptions = [
<template> <template>
<div class="card"> <div class="card">
<!-- Table Controls --> <!-- Table Controls -->
<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
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"> <div class="flex items-center gap-2">
<span class="text-xs text-gray-600 dark:text-gray-400"> <span class="text-xs text-gray-600 dark:text-gray-400">
{{ currentPage * perPage + 1 }}-{{ Math.min((currentPage + 1) * perPage, items.length) }} of {{ items.length }} {{ currentPage * perPage + 1 }}-{{ Math.min((currentPage + 1) * perPage, items.length) }} of {{ items.length }}
@ -204,10 +208,18 @@ const perPageOptions = [
<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 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-[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-[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-[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-[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 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="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> <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> </tr>
</thead> </thead>
@ -223,7 +235,9 @@ const perPageOptions = [
handle=".drag-handle" handle=".drag-handle"
> >
<template #item="{ index, element }"> <template #item="{ index, element }">
<tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors"> <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"> <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"> <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<BaseIcon :path="mdiDragVariant" :size="18" /> <BaseIcon :path="mdiDragVariant" :size="18" />
@ -234,8 +248,8 @@ const perPageOptions = [
<!-- Name Type Selector --> <!-- Name Type Selector -->
<td class="px-2 py-2"> <td class="px-2 py-2">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<BaseIcon <BaseIcon
:path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount" :path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount"
:size="16" :size="16"
:class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'" :class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
:title="element.name_type" :title="element.name_type"
@ -249,7 +263,10 @@ const perPageOptions = [
class="text-[8px] compact-select-mini flex-1" class="text-[8px] compact-select-mini flex-1"
/> />
</div> </div>
<div class="text-red-500 text-[8px] mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.name_type`])"> <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] }} {{ errors[`${relation}.${index}.name_type`][0] }}
</div> </div>
</td> </td>
@ -266,7 +283,10 @@ const perPageOptions = [
class="text-xs compact-input" class="text-xs compact-input"
/> />
<span v-else class="text-gray-400 text-xs italic">—</span> <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`])"> <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] }} {{ errors[`${relation}.${index}.first_name`][0] }}
</div> </div>
</td> </td>
@ -281,7 +301,10 @@ const perPageOptions = [
:placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'" :placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
class="text-xs compact-input" class="text-xs compact-input"
/> />
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])"> <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] }} {{ errors[`${relation}.${index}.last_name`][0] }}
</div> </div>
</td> </td>
@ -295,7 +318,10 @@ const perPageOptions = [
placeholder="0000-0000-0000-0000" placeholder="0000-0000-0000-0000"
class="text-xs compact-input font-mono" class="text-xs compact-input font-mono"
/> />
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])"> <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] }} {{ errors[`${relation}.${index}.identifier_orcid`][0] }}
</div> </div>
</td> </td>
@ -310,7 +336,10 @@ const perPageOptions = [
placeholder="email@example.com" placeholder="email@example.com"
class="text-xs compact-input" class="text-xs compact-input"
/> />
<div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])"> <div
class="text-red-500 text-xs mt-0.5"
v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])"
>
{{ errors[`${relation}.${index}.email`][0] }} {{ errors[`${relation}.${index}.email`][0] }}
</div> </div>
</td> </td>
@ -335,10 +364,10 @@ const perPageOptions = [
<!-- Actions --> <!-- Actions -->
<td class="px-2 py-2 whitespace-nowrap"> <td class="px-2 py-2 whitespace-nowrap">
<BaseButton <BaseButton
color="danger" color="danger"
:icon="mdiTrashCan" :icon="mdiTrashCan"
small small
@click.prevent="removeAuthor(index)" @click.prevent="removeAuthor(index)"
class="compact-button" class="compact-button"
/> />
@ -354,29 +383,30 @@ const perPageOptions = [
:key="element.id || index" :key="element.id || index"
class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors" 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 text-gray-400"> <td class="px-2 py-2 text-gray-400">
<BaseIcon :path="mdiDragVariant" :size="18" /> <BaseIcon v-if="canReorder && !hasMultiplePages" :path="mdiDragVariant" :size="18" />
</td> </td>
<td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td> <td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td>
<!-- Name Type Selector --> <!-- Name Type Selector -->
<td class="px-2 py-2"> <td class="px-2 py-2">
<BaseIcon <div class="flex items-center gap-1.5">
:path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount" <BaseIcon
:size="16" :path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount"
:class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'" :size="16"
:title="element.name_type" :class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
/> :title="element.name_type"
<FormControl />
required <FormControl
:model-value="element.name_type" required
@update:model-value="updatePerson(index, 'name_type', $event)" v-model="element.name_type"
type="select" type="select"
:options="nameTypeOptions" :options="nameTypeOptions"
:is-read-only="element.status || !canEdit" :is-read-only="element.status == true"
class="text-xs compact-select" class="text-xs compact-select"
:error="getFieldError(index, 'name_type')" :error="getFieldError(index, 'name_type')"
/> />
</div>
<div v-if="getFieldError(index, 'name_type')" class="text-red-500 text-xs mt-0.5"> <div v-if="getFieldError(index, 'name_type')" class="text-red-500 text-xs mt-0.5">
{{ getFieldError(index, 'name_type') }} {{ getFieldError(index, 'name_type') }}
</div> </div>
@ -459,7 +489,7 @@ const perPageOptions = [
@update:model-value="updatePerson(index, 'pivot_contributor_type', $event)" @update:model-value="updatePerson(index, 'pivot_contributor_type', $event)"
type="select" type="select"
:options="contributortypes" :options="contributortypes"
:is-read-only="element.status || !canEdit" :is-read-only="!canEdit"
placeholder="Role" placeholder="Role"
class="text-xs compact-select" class="text-xs compact-select"
:error="getFieldError(index, 'pivot_contributor_type')" :error="getFieldError(index, 'pivot_contributor_type')"
@ -475,8 +505,7 @@ const perPageOptions = [
color="danger" color="danger"
:icon="mdiTrashCan" :icon="mdiTrashCan"
small small
@click="removeAuthor(index)" @click.prevent="removeAuthor(index)"
:disabled="element.status || !canEdit"
title="Remove person" title="Remove person"
class="compact-button" class="compact-button"
/> />
@ -542,9 +571,7 @@ const perPageOptions = [
/> />
</div> </div>
<span class="text-sm text-gray-600 dark:text-gray-400"> <span class="text-sm text-gray-600 dark:text-gray-400"> Page {{ currentPageHuman }} of {{ numPages }} </span>
Page {{ currentPageHuman }} of {{ numPages }}
</span>
</div> </div>
</div> </div>
</template> </template>
@ -568,4 +595,4 @@ const perPageOptions = [
padding: 0.5rem !important; padding: 0.5rem !important;
} }
} }
</style> </style>

2
resources/js/Pages/Editor/Dataset/Edit.vue
View file

@ -13,7 +13,7 @@
</NotificationBar> </NotificationBar>
<FormValidationErrors v-bind:errors="errors" /> <FormValidationErrors v-bind:errors="errors" />
<CardBox :form="true"> <CardBox>
<!-- <FormValidationErrors v-bind:errors="errors" /> --> <!-- <FormValidationErrors v-bind:errors="errors" /> -->
<div class="mb-4"> <div class="mb-4">
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">

17
resources/js/Pages/Submitter/Dataset/Edit.vue
View file

@ -3,7 +3,6 @@
<LayoutAuthenticated> <LayoutAuthenticated>
<Head title="Edit dataset" /> <Head title="Edit dataset" />
<!-- Progress Bar for Unsaved Changes -->
<!-- Progress Bar for Unsaved Changes --> <!-- Progress Bar for Unsaved Changes -->
<div v-if="hasUnsavedChanges" class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2.5 text-sm shadow-lg h-14"> <div v-if="hasUnsavedChanges" class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2.5 text-sm shadow-lg h-14">
<div class="container mx-auto flex items-center justify-between h-full"> <div class="container mx-auto flex items-center justify-between h-full">
@ -17,7 +16,7 @@
</svg> </svg>
<span class="font-medium">You have unsaved changes</span> <span class="font-medium">You have unsaved changes</span>
</div> </div>
<BaseButton @click="submitAlternative" label="Save Now" color="white" small :disabled="form.processing" /> <BaseButton @click.prevent="submitAlternative" label="Save Now" color="white" small :disabled="form.processing" />
</div> </div>
</div> </div>
@ -47,18 +46,18 @@
{{ flash.message }} {{ flash.message }}
</NotificationBar> </NotificationBar>
<FormValidationErrors v-bind:errors="errors" /> <FormValidationErrors v-bind:errors="errors" />
<UnsavedChangesWarning
<!-- Main Form with Sections -->
<CardBox :form="true" class="shadow-lg">
<UnsavedChangesWarning
:show="hasUnsavedChanges" :show="hasUnsavedChanges"
:changes-summary="getChangesSummary()" :changes-summary="getChangesSummary()"
:show-details="true" :show-details="true"
:show-actions="false" :show-actions="false"
:show-auto-save-progress="true" :show-auto-save-progress="true"
:auto-save-delay="30" :auto-save-delay="30"
@save="submitAlternative" @save.prevent="submitAlternative"
/> />
<!-- Main Form with Sections -->
<CardBox class="shadow-lg">
<!-- Collapsible Sections for Better Organization --> <!-- Collapsible Sections for Better Organization -->
<!-- Section 1: Basic Information --> <!-- Section 1: Basic Information -->
@ -420,7 +419,7 @@
title="Creators" title="Creators"
:icon="mdiBookOpenPageVariant" :icon="mdiBookOpenPageVariant"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
@header-icon-click="addNewAuthor()" v-on:header-icon-click="addNewAuthor()"
> >
<div <div
class="mb-4 p-3 bg-blue-50 dark:bg-slate-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 flex items-start gap-2" class="mb-4 p-3 bg-blue-50 dark:bg-slate-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 flex items-start gap-2"
@ -475,7 +474,7 @@
title="Contributors" title="Contributors"
:icon="mdiBookOpenPageVariant" :icon="mdiBookOpenPageVariant"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
@header-icon-click="addNewContributor()" v-on:header-icon-click="addNewContributor()"
> >
<div class="mb-2 text-gray-600 text-sm flex items-center gap-2"> <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
<span>Add contributors by searching existing persons or manually adding new ones.</span> <span>Add contributors by searching existing persons or manually adding new ones.</span>