From 40842f4ba630e09e44762490173a1a777d64b0d3 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 09:42:08 +0200
Subject: [PATCH 1/6] test(arrayData) add front test

---
 .../composables/useArrayData.spec.js          | 63 ++++++++++++-------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/test/vitest/__tests__/composables/useArrayData.spec.js b/test/vitest/__tests__/composables/useArrayData.spec.js
index dc3f77927..5e4d12560 100644
--- a/test/vitest/__tests__/composables/useArrayData.spec.js
+++ b/test/vitest/__tests__/composables/useArrayData.spec.js
@@ -1,10 +1,13 @@
-import { describe, expect, it, beforeAll, afterEach, vi } from 'vitest';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { axios, flushPromises } from 'app/test/vitest/helper';
 import { useArrayData } from 'composables/useArrayData';
 import { useRouter } from 'vue-router';
+import * as vueRouter from 'vue-router';
 
 describe('useArrayData', () => {
-    beforeAll(() => {
+    const filter = '{"order":"","limit":10,"skip":0}';
+    const params = { supplierFk: 2 };
+    beforeEach(() => {
         vi.spyOn(useRouter(), 'replace');
         vi.spyOn(useRouter(), 'push');
     });
@@ -18,8 +21,6 @@ describe('useArrayData', () => {
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
 
-        const filter = '{"order":"","limit":10,"skip":0}';
-        const params = { supplierFk: 2 };
         arrayData.store.userParams = params;
         arrayData.fetch({});
 
@@ -41,8 +42,6 @@ describe('useArrayData', () => {
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
 
-        const filter = '{"order":"","limit":10,"skip":0}';
-        const params = { supplierFk: 2 };
         arrayData.store.userParams = params;
         arrayData.fetch({});
 
@@ -57,25 +56,43 @@ describe('useArrayData', () => {
         expect(routerPush.query).toBeUndefined();
     });
 
-    // it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
-    //     vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
+    it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
 
-    //     const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+        vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
+            matched: [],
+            query: {},
+            params: {},
+            meta: { moduleName: 'mockName' },
+            path: 'mockName/1',
+        });
+        vi.spyOn(vueRouter, 'useRouter').mockReturnValue({
+            push: vi.fn(),
+            replace: vi.fn(),
+            currentRoute: {
+                value: {
+                    params: {
+                        id: 1,
+                    },
+                    meta: { moduleName: 'mockName' },
+                    matched: [{ path: 'mockName/:id' }],
+                },
+            },
+        });
 
-    //     const filter = '{"order":"","limit":10,"skip":0}';
-    //     const params = { supplierFk: 2 };
-    //     arrayData.store.userParams = params;
-    //     arrayData.fetch({});
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
 
-    //     await flushPromises();
-    //     const routerPush = useRouter().push.mock.calls[0][0];
-    //     console.log('routerPush: ', routerPush);
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
 
-    //     expect(axios.get.mock.calls[0][1].params).toEqual({
-    //         filter,
-    //         supplierFk: 2,
-    //     });
-    //     expect(routerPush.path).toEqual('mockName/1');
-    //     expect(routerPush.query).toBeUndefined();
-    // });
+        await flushPromises();
+        const routerPush = useRouter().push.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
+        });
+        expect(routerPush.path).toEqual('mockName/');
+        expect(routerPush.query.params).toBeDefined();
+    });
 });

From b5bf4bab5466f87942f6b56d7f7cb6c70954d586 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 09:55:30 +0200
Subject: [PATCH 2/6] feat(CustomerFIlter): use correct table

---
 src/pages/Customer/CustomerFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 206832f46..043bcdadb 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -29,7 +29,7 @@ const zones = ref();
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

From 02f8288b22e85da409d5635490d05ec2031121f0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 15:02:26 +0200
Subject: [PATCH 3/6] feat(customerList): add searchbar

---
 src/components/common/VnCard.vue         | 9 +++++++--
 src/pages/Customer/Card/CustomerCard.vue | 4 ++--
 src/pages/Customer/CustomerList.vue      | 8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 98c079239..8517525df 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -32,10 +32,15 @@ const url = computed(() => {
     return props.customUrl;
 });
 
-useArrayData(props.dataKey, {
+const arrayData = useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
 });
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
 </script>
 <template>
     <QDrawer
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 98842a0c7..b8f4089fa 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,12 +5,12 @@ import CustomerFilter from '../CustomerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Client"
+        data-key="Customer"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"
         search-data-key="CustomerList"
-        search-url="Clients/filter"
+        search-url="Clients/extendedListFilter"
         searchbar-label="Search customer"
         searchbar-info="You can search by customer id or name"
     />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 7eb3cefd0..ccd53e8b2 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CustomerSummary from './Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
@@ -382,9 +383,14 @@ function handleLocation(data, location) {
 </script>
 
 <template>
+    <VnSearchbar
+        :info="t('You can search by customer id or name')"
+        :label="t('Search customer')"
+        data-key="Customer"
+    />
     <VnTable
         ref="tableRef"
-        data-key="CustomerExtendedList"
+        data-key="Customer"
         url="Clients/extendedListFilter"
         :create="{
             urlCreate: 'Clients/createWithUser',

From 702b031650cd353382cae8d6d6ce1b50a4a6f5d0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 15:18:38 +0200
Subject: [PATCH 4/6] feat(VnFilter): merge objects

---
 src/components/VnTable/VnChip.vue        |  3 +-
 src/components/VnTable/VnFilter.vue      | 45 +++++++++++-------------
 src/pages/Customer/Card/CustomerCard.vue |  2 +-
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index 2569eec37..74207b943 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -16,10 +16,11 @@ function stopEventPropagation(event) {
 }
 </script>
 <template>
+    <slot name="beforeChip" :row="row"></slot>
     <span
         v-for="col of columns"
         :key="col.name"
-        @click="stopEventPropagation($event)"
+        @click="stopEventPropagation"
         class="cursor-text"
     >
         <QChip
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index c2fadbb95..f0892b8bd 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -36,45 +36,44 @@ const enterEvent = {
     'keyup.enter': () => addFilter(model.value),
     remove: () => addFilter(null),
 };
+
+const defaultAttrs = {
+    filled: !$props.showTitle,
+    class: 'q-px-sm q-pb-xs q-pt-none',
+    dense: true,
+};
+
+const forceAttrs = {
+    label: $props.showTitle ? '' : $props.column.label,
+};
+
 const components = {
     input: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            dense: true,
-            filled: !$props.showTitle,
+            ...defaultAttrs,
             clearable: true,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            dense: true,
-            class: 'q-px-sm q-pb-xs q-pt-none',
+            ...defaultAttrs,
             clearable: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
         },
+        forceAttrs,
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
         attrs: {
-            dense: true,
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            filled: !$props.showTitle,
+            ...defaultAttrs,
             style: 'min-width: 150px',
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     checkbox: {
         component: markRaw(QCheckbox),
@@ -84,9 +83,7 @@ const components = {
             class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     select: {
         component: markRaw(VnSelect),
@@ -96,12 +93,10 @@ const components = {
             dense: true,
             filled: !$props.showTitle,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
 };
-
+console.log(components);
 async function addFilter(value) {
     value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index b8f4089fa..17f123e7b 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,7 +5,7 @@ import CustomerFilter from '../CustomerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Customer"
+        data-key="Client"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"

From 03be4bc0e68db3eee326d3e8186ae85897f32125 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 20 Jun 2024 10:55:29 +0200
Subject: [PATCH 5/6] refactors

---
 src/components/VnTable/VnColumn.vue   |  4 ++--
 src/components/VnTable/VnFilter.vue   | 34 +++++++++++++++------------
 src/components/VnTable/VnTable.vue    | 25 ++++++++++++--------
 src/components/common/VnComponent.vue |  2 +-
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 6a52e0158..6cd62d83e 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -9,7 +9,7 @@ import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnComponent from 'components/common/VnComponent.vue';
 
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const $props = defineProps({
     column: {
         type: Object,
@@ -17,7 +17,7 @@ const $props = defineProps({
     },
     row: {
         type: Object,
-        required: true,
+        default: () => {},
     },
     default: {
         type: [Object, String],
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index f0892b8bd..3d489cf73 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -27,7 +27,7 @@ const $props = defineProps({
         default: 'params',
     },
 });
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
 const columnFilter = computed(() => $props.column?.columnFilter);
 
@@ -96,7 +96,7 @@ const components = {
         forceAttrs,
     },
 };
-console.log(components);
+
 async function addFilter(value) {
     value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
@@ -111,32 +111,36 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start items-start';
-    if ($props.column.align == 'right') return 'justify-end items-end';
-    return 'flex-center';
+    switch ($props.column.align) {
+        case 'left':
+            return 'justify-start items-start';
+        case 'right':
+            return 'justify-end items-end';
+        default:
+            return 'flex-center';
+    }
 }
+
+const showFilter = computed(
+    () => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
+);
 </script>
 <template>
     <div
-        v-if="showTitle && column"
+        v-if="showTitle"
         class="q-pt-sm q-px-sm ellipsis"
-        :class="`text-${column.align ?? 'left'}`"
+        :class="`text-${column?.align ?? 'left'}`"
+        :style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
     >
-        {{ column.label }}
+        {{ column?.label }}
     </div>
-    <div
-        v-if="columnFilter !== false && column.name != 'tableActions'"
-        class="full-width"
-        :class="alignRow()"
-    >
+    <div v-if="showFilter" class="full-width" :class="alignRow()">
         <VnTableColumn
             :column="$props.column"
-            :row="{}"
             default="input"
             v-model="model"
             :components="components"
             component-prop="columnFilter"
         />
     </div>
-    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 0d725524e..493f1480e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -66,7 +66,9 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
-const mode = ref('card');
+const DEFAULT_MODE = 'card';
+const TABLE_MODE = 'table';
+const mode = ref(DEFAULT_MODE);
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
@@ -77,17 +79,17 @@ const tableModes = [
     {
         icon: 'view_column',
         title: t('table view'),
-        value: 'table',
+        value: TABLE_MODE,
     },
     {
         icon: 'grid_view',
         title: t('grid view'),
-        value: 'card',
+        value: DEFAULT_MODE,
     },
 ];
 
 onMounted(() => {
-    mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
+    mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
     stateStore.rightDrawer = true;
     setUserParams(route.query[$props.searchUrl]);
 });
@@ -172,6 +174,9 @@ function columnName(col) {
     return name;
 }
 
+function getColAlign(col) {
+    return 'text-' + (col.align ?? 'left')
+}
 defineExpose({
     reload,
     redirect: redirectFn,
@@ -218,7 +223,7 @@ defineExpose({
             :limit="20"
             ref="CrudModelRef"
             :search-url="searchUrl"
-            :disable-infinite-scroll="mode == 'table'"
+            :disable-infinite-scroll="mode == TABLE_MODE"
             @save-changes="reload"
             :has-subtoolbar="isEditable"
         >
@@ -229,11 +234,11 @@ defineExpose({
                     :columns="splittedColumns.columns"
                     :rows="rows"
                     v-model:selected="selected"
-                    :grid="mode != 'table'"
+                    :grid="mode != TABLE_MODE"
                     table-header-class="bg-header"
                     card-container-class="grid-three"
                     flat
-                    :style="mode == 'table' && 'max-height: 90vh'"
+                    :style="mode == TABLE_MODE && 'max-height: 90vh'"
                     virtual-scroll
                     @virtual-scroll="
                         (event) =>
@@ -287,7 +292,7 @@ defineExpose({
                         <QTh auto-width class="sticky" />
                     </template>
                     <template #body-cell-tableStatus="{ col, row }">
-                        <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                        <QTd auto-width :class="getColAlign(col)">
                             <VnTableChip
                                 :columns="splittedColumns.columnChips"
                                 :row="row"
@@ -303,7 +308,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="`text-${col.align ?? 'left'}`"
+                            :class="getColAlign(col)"
                         >
                             <VnTableColumn
                                 :column="col"
@@ -317,7 +322,7 @@ defineExpose({
                     <template #body-cell-tableActions="{ col, row }">
                         <QTd
                             auto-width
-                            :class="`text-${col.align ?? 'left'}`"
+                            :class="getColAlign(col)"
                             class="sticky no-padding"
                             @click="stopEventPropagation($event)"
                         >
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 56b43a4db..318b5ee5f 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, defineModel } from 'vue';
 
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const $props = defineProps({
     prop: {
         type: Object,

From 2352b6aac4b9687a55a6777b42bc4aa5d33ab417 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 20 Jun 2024 12:33:04 +0200
Subject: [PATCH 6/6] fix: invoiceDueDay test

---
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue               | 3 +++
 test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index 9325a5b41..d2b43c57a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -10,8 +10,10 @@ import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 import { toCurrency } from 'src/filters';
+import useNotify from 'src/composables/useNotify.js';
 
 const route = useRoute();
+const { notify } = useNotify();
 const { t } = useI18n();
 const arrayData = useArrayData();
 const invoiceIn = computed(() => arrayData.store.data);
@@ -69,6 +71,7 @@ const isNotEuro = (code) => code != 'EUR';
 async function insert() {
     await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
     await invoiceInFormRef.value.reload();
+    notify(t('globals.dataSaved'), 'positive');
 }
 const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount, 0);
 </script>
diff --git a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
index 124b60c34..5a5becd22 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
@@ -22,7 +22,7 @@ describe('InvoiceInDueDay', () => {
         cy.waitForElement('thead');
         cy.get(addBtn).click();
 
-        cy.saveCard();
+        cy.get('tbody > :nth-child(1)').should('exist');
         cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 });