refactor(customer_recovery): to vnTable

src/i18n/locale/en.yml

@@ -90,6 +90,9 @@ globals:
     salesPerson: SalesPerson
     send: Send
     code: Code
+    since: Since
+    from: From
+    to: To
     pageTitles:
         logIn: Login
         summary: Summary

src/i18n/locale/es.yml

@@ -90,6 +90,9 @@ globals:
     salesPerson: Comercial
     send: Enviar
     code: Código
+    since: Desde
+    from: Desde
+    to: Hasta
     pageTitles:
         logIn: Inicio de sesión
         summary: Resumen
@@ -697,8 +700,6 @@ invoiceOut:
             percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
             pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
     negativeBases:
-        from: Desde
-        to: Hasta
         company: Empresa
         country: País
         clientId: Id cliente
@@ -1240,8 +1241,6 @@ components:
         # LatestBuysFilter
         salesPersonFk: Comprador
         supplierFk: Proveedor
-        from: Desde
-        to: Hasta
         active: Activo
         visible: Visible
         floramondo: Floramondo

src/pages/Customer/Card/CustomerRecoveries.vue

@@ -1,146 +1,107 @@
 <script setup>
+import axios from 'axios';
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
-
 import { toCurrency, toDate } from 'src/filters';
 
-import FetchData from 'components/FetchData.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
+const tableRef = ref();
-const rows = ref([]);
+const filter = computed(() => {
-
+    return {
-const filter = {
+        where: { clientFk: route.params.id },
-    where: { clientFk: route.params.id },
+    };
-    order: ['started DESC'],
+});
-    limit: 20,
+const componentColumn = (type) => {
+    return {
+        columnFilter: {
+            component: type,
+        },
+        columnCreate: {
+            component: type,
+        },
+    };
 };
-
-const tableColumnComponents = {
-    since: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    to: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    period: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'started',
+        label: t('globals.since'),
-        label: t('Since'),
+        name: 'started',
-        name: 'since',
+        format: ({ started }) => toDate(started),
-        format: (value) => toDate(value),
+        create: true,
+        ...componentColumn('date'),
     },
     {
         align: 'left',
-        field: 'finished',
+        name: 'finished',
-        label: t('To'),
+        label: t('globals.to'),
-        name: 'to',
+        format: ({ finished }) => toDate(finished),
-        format: (value) => toDate(value),
+        create: true,
+        ...componentColumn('date'),
     },
     {
         align: 'left',
-        field: 'amount',
-        label: t('Amount'),
         name: 'amount',
-        format: (value) => toCurrency(value),
+        label: t('globals.amount'),
+        format: ({ amount }) => toCurrency(amount),
+        create: true,
+        ...componentColumn('number'),
     },
     {
         align: 'left',
-        field: 'period',
-        label: t('Period'),
         name: 'period',
+        label: t('Period'),
+        create: true,
+        ...componentColumn('number'),
+    },
+    {
+        align: 'left',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Finish that recovery period'),
+                icon: 'lock',
+                show: (row) => !row.finished,
+                action: ({ id }) => setFinished(id),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 
-const toCustomerRecoverieCreate = () => {
+function setFinished(id) {
-    router.push({ name: 'CustomerRecoverieCreate' });
+    axios.patch(`Recoveries/${id}`, { finished: Date.vnNow() });
-};
+    tableRef.value.reload();
+}
 </script>
 
 <template>
-    <FetchData
+    <VnTable
-        :filter="filter"
+        ref="tableRef"
-        @on-fetch="(data) => (rows = data)"
+        data-key="Recoveries"
-        auto-load
         url="Recoveries"
+        search-url="recoveries"
+        :filter="filter"
+        order="started DESC"
+        :columns="columns"
+        :use-model="true"
+        :right-search="false"
+        :create="{
+            urlCreate: 'Recoveries',
+            title: 'New recovery',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { clientFk: route.params.id, started: Date.vnNew() },
+        }"
+        auto-load
     />
-
-    <div class="full-width flex justify-center">
-        <QPage class="card-width q-pa-lg">
-            <QTable
-                :columns="columns"
-                :no-data-label="t('globals.noResults')"
-                :pagination="{ rowsPerPage: 12 }"
-                :rows="rows"
-                class="full-width q-mt-md"
-                row-key="id"
-            >
-                <template #body-cell="props">
-                    <QTd :props="props">
-                        <QTr :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)
-                                "
-                            >
-                                {{ props.value }}
-                            </component>
-                        </QTr>
-                    </QTd>
-                </template>
-            </QTable>
-        </QPage>
-    </div>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('New recoverie') }}
-        </QTooltip>
-    </QPageSticky>
 </template>
 
-<style lang="scss">
-.consignees-card {
-    border: 2px solid var(--vn-accent-color);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.label-color {
-    color: var(--vn-label-color);
-}
-</style>
-
 <i18n>
 es:
-    Since: Desde
-    To: Hasta
-    Amount: Importe
     Period: Periodo
-    New recoverie: Nuevo recobro
+    New recovery: Nuevo recobro
+    Finish that recovery period: Terminar recobro
 </i18n>

src/router/modules/customer.js

@@ -226,31 +226,13 @@ export default {
                 },
                 {
                     path: 'recoveries',
-                    name: 'RecoveriesCard',
+                    name: 'CustomerRecoveries',
-                    redirect: { name: 'CustomerRecoveries' },
+                    meta: {
-                    children: [
+                        title: 'recoveries',
-                        {
+                        icon: 'vn:recovery',
-                            path: '',
+                    },
-                            name: 'CustomerRecoveries',
+                    component: () =>
-                            meta: {
+                        import('src/pages/Customer/Card/CustomerRecoveries.vue'),
-                                title: 'recoveries',
-                                icon: 'vn:recovery',
-                            },
-                            component: () =>
-                                import('src/pages/Customer/Card/CustomerRecoveries.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'CustomerRecoverieCreate',
-                            meta: {
-                                title: 'recoverie-create',
-                            },
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerRecoverieCreate.vue'
-                                ),
-                        },
-                    ],
                 },
                 {
                     path: 'web-access',