- catalogo avanti, parte 1

src/views/ecommerce/catalogo/catalogo.ts

@@ -11,12 +11,13 @@ import { costanti } from '@costanti'
 
 import { shared_consts } from '@/common/shared_vuejs'
 import { CProductCard } from '@src/components/CProductCard'
+import { CCatalogoCard } from '@src/components/CCatalogoCard'
 import { CSelectUserActive } from '@src/components/CSelectUserActive'
 import { IProduct } from '@src/model'
 
 export default defineComponent({
   name: 'Catalogo',
-  components: { CProductCard, CSelectUserActive },
+  components: { CCatalogoCard, CProductCard, CSelectUserActive },
   props: {},
   setup() {
     const userStore = useUserStore()
@@ -27,19 +28,39 @@ export default defineComponent({
     const { t } = useI18n()
 
     const search = ref('')
+    
+    const filter = ref(<any>{
+      author: '',
+      publisher: '',
+      type: '',
+      ageGroup: ''
+    })
 
     const cosa = ref(0)
     const cat = ref('')
+    const idGasSel = ref('')
     const loadpage = ref(false)
     const refreshpage = ref(false)
+    const show_hide = ref(false)
 
     const arrProducts = ref<any>([])
 
+    const numRecLoaded = ref(0)
+
+
     // Create a ref for the component to fix
     const componentToFixRef = ref(<any>null);
 
     const isFixed = ref(false);
 
+    const arrLoaded = computed(() => {
+      if (arrProducts.value && numRecLoaded.value)
+        return arrProducts.value.slice(0, numRecLoaded.value)
+      else {
+        return []
+      }
+    })
+
     // Register the scroll event on component mount
     const handleScroll = () => {
       const scrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -54,6 +75,11 @@ export default defineComponent({
     watch(() => cat.value, (newval, oldval) => {
       calcArrProducts()
     })
+
+    watch(() => idGasSel.value, (newval, oldval) => {
+      calcArrProducts()
+    })
+
     watch(() => search.value, (newval, oldval) => {
       calcArrProducts()
       if (tools.scrollTop() > 300) {
@@ -69,30 +95,44 @@ export default defineComponent({
     })
 
     function calcArrProducts() {
+      // console.log('calcArrProducts')
+
       refreshpage.value = true
       let arrprod = productStore.getProducts(cosa.value)
       let catstr = cat.value;
+      let gasselstr = ''
+      if (cosa.value === shared_consts.PROD.GAS) {
+        gasselstr = idGasSel.value
+      }
       let lowerSearchText = search.value.toLowerCase().trim();
-      if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
+      if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr && (!gasselstr && (cosa.value !== shared_consts.PROD.GAS))) {
 
       } else {
 
         arrprod = arrprod.filter((product: IProduct) => {
-          let lowerName = product.productInfo.name!.toLowerCase();
-          let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
+          if (product && product.productInfo) {
+            let lowerName = product.productInfo.name!.toLowerCase();
+            let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
 
-          // Use a regular expression to match whole words
-          let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
-          let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
+            let productgassel = true
+            if (gasselstr || (cosa.value === shared_consts.PROD.GAS)) {
+              productgassel = (product.idGasordine === gasselstr)
+            }
 
-          // Check if any word in lowerName starts with lowerSearchText
-          let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
+            // Use a regular expression to match whole words
+            let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
+            let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
 
-          return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
+            // Check if any word in lowerName starts with lowerSearchText
+            let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
+
+            return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria && productgassel;
+          }
         });
       }
 
       arrProducts.value = arrprod
+      loaddata()
       refreshpage.value = false
     }
 
@@ -115,12 +155,21 @@ export default defineComponent({
     async function mounted() {
       loadpage.value = false
       await productStore.loadProducts()
-      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
+      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.GAS, true)
+      if (cosa.value === shared_consts.PROD.TUTTI)
+        cosa.value = shared_consts.PROD.GAS
+
       // Inizializza
       loadpage.value = true
       window.addEventListener('scroll', handleScroll);
 
       calcArrProducts()
+
+      loaddata()
+    }
+
+    function loaddata() {
+      numRecLoaded.value = 20
     }
 
     // Remove the event listener on component destroy
@@ -138,6 +187,26 @@ export default defineComponent({
       return riscat
     }
 
+
+    function onLoadScroll(index: number, done: any) {
+      if (index >= 1) {
+        if (numRecLoaded.value < arrProducts.value.length) {
+
+          const step = 10
+          let mynrec = numRecLoaded.value + step
+
+          if (mynrec > arrProducts.value.length)
+            mynrec = arrProducts.value.length
+
+          numRecLoaded.value = mynrec
+
+        }
+        done()
+      } else {
+        done(true)
+      }
+    }
+
     onMounted(mounted)
 
     return {
@@ -150,6 +219,7 @@ export default defineComponent({
       shared_consts,
       getCatProds,
       cat,
+      idGasSel,
       productStore,
       t,
       loadpage,
@@ -157,6 +227,11 @@ export default defineComponent({
       componentToFixRef,
       isFixed,
       arrProducts,
+      show_hide,
+      onLoadScroll,
+      numRecLoaded,
+      arrLoaded,
+      filter,
     }
   }
 })