AITools prime cose

src/views/ecommerce/catalogo/catalogo.scss

@@ -0,0 +1,25 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}
+
+.container{
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.prod_trov{
+  font-style: italic;
+  color: blue;
+}
+
+.fixed-group {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff; /* Customize the background color as needed */
+  z-index: 1000; /* Adjust the z-index to ensure it's above other elements */
+  transition: all 1s ease;
+}

src/views/ecommerce/catalogo/catalogo.ts

@@ -0,0 +1,163 @@
+import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount } from 'vue'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useProducts } from '@store/Products'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+
+import { shared_consts } from '@/common/shared_vuejs'
+import { CProductCard } from '@src/components/CProductCard'
+import { CSelectUserActive } from '@src/components/CSelectUserActive'
+import { IProduct } from '@src/model'
+
+export default defineComponent({
+  name: 'Catalogo',
+  components: { CProductCard, CSelectUserActive },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const productStore = useProducts()
+    const router = useRouter()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const search = ref('')
+
+    const cosa = ref(0)
+    const cat = ref('')
+    const loadpage = ref(false)
+    const refreshpage = ref(false)
+
+    const arrProducts = ref<any>([])
+
+    // Create a ref for the component to fix
+    const componentToFixRef = ref(<any>null);
+
+    const isFixed = ref(false);
+
+    // Register the scroll event on component mount
+    const handleScroll = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+      // Set a threshold value based on how much scroll is needed to fix the components
+      const threshold = 300;
+
+      // Update the isFixed ref based on the scroll position
+      isFixed.value = scrollTop > threshold;
+    };
+
+    watch(() => cat.value, (newval, oldval) => {
+      calcArrProducts()
+    })
+    watch(() => search.value, (newval, oldval) => {
+      calcArrProducts()
+      if (tools.scrollTop() > 300) {
+        tools.scrollToTopValue(300)
+      }
+    })
+
+    watch(() => cosa.value, (newval, oldval) => {
+      tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
+      if (cosa.value !== shared_consts.PROD.TUTTI)
+        cat.value = ''
+      calcArrProducts()
+    })
+
+    function calcArrProducts() {
+      refreshpage.value = true
+      let arrprod = productStore.getProducts(cosa.value)
+      let catstr = cat.value;
+      let lowerSearchText = search.value.toLowerCase().trim();
+      if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
+
+      } else {
+
+        arrprod = arrprod.filter((product: IProduct) => {
+          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');
+
+          // 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;
+        });
+      }
+
+      arrProducts.value = arrprod
+      refreshpage.value = false
+    }
+
+    /*function getProducts() {
+      let arrprod = productStore.getProducts(cosa.value)
+      if (!search.value) {
+        return arrprod
+      }
+    
+      let lowerSearchText = search.value.toLowerCase();
+      let catstr = cat.value;
+    
+      return arrprod.filter((product: IProduct) => {
+        let lowerName = product.productInfo.name!.toLowerCase();
+        const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
+        return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
+      });
+    }*/
+
+    async function mounted() {
+      loadpage.value = false
+      await productStore.loadProducts()
+      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
+      // Inizializza
+      loadpage.value = true
+      window.addEventListener('scroll', handleScroll);
+
+      calcArrProducts()
+    }
+
+    // Remove the event listener on component destroy
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', handleScroll);
+    });
+
+    function getCatProds() {
+      let arrcat = productStore.getCatProds(cosa.value)
+      let riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
+      for (const rec of arrcat) {
+        riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
+      }
+
+      return riscat
+    }
+
+    onMounted(mounted)
+
+    return {
+      userStore,
+      costanti,
+      tools,
+      toolsext,
+      search,
+      cosa,
+      shared_consts,
+      getCatProds,
+      cat,
+      productStore,
+      t,
+      loadpage,
+      refreshpage,
+      componentToFixRef,
+      isFixed,
+      arrProducts,
+    }
+  }
+})
+

src/views/ecommerce/catalogo/catalogo.vue

@@ -0,0 +1,126 @@
+<template>
+  <q-page>
+    <div class="text-center">
+      <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
+    </div>
+    <div v-if="loadpage" class="panel">
+      <!--<div>
+        <CSelectUserActive></CSelectUserActive>
+        <div class="text-center text-h7 text-blue">Filtra per:</div>
+        <div class="text-center">
+          <q-btn-toggle
+            v-model="cosa"
+            push
+            :size="tools.isMobile() ? '0.75rem' : '1rem'"
+            rounded
+            glossy
+            toggle-color="primary"
+            :options="[
+              { value: shared_consts.PROD.TUTTI, slot: 'tutti' },
+              { value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
+              { value: shared_consts.PROD.GAS, slot: 'gas' },
+            ]"
+          >
+            <template v-slot:tutti>
+              <div class="row items-center no-wrap">
+                <div class="text-center">
+                  {{ t('ecomm.tutti') }}
+                </div>
+                <q-icon right name="fas fa-check-square" />
+              </div>
+            </template>
+
+            <template v-slot:gas>
+              <div class="row items-center no-wrap">
+                <div class="text-center">
+                  {{ t('gas.ordina_sul_gas') }}
+                </div>
+                <q-icon right name="fas fa-user-friends" />
+              </div>
+            </template>
+
+            <template v-slot:bottega>
+              <div class="row items-center no-wrap">
+                <div class="text-center">
+                  {{ t('gas.bottega') }}
+                </div>
+                <q-icon right name="fas fa-store" />
+              </div>
+            </template>
+          </q-btn-toggle>
+        </div>
+      </div>-->
+
+      <div class="container">
+        <q-slide-transition>
+          <div
+            v-show="isFixed || tools.scrollTop() < 300"
+            :class="
+              'column text-center q-mx-auto q-py-sm q-mb-sm ' +
+              (isFixed ? 'fixed-group ' : '')
+            "
+            style="width: 350px; max-width: 100%"
+          >
+            <div>
+              <q-input
+                ref="componentToFixRef"
+                filled
+                stack-label
+                rounded
+                :dense="tools.isMobile() ? true : false"
+                :label="t('ecomm.code_o_text_search')"
+                v-model="search"
+                debounce="300"
+                class="q-ml-md"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </q-slide-transition>
+        <div class="row q-gutter-xs justify-center q-mx-auto">
+          <div v-for="(reccat, index) in getCatProds()" :key="index">
+            <q-btn
+              :push="cat === reccat.value"
+              dense
+              :size="tools.isMobile() ? '0.70rem' : '1rem'"
+              :icon="reccat.icon ? reccat.icon : undefined"
+              :color="cat === reccat.value ? 'primary' : undefined"
+              :text-color="cat === reccat.value ? 'white' : 'black'"
+              rounded
+              :label="reccat.label"
+              @click="cat = reccat.value"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="text-center q-py-sm prod_trov">
+          <span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
+            t('ecomm.prodotti_trovati', {
+              qta: arrProducts.length,
+              qtatot: productStore.getNumProdTot(),
+            })
+          }}</span>
+        </div>
+        <div class="row justify-around">
+          <div
+            class="q-pa-xs row items-start"
+            v-for="(product, index) in arrProducts"
+            :key="index"
+          >
+            <CProductCard :id="product._id" :complete="false" :cosa="cosa" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./catalogo.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './catalogo';
+</style>

src/views/ecommerce/catalogo/index.ts

@@ -0,0 +1 @@
+export {default as Catalogo} from './catalogo.vue'

src/views/ecommerce/index.ts

@@ -1 +1,2 @@
 export * from './productsList'
+export * from './catalogo'

src/views/toolsAI/main/index.ts

@@ -0,0 +1 @@
+export {default as toolsAI} from './toolsAI.vue'

src/views/toolsAI/main/main.scss

@@ -0,0 +1,25 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}
+
+.container{
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.prod_trov{
+  font-style: italic;
+  color: blue;
+}
+
+.fixed-group {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff; /* Customize the background color as needed */
+  z-index: 1000; /* Adjust the z-index to ensure it's above other elements */
+  transition: all 1s ease;
+}

src/views/toolsAI/main/main.ts

@@ -0,0 +1,162 @@
+import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount } from 'vue'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useProducts } from '@store/Products'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+
+import { shared_consts } from '@/common/shared_vuejs'
+import { CAITools } from '@src/components/CAITools'
+import { IProduct } from '@src/model'
+
+export default defineComponent({
+  name: 'ToolsAIMain',
+  components: { CAITools },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const productStore = useProducts()
+    const router = useRouter()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const search = ref('')
+
+    const cosa = ref(0)
+    const cat = ref('')
+    const loadpage = ref(false)
+    const refreshpage = ref(false)
+
+    const arrProducts = ref<any>([])
+
+    // Create a ref for the component to fix
+    const componentToFixRef = ref(<any>null);
+
+    const isFixed = ref(false);
+
+    // Register the scroll event on component mount
+    const handleScroll = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+      // Set a threshold value based on how much scroll is needed to fix the components
+      const threshold = 300;
+
+      // Update the isFixed ref based on the scroll position
+      isFixed.value = scrollTop > threshold;
+    };
+
+    watch(() => cat.value, (newval, oldval) => {
+      calcArrProducts()
+    })
+    watch(() => search.value, (newval, oldval) => {
+      calcArrProducts()
+      if (tools.scrollTop() > 300) {
+        tools.scrollToTopValue(300)
+      }
+    })
+
+    watch(() => cosa.value, (newval, oldval) => {
+      tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
+      if (cosa.value !== shared_consts.PROD.TUTTI)
+        cat.value = ''
+      calcArrProducts()
+    })
+
+    function calcArrProducts() {
+      refreshpage.value = true
+      let arrprod = productStore.getProducts(cosa.value)
+      let catstr = cat.value;
+      let lowerSearchText = search.value.toLowerCase().trim();
+      if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
+
+      } else {
+
+        arrprod = arrprod.filter((product: IProduct) => {
+          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');
+
+          // 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;
+        });
+      }
+
+      arrProducts.value = arrprod
+      refreshpage.value = false
+    }
+
+    /*function getProducts() {
+      let arrprod = productStore.getProducts(cosa.value)
+      if (!search.value) {
+        return arrprod
+      }
+    
+      let lowerSearchText = search.value.toLowerCase();
+      let catstr = cat.value;
+    
+      return arrprod.filter((product: IProduct) => {
+        let lowerName = product.productInfo.name!.toLowerCase();
+        const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
+        return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
+      });
+    }*/
+
+    async function mounted() {
+      loadpage.value = false
+      await productStore.loadProducts()
+      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
+      // Inizializza
+      loadpage.value = true
+      window.addEventListener('scroll', handleScroll);
+
+      calcArrProducts()
+    }
+
+    // Remove the event listener on component destroy
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', handleScroll);
+    });
+
+    function getCatProds() {
+      let arrcat = productStore.getCatProds(cosa.value)
+      let riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
+      for (const rec of arrcat) {
+        riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
+      }
+
+      return riscat
+    }
+
+    onMounted(mounted)
+
+    return {
+      userStore,
+      costanti,
+      tools,
+      toolsext,
+      search,
+      cosa,
+      shared_consts,
+      getCatProds,
+      cat,
+      productStore,
+      t,
+      loadpage,
+      refreshpage,
+      componentToFixRef,
+      isFixed,
+      arrProducts,
+    }
+  }
+})
+

src/views/toolsAI/main/main.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-page>
+    <div class="text-center">
+      <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
+    </div>
+    <div v-if="loadpage" class="panel">
+      <CAITools></CAITools>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./main.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './main.scss';
+</style>