forked from verdnatura/salix-front
315 lines
10 KiB
Vue
315 lines
10 KiB
Vue
<script setup>
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
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 VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
|
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
|
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
|
import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const urlUpdate = ref('');
|
|
const postcodesOptions = ref([]);
|
|
const agencyModes = ref([]);
|
|
const incoterms = ref([]);
|
|
const customsAgents = ref([]);
|
|
const observationTypes = ref([]);
|
|
const notes = ref([]);
|
|
const deletes = ref([]);
|
|
|
|
onBeforeMount(() => {
|
|
urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.addressId}`;
|
|
});
|
|
|
|
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) {
|
|
notes.value = data
|
|
.map((observation) => {
|
|
const type = observationTypes.value.find(
|
|
(type) => type.id === observation.observationTypeFk
|
|
);
|
|
return type
|
|
? {
|
|
$isNew: false,
|
|
$oldData: null,
|
|
$orgIndex: null,
|
|
addressFk: `${route.params.addressId}`,
|
|
description: observation.description,
|
|
id: observation.id,
|
|
observationTypeFk: type.id,
|
|
}
|
|
: null;
|
|
})
|
|
.filter((item) => item !== null);
|
|
}
|
|
}
|
|
};
|
|
|
|
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 onDataSaved = async () => {
|
|
let payload = {};
|
|
const creates = notes.value.filter((note) => note.$isNew);
|
|
if (creates.length) {
|
|
payload.creates = creates;
|
|
}
|
|
if (deletes.value.length) {
|
|
payload.deletes = deletes.value;
|
|
}
|
|
await axios.post('AddressObservations/crud', payload);
|
|
notes.value = [];
|
|
deletes.value = [];
|
|
toCustomerAddress();
|
|
};
|
|
|
|
const toCustomerAddress = () => {
|
|
router.push({
|
|
name: 'CustomerAddress',
|
|
params: {
|
|
id: route.params.id,
|
|
},
|
|
});
|
|
};
|
|
function handleLocation(data, location) {
|
|
const { town, code, provinceFk, countryFk } = location ?? {};
|
|
data.postalCode = code;
|
|
data.city = town;
|
|
data.provinceFk = provinceFk;
|
|
data.countryFk = countryFk;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<fetch-data
|
|
@on-fetch="(data) => (agencyModes = data)"
|
|
auto-load
|
|
url="AgencyModes/isActive"
|
|
/>
|
|
<fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
|
|
<fetch-data
|
|
@on-fetch="(data) => (customsAgents = data)"
|
|
auto-load
|
|
url="CustomsAgents"
|
|
/>
|
|
<fetch-data @on-fetch="getData" auto-load url="ObservationTypes" />
|
|
|
|
<FormModel
|
|
:observe-form-changes="false"
|
|
:url-update="urlUpdate"
|
|
:url="`Addresses/${route.params.addressId}`"
|
|
@on-data-saved="onDataSaved()"
|
|
auto-load
|
|
model="client"
|
|
>
|
|
<template #moreActions>
|
|
<QBtn
|
|
:label="t('globals.cancel')"
|
|
@click="toCustomerAddress"
|
|
color="primary"
|
|
flat
|
|
icon="close"
|
|
/>
|
|
</template>
|
|
|
|
<template #form="{ data, validate }">
|
|
<VnRow class="row q-gutter-md q-mb-md">
|
|
<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 class="row q-gutter-md q-mb-md">
|
|
<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 class="row q-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<VnLocation
|
|
:rules="validate('Worker.postcode')"
|
|
:roles-allowed-to-create="['deliveryAssistant']"
|
|
:options="postcodesOptions"
|
|
v-model="data.postalCode"
|
|
@update:model-value="(location) => handleLocation(data, location)"
|
|
></VnLocation>
|
|
</div>
|
|
</VnRow>
|
|
|
|
<VnRow class="row q-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<VnSelectFilter
|
|
: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 class="row q-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<VnSelectFilter
|
|
:label="t('Incoterms')"
|
|
:options="incoterms"
|
|
hide-selected
|
|
option-label="name"
|
|
option-value="code"
|
|
v-model="data.incotermsFk"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<VnSelectDialog
|
|
:label="t('Customs agent')"
|
|
:options="customsAgents"
|
|
hide-selected
|
|
option-label="fiscalName"
|
|
option-value="id"
|
|
v-model="data.customsAgentFk"
|
|
>
|
|
<template #form>
|
|
<CustomsNewCustomsAgent />
|
|
</template>
|
|
</VnSelectDialog>
|
|
</div>
|
|
</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"
|
|
>
|
|
<div class="col">
|
|
<VnSelectFilter
|
|
:label="t('Observation type')"
|
|
:options="observationTypes"
|
|
hide-selected
|
|
option-label="description"
|
|
option-value="id"
|
|
v-model="note.observationTypeFk"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<VnInput
|
|
:label="t('Description')"
|
|
:rules="validate('route.description')"
|
|
clearable
|
|
v-model="note.description"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<QIcon
|
|
@click.stop="deleteNote(note.id, index)"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
name="delete"
|
|
size="sm"
|
|
>
|
|
<QTooltip>
|
|
{{ t('Remove note') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
</VnRow>
|
|
|
|
<QIcon
|
|
@click.stop="addNote()"
|
|
class="cursor-pointer add-icon q-mt-md"
|
|
name="add"
|
|
size="sm"
|
|
>
|
|
<QTooltip>
|
|
{{ t('Add note') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</template>
|
|
</FormModel>
|
|
</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
|
|
Notes: Notas
|
|
Observation type: Tipo de observación
|
|
Description: Descripción
|
|
Add note: Añadir nota
|
|
Remove note: Eliminar nota
|
|
</i18n>
|