refactor: userStore, JSON loopback filter, `fields`, etc

src/pages/Ecomerce/PendingOrders.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from 'vue';
+import { ref, inject, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -10,6 +10,7 @@ import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 
 const jApi = inject('jApi');
@@ -18,6 +19,7 @@ const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 const router = useRouter();
 
@@ -27,49 +29,55 @@ const orders = ref([]);
 const getOrders = async () => {
     try {
         loading.value = true;
-        const ordersResponse = await jApi.query(
-            `SELECT o.id, o.sent, o.deliveryMethodFk, o.taxableBase,
-            a.nickname, am.description agency
-            FROM myOrder o
-            JOIN myAddress a ON a.id = o.addressFk
-            JOIN vn.agencyMode am ON am.id = o.agencyModeFk
-            WHERE NOT o.isConfirmed
-            ORDER BY o.sent DESC`
-        );
-        console.log('old ordersResponse', ordersResponse);
-        // orders.value = ordersResponse;
 
-        const userId = await jApi.getValue('select account.myUser_getId()');
-        console.log('userId', userId);
+        const clientFk = userStore?.user?.id;
 
-        // const userId = 9;
-        const queryParams = new URLSearchParams([
-          ['filter[include]', 'address'],
-          ['filter[include]', 'agencyMode'],
-          ['filter[where][isConfirmed]', 0],
-          ['filter[where][source_app]', 'WEB'],
-          ['filter[where][clientFk]', userId], // order.customer_id in DB, renamed in loopback to clientFk
-          ['filter[where][address.clientFk]', userId], // address.clientFk
-        ]);
-        const salixUrl = `Orders?${queryParams}`;
+        const filter = {
+          where: {
+            clientFk,
+            'address.clientFk': clientFk,
+            isConfirmed: 0,
+            source_app: 'WEB',
+          },
+          include: [
+            {
+              relation: 'address',
+              scope: {
+                fields: ['nickname', 'city'],
+              }
+            },
+            {
+              relation: 'agencyMode',
+              scope: {
+                fields: ['description'],
+              }
+            },
+          ],
+          fields: [
+            'id',
+            'landed',
+            'delivery_method_id',
+            'taxableBase',
+            'addressFk',
+            'agencyModeFk'
+          ]
+        };
 
-        console.log('salixUrl', salixUrl);
+        const { data: salixOrders } = await api.get('Orders', {
+          params: {
+            filter: JSON.stringify(filter)
+          }
+        });
 
-        const salixOrders = await api.get(salixUrl);
-
-        console.log('salixOrders', salixOrders);
-
-        const salixOrdersMapped = salixOrders.data.map(order => ({
+        const salixOrdersMapped = salixOrders.map(order => ({
           id: order.id,
-          sent: order.landed, // the other API converts it to a js Date automagically!
+          sent: order.landed,
           deliveryMethodFk: order.delivery_method_id,
-          taxableBase: order.taxableBase, // currently missing from the salix mapping
+          taxableBase: order.taxableBase,
           nickname: order.address.nickname,
           agency: order.agencyMode.description,
         }))
 
-        console.log('salixOrdersMapped', salixOrdersMapped);
-
         orders.value = salixOrdersMapped;
 
         loading.value = false;
@@ -100,9 +108,16 @@ const loadOrder = orderId => {
     router.push({ name: 'catalog' });
 };
 
-onMounted(async () => {
-    getOrders();
-});
+watch(
+  () => userStore?.user?.id,
+  async userId => {
+    if (userId) {
+      getOrders();
+    }
+  },
+  { immediate: true }
+);
+
 </script>
 
 <template>