src/pages/Supplier/Card/SupplierBalance.vue

@@ -6,6 +6,7 @@ import { useAcl } from 'src/composables/useAcl';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import { getSupplierRisk } from 'src/composables/getRisk';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';
@@ -20,6 +21,7 @@ import VnFilter from 'components/VnTable/VnFilter.vue';
 
 import SupplierNewPayment from 'src/pages/Supplier/Card/SupplierNewPayment.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+import SupplierBalanceFilter from './SupplierBalanceFilter.vue';
 
 const { openConfirmationModal } = useVnConfirm();
 const { sendEmail, openReport } = usePrintService();
@@ -187,17 +189,18 @@ async function getCurrentBalance() {
 }
 
 async function onFetch(data) {
-    balances.value = [];
+    return;
-    for (const [index, balance] of data.entries()) {
+    // balances.value = [];
-        if (index === 0) {
+    // for (const [index, balance] of data.entries()) {
-            balance.balance = await getCurrentBalance();
+    //     if (index === 0) {
-            continue;
+    //         balance.balance = await getCurrentBalance();
-        }
+    //         continue;
-        const previousBalance = data[index - 1];
+    //     }
-        balance.balance =
+    //     const previousBalance = data[index - 1];
-            previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
+    //     balance.balance =
-    }
+    //         previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
-    balances.value = data;
+    // }
+    // balances.value = data;
 }
 
 const showNewPaymentDialog = () => {
@@ -241,9 +244,12 @@ const showBalancePdf = ({ id }) => {
             </div>
         </template>
     </VnSubToolbar>
+    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+        <SupplierBalanceFilter data-key="SupplierBalance" />
+    </QDrawer>
     <VnTable
         ref="tableRef"
-        data-key="CustomerBalance"
+        data-key="SupplierBalance"
         url="Suppliers/receipts"
         search-url="balance"
         :user-params="filter"

src/pages/Supplier/Card/SupplierBalanceFilter.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <VnFilterPanel :data-key="dataKey" :search-button="true" :redirect="false">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        v-model="params.from"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.bank')"
+                        v-model="params.bankFk"
+                        url="Accountings"
+                        option-label="bank"
+                        :include="{ relation: 'accountingType' }"
+                        sort-by="id"
+                        :limit="0"
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.currencyFk')"
+                        url="Currencies"
+                        :filter="{ fields: ['id', 'name'] }"
+                        order="code"
+                        v-model="params.currencyFk"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.isConciliated"
+                        :label="t('params.isConciliated')"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                /></QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.itemId"
+                        :label="t('params.itemId')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: General search
+        itemId: Item id
+        buyerId: Buyer
+        typeId: Type
+        categoryId: Category
+        from: From
+        to: To
+es:
+
+    params:
+        isConciliated: Conciliado
+        currencyFk: Moneda
+        New payment: Añadir pago
+        Date: Fecha
+        Company: Empresa
+        bank: Caja
+        Amount: Importe
+        Reference: Referencia
+        Cash: Efectivo
+</i18n>