From 98239e010564b6da8533e740c8a5ac55c96283e5 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 18 Feb 2025 22:04:47 +0100
Subject: [PATCH 1/3] feat: refs #6897 add time formatting and improve column
 alignment handling in VnTable

---
 src/components/VnTable/VnColumn.vue |  2 +-
 src/components/VnTable/VnTable.vue  | 34 +++++++++++++++++++++++++----
 src/composables/getColAlign.js      |  1 +
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 44364cca1..d0e245388 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { markRaw, computed } from 'vue';
-import { QIcon, QCheckbox, QToggle } from 'quasar';
+import { QIcon, QToggle } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 import VnSelect from 'components/common/VnSelect.vue';
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 02e870add..9da7eeca6 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -14,10 +14,11 @@ import {
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
-import { dashIfEmpty } from 'src/filters';
+import { dashIfEmpty, toDate } from 'src/filters';
+import { toTimeFormat } from 'src/filters/date';
 
 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -527,11 +528,32 @@ function formatColumnValue(col, row, dashIfEmpty) {
         } else {
             return col.format(row, dashIfEmpty);
         }
+    }
+
+    if (col?.component === 'date') return dashIfEmpty(toDate(row[col?.name]));
+
+    if (col?.component === 'time')
+        return row[col?.name] >= 5
+            ? dashIfEmpty(date.formatDate(new Date(row[col?.name]), 'HH:mm'))
+            : row[col?.name];
+
+    if (selectRegex.test(col?.component) && $props.isEditable) {
+        const findBy = find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
+
+        if (col?.attrs.options)
+            return dashIfEmpty(
+                col?.attrs.options.find((option) => option.id === row[col.name])?.name,
+            );
+
+        if (typeof row[findBy] == 'object') {
+            return dashIfEmpty(row[findBy][col?.attrs.optionLabel ?? 'name']);
+        }
+        if (row[findBy]) return dashIfEmpty(row[findBy]);
+        if (!findBy || !row) return;
     } else {
         return dashIfEmpty(row[col?.name]);
     }
 }
-const checkbox = ref(null);
 function cardClick(_, row) {
     if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
 }
@@ -730,7 +752,11 @@ function cardClick(_, row) {
                                 <span
                                     v-else
                                     :class="hasEditableFormat(col)"
-                                    :style="col?.style ? col.style(row) : null"
+                                    :style="
+                                        typeof col?.style == 'function'
+                                            ? col.style(row)
+                                            : col?.style
+                                    "
                                     style="bottom: 0"
                                 >
                                     {{ formatColumnValue(col, row, dashIfEmpty) }}
diff --git a/src/composables/getColAlign.js b/src/composables/getColAlign.js
index c0338a984..6e963b437 100644
--- a/src/composables/getColAlign.js
+++ b/src/composables/getColAlign.js
@@ -7,6 +7,7 @@ export function getColAlign(col) {
         case 'number':
             align = 'right';
             break;
+        case 'time':
         case 'date':
         case 'checkbox':
             align = 'center';

From 74c40c780804ea4889d4c7af5ad8ea78251fe007 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Feb 2025 23:24:04 +0100
Subject: [PATCH 2/3] fix: refs #6897 cards width

---
 src/components/VnTable/VnTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 9da7eeca6..b896fa769 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -809,7 +809,7 @@ function cardClick(_, row) {
                             <QCardSection
                                 vertical
                                 class="no-margin no-padding"
-                                :class="colsMap.tableActions ? '' : 'fit'"
+                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
                             >
                                 <!-- Chips -->
                                 <QCardSection

From 380965fbea461e4f99799e147c14f6cacd2b3ae9 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 19 Feb 2025 22:03:48 +0100
Subject: [PATCH 3/3] feat: refs #6897 enhance VnTable input handling and
 improve WorkerMedical component filters

---
 src/components/VnTable/VnTable.vue        | 43 ++++++++++++-----------
 src/pages/Worker/Card/WorkerFormation.vue |  2 +-
 src/pages/Worker/Card/WorkerMedical.vue   | 14 +++++++-
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index b896fa769..b053b94a4 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -18,7 +18,6 @@ import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
 import { dashIfEmpty, toDate } from 'src/filters';
-import { toTimeFormat } from 'src/filters/date';
 
 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -346,7 +345,7 @@ const clickHandler = async (event) => {
     if (isDateElement || isTimeElement || isQselectDropDown) return;
 
     if (clickedElement === null) {
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
         return;
     }
     const rowIndex = clickedElement.getAttribute('data-row-index');
@@ -356,7 +355,7 @@ const clickHandler = async (event) => {
     if (editingRow.value !== null && editingField.value !== null) {
         if (editingRow.value == rowIndex && editingField.value == colField) return;
 
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
     }
 
     if (isEditableColumn(column)) {
@@ -366,7 +365,7 @@ const clickHandler = async (event) => {
 
 async function handleTabKey(event, rowIndex, colField) {
     if (editingRow.value == rowIndex && editingField.value == colField)
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
 
     const direction = event.shiftKey ? -1 : 1;
     const { nextRowIndex, nextColumnName } = await handleTabNavigation(
@@ -426,7 +425,8 @@ async function renderInput(rowId, field, clickedElement) {
                 await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row);
             },
             keyup: async (event) => {
-                if (event.key === 'Enter') handleBlur(rowId, field, clickedElement);
+                if (event.key === 'Enter')
+                    await destroyInput(rowIndex, field, clickedElement);
             },
             keydown: async (event) => {
                 switch (event.key) {
@@ -435,7 +435,7 @@ async function renderInput(rowId, field, clickedElement) {
                         event.stopPropagation();
                         break;
                     case 'Escape':
-                        destroyInput(rowId, field, clickedElement);
+                        await destroyInput(rowId, field, clickedElement);
                         break;
                     default:
                         break;
@@ -457,12 +457,13 @@ async function renderInput(rowId, field, clickedElement) {
         node.el?.querySelector('span > div > div').focus();
 }
 
-function destroyInput(rowIndex, field, clickedElement) {
+async function destroyInput(rowIndex, field, clickedElement) {
     if (!clickedElement)
         clickedElement = document.querySelector(
             `[data-row-index="${rowIndex}"][data-col-field="${field}"]`,
         );
     if (clickedElement) {
+        await nextTick();
         render(null, clickedElement);
         Array.from(clickedElement.childNodes).forEach((child) => {
             child.style.visibility = 'visible';
@@ -474,10 +475,6 @@ function destroyInput(rowIndex, field, clickedElement) {
     editingField.value = null;
 }
 
-function handleBlur(rowIndex, field, clickedElement) {
-    destroyInput(rowIndex, field, clickedElement);
-}
-
 async function handleTabNavigation(rowIndex, colName, direction) {
     const columns = $props.columns;
     const totalColumns = columns.length;
@@ -538,18 +535,22 @@ function formatColumnValue(col, row, dashIfEmpty) {
             : row[col?.name];
 
     if (selectRegex.test(col?.component) && $props.isEditable) {
-        const findBy = find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
+        const { find, url } = col.attrs;
+        const urlRelation = url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
 
-        if (col?.attrs.options)
-            return dashIfEmpty(
-                col?.attrs.options.find((option) => option.id === row[col.name])?.name,
-            );
-
-        if (typeof row[findBy] == 'object') {
-            return dashIfEmpty(row[findBy][col?.attrs.optionLabel ?? 'name']);
+        if (col?.attrs.options) {
+            const find = col?.attrs.options.find((option) => option.id === row[col.name]);
+            if (!col.attrs?.optionLabel || !find) return dashIfEmpty(row[col?.name]);
+            return dashIfEmpty(find[col.attrs?.optionLabel ?? 'name']);
         }
-        if (row[findBy]) return dashIfEmpty(row[findBy]);
-        if (!findBy || !row) return;
+
+        if (typeof row[urlRelation] == 'object') {
+            if (typeof find == 'object')
+                return dashIfEmpty(row[urlRelation][find?.label ?? 'name']);
+
+            return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']);
+        }
+        if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]);
     } else {
         return dashIfEmpty(row[col?.name]);
     }
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index e05eca7f8..e8680f7dd 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -119,7 +119,7 @@ const columns = computed(() => [
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
         save-url="TrainingCourses/crud"
-        :filter="courseFilter"
+        :user-filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
             title: t('Create training course'),
diff --git a/src/pages/Worker/Card/WorkerMedical.vue b/src/pages/Worker/Card/WorkerMedical.vue
index c220df76a..b3a599af7 100644
--- a/src/pages/Worker/Card/WorkerMedical.vue
+++ b/src/pages/Worker/Card/WorkerMedical.vue
@@ -8,6 +8,17 @@ const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => route.params.id);
 
+const centerFilter = {
+    include: [
+        {
+            relation: 'center',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
+
 const columns = [
     {
         align: 'left',
@@ -33,7 +44,7 @@ const columns = [
         create: true,
         component: 'select',
         attrs: {
-            url: 'medicalCenters',
+            url: 'centers',
             fields: ['id', 'name'],
         },
     },
@@ -84,6 +95,7 @@ const columns = [
         ref="tableRef"
         data-key="WorkerMedical"
         :url="`Workers/${entityId}/medicalReview`"
+        :user-filter="centerFilter"
         save-url="MedicalReviews/crud"
         :create="{
             urlCreate: 'medicalReviews',