From 1f39c5ef5de39d294fcc9a764eb6a0267409303b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 27 Feb 2025 16:13:37 -0300
Subject: [PATCH 1/4] Refactor address list query

---
 src/pages/Account/AddressList.vue | 40 ++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index a603715c..9c2ce7a3 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
@@ -10,13 +10,15 @@ import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
+import { useUserStore } from 'stores/user';
 
 const router = useRouter();
-const jApi = inject('jApi');
+const api = inject('api');
 const { notify } = useNotify();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
 const addresses = ref([]);
@@ -40,12 +42,23 @@ const getDefaultAddress = async () => {
 
 const getActiveAddresses = async () => {
     try {
-        addresses.value = await jApi.query(
-            `SELECT a.id, a.nickname, p.name province, a.postalCode, a.city, a.street, a.isActive
-        FROM myAddress a
-        LEFT JOIN vn.province p ON p.id = a.provinceFk
-        WHERE a.isActive`
-        );
+        const filter = {
+            where: { clientFk: userStore.user.id },
+            fields: [
+                'id',
+                'nickname',
+                'postalCode',
+                'city',
+                'street',
+                'isActive'
+            ]
+        };
+        const { data } = await api.get('Addresses', {
+            params: {
+                filter: JSON.stringify(filter)
+            }
+        });
+        addresses.value = data;
     } catch (error) {
         console.error('Error getting active addresses:', error);
     }
@@ -86,8 +99,17 @@ const removeAddress = async id => {
 
 onMounted(async () => {
     getDefaultAddress();
-    getActiveAddresses();
 });
+
+watch(
+    () => userStore?.user?.id,
+    async userId => {
+        if (userId) {
+            getActiveAddresses();
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>

From 832d8bb14073b808b087b7b7f70e6c68028123f9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 28 Feb 2025 16:01:22 -0300
Subject: [PATCH 2/4] Add japi

---
 src/pages/Account/AddressList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 9c2ce7a3..7985eca2 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -14,6 +14,7 @@ import { useUserStore } from 'stores/user';
 
 const router = useRouter();
 const api = inject('api');
+const jApi = inject('jApi');
 const { notify } = useNotify();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();

From 6aee07061671075996e0df192a801d9b8c0ea69c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 28 Feb 2025 17:44:37 -0300
Subject: [PATCH 3/4] Add is active filter

---
 src/pages/Account/AddressList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 7985eca2..6116fbd0 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -44,7 +44,7 @@ const getDefaultAddress = async () => {
 const getActiveAddresses = async () => {
     try {
         const filter = {
-            where: { clientFk: userStore.user.id },
+            where: { clientFk: userStore.user.id, isActive: true },
             fields: [
                 'id',
                 'nickname',

From c20695b1eec519316c5574e5567e75cb6e6d4736 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 6 Mar 2025 10:49:39 -0300
Subject: [PATCH 4/4] Add fetch data

---
 src/components/common/FetchData.vue | 66 +++++++++++++++++++++++++++++
 src/pages/Account/AddressList.vue   | 59 ++++++++++----------------
 2 files changed, 88 insertions(+), 37 deletions(-)
 create mode 100644 src/components/common/FetchData.vue

diff --git a/src/components/common/FetchData.vue b/src/components/common/FetchData.vue
new file mode 100644
index 00000000..26ec77a4
--- /dev/null
+++ b/src/components/common/FetchData.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { onMounted, inject } from 'vue';
+
+const $props = defineProps({
+    autoLoad: {
+        type: Boolean,
+        default: false
+    },
+    url: {
+        type: String,
+        default: ''
+    },
+    filter: {
+        type: Object,
+        default: null
+    },
+    where: {
+        type: Object,
+        default: null
+    },
+    sortBy: {
+        type: String,
+        default: ''
+    },
+    limit: {
+        type: [String, Number],
+        default: ''
+    },
+    params: {
+        type: Object,
+        default: null
+    }
+});
+
+const emit = defineEmits(['onFetch']);
+const api = inject('api');
+
+defineExpose({ fetch });
+
+onMounted(async () => {
+    if ($props.autoLoad) {
+        await fetch();
+    }
+});
+
+async function fetch(fetchFilter = {}) {
+    try {
+        const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys
+        if ($props.where && !fetchFilter.where) filter.where = $props.where;
+        if ($props.sortBy) filter.order = $props.sortBy;
+        if ($props.limit) filter.limit = $props.limit;
+
+        const { data } = await api.get($props.url, {
+            params: { filter: JSON.stringify(filter), ...$props.params }
+        });
+
+        emit('onFetch', data);
+        return data;
+    } catch (e) {
+        //
+    }
+}
+</script>
+<template>
+    <template></template>
+</template>
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 6116fbd0..4a8305e8 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onMounted, inject, watch } from 'vue';
+import { ref, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
 import VnList from 'src/components/ui/VnList.vue';
+import FetchData from 'src/components/common/FetchData.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
@@ -13,7 +14,6 @@ import { storeToRefs } from 'pinia';
 import { useUserStore } from 'stores/user';
 
 const router = useRouter();
-const api = inject('api');
 const jApi = inject('jApi');
 const { notify } = useNotify();
 const { t } = useI18n();
@@ -21,6 +21,7 @@ const { openConfirmationModal } = useVnConfirm();
 const appStore = useAppStore();
 const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
+const fetchAddressesRef = ref(null);
 
 const addresses = ref([]);
 const defaultAddress = ref(null);
@@ -41,30 +42,6 @@ const getDefaultAddress = async () => {
     }
 };
 
-const getActiveAddresses = async () => {
-    try {
-        const filter = {
-            where: { clientFk: userStore.user.id, isActive: true },
-            fields: [
-                'id',
-                'nickname',
-                'postalCode',
-                'city',
-                'street',
-                'isActive'
-            ]
-        };
-        const { data } = await api.get('Addresses', {
-            params: {
-                filter: JSON.stringify(filter)
-            }
-        });
-        addresses.value = data;
-    } catch (error) {
-        console.error('Error getting active addresses:', error);
-    }
-};
-
 const changeDefaultAddress = async () => {
     if (!clientId.value) return;
     await jApi.execQuery(
@@ -91,7 +68,7 @@ const removeAddress = async id => {
                 id
             }
         );
-        getActiveAddresses();
+        fetchAddressesRef.value.fetch();
         notify(t('dataSaved'), 'positive');
     } catch (error) {
         console.error('Error removing address:', error);
@@ -101,19 +78,27 @@ const removeAddress = async id => {
 onMounted(async () => {
     getDefaultAddress();
 });
-
-watch(
-    () => userStore?.user?.id,
-    async userId => {
-        if (userId) {
-            getActiveAddresses();
-        }
-    },
-    { immediate: true }
-);
 </script>
 
 <template>
+    <FetchData
+        v-if="userStore?.user?.id"
+        ref="fetchAddressesRef"
+        url="Addresses"
+        :filter="{
+            where: { clientFk: userStore.user.id, isActive: true },
+            fields: [
+                'id',
+                'nickname',
+                'postalCode',
+                'city',
+                'street',
+                'isActive'
+            ]
+        }"
+        auto-load
+        @on-fetch="data => (addresses = data)"
+    />
     <Teleport v-if="isHeaderMounted" to="#actions">
         <QBtn
             :label="t('addAddress')"