Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 4666-invoiceInCorrection

src/components/common/VnLocation.vue

@@ -55,7 +55,7 @@ const value = computed({
 });
 
 onMounted(() => {
-    locationFilter()
+    locationFilter($props.modelValue);
 });
 
 function setOptions(data) {
@@ -69,34 +69,39 @@ watch(options, (newValue) => {
 });
 
 function showLabel(data) {
-       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-function locationFilter(search) {
+function locationFilter(search = '') {
+    if (
+        search &&
+        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
+    )
+        return;
     let where = { search };
-    postcodesRef.value.fetch({filter:{ where}, limit: 30});
+    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
 }
 
-function handleFetch( data) {
+function handleFetch(data) {
     postcodesOptions.value = data;
 }
-
 </script>
 <template>
     <FetchData
         ref="postcodesRef"
         url="Postcodes/filter"
-        @on-fetch="(data) =>handleFetch(data)"
+        @on-fetch="(data) => handleFetch(data)"
     />
     <VnSelectCreate
         v-if="postcodesRef"
+        :option-label="(opt) => showLabel(opt) ?? 'code'"
+        :option-value="(opt) => opt.code"
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        :option-label="showLabel"
         :placeholder="t('search_by_postalcode')"
         @input-value="locationFilter"
-        :default-filter="false"
+        :default-filter="true"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
@@ -110,7 +115,7 @@ function handleFetch( data) {
         <template #form>
             <CreateNewPostcode @on-data-saved="locationFilter()" />
         </template>
-        <template #option="{itemProps, opt}">
+        <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
                 <QItemSection v-if="opt">
                     <QItemLabel>{{ opt.code }}</QItemLabel>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -8,60 +8,31 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const typesTaxes = ref([]);
 const typesTransactions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
+function handleLocation(data, location) {
-    await postcodeFetchDataRef.value.fetch();
+    const { town, code, provinceFk, countryFk } = location ?? {};
-    await townsFetchDataRef.value.fetch();
+    data.postcode = code;
-    formData.postcode = code;
+    data.city = town;
-    formData.provinceFk = provinceFk;
+    data.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    data.countryFk = countryFk;
-    formData.countryFk = countryFk;
+}
-};
 </script>
 
 <template>
-    <fetch-data auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
+    <FetchData auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
-    <fetch-data
+    <FetchData
         auto-load
         @on-fetch="(data) => (typesTransactions = data)"
         url="SageTransactionTypes"
     />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <FormModel
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         :url="`Clients/${route.params.id}/getCard`"
@@ -114,94 +85,14 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnLocation
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
                         :rules="validate('Worker.postcode')"
-                        hide-selected
+                        :roles-allowed-to-create="['deliveryAssistant']"
-                        option-label="code"
+                        :options="postcodesOptions"
-                        option-value="code"
                         v-model="data.postcode"
+                        @update:model-value="(location) => handleLocation(data, location)"
                     >
-                        <template #form>
+                    </VnLocation>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }} ({{
-                                            scope.opt.town.province.name
-                                        }},
-                                        {{
-                                            scope.opt.town.province.country.country
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectCreate>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="name"
-                        v-model="data.city"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{
-                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-            </VnRow>
-
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Country')"
-                        :options="countriesOptions"
-                        hide-selected
-                        option-label="country"
-                        option-value="id"
-                        v-model="data.countryFk"
-                    />
                 </div>
             </VnRow>
 

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -8,31 +8,24 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
 const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
 const supplierActivitiesOptions = ref([]);
 const postcodesOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const townsLocationOptions = ref([]);
-const countriesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
+function handleLocation(data, location) {
-    await postcodeFetchDataRef.value.fetch();
+    const { town, code, provinceFk, countryFk } = location ?? {};
-    await townsFetchDataRef.value.fetch();
+    data.postcode = code;
-    formData.postCode = code;
+    data.city = town;
-    formData.provinceFk = provinceFk;
+    data.provinceFk = provinceFk;
-    formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
+    data.countryFk = countryFk;
-    formData.countryFk = countryFk;
+}
-};
 </script>
 <template>
     <FetchData
@@ -55,28 +48,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         auto-load
         @on-fetch="(data) => (supplierActivitiesOptions = data)"
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
     <FormModel
         :url="`Suppliers/${route.params.id}`"
         :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
@@ -172,100 +143,20 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                         clearable
                     />
                 </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnLocation
-                        :label="t('supplier.fiscalData.postcode')"
+                        :rules="validate('Worker.postcode')"
-                        v-model="data.postCode"
-                        :options="postcodesOptions"
-                        :rules="validate('supplier.postCode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        option-label="code"
+                        :options="postcodesOptions"
-                        option-value="code"
+                        v-model="data.postCode"
-                        hide-selected
+                        @update:model-value="(location) => handleLocation(data, location)"
                     >
-                        <template #form>
+                    </VnLocation>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }} ({{
-                                            scope.opt.town.province.name
-                                        }},
-                                        {{
-                                            scope.opt.town.province.country.country
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectCreate>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.city')"
-                        :options="townsLocationOptions"
-                        v-model="data.city"
-                        option-value="name"
-                        option-label="name"
-                        hide-selected
-                        :rules="validate('supplier.city')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.name }},
-                                        {{ scope.opt.province.name }} ({{
-                                            scope.opt.province.country.country
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.provinceFk')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.country')"
-                        :options="countriesOptions"
-                        hide-selected
-                        option-label="country"
-                        option-value="id"
-                        v-model="data.countryFk"
-                        :rules="validate('postcode.countryFk')"
-                    />
-                </div>
                 <div class="col flex justify-around">
                     <QCheckbox
                         v-model="data.isTrucker"

test/cypress/integration/VnLocation.spec.js

@@ -1,31 +1,48 @@
-const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
 const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
 describe('VnLocation', () => {
-    beforeEach(() => {
+    describe('Create',()=>{
-        cy.viewport(1280, 720);
+        const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
-        cy.login('developer');
+        beforeEach(() => {
-        cy.visit('/#/worker/create');
+            cy.viewport(1280, 720);
-        cy.waitForElement('.q-card');
+            cy.login('developer');
-    });
+            cy.visit('/#/worker/create');
+            cy.waitForElement('.q-card');
+        });
 
-    it('Show all options', function() {
+        it('Show all options', function() {
-      cy.get(inputLocation).click();
-      cy.get(locationOptions).should('have.length',5);
-    });
-
-    it('input filter location as "al"', function() {
         cy.get(inputLocation).click();
-        cy.get(inputLocation).clear();
+        cy.get(locationOptions).should('have.length',5);
-        cy.get(inputLocation).type('al');
+        });
-        cy.get(locationOptions).should('have.length',3);
-    });
-    it('input filter location as "ecuador"', function() {
-        cy.get(inputLocation).click();
-        cy.get(inputLocation).clear();
-        cy.get(inputLocation).type('ecuador');
-        cy.get(locationOptions).should('have.length',1);
-        cy.get(`${locationOptions}:nth-child(1)`).click();
-        cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
 
+        it('input filter location as "al"', function() {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('al');
+            cy.get(locationOptions).should('have.length',3);
+        });
+        it('input filter location as "ecuador"', function() {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('ecuador');
+            cy.get(locationOptions).should('have.length',1);
+            cy.get(`${locationOptions}:nth-child(1)`).click();
+            cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+
+        });
+    });
+    describe('Fiscal-data',()=>{
+    const inputLocation = ':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+            cy.login('developer');
+            cy.visit('/#/supplier/567/fiscal-data', {timeout: 2000});
+            cy.waitForElement('.q-card');
+        });
+
+        it('Show all options', function() {
+            cy.get(inputLocation).click();
+            cy.get(locationOptions).should('have.length', 1);
+        });
     });
 })