feat: refs #7134 perf VnTable

src/components/VnTable/VnTable.vue

@@ -333,7 +333,6 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
         <template #body="{ rows }">
-            {{ rows.length }}
             <QTable
                 ref="tableRef"
                 v-bind="table"

src/pages/Supplier/Card/SupplierBalance.vue

@@ -1,35 +1,23 @@
 <script setup>
-import RightMenu from 'src/components/common/RightMenu.vue';
 import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useAcl } from 'src/composables/useAcl';
-import axios from 'axios';
-import { useQuasar } from 'quasar';
 import { getSupplierRisk } from 'src/composables/getRisk';
 import tableFooter from 'src/components/VnTable/filters/tableFooter';
-import { dashIfEmpty, toCurrency, toDate, toDateHourMin } from 'src/filters';
+import { dashIfEmpty, toCurrency, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';
 import { useStateStore } from 'stores/useStateStore';
-import { usePrintService } from 'composables/usePrintService';
-import { useVnConfirm } from 'composables/useVnConfirm';
 
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnInput from 'components/common/VnInput.vue';
 import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
 import VnFilter from 'components/VnTable/VnFilter.vue';
 
-import SupplierNewPayment from 'src/pages/Supplier/Card/SupplierNewPayment.vue';
+import InvoiceInDescriptorProxy from 'src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
-import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import SupplierBalanceFilter from './SupplierBalanceFilter.vue';
 import { onMounted } from 'vue';
 
-const { openConfirmationModal } = useVnConfirm();
-const { sendEmail, openReport } = usePrintService();
 const { t } = useI18n();
-const { hasAny } = useAcl();
 
-const quasar = useQuasar();
 const route = useRoute();
 const state = useState();
 const stateStore = useStateStore();
@@ -39,7 +27,6 @@ const supplierRisk = ref([]);
 const tableRef = ref();
 const companyId = ref();
 const companyUser = ref(user.value.companyFk);
-const bankUser = ref(user.value.localBankFk);
 const balances = ref([]);
 const vnFilterRef = ref({});
 const userParams = computed(() => {
@@ -76,13 +63,6 @@ const companyFilterColumn = {
 };
 
 const columns = computed(() => [
-    // {
-    //     align: 'left',
-    //     name: 'payed',
-    //     label: t('Date'),
-    //     format: ({ payed }) => toDate(payed),
-    //     cardVisible: true,
-    // },
     {
         align: 'left',
         name: 'dated',
@@ -90,20 +70,6 @@ const columns = computed(() => [
         format: ({ dated }) => toDateHourMin(dated),
         cardVisible: true,
     },
-    // {
-    //     align: 'left',
-    //     label: t('Employee'),
-    //     columnField: {
-    //         component: 'userLink',
-    //         attrs: ({ row }) => {
-    //             return {
-    //                 workerId: row.workerFk,
-    //                 name: row.userName,
-    //             };
-    //         },
-    //     },
-    //     cardVisible: true,
-    // },
     {
         align: 'left',
         name: 'sref',
@@ -152,12 +118,13 @@ onBeforeMount(() => {
     companyId.value = companyUser.value;
 });
 
-onMounted(() => {
+onMounted(async () => {
     Object.assign(userParams, {
         supplierId: route.params.id,
         companyId: companyId.value ?? companyUser.value,
         isConciliated: false,
     });
+    await getSupplierRisks();
 });
 
 async function getSupplierRisks() {
@@ -169,12 +136,6 @@ async function getSupplierRisks() {
     return supplierRisk.value;
 }
 
-async function getCurrentBalance() {
-    const currentBalance = (await getSupplierRisks()).find((balance) => {
-        return balance.companyFk === companyId.value;
-    });
-    return currentBalance && currentBalance.amount;
-}
 function setFooter(data) {
     const initialFooter = {
         invoiceEuros: 0,
@@ -189,22 +150,6 @@ async function onFetch(data) {
     return;
 }
 
-const showNewPaymentDialog = () => {
-    quasar.dialog({
-        component: SupplierNewPayment,
-        componentProps: {
-            companyId: companyId.value,
-            bankId: bankUser.value,
-            totalCredit: supplierRisk.value[0]?.amount,
-            extraFields: ['currencyFk', 'orderBy'],
-            promise: () => tableRef.value.reload(),
-        },
-    });
-};
-
-const showBalancePdf = ({ id }) => {
-    openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
-};
 function round(value) {
     return Math.round(value * 100) / 100;
 }
@@ -236,7 +181,6 @@ function round(value) {
     <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
         <SupplierBalanceFilter data-key="SupplierBalance" />
     </QDrawer>
-    {{ userParams }}
     <VnTable
         ref="tableRef"
         data-key="SupplierBalance"
@@ -256,81 +200,42 @@ function round(value) {
         <template #column-balance="{ rowIndex }">
             {{ toCurrency(balances[rowIndex]?.balance) }}
         </template>
-        <template #column-description="{ row }">
+        <template #column-sref="{ row }">
-            <div class="link" v-if="row.isInvoice">
+            <span class="link" v-if="row.statementType === 'invoiceIn'">
-                {{ t('bill', { ref: row.description }) }}
+                {{ dashIfEmpty(row.sref) }}
-                <InvoiceOutDescriptorProxy :id="row.description" />
+                <InvoiceInDescriptorProxy :id="row.id" />
-            </div>
-            <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
-                {{ row.description }}
             </span>
-            <QPopupEdit
+            <span v-else> {{ dashIfEmpty(row.sref) }}</span>
-                v-model="row.description"
-                v-slot="scope"
-                @save="
-                    (value) =>
-                        value != row.description &&
-                        axios.patch(`Receipts/${row.id}`, { description: value })
-                "
-                auto-save
-            >
-                <VnInput
-                    v-model="scope.value"
-                    :disable="
-                        !hasAny([{ model: 'Receipt', props: '*', accessType: 'WRITE' }])
-                    "
-                    @keypress.enter="scope.set"
-                    autofocus
-                />
-            </QPopupEdit>
         </template>
 
         <template #column-footer-invoiceEuros>
             <span>
-                {{ round(tableRef.footer.invoiceEuros) }}
+                {{ toCurrency(round(tableRef.footer.invoiceEuros)) }}
             </span>
         </template>
         <template #column-footer-paymentEuros>
             <span>
-                {{ round(tableRef.footer.paymentEuros) }}
+                {{ toCurrency(round(tableRef.footer.paymentEuros)) }}
             </span>
         </template>
         <template #column-footer-euroBalance>
             <span>
-                {{ round(tableRef.footer.euroBalance) }}
+                {{ toCurrency(round(tableRef.footer.euroBalance)) }}
             </span>
         </template>
     </VnTable>
 </template>
 
 <i18n>
-en:
-    bill: 'N/INV {ref}'
 es:
     Company: Empresa
     Total by company: Total por empresa
-    New payment: Añadir pago
-    supplierNewpayment: Añadir pago de proveedor
-    clientNewpayment: Añadir pago de cliente
     Date: Fecha
     Creation date: Fecha de creación
-    Employee: Empleado
     Reference: Referencia
-    bill: 'N/FRA {ref}'
     Bank: Caja
     Debit: Debe
     Havings: Haber
     Balance: Balance
     Conciliated: Conciliado
-    Send compensation: Enviar compensación
+ </i18n>
-    Do you want to report compensation to the supplier by mail?: ¿Desea informar de la compensación al cliente por correo?
-</i18n>
-
-<style lang="scss" scoped>
-.dotted {
-    border: 1px dotted var(--vn-header-color);
-}
-.dotted:hover {
-    border: 1px dotted $primary;
-}
-</style>