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

Merge pull request '#7677 - Improve VnLocation' (!563) from 7677_vnLocation_perf into dev 

Reviewed-on: verdnatura/salix-front#563
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Javier Segarra 2024-09-17 08:29:23 +00:00
parent b4cee6b02f e4adbfa9f7
commit 907e6dbf4f
13 changed files with 111 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,21 +2,37 @@
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
const { t } = useI18n();
const value = defineModel({ type: [String, Number, Object] });
const emit = defineEmits(['update:model-value', 'update:options']);
const props = defineProps({
location: {
type: Object,
default: null,
},
});
const modelValue = ref(
props.location
? `${props.location?.postcode} - ${props.location?.city}(${props.location?.province?.name}), ${props.location?.country?.name}`
: null
);
function showLabel(data) {
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
}
const handleModelValue = (data) => {
emit('update:model-value', data);
};
</script>
<template>
<VnSelectDialog
v-model="value"
option-value="code"
v-model="modelValue"
option-filter-value="search"
:option-label="(opt) => showLabel(opt)"
:option-label="
(opt) => (typeof modelValue === 'string' ? modelValue : showLabel(opt))
"
url="Postcodes/filter"
@update:model-value="handleModelValue"
:use-like="false"
:label="t('Location')"
:placeholder="t('search_by_postalcode')"
@ -27,7 +43,14 @@ function showLabel(data) {
:emit-value="false"
>
<template #form>
<CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
<CreateNewPostcode
@on-data-saved="
(newValue) => {
modelValue = newValue;
emit('update:model-value', newValue);
}
"
/>
</template>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">

1
src/i18n/locale/en.yml
View File

@ -105,6 +105,7 @@ globals:
weight: Weight
pageTitles:
logIn: Login
addressEdit: Update address
summary: Summary
basicData: Basic data
log: Logs

1
src/i18n/locale/es.yml
View File

@ -107,6 +107,7 @@ globals:
weight: Peso
pageTitles:
logIn: Inicio de sesión
addressEdit: Modificar consignatario
summary: Resumen
basicData: Datos básicos
log: Historial

26
src/pages/Customer/Card/CustomerAddress.vue
View File

@ -5,15 +5,12 @@ import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const addresses = ref([]);
const client = ref(null);
const provincesLocation = ref([]);
const addressFilter = {
fields: [
@ -41,7 +38,13 @@ const addressFilter = {
{
relation: 'province',
scope: {
fields: ['id', 'name'],
fields: ['id', 'name', 'countryFk'],
include: [
{
relation: 'country',
scope: { fields: ['id', 'name'] },
},
],
},
},
],
@ -83,13 +86,6 @@ const getClientData = async (id) => {
}
};
const setProvince = (provinceFk) => {
const result = provincesLocation.value.filter(
(province) => province.id === provinceFk
);
return result[0]?.name || '';
};
const isDefaultAddress = (address) => {
return client?.value?.defaultAddressFk === address.id ? 1 : 0;
};
@ -128,12 +124,6 @@ const toCustomerAddressEdit = (addressId) => {
</script>
<template>
<FetchData
@on-fetch="(data) => (provincesLocation = data)"
auto-load
url="Provinces/location"
/>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg" v-if="addresses.length">
<QCardSection>
@ -177,7 +167,7 @@ const toCustomerAddressEdit = (addressId) => {
<div>{{ item.street }}</div>
<div>
{{ item.postalCode }} - {{ item.city }},
{{ setProvince(item.provinceFk) }}
{{ item.province.name }}
</div>
<div>
{{ item.phone }}

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

@ -94,7 +94,7 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.postcode"
:location="data"
@update:model-value="(location) => handleLocation(data, location)"
/>
</VnRow>

7
src/pages/Customer/components/CustomerAddressEdit.vue
View File

@ -177,7 +177,12 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.postalCode"
:location="{
postcode: data.postalCode,
city: data.city,
province: data.province,
country: data.province.country,
}"
@update:model-value="(location) => handleLocation(data, location)"
></VnLocation>
</div>

8
src/pages/Supplier/Card/SupplierAddresses.vue
View File

@ -26,7 +26,13 @@ const addressesFilter = {
{
relation: 'province',
scope: {
fields: ['id', 'name'],
fields: ['id', 'name', 'countryFk'],
include: [
{
relation: 'country',
scope: { fields: ['id', 'name'] },
},
],
},
},
],

12
src/pages/Supplier/Card/SupplierAddressesCreate.vue
View File

@ -21,6 +21,7 @@ const newAddressForm = reactive({
provinceFk: null,
phone: null,
mobile: null,
province: null,
});
const onDataSaved = () => {
@ -84,7 +85,16 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.location"
:location="
data.postalCode
? {
postcode: data.postalCode,
city: data.city,
province: data.province,
country: data.province.country,
}
: null
"
@update:model-value="(location) => handleLocation(data, location)"
>
</VnLocation>

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

@ -19,8 +19,8 @@ const sageTransactionTypesOptions = ref([]);
const supplierActivitiesOptions = ref([]);
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
data.postCode = code;
const { town, label, provinceFk, countryFk } = location ?? {};
data.postCode = label;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
@ -51,6 +51,23 @@ function handleLocation(data, location) {
:url="`Suppliers/${route.params.id}`"
:url-update="`Suppliers/${route.params.id}/updateFiscalData`"
model="supplier"
:filter="{
fields: ['id', 'name', 'city', 'postCode', 'countryFk', 'provinceFk'],
include: [
{
relation: 'province',
scope: {
fields: ['id', 'name'],
},
},
{
relation: 'country',
scope: {
fields: ['id', 'name'],
},
},
],
}"
auto-load
:clear-store-on-unmount="false"
>
@ -130,7 +147,12 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.postCode"
:location="{
postcode: data.postCode,
city: data.city,
province: data.province,
country: data.country,
}"
@update:model-value="(location) => handleLocation(data, location)"
>
</VnLocation>

1
src/pages/Worker/WorkerCreate.vue
View File

@ -194,7 +194,6 @@ async function autofillBic(worker) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
:disable="formData.isFreelance"
>

1
src/pages/Worker/WorkerList.vue
View File

@ -264,7 +264,6 @@ async function autofillBic(worker) {
<VnLocation
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
:disable="data.isFreelance"
>

2
src/router/modules/customer.js
View File

@ -175,7 +175,7 @@ export default {
path: 'edit',
name: 'CustomerAddressEdit',
meta: {
title: 'address-edit',
title: 'addressEdit',
},
component: () =>
import(

23
test/cypress/integration/vnComponent/vnLocation.spec.js
View File

@ -18,7 +18,7 @@ describe('VnLocation', () => {
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type('al');
cy.get(locationOptions).should('have.length.at.least', 3);
cy.get(locationOptions).should('have.length.at.least', 4);
});
it('input filter location as "ecuador"', function () {
cy.get(inputLocation).click();
@ -33,11 +33,29 @@ describe('VnLocation', () => {
cy.login('developer');
cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
cy.waitForElement('.q-form');
cy.get(createLocationButton).click();
});
it('Fin by postalCode', () => {
const postCode = '46600';
const firstOption = '[role="listbox"] .q-item:nth-child(1)';
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type(postCode);
cy.get(locationOptions).should('have.length.at.least', 2);
cy.get(firstOption).click();
cy.get('.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon').click();
cy.reload();
cy.waitForElement('.q-form');
cy.get(inputLocation).should(
'have.value',
'46600 - Valencia(Province one), España'
);
});
it('Create postCode', () => {
const postCode = '1234475';
const province = 'Valencia';
cy.get(createLocationButton).click();
cy.get('.q-card > h1').should('have.text', 'New postcode');
cy.get(dialogInputs).eq(0).clear();
cy.get(dialogInputs).eq(0).type(postCode);
@ -54,6 +72,7 @@ describe('VnLocation', () => {
it('Create city', () => {
const postCode = '9011';
const province = 'Saskatchew';
cy.get(createLocationButton).click();
cy.get(dialogInputs).eq(0).type(postCode);
// city create button
cy.get(