From 207a5a590867aa2976a357768cb4ffb67f54acb6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 12 Jan 2024 10:36:42 -0300
Subject: [PATCH] changes

---
 src/components/CreateNewPostcodeForm.vue      |  4 +-
 src/components/FormModelPopup.vue             |  6 +-
 .../Customer/Card/CustomerConsigneeCreate.vue | 15 +++--
 .../Customer/Card/CustomerConsignees.vue      | 67 ++++++++++---------
 4 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 3504445f8..a9efcf8f4 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -28,8 +28,8 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 
 const onCityCreated = async () => {
diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index c314f6897..04322a3c8 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -42,8 +42,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
     closeForm();
 };
 
@@ -59,7 +59,7 @@ const closeForm = () => {
         :default-actions="false"
         :url-create="urlCreate"
         :model="model"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form="{ data, validate }">
             <span ref="closeButton" class="close-icon" v-close-popup>
diff --git a/src/pages/Customer/Card/CustomerConsigneeCreate.vue b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
index 69d478b6f..2f8ef1b97 100644
--- a/src/pages/Customer/Card/CustomerConsigneeCreate.vue
+++ b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
@@ -28,10 +28,11 @@ const formInitialData = reactive({
     customsAgentFk: null,
 });
 
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
-const postcodeFetchDataRef = ref(null);
 const citiesLocationOptions = ref([]);
 const provincesLocationOptions = ref([]);
 const postcodesOptions = ref([]);
@@ -41,18 +42,24 @@ onBeforeMount(() => {
     urlCreate.value = `Clients/${route.params.id}/createAddress`;
 });
 
-const onPostcodeCreated = async () => {
-    postcodeFetchDataRef.value.fetch();
+const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postalCode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
 };
 </script>
 
 <template>
     <FetchData
+        ref="postcodeFetchDataRef"
         @on-fetch="(data) => (postcodesOptions = data)"
         auto-load
         url="Postcodes/location"
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -110,7 +117,7 @@ const onPostcodeCreated = async () => {
                     >
                         <template #form>
                             <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event)"
+                                @on-data-saved="onPostcodeCreated($event, data)"
                             />
                         </template>
                         <template #option="scope">
diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index f8f6160dd..f412eda59 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -43,43 +44,38 @@ const toCustomerConsigneeEdit = () => {
             auto-load
         >
             <template #body="{ rows }">
-                <div v-for="(item, index) in rows" :key="index">
-                    <div
-                        :class="{
-                            'consignees-card': true,
-                            'q-mb-md': index + 1 === rows.length ? false : true,
-                        }"
-                    >
-                        <div class="consignees-card-icon">
-                            <QIcon name="star" size="md" color="primary" />
+                <QCard
+                    v-for="(item, index) in rows"
+                    :key="index"
+                    :class="['consignees-card', { 'q-mb-md': rows.length - 1 !== index }]"
+                    @click="toCustomerConsigneeEdit()"
+                >
+                    <div class="consignees-card-icon">
+                        <QIcon name="star" size="md" color="primary" />
+                    </div>
+                    <div>
+                        <div class="text-weight-bold q-mb-sm">
+                            {{ item.nickname }} - #{{ item.id }}
                         </div>
+                        <div>{{ item.street }}</div>
                         <div>
-                            <div>
-                                <div class="text-weight-bold">
-                                    {{ item.nickname }} - #{{ item.id }}
-                                </div>
-                                <div>{{ item.street }}</div>
-                                <div>
-                                    {{ item.postalCode }} - {{ item.city }},
-                                    {{ setProvince(item.provinceFk) }}
-                                </div>
-                            </div>
-                            <div class="flex">
-                                <QCheckbox
-                                    :label="t('Is equalizated')"
-                                    v-model="item.isEqualizated"
-                                    class="q-mr-lg"
-                                    @click.stop="toCustomerConsigneeEdit()"
-                                />
-                                <QCheckbox
-                                    :label="t('Is logiflora allowed')"
-                                    v-model="item.isLogifloraAllowed"
-                                    @click.stop="toCustomerConsigneeEdit()"
-                                />
-                            </div>
+                            {{ item.postalCode }} - {{ item.city }},
+                            {{ setProvince(item.provinceFk) }}
+                        </div>
+                        <div class="flex">
+                            <VnLv
+                                :label="t('Is equalizated')"
+                                :value="item.isEqualizated"
+                                class="row q-mr-lg"
+                            />
+                            <VnLv
+                                :label="t('Is logiflora allowed')"
+                                :value="item.isLogifloraAllowed"
+                                class="row"
+                            />
                         </div>
                     </div>
-                </div>
+                </QCard>
                 <QPageSticky :offset="[18, 18]">
                     <QBtn
                         @click.stop="toCustomerConsigneeCreate()"
@@ -102,6 +98,11 @@ const toCustomerConsigneeEdit = () => {
     border-radius: 10px;
     padding: 10px;
     display: flex;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--vn-light-gray);
+    }
 }
 .consignees-card-icon {
     margin: 0 15px 0 5px;