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
Some checks failed
build.yaml / fix: Update TablePersons components for improved event handling and layout consistency (push) Failing after 0s
This commit is contained in:
parent
e8a34379f3
commit
38c05f6714
4 changed files with 84 additions and 58 deletions
|
|
@ -67,7 +67,7 @@ const submit = (e) => {
|
|||
<BaseIcon v-if="icon" :path="icon" class="mr-3" />
|
||||
{{ title }}
|
||||
</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" />
|
||||
</button>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@ const dragEnabled = ref(props.canReorder);
|
|||
|
||||
// Name type options
|
||||
const nameTypeOptions = {
|
||||
'Personal': 'Personal',
|
||||
'Organizational': 'Org'
|
||||
Personal: 'Personal',
|
||||
Organizational: 'Org',
|
||||
};
|
||||
|
||||
// Computed properties
|
||||
|
|
@ -111,9 +111,10 @@ const removeAuthor = (index: number) => {
|
|||
const actualIndex = perPage.value * currentPage.value + index;
|
||||
const person = items.value[actualIndex];
|
||||
|
||||
const displayName = person.name_type === 'Organizational'
|
||||
? person.last_name || person.email
|
||||
: `${person.first_name || ''} ${person.last_name || person.email}`.trim();
|
||||
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);
|
||||
|
|
@ -178,7 +179,10 @@ const perPageOptions = [
|
|||
<template>
|
||||
<div class="card">
|
||||
<!-- 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">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">
|
||||
{{ 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 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-[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="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>
|
||||
|
|
@ -223,7 +235,9 @@ const perPageOptions = [
|
|||
handle=".drag-handle"
|
||||
>
|
||||
<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">
|
||||
<div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<BaseIcon :path="mdiDragVariant" :size="18" />
|
||||
|
|
@ -249,7 +263,10 @@ const perPageOptions = [
|
|||
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`])">
|
||||
<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>
|
||||
|
|
@ -266,7 +283,10 @@ const perPageOptions = [
|
|||
class="text-xs compact-input"
|
||||
/>
|
||||
<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] }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -281,7 +301,10 @@ const perPageOptions = [
|
|||
:placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
|
||||
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] }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -295,7 +318,10 @@ const perPageOptions = [
|
|||
placeholder="0000-0000-0000-0000"
|
||||
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] }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -310,7 +336,10 @@ const perPageOptions = [
|
|||
placeholder="email@example.com"
|
||||
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] }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -354,29 +383,30 @@ const perPageOptions = [
|
|||
: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"
|
||||
>
|
||||
<td v-if="canReorder" class="px-2 py-2 text-gray-400">
|
||||
<BaseIcon :path="mdiDragVariant" :size="18" />
|
||||
<td class="px-2 py-2 text-gray-400">
|
||||
<BaseIcon v-if="canReorder && !hasMultiplePages" :path="mdiDragVariant" :size="18" />
|
||||
</td>
|
||||
<td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td>
|
||||
|
||||
<!-- 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 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-xs compact-select"
|
||||
:error="getFieldError(index, 'name_type')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="getFieldError(index, 'name_type')" class="text-red-500 text-xs mt-0.5">
|
||||
{{ getFieldError(index, 'name_type') }}
|
||||
</div>
|
||||
|
|
@ -459,7 +489,7 @@ const perPageOptions = [
|
|||
@update:model-value="updatePerson(index, 'pivot_contributor_type', $event)"
|
||||
type="select"
|
||||
:options="contributortypes"
|
||||
:is-read-only="element.status || !canEdit"
|
||||
:is-read-only="!canEdit"
|
||||
placeholder="Role"
|
||||
class="text-xs compact-select"
|
||||
:error="getFieldError(index, 'pivot_contributor_type')"
|
||||
|
|
@ -475,8 +505,7 @@ const perPageOptions = [
|
|||
color="danger"
|
||||
:icon="mdiTrashCan"
|
||||
small
|
||||
@click="removeAuthor(index)"
|
||||
:disabled="element.status || !canEdit"
|
||||
@click.prevent="removeAuthor(index)"
|
||||
title="Remove person"
|
||||
class="compact-button"
|
||||
/>
|
||||
|
|
@ -542,9 +571,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</NotificationBar>
|
||||
<FormValidationErrors v-bind:errors="errors" />
|
||||
|
||||
<CardBox :form="true">
|
||||
<CardBox>
|
||||
<!-- <FormValidationErrors v-bind:errors="errors" /> -->
|
||||
<div class="mb-4">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<LayoutAuthenticated>
|
||||
<Head title="Edit dataset" />
|
||||
|
||||
<!-- 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 class="container mx-auto flex items-center justify-between h-full">
|
||||
|
|
@ -17,7 +16,7 @@
|
|||
</svg>
|
||||
<span class="font-medium">You have unsaved changes</span>
|
||||
</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>
|
||||
|
||||
|
|
@ -47,18 +46,18 @@
|
|||
{{ flash.message }}
|
||||
</NotificationBar>
|
||||
<FormValidationErrors v-bind:errors="errors" />
|
||||
|
||||
<!-- Main Form with Sections -->
|
||||
<CardBox :form="true" class="shadow-lg">
|
||||
<UnsavedChangesWarning
|
||||
<UnsavedChangesWarning
|
||||
:show="hasUnsavedChanges"
|
||||
:changes-summary="getChangesSummary()"
|
||||
:show-details="true"
|
||||
:show-actions="false"
|
||||
:show-auto-save-progress="true"
|
||||
:auto-save-delay="30"
|
||||
@save="submitAlternative"
|
||||
@save.prevent="submitAlternative"
|
||||
/>
|
||||
<!-- Main Form with Sections -->
|
||||
<CardBox class="shadow-lg">
|
||||
|
||||
<!-- Collapsible Sections for Better Organization -->
|
||||
|
||||
<!-- Section 1: Basic Information -->
|
||||
|
|
@ -420,7 +419,7 @@
|
|||
title="Creators"
|
||||
:icon="mdiBookOpenPageVariant"
|
||||
:header-icon="mdiPlusCircle"
|
||||
@header-icon-click="addNewAuthor()"
|
||||
v-on:header-icon-click="addNewAuthor()"
|
||||
>
|
||||
<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"
|
||||
|
|
@ -475,7 +474,7 @@
|
|||
title="Contributors"
|
||||
:icon="mdiBookOpenPageVariant"
|
||||
: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">
|
||||
<span>Add contributors by searching existing persons or manually adding new ones.</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue