fix: refs #7936 update select model-value WIP

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

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)"

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>