refactor: wip use vnTable CustomerCredits

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,20 +1,14 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
+import { useRoute } from 'vue-router';
 import { QBtn } from 'quasar';
-
 import { toCurrency, toDateHourMin } from 'src/filters';
-
-import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-
-const rows = ref([]);
 
 const filter = {
     include: [
@@ -26,113 +20,60 @@ const filter = {
             },
         },
     ],
-    where: { clientFk: route.params.id },
+    where: { clientFk: +route.params.id },
     order: ['created DESC'],
     limit: 20,
 };
 
-const tableColumnComponents = {
-    created: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    employee: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue', noCaps: true }),
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'created',
-        label: t('Since'),
         name: 'created',
-        format: (value) => toDateHourMin(value),
+        label: t('Since'),
+        format: ({ created }) => toDateHourMin(created),
     },
     {
         align: 'left',
         field: (value) => value?.worker?.user?.name,
         label: t('Employee'),
         name: 'employee',
+        component: QBtn,
+        attrs: { flat: true, color: 'blue', noCaps: true },
     },
     {
         align: 'left',
-        field: 'amount',
         label: t('Credit'),
         name: 'amount',
-        format: (value) => toCurrency(value),
+        format: ({ amount }) => toCurrency(amount),
     },
 ]);
-
-const toCustomerCreditCreate = () => {
-    router.push({ name: 'CustomerCreditCreate' });
-};
 </script>
-
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
+    <VnTable
+        ref="tableRef"
+        data-key="ClientCredit"
         url="ClientCredits"
-    />
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QTable
+        :filter="filter"
         :columns="columns"
-                :pagination="{ rowsPerPage: 12 }"
-                :rows="rows"
-                class="full-width q-mt-md"
-                row-key="id"
-                v-if="rows?.length"
-            >
-                <template #body-cell="props">
-                    <QTd :props="props">
-                        <QTr :props="props" class="cursor-pointer">
-                            <component
-                                :is="tableColumnComponents[props.col.name].component"
-                                @click="
-                                    tableColumnComponents[props.col.name].event(props)
-                                "
-                                class="rounded-borders q-pa-sm"
-                                v-bind="
-                                    tableColumnComponents[props.col.name].props(props)
-                                "
-                            >
-                                {{ props.value }}
-                                <WorkerDescriptorProxy
-                                    :id="props.row.workerFk"
-                                    v-if="props.col.name === 'employee'"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
     />
-                            </component>
-                        </QTr>
-                    </QTd>
-                </template>
-            </QTable>
-
-            <h5 class="flex justify-center color-vn-label" v-else>
-                {{ t('globals.noResults') }}
-            </h5>
-        </QCard>
-    </div>
-
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="$router.push({ name: 'CustomerCreditCreate' })"
+            color="primary"
+            fab
+            icon="add"
+        />
         <QTooltip>
             {{ t('New credit') }}
         </QTooltip>
     </QPageSticky>
 </template>
-
 <i18n>
 es:
     Since: Desde