fix: refs #8745 fix customerGreuges, webPayment

src/pages/Customer/Card/CustomerGreuges.vue

@@ -6,32 +6,32 @@ import { toCurrency } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date';
 import VnTable from 'components/VnTable/VnTable.vue';
 import FetchData from 'components/FetchData.vue';
-const entityId = computed(() => route.params.id);
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+
 const { t } = useI18n();
 const route = useRoute();
+const entityId = route.params.id;
 const totalAmount = ref();
 const tableRef = ref();
-const filter = computed(() => {
-    return {
-        include: [
-            {
-                relation: 'greugeType',
-                scope: {
-                    fields: ['id', 'name'],
-                },
+const filter = {
+    include: [
+        {
+            relation: 'greugeType',
+            scope: {
+                fields: ['id', 'name'],
             },
-            {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'name'],
-                },
-            },
-        ],
-        where: {
-            clientFk: entityId,
         },
-    };
-});
+        {
+            relation: 'user',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+    where: {
+        clientFk: entityId,
+    },
+};
 
 const columns = computed(() => [
     {
@@ -48,14 +48,7 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('Created by'),
-        component: 'userLink',
-        attrs: ({ row }) => {
-            return {
-                defaultName: true,
-                workerId: row.user?.id,
-                name: row.user?.name,
-            };
-        },
+        name: 'userFk',
     },
     {
         align: 'left',
@@ -97,13 +90,13 @@ const columns = computed(() => [
         :url="`Greuges/${entityId}/sumAmount`"
         auto-load
         @on-fetch="({ sumAmount }) => (totalAmount = sumAmount)"
-    ></FetchData>
+    />
     <VnTable
         ref="tableRef"
         data-key="Greuges"
         url="Greuges"
         search-url="greuges"
-        :filter="filter"
+        :user-filter="filter"
         :order="['shipped DESC', 'amount']"
         :columns="columns"
         :right-search="false"
@@ -124,6 +117,9 @@ const columns = computed(() => [
                 {{ t('Total') }}: {{ toCurrency(totalAmount) }}
             </QCard>
         </template>
+        <template #column-userFk="{ row }">
+            <VnUserLink :worker-id="row.userFk" :name="row.user.name" />
+        </template>
     </VnTable>
 </template>
 

src/pages/Customer/Card/CustomerWebPayment.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 import FetchData from 'src/components/FetchData.vue';
 
@@ -12,6 +13,7 @@ import CustomerCheckIconTooltip from '../components/CustomerCheckIconTooltip.vue
 
 const { t } = useI18n();
 const route = useRoute();
+const tableRef = ref();
 
 const rows = ref([]);
 
@@ -26,36 +28,36 @@ const filter = {
 };
 const ClientDmsRef = ref(false);
 
-const tableColumnComponents = {
-    state: {
-        component: CustomerCloseIconTooltip,
-        props: ({ row }) => ({ transaction: row }),
-        event: () => {},
-    },
-    id: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    date: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    validate: {
-        component: CustomerCheckIconTooltip,
-        props: ({ row }) => ({
-            transaction: row,
-            promise: () => ClientDmsRef.value.fetch(),
-        }),
-        event: () => {},
-    },
-};
+// const tableColumnComponents = {
+//     state: {
+//         component: CustomerCloseIconTooltip,
+//         props: ({ row }) => ({ transaction: row }),
+//         event: () => {},
+//     },
+//     id: {
+//         component: 'span',
+//         props: () => {},
+//         event: () => {},
+//     },
+//     date: {
+//         component: 'span',
+//         props: () => {},
+//         event: () => {},
+//     },
+//     amount: {
+//         component: 'span',
+//         props: () => {},
+//         event: () => {},
+//     },
+//     validate: {
+//         component: CustomerCheckIconTooltip,
+//         props: ({ row }) => ({
+//             transaction: row,
+//             promise: () => ClientDmsRef.value.fetch(),
+//         }),
+//         event: () => {},
+//     },
+// };
 
 const columns = computed(() => [
     {
@@ -63,6 +65,15 @@ const columns = computed(() => [
         field: '',
         label: t('State'),
         name: 'state',
+        component: CustomerCloseIconTooltip,
+        columnField: {
+            component: CustomerCloseIconTooltip,
+            attrs: ({ row }) => {
+                return {
+                    id: row.state,
+                };
+            },
+        },
     },
     {
         align: 'left',
@@ -75,60 +86,50 @@ const columns = computed(() => [
         field: 'created',
         label: t('Date'),
         name: 'date',
-        format: (value) => toDateHourMin(value),
+        format: (row) => toDateHourMin(row.created),
     },
     {
         align: 'left',
         field: 'amount',
         label: t('Amount'),
         name: 'amount',
-        format: (value) => toCurrency(value),
+        format: (row) => toCurrency(row.amount),
     },
     {
         align: 'left',
         field: '',
         name: 'validate',
+        component: CustomerCheckIconTooltip,
+        columnField: {
+            component: CustomerCheckIconTooltip,
+
+            promise: () => ClientDmsRef.value.fetch(),
+        },
     },
 ]);
 </script>
 
 <template>
-    <FetchData
-        ref="ClientDmsRef"
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
+    <VnTable
+        ref="tableRef"
+        data-key="WebPayments"
         url="Clients/transactions"
-    />
-    <QPage class="card-width q-pa-lg">
-        <QTable
-            :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">
-                        <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 }}
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-
-        <h5 class="flex justify-center color-vn-label" v-else>
-            {{ t('globals.noResults') }}
-        </h5>
-    </QPage>
+        :user-filter="filter"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        :disable-option="{ card: true }"
+        auto-load
+    >
+        <template #column-state="{ row }">
+            <CustomerCloseIconTooltip :transaction="row" />
+        </template>
+        <template #column-validate="{ row }">
+            <CustomerCheckIconTooltip :transaction="row" />
+        </template>
+    </VnTable>
 </template>
 
 <i18n>