From 622afca9be3859ef2777b241d2b3c82d5d4034b6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 10 Sep 2024 15:17:10 +0200
Subject: [PATCH] feat: CustomerSample to VnTable

---
 src/components/LeftMenuItem.vue               |  2 +-
 src/components/VnTable/VnTable.vue            |  6 +-
 .../Customer/Card/CustomerBillingData.vue     |  4 +-
 src/pages/Customer/Card/CustomerGreuges.vue   |  1 -
 src/pages/Customer/Card/CustomerSamples.vue   | 80 ++++++-----------
 .../components/CustomerAddressCreate.vue      |  4 +-
 .../components/CustomerAddressEdit.vue        |  8 +-
 .../CustomerFileManagementCreate.vue          | 12 +--
 .../components/CustomerFileManagementEdit.vue | 10 +--
 .../components/CustomerSamplesCreate.vue      | 90 ++++++++-----------
 .../components/CustomerSummaryTable.vue       |  1 +
 src/pages/Dashboard/DashboardMain.vue         |  2 +-
 .../Department/Card/DepartmentBasicData.vue   |  4 +-
 13 files changed, 93 insertions(+), 131 deletions(-)

diff --git a/src/components/LeftMenuItem.vue b/src/components/LeftMenuItem.vue
index 9fe66e278..2a6de5e2e 100644
--- a/src/components/LeftMenuItem.vue
+++ b/src/components/LeftMenuItem.vue
@@ -36,7 +36,7 @@ const itemComputed = computed(() => {
         <QItemSection>
             {{ t(itemComputed.title) }}
             <QTooltip>
-                {{ 'Ctrl + Alt + ' + item.keyBinding.toUpperCase() }}
+                {{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
             </QTooltip>
         </QItemSection>
         <QItemSection side>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 4ba7d0227..964dafabe 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -363,7 +363,7 @@ function handleOnDataSaved(_, res) {
     <!-- class in div to fix warn-->
     <CrudModel
         v-bind="$attrs"
-        :class="$attrs['class']"
+        :class="$attrs['class'] ?? 'q-px-md'"
         :limit="$attrs['limit'] ?? 20"
         ref="CrudModelRef"
         @on-fetch="(...args) => emit('onFetch', ...args)"
@@ -638,7 +638,7 @@ function handleOnDataSaved(_, res) {
             </QTable>
         </template>
     </CrudModel>
-    <QPageSticky :offset="[20, 20]" style="z-index: 2">
+    <QPageSticky v-if="$props.create" :offset="[20, 20]" style="z-index: 2">
         <QBtn
             @click="
                 () =>
@@ -650,7 +650,7 @@ function handleOnDataSaved(_, res) {
             shortcut="+"
         />
         <QTooltip>
-            {{ createForm.title }}
+            {{ createForm?.title }}
         </QTooltip>
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index 290bde909..e375846c9 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -31,8 +31,8 @@ const getBankEntities = (data, formData) => {
 </script>
 
 <template>
-    <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
-    <fetch-data
+    <FetchData @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
+    <FetchData
         ref="bankEntitiesRef"
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         :filter="filter"
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index 8a83d49db..1c78392e7 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -47,7 +47,6 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        // name: 'userFk',
         label: t('Created by'),
         component: 'userLink',
         attrs: ({ row }) => {
diff --git a/src/pages/Customer/Card/CustomerSamples.vue b/src/pages/Customer/Card/CustomerSamples.vue
index e28e290f4..49697aab7 100644
--- a/src/pages/Customer/Card/CustomerSamples.vue
+++ b/src/pages/Customer/Card/CustomerSamples.vue
@@ -3,18 +3,18 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { QBtn } from 'quasar';
+import { QBtn, useQuasar } from 'quasar';
 
-import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import { toDateTimeFormat } from 'src/filters/date';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import { dashIfEmpty } from 'src/filters';
+import CustomerSamplesCreate from '../components/CustomerSamplesCreate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const rows = ref([]);
-
 const filter = {
     include: [
         { relation: 'type', scope: { fields: ['code', 'description'] } },
@@ -26,91 +26,67 @@ const filter = {
     limit: 20,
 };
 
-const basicSpan = {
-    component: 'span',
-    props: () => {},
-    event: () => {},
-};
-const tableColumnComponents = {
-    sent: basicSpan,
-    description: basicSpan,
-    worker: {
-        component: 'span',
-        props: () => ({ class: 'link' }),
-        event: () => {},
-    },
-    company: basicSpan,
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'created',
+        name: 'created',
         label: t('Sent'),
-        name: 'sent',
-        format: (value) => toDateTimeFormat(value),
+        format: ({ created }) => toDateTimeFormat(created),
     },
     {
         align: 'left',
-        field: (value) => value.type.description,
+        format: (row) => row.type.description,
         label: t('Description'),
         name: 'description',
     },
     {
         align: 'left',
-        field: (value) => value.user.name,
         label: t('Worker'),
         name: 'worker',
     },
     {
         align: 'left',
-        field: (value) => value.company?.code,
+        format: ({ company }) => company?.code ?? dashIfEmpty(company),
         label: t('Company'),
         name: 'company',
     },
 ]);
+const quasar = useQuasar();
 
 const toCustomerSamplesCreate = () => {
-    router.push({ name: 'CustomerSamplesCreate' });
+    quasar
+        .dialog({
+            component: CustomerSamplesCreate,
+        })
+        .onOk(() => tableRef.value.reload());
 };
+const tableRef = ref();
 </script>
 
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
+    <VnTable
+        ref="tableRef"
+        data-key="ClientSamples"
         auto-load
+        :filter="filter"
         url="ClientSamples"
-    />
-
-    <QTable
         :columns="columns"
         :pagination="{ rowsPerPage: 12 }"
+        :disable-option="{ card: true }"
         :rows="rows"
         class="full-width q-mt-md"
         row-key="id"
+        :create="false"
         :no-data-label="t('globals.noResults')"
     >
-        <template #body-cell="props">
-            <QTd auto-width :props="props">
-                <span :props="props" class="cursor-pointer">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                        :title="props.value"
-                    >
-                        {{ props.value }}
-                        <WorkerDescriptorProxy
-                            :id="props.row.userFk"
-                            v-if="props.col.name === 'worker'"
-                        />
-                    </component>
-                </span>
-            </QTd>
+        <template #column-worker="{ row }">
+            <div v-if="row.user">
+                <span class="link">{{ row.user?.name }}</span
+                ><WorkerDescriptorProxy :id="row.userFk" />
+            </div>
+            <span v-else>{{ dashIfEmpty(row.user) }}</span>
         </template>
-    </QTable>
+    </VnTable>
 
     <QPageSticky :offset="[18, 18]">
         <QBtn @click.stop="toCustomerSamplesCreate()" color="primary" fab icon="add" />
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index 30e4b21d0..f93406185 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -57,12 +57,12 @@ function handleLocation(data, location) {
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
         url="AgencyModes/isActive"
     />
-    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+    <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
 
     <FormModel
         :form-initial-data="formInitialData"
diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index 7a4c44014..ddcb8e2d6 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -113,18 +113,18 @@ function handleLocation(data, location) {
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
         url="AgencyModes/isActive"
     />
-    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
-    <fetch-data
+    <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+    <FetchData
         @on-fetch="(data) => (customsAgents = data)"
         auto-load
         url="CustomsAgents"
     />
-    <fetch-data @on-fetch="getData" auto-load url="ObservationTypes" />
+    <FetchData @on-fetch="getData" auto-load url="ObservationTypes" />
 
     <FormModel
         :observe-form-changes="false"
diff --git a/src/pages/Customer/components/CustomerFileManagementCreate.vue b/src/pages/Customer/components/CustomerFileManagementCreate.vue
index 7c15e0b71..f33a47bcc 100644
--- a/src/pages/Customer/components/CustomerFileManagementCreate.vue
+++ b/src/pages/Customer/components/CustomerFileManagementCreate.vue
@@ -83,35 +83,35 @@ const toCustomerFileManagement = () => {
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         @on-fetch="(data) => (client = data)"
         auto-load
         :url="`Clients/${route.params.id}/getCard`"
     />
-    <fetch-data
+    <FetchData
         :filter="filterFindOne"
         @on-fetch="(data) => (findOne = data)"
         auto-load
         url="DmsTypes/findOne"
     />
-    <fetch-data
+    <FetchData
         @on-fetch="(data) => (allowedContentTypes = data)"
         auto-load
         url="DmsContainers/allowedContentTypes"
     />
-    <fetch-data
+    <FetchData
         :filter="filterCompanies"
         @on-fetch="(data) => (optionsCompanies = data)"
         auto-load
         url="Companies"
     />
-    <fetch-data
+    <FetchData
         :filter="filterWarehouses"
         @on-fetch="(data) => (optionsWarehouses = data)"
         auto-load
         url="Warehouses"
     />
-    <fetch-data
+    <FetchData
         :filter="filterWarehouses"
         @on-fetch="(data) => (optionsDmsTypes = data)"
         auto-load
diff --git a/src/pages/Customer/components/CustomerFileManagementEdit.vue b/src/pages/Customer/components/CustomerFileManagementEdit.vue
index 80eaa44f9..107f41330 100644
--- a/src/pages/Customer/components/CustomerFileManagementEdit.vue
+++ b/src/pages/Customer/components/CustomerFileManagementEdit.vue
@@ -69,25 +69,25 @@ const toCustomerFileManagement = () => {
 </script>
 
 <template>
-    <fetch-data :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
-    <fetch-data
+    <FetchData :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
+    <FetchData
         @on-fetch="(data) => (allowedContentTypes = data)"
         auto-load
         url="DmsContainers/allowedContentTypes"
     />
-    <fetch-data
+    <FetchData
         :filter="filterCompanies"
         @on-fetch="(data) => (optionsCompanies = data)"
         auto-load
         url="Companies"
     />
-    <fetch-data
+    <FetchData
         :filter="filterWarehouses"
         @on-fetch="(data) => (optionsWarehouses = data)"
         auto-load
         url="Warehouses"
     />
-    <fetch-data
+    <FetchData
         :filter="filterWarehouses"
         @on-fetch="(data) => (optionsDmsTypes = data)"
         auto-load
diff --git a/src/pages/Customer/components/CustomerSamplesCreate.vue b/src/pages/Customer/components/CustomerSamplesCreate.vue
index 79f4fe449..c7772ab4e 100644
--- a/src/pages/Customer/components/CustomerSamplesCreate.vue
+++ b/src/pages/Customer/components/CustomerSamplesCreate.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
 import { usePrintService } from 'composables/usePrintService';
-import { useQuasar } from 'quasar';
+import { useDialogPluginComponent, useQuasar } from 'quasar';
 
 import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
@@ -18,6 +18,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import CustomerSamplesPreview from 'src/pages/Customer/components/CustomerSamplesPreview.vue';
 import { useStateStore } from 'stores/useStateStore';
+import FormPopup from 'src/components/FormPopup.vue';
+defineEmits(['confirm', ...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK } = useDialogPluginComponent();
 
 const { notify } = useNotify();
 const { t } = useI18n();
@@ -181,6 +185,7 @@ const onDataSaved = async () => {
         const samplesData = await getSamples();
         const path = `${samplesData.model}/${route.params.id}/${samplesData.code}-email`;
         await sendEmail(path, params);
+        onDialogOK(params);
     } catch (error) {
         notify('errors.create', 'negative');
     }
@@ -197,73 +202,54 @@ const toCustomerSamples = () => {
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         :filter="filterEmailUsers"
         @on-fetch="setEmailUser"
         auto-load
         url="EmailUsers"
     />
-    <fetch-data
+    <FetchData
         :filter="filterClientsAddresses"
         :url="`Clients/${route.params.id}/addresses`"
         @on-fetch="setClientsAddresses"
         auto-load
     />
-    <fetch-data
+    <FetchData
         :filter="filterCompanies"
         @on-fetch="(data) => (optionsCompanies = data)"
         auto-load
         url="Companies"
     />
-    <fetch-data
+    <FetchData
         :filter="filterSamplesVisible"
         @on-fetch="(data) => (optionsSamplesVisible = data)"
         auto-load
         url="Samples/visible"
     />
 
-    <Teleport v-if="stateStore?.isSubToolbarShown()" to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerSamples"
-                color="primary"
-                flat
-                icon="close"
-            />
-            <QBtn
-                :disabled="isLoading || !sampleType?.hasPreview"
-                :label="t('Preview')"
-                :loading="isLoading"
-                @click.stop="getPreview()"
-                color="primary"
-                flat
-                icon="preview"
-            />
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.reset')"
-                :loading="isLoading"
-                @click="setInitialData"
-                color="primary"
-                flat
-                icon="restart_alt"
-                type="reset"
-            />
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click="onSubmit"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QForm>
+    <QDialog ref="dialogRef">
+        <FormPopup
+            :default-cancel-button="false"
+            :default-submit-button="false"
+            @on-submit="onSubmit()"
+        >
+            <template #custom-buttons>
+                <QBtn
+                    :disabled="isLoading || !sampleType?.hasPreview"
+                    :label="t('Preview')"
+                    :loading="isLoading"
+                    @click.stop="getPreview()"
+                    color="primary"
+                    flat
+                    icon="preview" /><QBtn
+                    :disabled="!hasChanged"
+                    :label="t('globals.save')"
+                    :loading="isLoading"
+                    @click="onSubmit"
+                    color="primary"
+                    icon="save"
+            /></template>
+            <template #form-inputs>
                 <div class="col">
                     <VnSelect
                         :label="t('Sample')"
@@ -371,15 +357,15 @@ const toCustomerSamples = () => {
                             required="true"
                             v-model="initialData.from"
                         />
-                    </div>
-                </VnRow>
-            </QForm>
-        </QCard>
-    </div>
+                    </div> </VnRow
+            ></template>
+        </FormPopup>
+    </QDialog>
 </template>
 
 <i18n>
 es:
+    New sample: Crear plantilla
     Sample: Plantilla
     Recipient: Destinatario
     Reply to: Responder a
diff --git a/src/pages/Customer/components/CustomerSummaryTable.vue b/src/pages/Customer/components/CustomerSummaryTable.vue
index e2fb61322..87e4cffa7 100644
--- a/src/pages/Customer/components/CustomerSummaryTable.vue
+++ b/src/pages/Customer/components/CustomerSummaryTable.vue
@@ -150,6 +150,7 @@ const setShippedColor = (date) => {
         order="shipped DESC, id"
         :disable-option="{ card: true, table: true }"
         limit="5"
+        class="full-width"
     >
         <template #column-nickname="{ row }">
             <span class="link">
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index a339120e2..56054156a 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -60,7 +60,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                                             <QTooltip>
                                                 {{
                                                     'Ctrl + Alt + ' +
-                                                    item.keyBinding.toUpperCase()
+                                                    item?.keyBinding?.toUpperCase()
                                                 }}
                                             </QTooltip>
                                         </div>
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 4573f7b66..98abfd6b9 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -16,12 +16,12 @@ const workersOptions = ref([]);
 const clientsOptions = ref([]);
 </script>
 <template>
-    <fetch-data
+    <FetchData
         url="Workers/search"
         @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
-    <fetch-data url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
+    <FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
     <FormModel
         :url="`Departments/${route.params.id}`"
         model="department"