perf: refs #7134 currencies fetch

src/pages/Supplier/Card/SupplierBalance.vue

@@ -12,6 +12,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import InvoiceInDescriptorProxy from 'src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
 import SupplierBalanceFilter from './SupplierBalanceFilter.vue';
 import { onMounted } from 'vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 
@@ -24,13 +25,10 @@ const tableRef = ref();
 const companyId = ref();
 const companyUser = ref(user.value.companyFk);
 const balances = ref([]);
-const userParams = computed(() => {
-    return {
+const userParams = ref({
     supplierId: route.params.id,
     companyId: companyId.value ?? companyUser.value,
     isBooked: false,
-        currencyFk: 1, // EUR
-    };
 });
 
 const columns = computed(() => [
@@ -114,13 +112,25 @@ async function onFetch(data) {
 function round(value) {
     return Math.round(value * 100) / 100;
 }
+const onFetchCurrencies = (data) => {
+    const eur = data.find((currency) => currency.code === 'EUR');
+    userParams.value.currencyFk = eur?.id;
+};
 </script>
 
 <template>
     <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
         <SupplierBalanceFilter data-key="SupplierBalance" />
     </QDrawer>
+    <FetchData
+        url="Currencies"
+        :filter="{ fields: ['id', 'code'] }"
+        sort-by="code"
+        @on-fetch="onFetchCurrencies"
+        auto-load
+    />
     <VnTable
+        v-if="userParams.currencyFk"
         ref="tableRef"
         data-key="SupplierBalance"
         url="Suppliers/receipts"