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>

          <div class="col" v-for="(item, index) in searchList" :key="index">
            
            <CMySelect
              :col="fieldsTable.getColByColumns(mycolumns, item.key)"
              v-if="
                item.type === costanti.FieldType.select ||
                item.type === costanti.FieldType.select_by_server
              "
              :label="
                item.value && item.value._id > 0 ? undefined : labelcombo(item)
              "
              v-model:value="item.value"
              @update:value="searchval(item.value, item.table, tablesel)"
              :addall="item.addall"
              :addnone="item.addnone"
              :addlast="true"
              :tablesel="
                item.type === costanti.FieldType.select_by_server
                  ? item.tablesel
                  : ''
              "
              :pickup="item.type === costanti.FieldType.select_by_server"
              :label-color="$q.dark.isActive ? 'white' : 'black'"
              myclass="comboselector"
              color="primary"
              
              :dense="true"
              :icon_alternative="item.icon"
              :optval="fieldsTable.getKeyByTable(item.table)"
              :optlab="fieldsTable.getLabelByTable(item.table)"
              :options="valoriopt(item, false)"
              :filter="item.filter"
              :filter_extra="item.filter_extra"
              style="font-size: 0.8rem !important"
              :useinput="
                item.useinput &&
                item.type !== costanti.FieldType.select_by_server
              "
            >
            </CMySelect>
          </div>

          <q-toolbar>
            <q-select
              class="full-width"
              v-model="filter.author"
              :options="optauthors"
              label="Autore"
              placeholder="Tutti"
              emit-value
              map-options
              use-input
              hide-selected
              fill-input
              stack-label
              filled
              @filter="filterFn"
            >
              <template v-slot:append>
                <q-icon
                  v-if="filter.author !== ''"
                  class="cursor-pointer"
                  name="clear"
                  @click.stop.prevent="filter.author = ''"
                /> </template
            ></q-select>
            <!--<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,
                  }"
                  @selauthor="selauthor"
                />
                <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>