Merge pull request 'Catalog view refactor' (!145) from wbuezas/hedera-web-mindshore:feature/catalog-view into beta

Reviewed-on: #145
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/ui/NewVnSearchBar.vue

@@ -53,6 +53,12 @@ const search = async () => {
             return;
         }
 
+        if (props.searchFn) {
+            const data = await props.searchFn(searchTerm.value);
+            emit('onSearch', data);
+            return;
+        }
+
         if (props.url) {
             const params = {
                 filter: props.filter,

src/pages/Ecomerce/CatalogCard.vue

@@ -37,7 +37,7 @@ const { t } = useI18n();
         >
             <div class="column" style="margin-bottom: auto">
                 <div class="text-subtitle2 ellipsis-2-lines">
-                    {{ item.name }}
+                    {{ item.item }}
                 </div>
                 <div
                     class="row justify-between text-uppercase text-subtitle1 text-grey-7"
@@ -76,7 +76,7 @@ const { t } = useI18n();
             </div>
             <div class="row justify-between items-cente q-gutter-x-xs">
                 <QBadge
-                    :label="`x${item?.prices[0]?.grouping}`"
+                    :label="`x${item.grouping}`"
                     color="grey-4"
                     class="col-2 justify-end text-body2"
                 >

src/pages/Ecomerce/CatalogView.vue

@@ -13,7 +13,7 @@ import { useRoute, useRouter } from 'vue-router';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
-import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
+import VnSearchBar from 'src/components/ui/NewVnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
 import { useUserStore } from 'stores/user';
@@ -21,7 +21,6 @@ import { storeToRefs } from 'pinia';
 import { formatDateTitle, currency } from 'src/lib/filters.js';
 import useNotify from 'src/composables/useNotify.js';
 import debounce from 'src/utils/debouncer.js';
-import { fetch } from 'src/composables/serviceUtils';
 
 const jApi = inject('jApi');
 const api = inject('api');
@@ -58,99 +57,49 @@ const producer = ref(null);
 const origin = ref(null);
 const subcategory = ref(null);
 // Order by options
-const orderBy = ref({
+
-    field: 'relevancy DESC, name',
+const orderBy = ref('i.relevancy DESC, longName');
-    way: 'ASC',
-    isTag: false
-});
 const orderByOptions = ref([
     {
         label: t('relevancy'),
-        value: {
+        value: 'i.relevancy DESC, longName'
-            field: 'relevancy DESC, name',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('name'),
-        value: {
+        value: 'longName ASC'
-            field: 'name',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('lowerSize'),
-        value: {
+        value: 'size ASC'
-            field: 'i.size',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('higherSize'),
-        value: {
+        value: 'size DESC'
-            field: 'i.size',
-            way: 'DESC',
-            isTag: false
-        }
     },
     {
         label: t('lowerPrice'),
-        value: {
+        value: 'price ASC'
-            field: 'price',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('higherPrice'),
-        value: {
+        value: 'price DESC'
-            field: 'price',
-            way: 'DESC',
-            isTag: false
-        }
     },
     {
         label: t('available'),
-        value: {
+        value: 'available'
-            field: 'available',
-            way: 'ASC',
-            isTag: false
-        }
-    },
-    {
-        label: t('color'),
-        value: {
-            field: 'i.inkFk',
-            way: 'ASC',
-            isTag: false
-        }
     },
+    { label: t('color'), value: 'ink ASC' },
     {
         label: t('producer'),
-        value: {
+        value: 'producer ASC'
-            field: 'producerFk',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('origin'),
-        value: {
+        value: 'origin ASC'
-            field: 'originFk',
-            way: 'ASC',
-            isTag: false
-        }
     },
     {
         label: t('category'),
-        value: {
+        value: 'category ASC'
-            field: 'categoryFk',
-            way: 'ASC',
-            isTag: false
-        }
     }
 ]);
 
@@ -241,11 +190,7 @@ const selectedOrderBy = computed({
         if (value) {
             orderBy.value = value;
         } else {
-            orderBy.value = {
+            orderBy.value = 'i.relevancy DESC, longName';
-                field: 'relevancy DESC, name',
-                way: 'ASC',
-                isTag: false
-            };
         }
         debouncedGetItems();
     }
@@ -323,44 +268,42 @@ const getFilters = async () => {
     await Promise.allSettled(promises);
 };
 
-const getItemExprBuilder = (param, value) => {
+const getItems = async searchValue => {
-    if (param === 'orderFk' || param === 'orderBy') return;
-    else return { [param]: value };
-};
-
-const getItems = async () => {
     try {
-        if (!basketOrderId.value || !isSomeFilterSelected.value) return;
+        if (
+            !basketOrderId.value ||
+            !isSomeFilterSelected.value ||
+            loading.value
+        )
+            return;
+
         loading.value = true;
 
         const params = {
             orderFk: basketOrderId.value,
-            orderBy: JSON.stringify({
+            orderBy: selectedOrderBy.value,
-                field: selectedOrderBy.value.field,
+            search: searchValue,
-                way: selectedOrderBy.value.way,
-                isTag: selectedOrderBy.value.isTag
-            }),
-            typeFk: selectedType.value,
             categoryFk: selectedCategory.value,
+            typeFk: selectedType.value,
             inkFk: selectedColor.value,
             producerFk: selectedProducer.value,
             originFk: selectedOrigin.value
         };
-        const { data } = await fetch({
+
-            url: 'Orders/catalogFilter',
+        const { data } = await api.get('Items/catalog', {
-            params,
+            params
-            exprBuilder: getItemExprBuilder
         });
 
         items.value = data;
         await onItemsFetched();
         loading.value = false;
+        return data;
     } catch (error) {
         console.error('Error getting items:', error);
     }
 };
 
-const debouncedGetItems = debounce(getItems, 400);
+const debouncedGetItems = searchValue => debounce(getItems(searchValue), 400);
 const debouncedGetFilters = debounce(getFilters, 400);
 
 const getOrder = async () => {
@@ -749,6 +692,7 @@ onBeforeUnmount(() => appStore.resetCustomTitle());
     <Teleport v-if="isHeaderMounted" to="#actions">
         <div class="row">
             <VnSearchBar
+                :search-fn="debouncedGetItems"
                 @on-search-error="
                     () => {
                         items = [];