refactor(customerAddress): refs #7527 is popup remove /create /edit
gitea/salix-front/pipeline/pr-dev This commit is unstable
Details
gitea/salix-front/pipeline/pr-dev This commit is unstable
Details
This commit is contained in:
parent
eab1994fb8
commit
9d5ef13bd6
|
|
@ -1,18 +1,23 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
import CustomerAddressForm from '../components/CustomerAddressForm.vue';
|
||||
import CustomerAddressEdit from '../components/CustomerAddressEdit.vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const addresses = ref([]);
|
||||
const client = ref(null);
|
||||
|
||||
const showFormCreate = ref();
|
||||
const showFormEdit = ref();
|
||||
const showFormEditModel = ref();
|
||||
const vnPaginateRef = ref();
|
||||
const addressFilter = {
|
||||
fields: [
|
||||
'id',
|
||||
|
|
@ -27,6 +32,11 @@ const addressFilter = {
|
|||
'isEqualizated',
|
||||
'isLogifloraAllowed',
|
||||
'postalCode',
|
||||
'agencyModeFk',
|
||||
'longitude',
|
||||
'latitude',
|
||||
'incotermsFk',
|
||||
'customsAgentFk',
|
||||
],
|
||||
order: ['isDefaultAddress DESC', 'isActive DESC', 'id DESC', 'nickname ASC'],
|
||||
include: [
|
||||
|
|
@ -48,14 +58,15 @@ const addressFilter = {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'agencyMode',
|
||||
scope: {
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
const { id } = route.params;
|
||||
getClientData(id);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(newValue) => {
|
||||
|
|
@ -65,12 +76,8 @@ watch(
|
|||
);
|
||||
|
||||
const getClientData = async (id) => {
|
||||
try {
|
||||
const { data } = await axios.get(`Clients/${id}`);
|
||||
client.value = data;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
const { data } = await axios.get(`Clients/${id}`);
|
||||
client.value = data;
|
||||
};
|
||||
|
||||
const isDefaultAddress = (address) => {
|
||||
|
|
@ -88,35 +95,38 @@ const setDefault = (address) => {
|
|||
});
|
||||
};
|
||||
|
||||
const sortAddresses = (data) => {
|
||||
const sortAddresses = async (data) => {
|
||||
await getClientData(route.params.id);
|
||||
if (!client.value || !data) return;
|
||||
addresses.value = data.sort((a, b) => {
|
||||
return isDefaultAddress(b) - isDefaultAddress(a);
|
||||
});
|
||||
openAddressForm();
|
||||
};
|
||||
|
||||
const toCustomerAddressCreate = () => {
|
||||
router.push({ name: 'CustomerAddressCreate' });
|
||||
};
|
||||
|
||||
const toCustomerAddressEdit = (addressId) => {
|
||||
router.push({
|
||||
name: 'CustomerAddressEdit',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
addressId,
|
||||
},
|
||||
});
|
||||
};
|
||||
function openAddressForm() {
|
||||
console.log('route.query: ', route.query);
|
||||
if (route.query.addressId) {
|
||||
console.log('addresses.value: ', addresses.value);
|
||||
const address = addresses.value.find(
|
||||
(address) => address.id == +route.query.addressId,
|
||||
);
|
||||
console.log('address: ', address);
|
||||
if (address) {
|
||||
showFormEdit.value = true;
|
||||
showFormEditModel.value = address;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
ref="vnPaginateRef"
|
||||
@on-fetch="sortAddresses"
|
||||
auto-load
|
||||
data-key="CustomerAddresses"
|
||||
order="id DESC"
|
||||
ref="vnPaginateRef"
|
||||
:filter="addressFilter"
|
||||
:url="`Clients/${route.params.id}/addresses`"
|
||||
/>
|
||||
|
|
@ -131,7 +141,7 @@ const toCustomerAddressEdit = (addressId) => {
|
|||
'q-mb-md': index < addresses.length - 1,
|
||||
'item-disabled': !item.isActive,
|
||||
}"
|
||||
@click="toCustomerAddressEdit(item.id)"
|
||||
@click="(showFormEdit = !showFormEdit) && (showFormEditModel = item)"
|
||||
>
|
||||
<div class="q-ml-xs q-mr-md flex items-center">
|
||||
<QIcon
|
||||
|
|
@ -200,19 +210,18 @@ const toCustomerAddressEdit = (addressId) => {
|
|||
v-for="(observation, obIndex) in item.observations"
|
||||
>
|
||||
<div class="text-weight-bold q-mr-sm">
|
||||
{{ observation.observationType.description }}:
|
||||
{{ observation?.observationType?.description }}:
|
||||
</div>
|
||||
<div>{{ observation.description }}</div>
|
||||
<div>{{ observation?.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</div>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn
|
||||
@click.stop="toCustomerAddressCreate()"
|
||||
@click.stop="showFormCreate = !showFormCreate"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
|
|
@ -222,6 +231,28 @@ const toCustomerAddressEdit = (addressId) => {
|
|||
{{ t('New consignee') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
<QDialog v-model="showFormEdit" :full-width="true">
|
||||
<CustomerAddressEdit
|
||||
:id="showFormEditModel.id"
|
||||
v-model="showFormEditModel"
|
||||
@on-data-saved="() => vnPaginateRef.fetch()"
|
||||
/>
|
||||
</QDialog>
|
||||
<QDialog v-model="showFormCreate" :full-width="true">
|
||||
<CustomerAddressForm
|
||||
:is-create="true"
|
||||
:form-initial-data="{
|
||||
isDefaultAddress: false,
|
||||
isActive: true,
|
||||
isEqualizated: false,
|
||||
isLogifloraAllowed: false,
|
||||
}"
|
||||
:observe-form-changes="false"
|
||||
:url-create="`Clients/${route.params.id}/createAddress`"
|
||||
model="client"
|
||||
@on-data-saved="() => vnPaginateRef.fetch()"
|
||||
/>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,14 @@ import { useI18n } from 'vue-i18n';
|
|||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import axios from 'axios';
|
||||
import VnLocation from 'src/components/common/VnLocation.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import CustomerAddressForm from './CustomerAddressForm.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
||||
import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
|
@ -22,31 +20,31 @@ const quasar = useQuasar();
|
|||
const urlUpdate = ref('');
|
||||
const agencyModes = ref([]);
|
||||
const incoterms = ref([]);
|
||||
const customsAgents = ref([]);
|
||||
const observationTypes = ref([]);
|
||||
const notes = ref([]);
|
||||
const customsAgents = ref([]);
|
||||
let originalNotes = [];
|
||||
const deletes = ref([]);
|
||||
|
||||
const model = defineModel({ type: Object });
|
||||
const notes = ref(model.value.observations || []);
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.addressId}`;
|
||||
urlUpdate.value = `Clients/${route.params.id}/updateAddress/${$props.id}`;
|
||||
});
|
||||
|
||||
const getData = async (observations) => {
|
||||
observationTypes.value = observations;
|
||||
|
||||
if (observationTypes.value.length) {
|
||||
const filter = {
|
||||
fields: ['id', 'addressFk', 'observationTypeFk', 'description'],
|
||||
where: { addressFk: `${route.params.addressId}` },
|
||||
};
|
||||
const { data } = await axios.get('AddressObservations', {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
|
||||
if (data.length) {
|
||||
originalNotes = data;
|
||||
notes.value = originalNotes
|
||||
if (notes.value.length) {
|
||||
originalNotes = JSON.parse(JSON.stringify(notes.value));
|
||||
notes.value = notes.value
|
||||
.map((observation) => {
|
||||
const type = observationTypes.value.find(
|
||||
(type) => type.id === observation.observationTypeFk,
|
||||
|
|
@ -56,7 +54,7 @@ const getData = async (observations) => {
|
|||
$isNew: false,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
addressFk: `${route.params.addressId}`,
|
||||
addressFk: `${$props.id}`,
|
||||
description: observation.description,
|
||||
id: observation.id,
|
||||
observationTypeFk: type.id,
|
||||
|
|
@ -68,22 +66,6 @@ const getData = async (observations) => {
|
|||
}
|
||||
};
|
||||
|
||||
const addNote = () => {
|
||||
notes.value.push({
|
||||
$isNew: true,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
addressFk: `${route.params.addressId}`,
|
||||
description: '',
|
||||
observationTypeFk: '',
|
||||
});
|
||||
};
|
||||
|
||||
const deleteNote = (id, index) => {
|
||||
deletes.value.push(id);
|
||||
notes.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const updateAddress = async (data) => {
|
||||
await axios.patch(urlUpdate.value, data);
|
||||
};
|
||||
|
|
@ -116,8 +98,9 @@ function cleanPayload(payload) {
|
|||
async function updateAll({ data, payload }) {
|
||||
await updateObservations(payload);
|
||||
await updateAddress(data);
|
||||
toCustomerAddress();
|
||||
emit('onDataSaved');
|
||||
}
|
||||
|
||||
function getPayload() {
|
||||
return {
|
||||
creates: notes.value.filter((note) => note.$isNew),
|
||||
|
|
@ -162,23 +145,21 @@ async function handleDialog(data) {
|
|||
}
|
||||
}
|
||||
|
||||
const toCustomerAddress = () => {
|
||||
notes.value = [];
|
||||
deletes.value = [];
|
||||
router.push({
|
||||
name: 'CustomerAddress',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
},
|
||||
const addNote = () => {
|
||||
notes.value.push({
|
||||
$isNew: true,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
addressFk: `${$props.id}`,
|
||||
description: '',
|
||||
observationTypeFk: '',
|
||||
});
|
||||
};
|
||||
function handleLocation(data, location) {
|
||||
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||
data.postalCode = code;
|
||||
data.city = town;
|
||||
data.provinceFk = provinceFk;
|
||||
data.countryFk = countryFk;
|
||||
}
|
||||
|
||||
const deleteNote = (id, index) => {
|
||||
deletes.value.push(id);
|
||||
notes.value.splice(index, 1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -194,207 +175,76 @@ function handleLocation(data, location) {
|
|||
url="CustomsAgents"
|
||||
/>
|
||||
<FetchData @on-fetch="getData" auto-load url="ObservationTypes" />
|
||||
|
||||
<FormModel
|
||||
:observe-form-changes="false"
|
||||
<CustomerAddressForm
|
||||
:url-update="urlUpdate"
|
||||
:url="`Addresses/${route.params.addressId}`"
|
||||
:form-initial-data="model"
|
||||
:save-fn="handleDialog"
|
||||
auto-load
|
||||
>
|
||||
<template #moreActions>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
@click="toCustomerAddress"
|
||||
color="primary"
|
||||
flat
|
||||
icon="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #form="{ data, validate }">
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<QCheckbox :label="t('Enabled')" v-model="data.isActive" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<QCheckbox
|
||||
:label="t('Is equalizated')"
|
||||
v-model="data.isEqualizated"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QCheckbox
|
||||
:label="t('Is Loginflora allowed')"
|
||||
v-model="data.isLogifloraAllowed"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Street')" clearable v-model="data.street" />
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnLocation
|
||||
:rules="validate('Worker.postcode')"
|
||||
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
||||
:location="{
|
||||
postcode: data.postalCode,
|
||||
city: data.city,
|
||||
province: data.province,
|
||||
country: data.province?.country,
|
||||
}"
|
||||
@update:model-value="(location) => handleLocation(data, location)"
|
||||
></VnLocation>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
:label="t('Agency')"
|
||||
:options="agencyModes"
|
||||
:rules="validate('route.agencyFk')"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.agencyModeFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Phone')" clearable v-model="data.phone" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('Incoterms')"
|
||||
:options="incoterms"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
v-model="data.incotermsFk"
|
||||
/>
|
||||
<VnSelectDialog
|
||||
:label="t('Customs agent')"
|
||||
:options="customsAgents"
|
||||
hide-selected
|
||||
option-label="fiscalName"
|
||||
option-value="id"
|
||||
v-model="data.customsAgentFk"
|
||||
:tooltip="t('New customs agent')"
|
||||
<template #more-form="{ validate }">
|
||||
<div class="column">
|
||||
<h4 class="q-mb-xs">{{ t('Notes') }}</h4>
|
||||
<VnRow
|
||||
v-if="!isPopup"
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
v-for="(note, index) in notes"
|
||||
>
|
||||
<template #form>
|
||||
<CustomerNewCustomsAgent />
|
||||
</template>
|
||||
</VnSelectDialog>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputNumber
|
||||
:label="t('Longitude')"
|
||||
clearable
|
||||
v-model="data.longitude"
|
||||
:decimal-places="7"
|
||||
:positive="false"
|
||||
/>
|
||||
<VnInputNumber
|
||||
:label="t('Latitude')"
|
||||
clearable
|
||||
v-model="data.latitude"
|
||||
:decimal-places="7"
|
||||
:positive="false"
|
||||
/>
|
||||
</VnRow>
|
||||
<h4 class="q-mb-xs">{{ t('Notes') }}</h4>
|
||||
<VnRow
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
v-for="(note, index) in notes"
|
||||
>
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="note.observationTypeFk"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
clearable
|
||||
v-model="note.description"
|
||||
/>
|
||||
<QIcon
|
||||
:style="{ flex: 0, 'align-self': $q.screen.gt.xs ? 'end' : 'center' }"
|
||||
@click.stop="deleteNote(note.id, index)"
|
||||
class="cursor-pointer"
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="note.observationTypeFk"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
clearable
|
||||
v-model="note.description"
|
||||
/>
|
||||
<QIcon
|
||||
:style="{
|
||||
flex: 0,
|
||||
'align-self': $q.screen.gt.xs ? 'end' : 'center',
|
||||
}"
|
||||
@click.stop="deleteNote(note.id, index)"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove note') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
<QBtn
|
||||
@click.stop="addNote()"
|
||||
icon="add"
|
||||
v-shortcut="'+'"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
style="width: 10%"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove note') }}
|
||||
{{ t('Add note') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
<QBtn
|
||||
@click.stop="addNote()"
|
||||
class="cursor-pointer add-icon q-mt-md"
|
||||
flat
|
||||
icon="add"
|
||||
v-shortcut="'+'"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add note') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QBtn>
|
||||
</div>
|
||||
</template>
|
||||
</FormModel>
|
||||
</CustomerAddressForm>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-icon {
|
||||
background-color: $primary;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Enabled: Activo
|
||||
Is equalizated: Recargo de equivalencia
|
||||
Is Loginflora allowed: Compra directa en Holanda
|
||||
Consignee: Consignatario
|
||||
Street: Dirección fiscal
|
||||
Postcode: Código postal
|
||||
City: Población
|
||||
Province: Provincia
|
||||
Agency: Agencia
|
||||
Phone: Teléfono
|
||||
Mobile: Movíl
|
||||
Incoterms: Incoterms
|
||||
Customs agent: Agente de aduanas
|
||||
New customs agent: Nuevo agente de aduanas
|
||||
Notes: Notas
|
||||
Observation type: Tipo de observación
|
||||
Description: Descripción
|
||||
Add note: Añadir nota
|
||||
Remove note: Eliminar nota
|
||||
Longitude: Longitud
|
||||
Latitude: Latitud
|
||||
confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
|
||||
confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
|
||||
en:
|
||||
confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
|
||||
confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
|
||||
es:
|
||||
Notes: Notas
|
||||
Observation type: Tipo de observación
|
||||
Description: Descripción
|
||||
Add note: Añadir nota
|
||||
Remove note: Eliminar nota
|
||||
confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
|
||||
confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
|
||||
en:
|
||||
confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
|
||||
confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,35 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnLocation from 'src/components/common/VnLocation.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
||||
import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const formInitialData = reactive({ isDefaultAddress: false });
|
||||
|
||||
const urlUpdate = ref('');
|
||||
const agencyModes = ref([]);
|
||||
const incoterms = ref([]);
|
||||
const customsAgents = ref([]);
|
||||
|
||||
const toCustomerAddress = () => {
|
||||
router.push({
|
||||
name: 'CustomerAddress',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
const $props = defineProps({
|
||||
isCreate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.addressId}`;
|
||||
});
|
||||
|
||||
function handleLocation(data, location) {
|
||||
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||
data.postalCode = code;
|
||||
|
|
@ -38,33 +37,21 @@ function handleLocation(data, location) {
|
|||
data.provinceFk = provinceFk;
|
||||
data.countryFk = countryFk;
|
||||
}
|
||||
|
||||
function onAgentCreated({ id, fiscalName }, data) {
|
||||
customsAgents.value.push({ id, fiscalName });
|
||||
data.customsAgentFk = id;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (customsAgents = data)"
|
||||
auto-load
|
||||
url="CustomsAgents"
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (agencyModes = data)"
|
||||
auto-load
|
||||
url="AgencyModes/isActive"
|
||||
/>
|
||||
<FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
|
||||
|
||||
<FormModel
|
||||
:form-initial-data="formInitialData"
|
||||
:observe-form-changes="false"
|
||||
:url-create="`Clients/${route.params.id}/createAddress`"
|
||||
@on-data-saved="toCustomerAddress()"
|
||||
model="client"
|
||||
>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (customsAgents = data)"
|
||||
auto-load
|
||||
url="CustomsAgents"
|
||||
/>
|
||||
<FormModelPopup v-bind="$attrs" v-on="$attrs" :reload="false">
|
||||
<template #moreActions>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
|
|
@ -74,34 +61,49 @@ function onAgentCreated({ id, fiscalName }, data) {
|
|||
icon="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #form="{ data, validate }">
|
||||
<QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
|
||||
|
||||
<template #form-inputs="{ data, validate }">
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('Consignee')"
|
||||
required
|
||||
clearable
|
||||
v-model="data.nickname"
|
||||
<QCheckbox
|
||||
:label="t('Default')"
|
||||
v-model="data.isDefaultAddress"
|
||||
checked-icon="star"
|
||||
unchecked-icon="star"
|
||||
indeterminate-icon="star"
|
||||
size="lg"
|
||||
:style="{
|
||||
'font-variation-settings': `'FILL' ${data.isDefaultAddress ? 1 : 0}`,
|
||||
}"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<VnInput
|
||||
:label="t('Street address')"
|
||||
clearable
|
||||
v-model="data.street"
|
||||
required
|
||||
<QCheckbox :label="t('Enabled')" v-model="data.isActive" />
|
||||
<QCheckbox
|
||||
:label="t('Is equalizated')"
|
||||
v-model="data.isEqualizated"
|
||||
data-cy="isEqualizated_form"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('Is Loginflora allowed')"
|
||||
v-model="data.isLogifloraAllowed"
|
||||
/>
|
||||
</VnRow>
|
||||
|
||||
<VnLocation
|
||||
:rules="validate('Worker.postcode')"
|
||||
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
||||
v-model="data.location"
|
||||
@update:model-value="(location) => handleLocation(data, location)"
|
||||
/>
|
||||
|
||||
<div class="row justify-between q-gutter-md q-mb-md">
|
||||
<VnRow>
|
||||
<VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
|
||||
<VnInput :label="t('Street')" clearable v-model="data.street" />
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnLocation
|
||||
:rules="validate('Worker.postcode')"
|
||||
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
||||
:location="{
|
||||
postcode: data.postalCode,
|
||||
city: data.city,
|
||||
province: data.province,
|
||||
country: data.province?.country,
|
||||
}"
|
||||
@update:model-value="(location) => handleLocation(data, location)"
|
||||
></VnLocation>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('Agency')"
|
||||
:options="agencyModes"
|
||||
|
|
@ -110,17 +112,10 @@ function onAgentCreated({ id, fiscalName }, data) {
|
|||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.agencyModeFk"
|
||||
class="col"
|
||||
/>
|
||||
<VnInput class="col" :label="t('Phone')" clearable v-model="data.phone" />
|
||||
<VnInput
|
||||
class="col"
|
||||
:label="t('Mobile')"
|
||||
clearable
|
||||
v-model="data.mobile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VnInput :label="t('Phone')" clearable v-model="data.phone" />
|
||||
<VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('Incoterms')"
|
||||
|
|
@ -130,23 +125,17 @@ function onAgentCreated({ id, fiscalName }, data) {
|
|||
option-value="code"
|
||||
v-model="data.incotermsFk"
|
||||
/>
|
||||
|
||||
<VnSelectDialog
|
||||
url="CustomsAgents"
|
||||
:label="t('Customs agent')"
|
||||
:options="customsAgents"
|
||||
hide-selected
|
||||
option-label="fiscalName"
|
||||
option-value="id"
|
||||
v-model="data.customsAgentFk"
|
||||
:tooltip="t('Create a new expense')"
|
||||
:tooltip="t('New customs agent')"
|
||||
>
|
||||
<template #form>
|
||||
<CustomerNewCustomsAgent
|
||||
@on-data-saved="
|
||||
(requestResponse) => onAgentCreated(requestResponse, data)
|
||||
"
|
||||
/>
|
||||
<CustomerNewCustomsAgent />
|
||||
</template>
|
||||
</VnSelectDialog>
|
||||
</VnRow>
|
||||
|
|
@ -166,13 +155,13 @@ function onAgentCreated({ id, fiscalName }, data) {
|
|||
:positive="false"
|
||||
/>
|
||||
</VnRow>
|
||||
<slot name="more-form" :validate />
|
||||
</template>
|
||||
</FormModel>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-icon {
|
||||
cursor: pointer;
|
||||
background-color: $primary;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
|
@ -180,9 +169,11 @@ function onAgentCreated({ id, fiscalName }, data) {
|
|||
|
||||
<i18n>
|
||||
es:
|
||||
Default: Predeterminado
|
||||
Enabled: Activo
|
||||
Is equalizated: Recargo de equivalencia
|
||||
Is Loginflora allowed: Compra directa en Holanda
|
||||
Consignee: Consignatario
|
||||
Street address: Dirección postal
|
||||
Street: Dirección fiscal
|
||||
Postcode: Código postal
|
||||
City: Población
|
||||
Province: Provincia
|
||||
|
|
@ -191,6 +182,17 @@ es:
|
|||
Mobile: Movíl
|
||||
Incoterms: Incoterms
|
||||
Customs agent: Agente de aduanas
|
||||
New customs agent: Nuevo agente de aduanas
|
||||
Notes: Notas
|
||||
Observation type: Tipo de observación
|
||||
Description: Descripción
|
||||
Add note: Añadir nota
|
||||
Remove note: Eliminar nota
|
||||
Longitude: Longitud
|
||||
Latitude: Latitud
|
||||
confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
|
||||
confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
|
||||
en:
|
||||
confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
|
||||
confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
|
||||
</i18n>
|
||||
|
|
@ -218,8 +218,9 @@ const onFormModelInit = () => {
|
|||
|
||||
const redirectToCustomerAddress = () => {
|
||||
router.push({
|
||||
name: 'CustomerAddressEditCard',
|
||||
params: { id: clientId.value, addressId: addressId.value },
|
||||
name: 'CustomerAddress',
|
||||
params: { id: clientId.value },
|
||||
query: { addressId: addressId.value },
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -75,33 +75,6 @@ const customerCard = {
|
|||
component: () =>
|
||||
import('src/pages/Customer/Card/CustomerAddress.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerAddressCreate',
|
||||
meta: {
|
||||
title: 'address-create',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Customer/components/CustomerAddressCreate.vue'),
|
||||
},
|
||||
{
|
||||
path: ':addressId',
|
||||
name: 'CustomerAddressEditCard',
|
||||
redirect: { name: 'CustomerAddressEdit' },
|
||||
children: [
|
||||
{
|
||||
path: 'edit',
|
||||
name: 'CustomerAddressEdit',
|
||||
meta: {
|
||||
title: 'addressEdit',
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Customer/components/CustomerAddressEdit.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,18 +9,18 @@ describe('Client consignee', () => {
|
|||
cy.get('.q-card').should('be.visible');
|
||||
});
|
||||
|
||||
it('check as equalizated', function () {
|
||||
it('check as equalizated', () => {
|
||||
cy.get('.q-card__section > .address-card').then(($el) => {
|
||||
let addressCards_before = $el.length;
|
||||
const addressCards_before = $el.length;
|
||||
|
||||
cy.get('.q-page-sticky > div > .q-btn').click();
|
||||
const addressName = 'test';
|
||||
cy.dataCy('Consignee_input').type(addressName);
|
||||
cy.dataCy('Location_select').click();
|
||||
cy.getOption();
|
||||
cy.dataCy('Street address_input').type('TEST ADDRESS');
|
||||
cy.get('.q-btn-group > .q-btn--standard').click();
|
||||
cy.location('href').should('contain', '#/customer/1107/address');
|
||||
cy.dataCy('Street_input').type('TEST ADDRESS');
|
||||
cy.saveCard();
|
||||
|
||||
cy.get('.q-card__section > .address-card').should(
|
||||
'have.length',
|
||||
addressCards_before + 1,
|
||||
|
|
@ -33,13 +33,11 @@ describe('Client consignee', () => {
|
|||
.should('contain', addressName)
|
||||
.click();
|
||||
});
|
||||
cy.get(
|
||||
'.q-card > :nth-child(1) > :nth-child(2) > .q-checkbox > .q-checkbox__inner',
|
||||
)
|
||||
cy.get('[data-cy="isEqualizated_form"] > .q-checkbox__inner')
|
||||
.should('have.class', 'q-checkbox__inner--falsy')
|
||||
.click();
|
||||
|
||||
cy.get('.q-btn-group > .q-btn--standard > .q-btn__content').click();
|
||||
cy.saveCard();
|
||||
cy.get(
|
||||
':nth-child(2) > :nth-child(2) > .flex > .q-mr-lg > .q-checkbox__inner',
|
||||
).should('have.class', 'q-checkbox__inner--truthy');
|
||||
|
|
|
|||
Loading…
Reference in New Issue