fix: refs #8388 update format functions to handle empty values and adjust column widths

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -28,9 +28,10 @@ const columns = computed(() => [
             sortBy: 'id',
             fields: ['id', 'description'],
         },
-        format: getCode,
+        format: (row, dashIfEmpty) => dashIfEmpty(getCode(row)),
         create: true,
         isEditable: true,
+        width: 'max-content',
     },
     {
         name: 'amount',
@@ -39,7 +40,6 @@ const columns = computed(() => [
         create: true,
         isEditable: true,
         columnFilter: false,
-        width: '30px',
     },
     {
         name: 'net',
@@ -48,7 +48,6 @@ const columns = computed(() => [
         create: true,
         isEditable: true,
         columnFilter: false,
-        width: '30px',
     },
     {
         name: 'stems',
@@ -57,7 +56,6 @@ const columns = computed(() => [
         create: true,
         isEditable: true,
         columnFilter: false,
-        width: '30px',
     },
     {
         name: 'countryFk',
@@ -70,7 +68,6 @@ const columns = computed(() => [
         create: true,
         isEditable: true,
         columnFilter: false,
-        width: '30px',
     },
 ]);
 
@@ -79,8 +76,8 @@ const tableRows = computed(
 );
 
 function getCode(row) {
-    const { id, description } = intrastats.value.find(({ id }) => id === row.intrastatFk);
+    const code = intrastats.value.find(({ id }) => id === row.intrastatFk);
-    return `${id}: ${description}`;
+    return code ? `${code.id}: ${code.description}` : null;
 }
 </script>
 <template>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -41,15 +41,15 @@ const columns = computed(() => [
         name: 'expenseFk',
         label: t('Expense'),
         component: markRaw(VnSelectExpense),
-        format: (row) => {
+        format: (row, dashIfEmpty) => {
             const expense = expenses.value.find((e) => e.id === row.expenseFk);
-            return expense ? `${expense.id}: ${expense.name}` : row.expenseFk;
+            return expense ? `${expense.id}: ${expense.name}` : dashIfEmpty(null);
         },
         sortable: true,
         align: 'left',
         isEditable: true,
         create: true,
-        width: '250px',
+        width: 'max-content',
         cellEvent: {
             keydown: async (evt, row) => {
                 if (evt.key !== 'Tab') return;
@@ -90,7 +90,6 @@ const columns = computed(() => [
         createAttrs: {
             defaultValue: true,
         },
-        width: '100px',
     },
     {
         name: 'taxTypeSageFk',
@@ -111,6 +110,7 @@ const columns = computed(() => [
         align: 'left',
         isEditable: true,
         create: true,
+        width: 'max-content',
     },
     {
         name: 'transactionTypeSageFk',
@@ -134,6 +134,7 @@ const columns = computed(() => [
         align: 'left',
         isEditable: true,
         create: true,
+        width: 'max-content',
     },
     {
         name: 'rate',
@@ -211,6 +212,12 @@ async function handleForeignValueUpdate(val, row) {
         auto-load
         @on-fetch="(data) => (sageTransactionTypes = data)"
     />
+    <QBtn
+        :to="`/invoice-in/${$route.params.id}/due-day`"
+        label="mock"
+        dense
+        size="md"
+    ></QBtn>
     <VnTable
         v-if="invoiceIn"
         ref="invoiceInVatTableRef"
@@ -236,7 +243,7 @@ async function handleForeignValueUpdate(val, row) {
             formInitialData: { invoiceInFk: $route.params.id, isDeductible: true },
             onDataSaved: () => invoiceInVatTableRef.reload(),
         }"
-        :crud-model="{ goTo: `/invoice-in/${$route.params.id}/due-day` }"
+        :go-to="`invoice-in/${$route.params.id}/due-day`"
     >
         <template #column-footer-taxableBase>
             {{ toCurrency(taxableBaseTotal) }}