fix: refs #8388 enhance keydown event handling in VnTable and add expense fetching in InvoiceInVat

src/components/VnTable/VnTable.vue

@@ -476,6 +476,7 @@ async function renderInput(rowId, field, clickedElement) {
                     await destroyInput(rowId, field, clickedElement);
             },
             keydown: async (event) => {
+                await column?.cellEvent?.['keydown']?.(event, row);
                 switch (event.key) {
                     case 'Tab':
                         await handleTabKey(event, rowId, field);

src/components/common/VnSelectExpense.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAccountShortToStandard } from 'src/composables/useAccountShortToStandard';
 import VnSelectDialog from './VnSelectDialog.vue';
 import CreateNewExpenseForm from '../CreateNewExpenseForm.vue';
 import FetchData from '../FetchData.vue';
@@ -9,15 +8,6 @@ import FetchData from '../FetchData.vue';
 const model = defineModel({ type: [String, Number, Object] });
 const { t } = useI18n();
 const expenses = ref([]);
-const selectDialogRef = useTemplateRef('selectDialogRef');
-
-async function autocompleteExpense(evt) {
-    const val = evt.target.value;
-    if (!val || isNaN(val)) return;
-    const lookup = expenses.value.find(({ id }) => id == useAccountShortToStandard(val));
-    if (selectDialogRef.value)
-        selectDialogRef.value.vnSelectDialogRef.vnSelectRef.toggleOption(lookup);
-}
 </script>
 <template>
     <VnSelectDialog
@@ -30,7 +20,6 @@ async function autocompleteExpense(evt) {
         :filter-options="['id', 'name']"
         :tooltip="t('Create a new expense')"
         :acls="[{ model: 'Expense', props: '*', accessType: 'WRITE' }]"
-        @keydown.tab.prevent="autocompleteExpense"
     >
         <template #form>
             <CreateNewExpenseForm @on-data-saved="$refs.expensesRef.fetch()" />

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -9,6 +9,8 @@ import FetchData from 'src/components/FetchData.vue';
 import { getExchange } from 'src/composables/getExchange';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelectExpense from 'src/components/common/VnSelectExpense.vue';
+import axios from 'axios';
+import { useAccountShortToStandard } from 'src/composables/useAccountShortToStandard';
 
 const { t } = useI18n();
 const arrayData = useArrayData();
@@ -48,6 +50,22 @@ const columns = computed(() => [
         isEditable: true,
         create: true,
         width: '250px',
+        cellEvent: {
+            keydown: async (evt, row) => {
+                if (evt.key !== 'Tab') return;
+                const val = evt.target.value;
+                if (!val || isNaN(val)) return;
+                row.expenseFk = (
+                    await axios.get(`Expenses`, {
+                        params: {
+                            filter: JSON.stringify({
+                                where: { id: useAccountShortToStandard(val) },
+                            }),
+                        },
+                    })
+                ).data[0].id;
+            },
+        },
     },
     {
         name: 'taxableBase',
@@ -104,13 +122,13 @@ const columns = computed(() => [
             optionLabel: (row) => `${row.id}: ${row.transaction}`,
             filterOptions: ['id', 'transaction'],
         },
-        format: (row) => {
+        format: (row, dashIfEmpty) => {
             const transType = sageTransactionTypes.value.find(
                 (t) => t.id === row.transactionTypeSageFk,
             );
             return transType
                 ? `${transType.id}: ${transType.transaction}`
-                : row.transactionTypeSageFk;
+                : dashIfEmpty(row.transactionTypeSageFk);
         },
         sortable: true,
         align: 'left',