refactor: refs #8388 update VnSelectExpense to use computed for expenses and improve data fetching

src/components/common/VnSelectExpense.vue

@@ -1,13 +1,21 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelectDialog from './VnSelectDialog.vue';
 import CreateNewExpenseForm from '../CreateNewExpenseForm.vue';
-import FetchData from '../FetchData.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const model = defineModel({ type: [String, Number, Object] });
 const { t } = useI18n();
-const expenses = ref([]);
+const arrayData = useArrayData('expenses', { url: 'Expenses' });
+const expenses = computed(() => arrayData.store.data);
+
+onMounted(async () => await arrayData.fetch({}));
+
+async function updateModel(evt) {
+    await arrayData.fetch({});
+    model.value = evt.id;
+}
 </script>
 <template>
     <VnSelectDialog
@@ -22,15 +30,9 @@ const expenses = ref([]);
         :acls="[{ model: 'Expense', props: '*', accessType: 'WRITE' }]"
     >
         <template #form>
-            <CreateNewExpenseForm @on-data-saved="$refs.expensesRef.fetch()" />
+            <CreateNewExpenseForm @on-data-saved="updateModel" />
         </template>
     </VnSelectDialog>
-    <FetchData
-        ref="expensesRef"
-        url="Expenses"
-        auto-load
-        @on-fetch="(data) => (expenses = data)"
-    />
 </template>
 <i18n>
 es:

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, markRaw } from 'vue';
+import { ref, computed, markRaw, useTemplateRef, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -14,15 +14,15 @@ import { useAccountShortToStandard } from 'src/composables/useAccountShortToStan
 
 const { t } = useI18n();
 const arrayData = useArrayData();
+const expensesArrayData = useArrayData('expenses', { url: 'Expenses' });
 const route = useRoute();
 const invoiceIn = computed(() => arrayData.store.data);
 const currency = computed(() => invoiceIn.value?.currency?.code);
-const expenses = ref([]);
+const expenses = computed(() => expensesArrayData.store.data);
 const sageTaxTypes = ref([]);
 const sageTransactionTypes = ref([]);
 const rowsSelected = ref([]);
-const invoiceInVatTableRef = ref();
+const invoiceInVatTableRef = useTemplateRef('invoiceInVatTableRef');
-
 defineProps({ actionIcon: { type: String, default: 'add' } });
 
 function taxRate(invoiceInTax) {
@@ -42,7 +42,7 @@ const columns = computed(() => [
         label: t('Expense'),
         component: markRaw(VnSelectExpense),
         format: (row, dashIfEmpty) => {
-            const expense = expenses.value.find((e) => e.id === row.expenseFk);
+            const expense = expenses.value?.find((e) => e.id === row.expenseFk);
             return expense ? `${expense.id}: ${expense.name}` : dashIfEmpty(null);
         },
         sortable: true,
@@ -151,6 +151,7 @@ const columns = computed(() => [
         align: 'left',
         create: true,
         isEditable: isNotEuro(currency.value),
+        format: (row, dashIfEmpty) => dashIfEmpty(row.foreignValue),
         cellEvent: {
             'update:modelValue': async (value, oldValue, row) =>
                 await handleForeignValueUpdate(value, row),
@@ -193,6 +194,8 @@ const filter = computed(() => ({
     },
 }));
 
+onBeforeMount(async () => await expensesArrayData.fetch({}));
+
 const isNotEuro = (code) => code != 'EUR';
 
 async function handleForeignValueUpdate(val, row) {
@@ -205,7 +208,6 @@ async function handleForeignValueUpdate(val, row) {
 }
 </script>
 <template>
-    <FetchData url="Expenses" auto-load @on-fetch="(data) => (expenses = data)" />
     <FetchData url="SageTaxTypes" auto-load @on-fetch="(data) => (sageTaxTypes = data)" />
     <FetchData
         url="sageTransactionTypes"