myprojplanet_vite/src/views/ecommerce/catalogo/catalogo.vue

<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 v-if="true"></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 v-if="cosa === shared_consts.PROD.GAS">
          <div v-if="!idGasSel">
            <div class="text-center text-h6 text-red">Ordini Attivi:</div>
          </div>
          <div class="row q-gutter-xs justify-center q-mx-auto">
            <div
              v-for="(recgas, index) in productStore.getGasordinesActives()"
              :key="index"
            >
              <q-btn
                push
                dense
                :size="tools.isMobile() ? '0.9rem' : '1.05rem'"
                :color="idGasSel === recgas._id ? 'primary' : undefined"
                :text-color="idGasSel === recgas._id ? 'white' : 'black'"
                :label="recgas.name"
                @click="idGasSel = recgas._id"
              >
              </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" v-if="tools.isManager()">
            <q-toggle
              v-model="show_hide"
              push
              label="Mostra Nascosti"
              rounded
              glossy
              toggle-color="primary"
            ></q-toggle>
          </div>
          <div class="row justify-around">
            <q-infinite-scroll
              v-if="arrLoaded && arrLoaded.length > 0"
              ref="myinfscroll"
              :initial-index="0"
              @load="onLoadScroll"
              :offset="2000"
              debounce="200"
              class="q-pa-xs row items-start"
            >
              <div
                class="q-pa-xs"
                v-for="(product, index) in arrLoaded"
                :key="index"
              >
                <CCatalogoCard
                  v-if="
                    product.active ||
                    (show_hide &&
                      productInfo.productType ===
                        shared_consts.PRODUCTTYPE.PRODUCT)
                  "
                  :id="product._id"
                  :complete="false"
                  :cosa="cosa"
                />
                <CProductCard
                  v-else-if="product.active || show_hide"
                  :id="product._id"
                  :complete="false"
                  :cosa="cosa"
                />
              </div>
              <template v-slot:loading>
                <div class="text-center">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
          </div>
        </div>
        <div v-else>
          <div class="category-title">Categorie</div>
          <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
            <div v-for="(reccat, index) in getCatProds()" :key="index">
              <span
                :class="{
                  category: true,
                  category_sel: cat === reccat.value,
                }"
                @click="cat = reccat.value"
                >{{ reccat.label }}
              </span>
              |
              <!--<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" v-if="tools.isManager()">
            <q-toggle
              v-model="show_hide"
              push
              label="Mostra Nascosti"
              rounded
              glossy
              toggle-color="primary"
            ></q-toggle>
          </div>

          <q-toolbar>
            <q-input
              v-model="search"
              debounce="300"
              placeholder="Cerca libri..."
              dense
            />
            <q-select
              v-model="filter.author"
              :options="authors"
              label="Autore"
              placeholder="Tutti"
              dense
            />
            <q-select
              v-model="filter.publisher"
              :options="publishers"
              label="Editore"
              placeholder="Tutti"
              dense
            />
            <q-select
              v-model="filter.type"
              :options="types"
              label="Tipo"
              placeholder="Tutti"
              dense
            />
            <q-select
              v-model="filter.ageGroup"
              :options="ageGroups"
              label="Fascia d'età"
              placeholder="Tutte"
              dense
            />
          </q-toolbar>

          <div class="row justify-around">
            <q-infinite-scroll
              v-if="arrLoaded && arrLoaded.length > 0"
              ref="myinfscroll"
              :initial-index="0"
              @load="onLoadScroll"
              :offset="2000"
              debounce="200"
              class="q-pa-xs row items-start"
              style="place-content: center"
            >
              <div
                class="q-pa-xs"
                v-for="(product, index) in arrLoaded"
                :key="index"
              >
                <CCatalogoCard
                  v-if="
                    product.active ||
                    (show_hide &&
                      productInfo.productType ===
                        shared_consts.PRODUCTTYPE.PRODUCT)
                  "
                  :id="product._id"
                  :complete="false"
                  :cosa="cosa"
                  :options="{
                    show_short_descr: false,
                    show_price: false,
                    show_cat: false,
                    quante_col: 'c2',
                    in_3d: false,
                  }"
                />
                <CProductCard
                  v-else-if="product.active || show_hide"
                  :id="product._id"
                  :complete="false"
                  :cosa="cosa"
                />
              </div>
              <template v-slot:loading>
                <div class="text-center">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts" src="./catalogo.ts">
</script>

<style lang="scss" scoped>
@import './catalogo.scss';
</style>