src/pages/Customer/Card/CustomerBalance.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useAcl } from 'src/composables/useAcl';
@@ -10,7 +10,6 @@ import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { usePrintService } from 'composables/usePrintService';
-import { useSession } from 'composables/useSession';
 import { useVnConfirm } from 'composables/useVnConfirm';
 
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -22,12 +21,10 @@ import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
 const { openConfirmationModal } = useVnConfirm();
-const { sendEmail } = usePrintService();
+const { sendEmail, openReport } = usePrintService();
 const { t } = useI18n();
 const { hasAny } = useAcl();
 
-const session = useSession();
-const tokenMultimedia = session.getTokenMultimedia();
 const quasar = useQuasar();
 const route = useRoute();
 const state = useState();
@@ -37,13 +34,13 @@ const user = state.getUser();
 const clientRisk = ref([]);
 const tableRef = ref();
 const companyId = ref();
-const companyLastId = ref(user.value.companyFk);
+const companyUser = ref(user.value.companyFk);
 const balances = ref([]);
 const vnFilterRef = ref({});
 const filter = computed(() => {
     return {
         clientId: route.params.id,
-        companyId: companyId.value ?? user.value.companyFk,
+        companyId: companyId.value ?? companyUser.value,
     };
 });
 
@@ -55,8 +52,8 @@ const companyFilterColumn = {
     attrs: {
         url: 'Companies',
         optionLabel: 'code',
+        optionValue: 'id',
         sortBy: 'code',
-        limit: 0,
     },
     columnFilter: {
         event: {
@@ -64,11 +61,9 @@ const companyFilterColumn = {
             'update:modelValue': (newCompanyFk) => {
                 if (!newCompanyFk) return;
                 vnFilterRef.value.addFilter(newCompanyFk);
-                companyLastId.value = newCompanyFk;
+                companyUser.value = newCompanyFk;
             },
-            blur: () =>
+            blur: () => !companyId.value && (companyId.value = companyUser.value),
-                !companyId.value &&
-                (companyId.value = companyLastId.value ?? user.value.companyFk),
         },
     },
     visible: false,
@@ -91,7 +86,6 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'workerFk',
         label: t('Employee'),
         columnField: {
             component: 'userLink',
@@ -112,27 +106,27 @@ const columns = computed(() => [
         class: 'extend',
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'bankFk',
         label: t('Bank'),
         cardVisible: true,
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'debit',
         label: t('Debit'),
         format: ({ debit }) => debit && toCurrency(debit),
         isId: true,
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'credit',
         label: t('Havings'),
         format: ({ credit }) => credit && toCurrency(credit),
         cardVisible: true,
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'balance',
         label: t('Balance'),
         format: ({ balance }) => toCurrency(balance),
@@ -171,7 +165,7 @@ const columns = computed(() => [
 
 onBeforeMount(() => {
     stateStore.rightDrawer = true;
-    companyId.value = user.value.companyFk;
+    companyId.value = companyUser.value;
 });
 
 async function getClientRisk() {
@@ -179,7 +173,7 @@ async function getClientRisk() {
         params: {
             filter: JSON.stringify({
                 include: { relation: 'company', scope: { fields: ['code'] } },
-                where: { clientFk: route.params.id, companyFk: user.value.companyFk },
+                where: { clientFk: route.params.id, companyFk: companyUser.value },
             }),
         },
     });
@@ -220,8 +214,7 @@ const showNewPaymentDialog = () => {
 };
 
 const showBalancePdf = ({ id }) => {
-    const url = `api/InvoiceOuts/${id}/download?access_token=${tokenMultimedia}`;
+    openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
-    window.open(url, '_blank');
 };
 </script>
 
@@ -259,6 +252,7 @@ const showBalancePdf = ({ id }) => {
         :is-editable="false"
         :column-search="false"
         @on-fetch="onFetch"
+        :disable-option="{ card: true }"
         auto-load
     >
         <template #column-balance="{ rowIndex }">
@@ -266,7 +260,7 @@ const showBalancePdf = ({ id }) => {
         </template>
         <template #column-description="{ row }">
             <div class="link" v-if="row.isInvoice">
-                {{ row.description }}
+                {{ t('bill', { ref: row.description }) }}
                 <InvoiceOutDescriptorProxy :id="row.description" />
             </div>
             <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">