wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

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

This commit is contained in:
Alex Moreno 2024-02-05 07:10:20 +01:00
parent 6c1bad1cf5 289516a599
commit a5064e2e2f
4 changed files with 87 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/VnLocation.vue
View File

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

139
src/pages/Customer/Card/CustomerFiscalData.vue
View File

@ -8,60 +8,31 @@ import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.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 { t } = useI18n();
const route = useRoute(); const route = useRoute();
const townsFetchDataRef = ref(null);
const postcodeFetchDataRef = ref(null);
const typesTaxes = ref([]); const typesTaxes = ref([]);
const typesTransactions = ref([]); const typesTransactions = ref([]);
const citiesLocationOptions = ref([]);
const provincesLocationOptions = ref([]);
const countriesOptions = ref([]);
const postcodesOptions = 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> </script>
<template> <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 auto-load
@on-fetch="(data) => (typesTransactions = data)" @on-fetch="(data) => (typesTransactions = data)"
url="SageTransactionTypes" 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 <FormModel
:url-update="`Clients/${route.params.id}/updateFiscalData`" :url-update="`Clients/${route.params.id}/updateFiscalData`"
:url="`Clients/${route.params.id}/getCard`" :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"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelectCreate <VnLocation
:label="t('Postcode')"
:options="postcodesOptions"
:roles-allowed-to-create="['deliveryAssistant']"
:rules="validate('Worker.postcode')" :rules="validate('Worker.postcode')"
hide-selected :roles-allowed-to-create="['deliveryAssistant']"
option-label="code" :options="postcodesOptions"
option-value="code"
v-model="data.postcode" 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> </div>
</VnRow> </VnRow>

141
src/pages/Supplier/Card/SupplierFiscalData.vue
View File

@ -8,31 +8,24 @@ import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.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 route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const sageTaxTypesOptions = ref([]); const sageTaxTypesOptions = ref([]);
const sageWithholdingsOptions = ref([]); const sageWithholdingsOptions = ref([]);
const sageTransactionTypesOptions = ref([]); const sageTransactionTypesOptions = ref([]);
const supplierActivitiesOptions = ref([]); const supplierActivitiesOptions = ref([]);
const postcodesOptions = 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> </script>
<template> <template>
<FetchData <FetchData
@ -55,28 +48,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
auto-load auto-load
@on-fetch="(data) => (supplierActivitiesOptions = data)" @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 <FormModel
:url="`Suppliers/${route.params.id}`" :url="`Suppliers/${route.params.id}`"
:url-update="`Suppliers/${route.params.id}/updateFiscalData`" :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
@ -172,100 +143,20 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
clearable clearable
/> />
</div> </div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <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']" :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> </div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <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"> <div class="col flex justify-around">
<QCheckbox <QCheckbox
v-model="data.isTrucker" v-model="data.isTrucker"

65
test/cypress/integration/VnLocation.spec.js
View File

@ -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' const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
describe('VnLocation', () => { 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).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);
});
}); });
}) })