From e10e06bcd4a18f4608f12dc3d01829a7b71567e0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Mar 2024 08:25:43 +0100
Subject: [PATCH] fix: refs #6942 selectable expense

---
 src/components/FetchData.vue                  |   7 +-
 src/components/common/VnSelectFilter.vue      |   2 +-
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 481 +++++++++---------
 3 files changed, 239 insertions(+), 251 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 5b3dcbea7..2a0864d3e 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { h, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -24,7 +24,7 @@ const $props = defineProps({
         default: '',
     },
     limit: {
-        type: String,
+        type: [String, Number],
         default: '',
     },
     params: {
@@ -60,3 +60,6 @@ async function fetch(fetchFilter = {}) {
     }
 }
 </script>
+<template>
+    <template></template>
+</template>
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 4903a5327..c3538db9b 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -151,7 +151,7 @@ watch(modelValue, (newValue) => {
         @on-fetch="(data) => setOptions(data)"
         :where="where || { [optionValue]: value }"
         :limit="limit"
-        :order-by="orderBy"
+        :sort-by="sortBy"
         :fields="fields"
     />
     <QSelect
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index f557c8ef4..8ee7e647a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -3,14 +3,13 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
+import axios from 'axios';
 import { useArrayData } from 'src/composables/useArrayData';
 import { downloadFile } from 'src/composables/downloadFile';
-
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'src/components/FetchData.vue';
-
-import axios from 'axios';
+import VnRow from 'components/ui/VnRow.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -22,6 +21,7 @@ const arrayData = useArrayData('InvoiceIn');
 const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
 
+const expenses = ref([]);
 const currencies = ref([]);
 const currenciesRef = ref();
 const companies = ref([]);
@@ -174,6 +174,7 @@ async function upsert() {
         @on-fetch="(data) => (userConfig = data)"
         auto-load
     />
+    <FetchData url="Expenses" auto-load @on-fetch="(data) => (expenses = data)" />
     <FormModel
         v-if="invoiceIn"
         :url="`InvoiceIns/${route.params.id}`"
@@ -181,254 +182,238 @@ async function upsert() {
         :auto-load="true"
     >
         <template #form="{ data }">
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplierFk')"
-                        v-model="data.supplierFk"
-                        option-value="id"
-                        option-label="nickname"
-                        url="Suppliers"
-                        :fields="['id', 'nickname']"
-                        sort-by="nickname"
-                        :is-clearable="false"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.id} - ${scope.opt.nickname}`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <QInput
-                        clearable
-                        clear-icon="close"
-                        :label="t('Supplier ref')"
-                        v-model="data.supplierRef"
-                    />
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Expedition date')"
-                        v-model="data.issued"
-                        :mask="dateMask"
-                    >
-                        <template #append>
-                            <QIcon
-                                name="event"
-                                class="cursor-pointer"
-                                :fill-mask="fillMask"
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('supplierFk')"
+                    v-model="data.supplierFk"
+                    option-value="id"
+                    option-label="nickname"
+                    url="Suppliers"
+                    :fields="['id', 'nickname']"
+                    sort-by="nickname"
+                    :is-clearable="false"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{
+                                    `${scope.opt.id} - ${scope.opt.nickname}`
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <QInput
+                    clearable
+                    clear-icon="close"
+                    :label="t('Supplier ref')"
+                    v-model="data.supplierRef"
+                />
+            </VnRow>
+            <VnRow>
+                <QInput
+                    :label="t('Expedition date')"
+                    v-model="data.issued"
+                    :mask="dateMask"
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer" :fill-mask="fillMask">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.issued">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Operation date')"
-                        v-model="data.operated"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.operated" :mask="dateMask">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Undeductible VAT')"
-                        v-model="data.deductibleExpenseFk"
-                        clearable
-                        clear-icon="close"
-                    />
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Document')"
-                        v-model="data.dmsFk"
-                        clearable
-                        clear-icon="close"
-                        @update:model-value="checkFileExists(data.dmsFk)"
-                    >
-                        <template #prepend>
-                            <QBtn
-                                v-if="data.dmsFk"
-                                :class="{
-                                    'no-pointer-events': editDownloadDisabled,
-                                }"
-                                :disable="editDownloadDisabled"
-                                icon="cloud_download"
-                                :title="t('Download file')"
-                                padding="xs"
-                                round
-                                @click="downloadFile(data.dmsFk)"
-                            />
-                        </template>
-                        <template #append>
-                            <QBtn
-                                :class="{
-                                    'no-pointer-events': editDownloadDisabled,
-                                }"
-                                :disable="editDownloadDisabled"
-                                v-if="data.dmsFk"
-                                icon="edit"
-                                round
-                                padding="xs"
-                                @click="setEditDms(data.dmsFk)"
+                                <QDate v-model="data.issued">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+                <QInput
+                    :label="t('Operation date')"
+                    v-model="data.operated"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                    autofocus
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QTooltip>{{ t('Edit document') }}</QTooltip>
-                            </QBtn>
-                            <QBtn
-                                v-else
-                                icon="add_circle"
-                                round
-                                padding="xs"
-                                @click="setCreateDms()"
+                                <QDate v-model="data.operated" :mask="dateMask">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+            </VnRow>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('Undeductible VAT')"
+                    v-model="data.deductibleExpenseFk"
+                    :options="expenses"
+                    option-value="id"
+                    option-label="id"
+                    :filter-options="['id', 'name']"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+
+                <QInput
+                    :label="t('Document')"
+                    v-model="data.dmsFk"
+                    clearable
+                    clear-icon="close"
+                    @update:model-value="checkFileExists(data.dmsFk)"
+                >
+                    <template #prepend>
+                        <QBtn
+                            v-if="data.dmsFk"
+                            :class="{
+                                'no-pointer-events': editDownloadDisabled,
+                            }"
+                            :disable="editDownloadDisabled"
+                            icon="cloud_download"
+                            :title="t('Download file')"
+                            padding="xs"
+                            round
+                            @click="downloadFile(data.dmsFk)"
+                        />
+                    </template>
+                    <template #append>
+                        <QBtn
+                            :class="{
+                                'no-pointer-events': editDownloadDisabled,
+                            }"
+                            :disable="editDownloadDisabled"
+                            v-if="data.dmsFk"
+                            icon="edit"
+                            round
+                            padding="xs"
+                            @click="setEditDms(data.dmsFk)"
+                        >
+                            <QTooltip>{{ t('Edit document') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
+                            v-else
+                            icon="add_circle"
+                            round
+                            padding="xs"
+                            @click="setCreateDms()"
+                        >
+                            <QTooltip>{{ t('Create document') }}</QTooltip>
+                        </QBtn>
+                    </template>
+                </QInput>
+            </VnRow>
+            <VnRow>
+                <QInput
+                    :label="t('Entry date')"
+                    v-model="data.bookEntried"
+                    clearable
+                    clear-icon="close"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QTooltip>{{ t('Create document') }}</QTooltip>
-                            </QBtn>
-                        </template>
-                    </QInput>
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Entry date')"
-                        v-model="data.bookEntried"
-                        clearable
-                        clear-icon="close"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.bookEntried" :mask="dateMask">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Accounted date')"
-                        v-model="data.booked"
-                        clearable
-                        clear-icon="close"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.booked" :mask="maskDate">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Currency')"
-                        v-model="data.currencyFk"
-                        :options="currencies"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        v-if="companiesRef"
-                        :label="t('Company')"
-                        v-model="data.companyFk"
-                        :options="companies"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('invoiceIn.summary.booked')"
-                        v-model="data.isBooked"
-                    />
-                </div>
-                <div class="col"></div>
-            </div>
+                                <QDate v-model="data.bookEntried" :mask="dateMask">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+
+                <QInput
+                    :label="t('Accounted date')"
+                    v-model="data.booked"
+                    clearable
+                    clear-icon="close"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
+                            >
+                                <QDate v-model="data.booked" :mask="maskDate">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+            </VnRow>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('Currency')"
+                    v-model="data.currencyFk"
+                    :options="currencies"
+                    option-value="id"
+                    option-label="code"
+                />
+
+                <VnSelectFilter
+                    v-if="companiesRef"
+                    :label="t('Company')"
+                    v-model="data.companyFk"
+                    :options="companies"
+                    option-value="id"
+                    option-label="code"
+                />
+            </VnRow>
+            <VnRow>
+                <QCheckbox
+                    :label="t('invoiceIn.summary.booked')"
+                    v-model="data.isBooked"
+                />
+            </VnRow>
         </template>
     </FormModel>
     <QDialog ref="editDmsRef">