src/pages/Customer/Card/CustomerAddress.vue

@@ -3,6 +3,8 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
+import axios from 'axios';
+
 import FetchData from 'components/FetchData.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
@@ -10,6 +12,7 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
+const addresses = ref([]);
 const client = ref(null);
 const provincesLocation = ref([]);
 
@@ -45,6 +48,11 @@ const addressFilter = {
     ],
 };
 
+const setRows = (data) => {
+    addresses.value = data;
+    sortAddresses();
+};
+
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
@@ -56,6 +64,24 @@ const isDefaultAddress = (address) => {
     return client?.value?.defaultAddressFk === address.id ? 1 : 0;
 };
 
+const setDefault = (address) => {
+    const url = `Clients/${route.params.id}`;
+    const payload = { defaultAddressFk: address.id };
+    axios.patch(url, payload).then((res) => {
+        if (res.data) {
+            client.value.defaultAddressFk = res.data.defaultAddressFk;
+            sortAddresses();
+        }
+    });
+};
+
+const sortAddresses = () => {
+    if (!client.value || !addresses.value) return;
+    addresses.value = addresses.value.sort((a, b) => {
+        return isDefaultAddress(b) - isDefaultAddress(a);
+    });
+};
+
 const toCustomerAddressCreate = () => {
     router.push({ name: 'CustomerAddressCreate' });
 };
@@ -72,6 +98,12 @@ const toCustomerAddressEdit = (addressId) => {
 </script>
 
 <template>
+    <FetchData
+        @on-fetch="setRows"
+        auto-load
+        :filter="addressFilter"
+        :url="`Clients/${route.params.id}/addresses`"
+    />
     <FetchData
         @on-fetch="(data) => (client = data)"
         auto-load
@@ -83,21 +115,15 @@ const toCustomerAddressEdit = (addressId) => {
         url="Provinces/location"
     />
 
-    <QCard class="q-pa-lg">
-        <VnPaginate
-            data-key="CustomerAddress"
-            :url="`Clients/${route.params.id}/addresses`"
-            order="id"
-            auto-load
-            :filter="addressFilter"
-        >
-            <template #body="{ rows }">
-                <QCard
-                    v-for="(item, index) in rows"
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg" v-if="addresses.length">
+            <QCardSection>
+                <div
+                    v-for="(item, index) in addresses"
                     :key="index"
                     :class="{
                         'address-card': true,
-                        'q-mb-md': index < rows.length - 1,
+                        'q-mb-md': index < addresses.length - 1,
                         'item-disabled': !item.isActive,
                     }"
                     @click="toCustomerAddressEdit(item.id)"
@@ -112,7 +138,18 @@ const toCustomerAddressEdit = (addressId) => {
                             color="primary"
                             name="star"
                             size="md"
-                        />
+                            @click.stop="!isDefaultAddress(item) && setDefault(item)"
+                        >
+                            <QTooltip>
+                                {{
+                                    t(
+                                        isDefaultAddress(item)
+                                            ? 'Default address'
+                                            : 'Set as default'
+                                    )
+                                }}
+                            </QTooltip>
+                        </QIcon>
                     </div>
                     <div>
                         <div class="text-weight-bold q-mb-sm">
@@ -156,10 +193,10 @@ const toCustomerAddressEdit = (addressId) => {
                             <div>{{ observation.description }}</div>
                         </div>
                     </div>
-                </QCard>
-            </template>
-        </VnPaginate>
-    </QCard>
+                </div>
+            </QCardSection>
+        </QCard>
+    </div>
 
     <QPageSticky :offset="[18, 18]">
         <QBtn @click.stop="toCustomerAddressCreate()" color="primary" fab icon="add" />
@@ -192,4 +229,6 @@ es:
     Is equalizated: Recargo de equivalencia
     Is logiflora allowed: Compra directa en Holanda
     New consignee: Nuevo consignatario
+    Default address: Consignatario predeterminado
+    Set as default: Establecer como predeterminado
 </i18n>