src/pages/Customer/Card/CustomerBalance.vue

@@ -6,6 +6,7 @@ import { useAcl } from 'src/composables/useAcl';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import { getClientRisk } from '../composables/getClientRisk';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';
@@ -89,15 +90,7 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('Employee'),
-        columnField: {
+        name: 'workerFk',
-            component: 'userLink',
-            attrs: ({ row }) => {
-                return {
-                    workerId: row.workerFk,
-                    name: row.userName,
-                };
-            },
-        },
         cardVisible: true,
     },
     {
@@ -256,6 +249,12 @@ const showBalancePdf = ({ id }) => {
         <template #column-balance="{ rowIndex }">
             {{ toCurrency(balances[rowIndex]?.balance) }}
         </template>
+        <template #column-workerFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.userName }}
+                <WorkerDescriptorProxy :id="row?.workerFk" />
+            </span>
+        </template>
         <template #column-description="{ row }">
             <span class="link" v-if="row.isInvoice" @click.stop>
                 {{ t('bill', { ref: row.description }) }}

src/pages/Customer/Card/CustomerGreuges.vue

@@ -6,13 +6,14 @@ 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 = computed(() => route.params.id);
 const totalAmount = ref();
 const tableRef = ref();
-const filter = computed(() => {
+const filter = {
-    return {
     include: [
         {
             relation: 'greugeType',
@@ -31,7 +32,6 @@ const filter = computed(() => {
         clientFk: entityId,
     },
 };
-});
 
 const columns = computed(() => [
     {
@@ -48,14 +48,7 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('Created by'),
-        component: 'userLink',
+        name: 'userFk',
-        attrs: ({ row }) => {
-            return {
-                defaultName: true,
-                workerId: row.user?.id,
-                name: row.user?.name,
-            };
-        },
     },
     {
         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,43 +28,21 @@ 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 columns = computed(() => [
     {
         align: 'left',
         field: '',
         label: t('State'),
         name: 'state',
+        component: CustomerCloseIconTooltip,
+        columnField: {
+            component: CustomerCloseIconTooltip,
+            attrs: ({ row }) => {
+                return {
+                    id: row.state,
+                };
+            },
+        },
     },
     {
         align: 'left',
@@ -75,14 +55,14 @@ 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',
@@ -93,42 +73,26 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <FetchData
+    <VnTable
-        ref="ClientDmsRef"
+        ref="tableRef"
-        :filter="filter"
+        data-key="WebPayments"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
         url="Clients/transactions"
-    />
+        :user-filter="filter"
-    <QPage class="card-width q-pa-lg">
-        <QTable
         :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
+        :right-search="false"
-            :rows="rows"
+        :is-editable="false"
-            class="full-width q-mt-md"
+        :use-model="true"
-            row-key="id"
+        :column-search="false"
-            v-if="rows?.length"
+        :disable-option="{ card: true }"
+        auto-load
     >
-            <template #body-cell="props">
+        <template #column-state="{ row }">
-                <QTd :props="props">
+            <CustomerCloseIconTooltip :transaction="row" />
-                    <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>
+        <template #column-validate="{ row }">
-
+            <CustomerCheckIconTooltip :transaction="row" :promise="tableRef.reload" />
-        <h5 class="flex justify-center color-vn-label" v-else>
+        </template>
-            {{ t('globals.noResults') }}
+    </VnTable>
-        </h5>
-    </QPage>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerCheckIconTooltip.vue

@@ -16,15 +16,11 @@ const $props = defineProps({
     },
 });
 
-const setClientsConfirmTransaction = async () => {
+async function setClientsConfirmTransaction() {
-    try {
     const payload = { id: $props.transaction.id };
     await axios.post('Clients/confirmTransaction', payload);
-        $props.promise();
+    await $props.promise();
-    } catch (error) {
-        return error;
 }
-};
 </script>
 
 <template>