Merge branch '6825-vnTable' of https://gitea.verdnatura.es/verdnatura/salix-front into 6553-workerBusiness

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

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],

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);
 
@@ -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',
+            ...defaultAttrs,
-            dense: true,
-            filled: !$props.showTitle,
             clearable: true,
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            dense: true,
+            ...defaultAttrs,
-            class: 'q-px-sm q-pb-xs q-pt-none',
             clearable: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
         },
+        forceAttrs,
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
         attrs: {
-            dense: true,
+            ...defaultAttrs,
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            filled: !$props.showTitle,
             style: 'min-width: 150px',
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     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: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     select: {
         component: markRaw(VnSelect),
@@ -96,9 +93,7 @@ const components = {
             dense: true,
             filled: !$props.showTitle,
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
 };
 
@@ -116,32 +111,36 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start items-start';
+    switch ($props.column.align) {
-    if ($props.column.align == 'right') return 'justify-end items-end';
+        case 'left':
-    return 'flex-center';
+            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
+    <div v-if="showFilter" class="full-width" :class="alignRow()">
-        v-if="columnFilter !== false && column.name != 'tableActions'"
-        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>

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)"
                         >

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

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,

src/pages/Customer/Card/CustomerCard.vue

@@ -10,7 +10,7 @@ import CustomerFilter from '../CustomerFilter.vue';
         :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"
     />

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>

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',

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>

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');
     });
 });

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 () => {
+    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 }] });
+        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 arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
-    //     const params = { supplierFk: 2 };
-    //     arrayData.store.userParams = params;
-    //     arrayData.fetch({});
 
-    //     await flushPromises();
+        arrayData.store.userParams = params;
-    //     const routerPush = useRouter().push.mock.calls[0][0];
+        arrayData.fetch({});
-    //     console.log('routerPush: ', routerPush);
 
-    //     expect(axios.get.mock.calls[0][1].params).toEqual({
+        await flushPromises();
-    //         filter,
+        const routerPush = useRouter().push.mock.calls[0][0];
-    //         supplierFk: 2,
+
-    //     });
+        expect(axios.get.mock.calls[0][1].params).toEqual({
-    //     expect(routerPush.path).toEqual('mockName/1');
+            filter,
-    //     expect(routerPush.query).toBeUndefined();
+            supplierFk: 2,
-    // });
+        });
+        expect(routerPush.path).toEqual('mockName/');
+        expect(routerPush.query.params).toBeDefined();
+    });
 });