agiornamento, sistemazioni varie PCB

2024-01-23 00:10:52 +01:00
parent fbebd925b1
commit 8a5a2bd79a
38 changed files with 174 additions and 104 deletions
--- a/src/views/ecommerce/cash/cash.ts
+++ b/src/views/ecommerce/cash/cash.ts
@@ -79,13 +79,13 @@ export default defineComponent({
    async function mounted() {
      loadpage.value = false
      await productStore.loadProducts()
-      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.BOTTEGA, true)
+      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
      // Inizializza
      loadpage.value = true
    }

    function getCatProds() {
-      let arrcat = productStore.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 })
--- a/src/views/ecommerce/cash/cash.vue
+++ b/src/views/ecommerce/cash/cash.vue
@@ -16,10 +16,20 @@
            dense
            toggle-color="purple"
            :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-user-friends" />
+              </div>
+            </template>
+
            <template v-slot:gas>
              <div class="row items-center no-wrap">
                <div class="text-center">
@@ -60,6 +70,7 @@
          <q-input
            filled
            stack-label
+            rounded
            :dense="tools.isMobile() ? true : false"
            :label="t('ecomm.code_o_text_search')"
            v-model="search"
--- a/src/views/ecommerce/orderInfo/orderInfo.vue
+++ b/src/views/ecommerce/orderInfo/orderInfo.vue
@@ -20,14 +20,6 @@
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t('gas.tutti') }}
-              <br />
-              {{
-                t('gas.x_prodotti_gas', {
-                  qta:
-                    productStore.getNumQtaGas() +
-                    productStore.getNumQtaBottega(),
-                })
-              }}
            </div>
            <q-icon right name="fas fa-user-friends" />
          </div>
@@ -36,10 +28,6 @@
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t('gas.ordina_sul_gas') }}
-              <br />
-              {{
-                t('gas.x_prodotti_gas', { qta: productStore.getNumQtaGas() })
-              }}
            </div>
            <q-icon right name="fas fa-user-friends" />
          </div>
@@ -49,12 +37,6 @@
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ t('gas.bottega') }}
-              <br />
-              {{
-                t('gas.x_prodotti_bottega', {
-                  qta: productStore.getNumQtaBottega(),
-                })
-              }}
            </div>
            <q-icon right name="fas fa-store" />
          </div>
--- a/src/views/ecommerce/productsList/productsList.scss
+++ b/src/views/ecommerce/productsList/productsList.scss
@@ -11,4 +11,15 @@ $heightBtn: 100%;

 .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;
+}
--- a/src/views/ecommerce/productsList/productsList.ts
+++ b/src/views/ecommerce/productsList/productsList.ts
@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, computed } from 'vue'
+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'
@@ -14,7 +14,6 @@ import { CProductCard } from '@src/components/CProductCard'
 import { CSelectUserActive } from '@src/components/CSelectUserActive'
 import { IProduct } from '@src/model'

-
 export default defineComponent({
  name: 'ProductsList',
  components: { CProductCard, CSelectUserActive },
@@ -32,33 +31,70 @@ export default defineComponent({
    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()
    })

-    const getArrProducts = computed(() => {
+    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) {
-        return arrprod
+
+      } 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;
+        });
      }

-      return 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)
@@ -79,13 +115,21 @@ export default defineComponent({
    async function mounted() {
      loadpage.value = false
      await productStore.loadProducts()
-      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.BOTTEGA, true)
+      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()
+      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 })
@@ -94,7 +138,6 @@ export default defineComponent({
      return riscat
    }

-
    onMounted(mounted)

    return {
@@ -102,7 +145,6 @@ export default defineComponent({
      costanti,
      tools,
      toolsext,
-      getArrProducts,
      search,
      cosa,
      shared_consts,
@@ -111,6 +153,10 @@ export default defineComponent({
      productStore,
      t,
      loadpage,
+      refreshpage,
+      componentToFixRef,
+      isFixed,
+      arrProducts,
    }
  }
 })
--- a/src/views/ecommerce/productsList/productsList.vue
+++ b/src/views/ecommerce/productsList/productsList.vue
@@ -6,6 +6,7 @@
    <div v-if="loadpage" class="panel">
      <div>
        <CSelectUserActive></CSelectUserActive>
+        <div class="text-center text-h7 text-blue">Filtra Prodotti per:</div>
        <div class="text-center">
          <q-btn-toggle
            v-model="cosa"
@@ -13,23 +14,32 @@
            :size="tools.isMobile() ? '0.75rem' : '1rem'"
            rounded
            glossy
-            dense
-            toggle-color="purple"
+            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') }}
-                  <br />
+                  <!--<br />
                  {{
                    t('gas.x_prodotti_gas', {
                      qta: productStore.getNumQtaGas(),
                    })
-                  }}
+                  }}-->
                </div>
                <q-icon right name="fas fa-user-friends" />
              </div>
@@ -39,12 +49,12 @@
              <div class="row items-center no-wrap">
                <div class="text-center">
                  {{ t('gas.bottega') }}
-                  <br />
+                  <!--<br />
                  {{
                    t('gas.x_prodotti_bottega', {
                      qta: productStore.getNumQtaBottega(),
                    })
-                  }}
+                  }}-->
                </div>
                <q-icon right name="fas fa-store" />
              </div>
@@ -52,25 +62,36 @@
          </q-btn-toggle>
        </div>
      </div>
+
      <div class="container">
-        <div
-          class="column text-center q-mx-auto q-py-sm q-mb-sm"
-          style="width: 350px; max-width: 100%"
-        >
-          <q-input
-            filled
-            stack-label
-            :dense="tools.isMobile() ? true : false"
-            :label="t('ecomm.code_o_text_search')"
-            v-model="search"
-            debounce="500"
-            class="q-ml-md"
+        <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%"
          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </div>
+            <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
@@ -88,17 +109,17 @@
          </div>
        </div>
        <div class="text-center q-py-sm prod_trov">
-          {{
+          <span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
            t('ecomm.prodotti_trovati', {
-              qta: getArrProducts.length,
+              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 getArrProducts"
+            v-for="(product, index) in arrProducts"
            :key="index"
          >
            <CProductCard :id="product._id" :complete="false" :cosa="cosa" />