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,16 @@ 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 api = inject('api');
 const jApi = inject('jApi');
 const { notify } = useNotify();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
 const addresses = ref([]);
@@ -40,12 +43,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, 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);
     }
@@ -86,8 +100,17 @@ const removeAddress = async id => {
 
 onMounted(async () => {
     getDefaultAddress();
-    getActiveAddresses();
 });
+
+watch(
+    () => userStore?.user?.id,
+    async userId => {
+        if (userId) {
+            getActiveAddresses();
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>