From 380965fbea461e4f99799e147c14f6cacd2b3ae9 Mon Sep 17 00:00:00 2001 From: pablone Date: Wed, 19 Feb 2025 22:03:48 +0100 Subject: [PATCH] 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',