AITools prime cose

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>