From d2ee8a98eb754f93cc4348f9cd2feb7566fdc6cb Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 11 Jan 2024 08:25:59 -0500
Subject: [PATCH 1/4] Se crea la tarjeta que muestra el listado de
 consignatarios existentes y la tarjeta de creacion

---
 .../Customer/Card/CustomerConsigneeCreate.vue | 241 ++++++++++++++++++
 .../Customer/Card/CustomerConsigneeEdit.vue   |   3 +
 .../Customer/Card/CustomerConsignees.vue      | 112 +++++++-
 src/router/modules/customer.js                |  43 +++-
 4 files changed, 391 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/Customer/Card/CustomerConsigneeCreate.vue
 create mode 100644 src/pages/Customer/Card/CustomerConsigneeEdit.vue

diff --git a/src/pages/Customer/Card/CustomerConsigneeCreate.vue b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
new file mode 100644
index 000000000..69d478b6f
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
@@ -0,0 +1,241 @@
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+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 CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const formInitialData = reactive({
+    isDefaultAddress: false,
+    nickname: null,
+    street: null,
+    postalCode: null,
+    city: null,
+    provinceFk: null,
+    agencyModeFk: null,
+    phone: null,
+    mobile: null,
+    incotermsFk: null,
+    customsAgentFk: null,
+});
+
+const agencyModes = ref([]);
+const incoterms = ref([]);
+const customsAgents = ref([]);
+const postcodeFetchDataRef = ref(null);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const postcodesOptions = ref([]);
+const urlCreate = ref('');
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createAddress`;
+});
+
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+        url="Postcodes/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <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"
+    />
+
+    <FormModel
+        :form-initial-data="formInitialData"
+        :observe-form-changes="false"
+        model="client"
+        :url-create="urlCreate"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Street address')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Postcode')"
+                        :options="postcodesOptions"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :rules="validate('Worker.postcode')"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.postalCode"
+                    >
+                        <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">
+                    <!-- ciudades -->
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="citiesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="name"
+                        v-model="data.city"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{
+                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.name} (${scope.opt.country.country})`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        :options="agencyModes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Mobile')" 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">
+                    <VnSelectFilter
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Default: Predeterminado
+    Consignee: Consignatario
+    Street address: Dirección postal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Agency: Agencia
+    Phone: Teléfono
+    Mobile: Movíl
+    Incoterms: Incoterms
+    Customs agent: Agente de aduanas
+</i18n>
diff --git a/src/pages/Customer/Card/CustomerConsigneeEdit.vue b/src/pages/Customer/Card/CustomerConsigneeEdit.vue
new file mode 100644
index 000000000..6546c527d
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerConsigneeEdit.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Customer consignee edit</div>
+</template>
diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index bab2bd1ff..5abe89589 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -1,3 +1,113 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const provincesLocation = ref([]);
+
+const setProvince = (provinceFk) => {
+    const result = provincesLocation.value.filter(
+        (province) => province.id === provinceFk
+    );
+    return result[0].name || '';
+};
+
+const toCustomerConsigneeCreate = () => {
+    router.push({ name: 'CustomerConsigneeCreate' });
+};
+
+const toCustomerConsigneeEdit = () => {
+    router.push({ name: 'CustomerConsigneeEdit' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Consignees</div>
+    <FetchData
+        @on-fetch="(data) => (provincesLocation = data)"
+        auto-load
+        url="Provinces/location"
+    />
+
+    <FormModel
+        :observe-form-changes="false"
+        :url="`Clients/${route.params.id}/addresses`"
+        auto-load
+        model="customer"
+    >
+        <template #form="{ data }">
+            <div v-if="data?.length">
+                <div v-for="(item, index) in data" :key="index">
+                    <div
+                        :class="{
+                            'consignees-card': true,
+                            'q-mb-md': index + 1 === data.length ? false : true,
+                        }"
+                    >
+                        <div class="consignees-card-icon">
+                            <QIcon name="star" size="md" color="primary" />
+                        </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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </FormModel>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss" scoped>
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+    display: flex;
+}
+.consignees-card-icon {
+    margin: 0 15px 0 5px;
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+es:
+    Is equalizated: Recargo de equivalencia
+    Is logiflora allowed: Compra directa en Holanda
+    New consignee: Nuevo consignatario
+</i18n>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 3c8445f42..752c486ee 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -152,13 +152,42 @@ export default {
                 },
                 {
                     path: 'consignees',
-                    name: 'CustomerConsignees',
-                    meta: {
-                        title: 'consignees',
-                        icon: 'vn:delivery',
-                    },
-                    component: () =>
-                        import('src/pages/Customer/Card/CustomerConsignees.vue'),
+                    name: 'ConsigneesCard',
+                    redirect: { name: 'CustomerConsignees' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'CustomerConsignees',
+                            meta: {
+                                icon: 'vn:delivery',
+                                title: 'consignees',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerConsignees.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerConsigneeCreate',
+                            meta: {
+                                title: 'consignee-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerConsigneeCreate.vue'
+                                ),
+                        },
+                        {
+                            path: 'edit',
+                            name: 'CustomerConsigneeEdit',
+                            meta: {
+                                title: 'consignee-edit',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerConsigneeEdit.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'notes',

From f9cbf03991c184d06b096e96882ae51817c049ba Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 11 Jan 2024 13:12:44 -0500
Subject: [PATCH 2/4] Se corrige el componente por comentario en pr

---
 .../Customer/Card/CustomerConsignees.vue      | 51 ++++++++++++-------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index 5abe89589..0d06c31fc 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -1,22 +1,36 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const stateStore = useStateStore();
 
+const arrayData = ref(null);
 const provincesLocation = ref([]);
 
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerConsignees', {
+        url: `Clients/${route.params.id}/addresses`,
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const data = computed(() => arrayData.value.store.data);
+
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
     );
-    return result[0].name || '';
+    return result[0]?.name || '';
 };
 
 const toCustomerConsigneeCreate = () => {
@@ -35,13 +49,8 @@ const toCustomerConsigneeEdit = () => {
         url="Provinces/location"
     />
 
-    <FormModel
-        :observe-form-changes="false"
-        :url="`Clients/${route.params.id}/addresses`"
-        auto-load
-        model="customer"
-    >
-        <template #form="{ data }">
+    <QCard class="q-pa-sm">
+        <QCardSection>
             <div v-if="data?.length">
                 <div v-for="(item, index) in data" :key="index">
                     <div
@@ -81,14 +90,20 @@ const toCustomerConsigneeEdit = () => {
                     </div>
                 </div>
             </div>
-        </template>
-    </FormModel>
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('New consignee') }}
-        </QTooltip>
-    </QPageSticky>
+        </QCardSection>
+
+        <QPageSticky :offset="[18, 18]">
+            <QBtn
+                @click.stop="toCustomerConsigneeCreate()"
+                color="primary"
+                fab
+                icon="add"
+            />
+            <QTooltip>
+                {{ t('New consignee') }}
+            </QTooltip>
+        </QPageSticky>
+    </QCard>
 </template>
 
 <style lang="scss" scoped>

From bf19ce630dd8143dc3e0f4eb38a1247c03adb287 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Fri, 12 Jan 2024 05:28:58 -0500
Subject: [PATCH 3/4] Nueva correccion por comentario

---
 .../Customer/Card/CustomerConsignees.vue      | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index 0d06c31fc..f8f6160dd 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -1,31 +1,17 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
 const provincesLocation = ref([]);
 
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerConsignees', {
-        url: `Clients/${route.params.id}/addresses`,
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
-const data = computed(() => arrayData.value.store.data);
-
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
@@ -49,14 +35,19 @@ const toCustomerConsigneeEdit = () => {
         url="Provinces/location"
     />
 
-    <QCard class="q-pa-sm">
-        <QCardSection>
-            <div v-if="data?.length">
-                <div v-for="(item, index) in data" :key="index">
+    <QCard class="q-pa-lg">
+        <VnPaginate
+            data-key="CustomerConsignees"
+            :url="`Clients/${route.params.id}/addresses`"
+            order="id"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <div v-for="(item, index) in rows" :key="index">
                     <div
                         :class="{
                             'consignees-card': true,
-                            'q-mb-md': index + 1 === data.length ? false : true,
+                            'q-mb-md': index + 1 === rows.length ? false : true,
                         }"
                     >
                         <div class="consignees-card-icon">
@@ -89,20 +80,19 @@ const toCustomerConsigneeEdit = () => {
                         </div>
                     </div>
                 </div>
-            </div>
-        </QCardSection>
-
-        <QPageSticky :offset="[18, 18]">
-            <QBtn
-                @click.stop="toCustomerConsigneeCreate()"
-                color="primary"
-                fab
-                icon="add"
-            />
-            <QTooltip>
-                {{ t('New consignee') }}
-            </QTooltip>
-        </QPageSticky>
+                <QPageSticky :offset="[18, 18]">
+                    <QBtn
+                        @click.stop="toCustomerConsigneeCreate()"
+                        color="primary"
+                        fab
+                        icon="add"
+                    />
+                    <QTooltip>
+                        {{ t('New consignee') }}
+                    </QTooltip>
+                </QPageSticky>
+            </template>
+        </VnPaginate>
     </QCard>
 </template>
 

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 4/4] 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;