From 38c05f6714edcc1e32f23a536733868872766ef1 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@geosphere.at>
Date: Wed, 5 Nov 2025 15:38:28 +0100
Subject: [PATCH] fix: Update TablePersons components for improved event
 handling and layout consistency

---
 resources/js/Components/CardBox.vue           |   2 +-
 resources/js/Components/TablePersons.vue      | 121 +++++++++++-------
 resources/js/Pages/Editor/Dataset/Edit.vue    |   2 +-
 resources/js/Pages/Submitter/Dataset/Edit.vue |  17 ++-
 4 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/resources/js/Components/CardBox.vue b/resources/js/Components/CardBox.vue
index c2d200e..dbdee01 100644
--- a/resources/js/Components/CardBox.vue
+++ b/resources/js/Components/CardBox.vue
@@ -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>
diff --git a/resources/js/Components/TablePersons.vue b/resources/js/Components/TablePersons.vue
index c119d8c..9bae518 100644
--- a/resources/js/Components/TablePersons.vue
+++ b/resources/js/Components/TablePersons.vue
@@ -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);
@@ -128,12 +129,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);
 };
@@ -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" />
@@ -234,8 +248,8 @@ const perPageOptions = [
                             <!-- 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" 
+                                    <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"
@@ -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>
@@ -335,10 +364,10 @@ const perPageOptions = [
 
                             <!-- Actions -->
                             <td class="px-2 py-2 whitespace-nowrap">
-                                <BaseButton 
-                                    color="danger" 
-                                    :icon="mdiTrashCan" 
-                                    small 
+                                <BaseButton
+                                    color="danger"
+                                    :icon="mdiTrashCan"
+                                    small
                                     @click.prevent="removeAuthor(index)"
                                     class="compact-button"
                                 />
@@ -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>
@@ -568,4 +595,4 @@ const perPageOptions = [
         padding: 0.5rem !important;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/Pages/Editor/Dataset/Edit.vue b/resources/js/Pages/Editor/Dataset/Edit.vue
index 9a2385c..bbaf3c1 100644
--- a/resources/js/Pages/Editor/Dataset/Edit.vue
+++ b/resources/js/Pages/Editor/Dataset/Edit.vue
@@ -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">
diff --git a/resources/js/Pages/Submitter/Dataset/Edit.vue b/resources/js/Pages/Submitter/Dataset/Edit.vue
index 027bbc2..2806b58 100644
--- a/resources/js/Pages/Submitter/Dataset/Edit.vue
+++ b/resources/js/Pages/Submitter/Dataset/Edit.vue
@@ -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>