From 865a13aafa6215ed9c97cfefead3c928f2b898ad Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 8 Jan 2024 16:16:42 -0300
Subject: [PATCH] Submodulos de suppliers: Accounts, Contacts y Addresses

---
 src/components/CreateNewPostcodeForm.vue      |   2 +-
 src/i18n/en/index.js                          |   4 +
 src/i18n/es/index.js                          |   4 +
 src/pages/Supplier/Card/SupplierAddresses.vue |  12 +-
 .../Supplier/Card/SupplierAddressesCreate.vue | 182 ++++++++++++++++++
 src/pages/Supplier/Card/SupplierContacts.vue  |   1 +
 src/router/modules/Supplier.js                |   6 +
 7 files changed, 208 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Supplier/Card/SupplierAddressesCreate.vue

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 3504445f8..a8e999ae1 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -131,7 +131,7 @@ const onProvinceCreated = async () => {
 es:
     New postcode: Nuevo código postal
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
-    City: Ciudad
+    City: Población
     Province: Provincia
     Country: País
     Postcode: Código postal
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5682113b2..85a82ebe5 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -921,6 +921,10 @@ export default {
             street: 'Street',
             postcode: 'Postcode',
             phone: 'Phone',
+            name: 'Name',
+            city: 'City',
+            province: 'Province',
+            mobile: 'Mobile',
         },
     },
     travel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index e3a2ec5db..44ce18cc9 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -920,6 +920,10 @@ export default {
             street: 'Dirección',
             postcode: 'Código postal',
             phone: 'Teléfono',
+            name: 'Nombre',
+            city: 'Población',
+            province: 'Provincia',
+            mobile: 'Móvil',
         },
     },
     travel: {
diff --git a/src/pages/Supplier/Card/SupplierAddresses.vue b/src/pages/Supplier/Card/SupplierAddresses.vue
index 17c9e7c4c..df7cff932 100644
--- a/src/pages/Supplier/Card/SupplierAddresses.vue
+++ b/src/pages/Supplier/Card/SupplierAddresses.vue
@@ -33,7 +33,15 @@ const addressesFilter = {
 };
 
 const redirectToCreateView = () => {
-    router.push({ name: 'SupplierCreate' });
+    router.push({ name: 'SupplierAddressesCreate' });
+};
+
+const redirectToUpdateView = (addressData) => {
+    const stringifiedAddressData = JSON.stringify(addressData);
+    router.push({
+        name: 'SupplierAddressesCreate',
+        query: { addressData: stringifiedAddressData },
+    });
 };
 </script>
 
@@ -52,7 +60,7 @@ const redirectToCreateView = () => {
                         :key="row.id"
                         :title="row.nickname"
                         :id="row.id"
-                        @click="redirectToCreateView(row.id)"
+                        @click="redirectToUpdateView(row)"
                     >
                         <template #list-items>
                             <VnLv
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
new file mode 100644
index 000000000..8ad0959f5
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive, ref, onMounted, onBeforeMount } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const provincesOptions = ref([]);
+const postcodesOptions = ref([]);
+const townsLocationOptions = ref([]);
+const viewAction = ref();
+const updateAddressId = ref(null);
+const newAddressForm = reactive({
+    nickname: null,
+    street: null,
+    postalCode: null,
+    city: null,
+    provinceFk: null,
+    phone: null,
+    mobile: null,
+});
+
+const onDataSaved = () => {
+    router.push({ name: 'SupplierAddresses' });
+};
+
+const updateAddressForm = (addressData) => {
+    for (let key in newAddressForm) {
+        if (key in addressData) {
+            newAddressForm[key] = addressData[key];
+        }
+    }
+};
+
+onBeforeMount(() => {
+    viewAction.value = route.query.addressData ? 'update' : 'create';
+
+    if (viewAction.value === 'create') newAddressForm.supplierFk = route.params.id;
+});
+
+onMounted(() => {
+    if (viewAction.value === 'update' && route.query.addressData) {
+        const addressData = JSON.parse(route.query.addressData);
+        updateAddressId.value = addressData.id;
+        updateAddressForm(addressData);
+    }
+});
+</script>
+
+<template>
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="provincesFetchDataRef"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FetchData
+        ref="townsFetchDataRef"
+        @on-fetch="(data) => (townsLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <QPage>
+        <FormModel
+            model="supplierAddresses"
+            :form-initial-data="newAddressForm"
+            :url-update="
+                viewAction !== 'create' ? `SupplierAddresses/${updateAddressId}` : null
+            "
+            :url-create="viewAction === 'create' ? 'SupplierAddresses' : null"
+            :observe-form-changes="viewAction === 'create'"
+            @on-data-saved="onDataSaved()"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.nickname"
+                            :label="t('supplier.addresses.name')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            v-model="data.street"
+                            :label="t('supplier.addresses.street')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectCreate
+                            v-model="data.postalCode"
+                            :label="t('supplier.addresses.postcode')"
+                            :rules="validate('supplierAddress.postcode')"
+                            :roles-allowed-to-create="['deliveryAssistant']"
+                            :options="postcodesOptions"
+                            option-label="code"
+                            option-value="code"
+                            hide-selected
+                        >
+                            <template #form>
+                                <CustomerCreateNewPostcode
+                                    @on-data-saved="onPostcodeCreated($event)"
+                                />
+                            </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('supplier.addresses.city')"
+                            :options="townsLocationOptions"
+                            v-model="data.city"
+                            hide-selected
+                            option-label="name"
+                            option-value="id"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('supplier.addresses.province')"
+                            :options="provincesOptions"
+                            hide-selected
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            v-model="data.provinceFk"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            v-model="data.phone"
+                            :label="t('supplier.addresses.phone')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.mobile"
+                            :label="t('supplier.addresses.mobile')"
+                        />
+                    </div>
+                    <div class="col" />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
diff --git a/src/pages/Supplier/Card/SupplierContacts.vue b/src/pages/Supplier/Card/SupplierContacts.vue
index 2331bd7e9..d69b74a4c 100644
--- a/src/pages/Supplier/Card/SupplierContacts.vue
+++ b/src/pages/Supplier/Card/SupplierContacts.vue
@@ -15,6 +15,7 @@ onMounted(() => {
     if (supplierContactRef.value) supplierContactRef.value.reload();
 });
 </script>
+
 <template>
     <CrudModel
         data-key="SupplierContact"
diff --git a/src/router/modules/Supplier.js b/src/router/modules/Supplier.js
index 6ce1a7688..76b485d6b 100644
--- a/src/router/modules/Supplier.js
+++ b/src/router/modules/Supplier.js
@@ -134,6 +134,12 @@ export default {
                     component: () =>
                         import('src/pages/Supplier/Card/SupplierAddresses.vue'),
                 },
+                {
+                    path: 'address/create',
+                    name: 'SupplierAddressesCreate',
+                    component: () =>
+                        import('src/pages/Supplier/Card/SupplierAddressesCreate.vue'),
+                },
                 {
                     path: 'consumption',
                     name: 'SupplierConsumption',