forked from verdnatura/salix-front
Merge branch 'test' of https://gitea.verdnatura.es/verdnatura/salix-front into dev
This commit is contained in:
commit
a5064e2e2f
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
import VnLocation from 'src/components/common/VnLocation.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) => {
|
||||
await postcodeFetchDataRef.value.fetch();
|
||||
await townsFetchDataRef.value.fetch();
|
||||
formData.postcode = code;
|
||||
formData.provinceFk = provinceFk;
|
||||
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
|
||||
formData.countryFk = countryFk;
|
||||
};
|
||||
function handleLocation(data, location) {
|
||||
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||
data.postcode = code;
|
||||
data.city = town;
|
||||
data.provinceFk = provinceFk;
|
||||
data.countryFk = countryFk;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fetch-data auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
|
||||
<fetch-data
|
||||
<FetchData auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
|
||||
<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
|
||||
:label="t('Postcode')"
|
||||
:options="postcodesOptions"
|
||||
:roles-allowed-to-create="['deliveryAssistant']"
|
||||
<VnLocation
|
||||
:rules="validate('Worker.postcode')"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
:roles-allowed-to-create="['deliveryAssistant']"
|
||||
:options="postcodesOptions"
|
||||
v-model="data.postcode"
|
||||
@update:model-value="(location) => handleLocation(data, location)"
|
||||
>
|
||||
<template #form>
|
||||
<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"
|
||||
/>
|
||||
</VnLocation>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||
import VnLocation from 'src/components/common/VnLocation.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) => {
|
||||
await postcodeFetchDataRef.value.fetch();
|
||||
await townsFetchDataRef.value.fetch();
|
||||
formData.postCode = code;
|
||||
formData.provinceFk = provinceFk;
|
||||
formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
|
||||
formData.countryFk = countryFk;
|
||||
};
|
||||
function handleLocation(data, location) {
|
||||
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||
data.postcode = code;
|
||||
data.city = town;
|
||||
data.provinceFk = provinceFk;
|
||||
data.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
|
||||
:label="t('supplier.fiscalData.postcode')"
|
||||
v-model="data.postCode"
|
||||
:options="postcodesOptions"
|
||||
:rules="validate('supplier.postCode')"
|
||||
<VnLocation
|
||||
:rules="validate('Worker.postcode')"
|
||||
:roles-allowed-to-create="['deliveryAssistant']"
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
hide-selected
|
||||
:options="postcodesOptions"
|
||||
v-model="data.postCode"
|
||||
@update:model-value="(location) => handleLocation(data, location)"
|
||||
>
|
||||
<template #form>
|
||||
<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>
|
||||
</VnLocation>
|
||||
</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"
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
cy.viewport(1280, 720);
|
||||
cy.login('developer');
|
||||
cy.visit('/#/worker/create');
|
||||
cy.waitForElement('.q-card');
|
||||
});
|
||||
describe('Create',()=>{
|
||||
const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
|
||||
beforeEach(() => {
|
||||
cy.viewport(1280, 720);
|
||||
cy.login('developer');
|
||||
cy.visit('/#/worker/create');
|
||||
cy.waitForElement('.q-card');
|
||||
});
|
||||
|
||||
it('Show all options', function() {
|
||||
cy.get(inputLocation).click();
|
||||
cy.get(locationOptions).should('have.length',5);
|
||||
});
|
||||
|
||||
it('input filter location as "al"', function() {
|
||||
it('Show all options', 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();
|
||||
cy.get(locationOptions).should('have.length',5);
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue