From 8843318b668534f7407622d5a82044ed8788eba8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 20 Jan 2025 10:10:45 +0100
Subject: [PATCH 1/4] fix: refs #7936 update select model-value WIP

---
 src/components/common/VnSelect.vue        |  3 +--
 src/components/common/VnSelectDialog.vue  |  6 ++++-
 src/pages/InvoiceIn/Card/InvoiceInVat.vue | 32 ++++++++++++++++++-----
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b78c99b8a..243f3ece1 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -294,7 +294,7 @@ async function onScroll({ to, direction, from, index }) {
     }
 }
 
-defineExpose({ opts: myOptions });
+defineExpose({ opts: myOptions, vnSelectRef });
 
 function handleKeyDown(event) {
     if (event.key === 'Tab' && !event.shiftKey) {
@@ -346,7 +346,6 @@ function getCaption(opt) {
         :emit-value="nullishToTrue($attrs['emit-value'])"
         :map-options="nullishToTrue($attrs['map-options'])"
         :use-input="nullishToTrue($attrs['use-input'])"
-        :hide-selected="nullishToTrue($attrs['hide-selected'])"
         :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules
diff --git a/src/components/common/VnSelectDialog.vue b/src/components/common/VnSelectDialog.vue
index 12322c3fa..a4cd0011d 100644
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRole } from 'src/composables/useRole';
 import { useAcl } from 'src/composables/useAcl';
 
@@ -7,6 +7,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const value = defineModel({ type: [String, Number, Object] });
+const select = ref(null);
 const $props = defineProps({
     rolesAllowedToCreate: {
         type: Array,
@@ -33,10 +34,13 @@ const isAllowedToCreate = computed(() => {
     if ($props.acls.length) return acl.hasAny($props.acls);
     return role.hasAny($props.rolesAllowedToCreate);
 });
+
+defineExpose({ vnSelectDialogRef: select });
 </script>
 
 <template>
     <VnSelect
+        ref="select"
         v-model="value"
         v-bind="$attrs"
         @update:model-value="(...args) => emit('update:modelValue', ...args)"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index f7ef7d525..b702851b3 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -33,15 +33,19 @@ defineProps({
     },
 });
 
+function test(row) {
+    console.log('test', row);
+    return `${row.id}: ${row.name}`;
+}
+
 const columns = computed(() => [
     {
         name: 'expense',
         label: t('Expense'),
-        field: (row) => row.expenseFk,
         options: expenses.value,
         model: 'expenseFk',
         optionValue: 'id',
-        optionLabel: (row) => `${row.id}: ${row.name}`,
+        optionLabel: (row) => test(row),
         sortable: true,
         align: 'left',
     },
@@ -119,6 +123,8 @@ function taxRate(invoiceInTax) {
     return ((taxTypeSage / 100) * taxableBase).toFixed(2);
 }
 
+const expensesRef = ref();
+const exponseShow = ref(false);
 function autocompleteExpense(evt, row, col) {
     const val = evt.target.value;
     if (!val) return;
@@ -127,9 +133,17 @@ function autocompleteExpense(evt, row, col) {
     const lookup = expenses.value.find(
         ({ id }) => id == useAccountShortToStandard(param)
     );
-
-    if (lookup) row[col.model] = lookup;
+    if (lookup) {
+        row[col.model] = lookup?.id;
+        expensesRef.value.showItem = true;
+    }
 }
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -167,15 +181,19 @@ function autocompleteExpense(evt, row, col) {
                 <template #body-cell-expense="{ row, col }">
                     <QTd>
                         <VnSelectDialog
+                            ref="expensesRef"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
-                            :option-label="col.optionLabel"
                             :filter-options="['id', 'name']"
                             :tooltip="t('Create a new expense')"
                             @keydown.tab="autocompleteExpense($event, row, col)"
+                            @input-value="(data) => (row[col.model] = undefined)"
                         >
-                            <template #option="scope">
+                            <template #selected-item="scope">
+                                A{{ scope.opt.id }}B</template
+                            >
+                            <!-- <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
                                     {{ `${scope.opt.id}: ${scope.opt.name}` }}
                                 </QItem>
@@ -184,7 +202,7 @@ function autocompleteExpense(evt, row, col) {
                                 <CreateNewExpenseForm
                                     @on-data-saved="$refs.expensesRef.fetch()"
                                 />
-                            </template>
+                            </template> -->
                         </VnSelectDialog>
                     </QTd>
                 </template>

From ff95882e42191411348b12ab4640b13a8b828560 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 20 Jan 2025 11:51:53 +0100
Subject: [PATCH 2/4] fix: refs #7936 rollback

---
 src/pages/InvoiceIn/Card/InvoiceInVat.vue | 32 +++++------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index b702851b3..f7ef7d525 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -33,19 +33,15 @@ defineProps({
     },
 });
 
-function test(row) {
-    console.log('test', row);
-    return `${row.id}: ${row.name}`;
-}
-
 const columns = computed(() => [
     {
         name: 'expense',
         label: t('Expense'),
+        field: (row) => row.expenseFk,
         options: expenses.value,
         model: 'expenseFk',
         optionValue: 'id',
-        optionLabel: (row) => test(row),
+        optionLabel: (row) => `${row.id}: ${row.name}`,
         sortable: true,
         align: 'left',
     },
@@ -123,8 +119,6 @@ function taxRate(invoiceInTax) {
     return ((taxTypeSage / 100) * taxableBase).toFixed(2);
 }
 
-const expensesRef = ref();
-const exponseShow = ref(false);
 function autocompleteExpense(evt, row, col) {
     const val = evt.target.value;
     if (!val) return;
@@ -133,17 +127,9 @@ function autocompleteExpense(evt, row, col) {
     const lookup = expenses.value.find(
         ({ id }) => id == useAccountShortToStandard(param)
     );
-    if (lookup) {
-        row[col.model] = lookup?.id;
-        expensesRef.value.showItem = true;
-    }
-}
 
-const formatOpt = (row, { model, options }, prop) => {
-    const obj = row[model];
-    const option = options.find(({ id }) => id == obj);
-    return option ? `${obj}:${option[prop]}` : '';
-};
+    if (lookup) row[col.model] = lookup;
+}
 </script>
 <template>
     <FetchData
@@ -181,19 +167,15 @@ const formatOpt = (row, { model, options }, prop) => {
                 <template #body-cell-expense="{ row, col }">
                     <QTd>
                         <VnSelectDialog
-                            ref="expensesRef"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
                             :filter-options="['id', 'name']"
                             :tooltip="t('Create a new expense')"
                             @keydown.tab="autocompleteExpense($event, row, col)"
-                            @input-value="(data) => (row[col.model] = undefined)"
                         >
-                            <template #selected-item="scope">
-                                A{{ scope.opt.id }}B</template
-                            >
-                            <!-- <template #option="scope">
+                            <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
                                     {{ `${scope.opt.id}: ${scope.opt.name}` }}
                                 </QItem>
@@ -202,7 +184,7 @@ const formatOpt = (row, { model, options }, prop) => {
                                 <CreateNewExpenseForm
                                     @on-data-saved="$refs.expensesRef.fetch()"
                                 />
-                            </template> -->
+                            </template>
                         </VnSelectDialog>
                     </QTd>
                 </template>

From ae68f25c3c031d338006682afb4cc38ba4e9afdd Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 20 Jan 2025 11:55:49 +0100
Subject: [PATCH 3/4] fix: refs #7936 rollback

---
 src/components/common/VnSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 243f3ece1..662e6006a 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -346,6 +346,7 @@ function getCaption(opt) {
         :emit-value="nullishToTrue($attrs['emit-value'])"
         :map-options="nullishToTrue($attrs['map-options'])"
         :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
         :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules

From bdae839e505532fbf02394dd6470164056b08ca5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 20 Jan 2025 12:56:40 +0100
Subject: [PATCH 4/4] fix: refs #7936 toggle option

---
 src/pages/InvoiceIn/Card/InvoiceInVat.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index f7ef7d525..74fd02816 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -25,6 +25,7 @@ const sageTaxTypes = ref([]);
 const sageTransactionTypes = ref([]);
 const rowsSelected = ref([]);
 const invoiceInFormRef = ref();
+const expenseRef = ref();
 
 defineProps({
     actionIcon: {
@@ -128,7 +129,7 @@ function autocompleteExpense(evt, row, col) {
         ({ id }) => id == useAccountShortToStandard(param)
     );
 
-    if (lookup) row[col.model] = lookup;
+    expenseRef.value.vnSelectDialogRef.vnSelectRef.toggleOption(lookup);
 }
 </script>
 <template>
@@ -167,6 +168,7 @@ function autocompleteExpense(evt, row, col) {
                 <template #body-cell-expense="{ row, col }">
                     <QTd>
                         <VnSelectDialog
+                            ref="expenseRef"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"