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-tabs v-model="tabvisu" dense class="bg-indigo text-white">
          <q-tab name="categorie" icon="fas fa-folder-open" label="Categorie">
            <q-badge v-if="cat" color="red" floating>1</q-badge>
          </q-tab>
          <q-tab name="autori" icon="fas fa-user" label="Autori">
            <q-badge v-if="filter.author" color="red" floating>1</q-badge>
          </q-tab>
          <q-tab name="ricerca" icon="fas fa-search" label="Cerca">
            <q-badge v-if="getSearchText()" color="red" floating>1</q-badge>
          </q-tab>
        </q-tabs>
        <q-tab-panels v-model="tabvisu" animated class="">
          <q-tab-panel name="categorie">
            <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>
          </q-tab-panel>
          <q-tab-panel name="autori">
            <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
                use-chips
                filled
                rounded
                @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>
          </q-tab-panel>
          <q-tab-panel name="ricerca">
            <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"
                :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-tab-panel>
        </q-tab-panels>


        <div class="row justify-center q-mx-auto">
          <q-select
            v-model="filter.sort"
            dense
            :options="costanti.ORDINAMENTO_CATALOGHI"
            label="Ordinamento"
            placeholder=""
            emit-value
            map-options
            filled
            rounded
          ></q-select>
        </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() && false">
          <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"
            style="place-content: center"
          >
            <div
              class="q-pa-xs"
              v-for="(product, index) in arrLoaded"
              :key="index"
            >
              <CContainerCatalogoCard
                v-if="
                  product.active ||
                  (show_hide &&
                    productInfo.productTypes.includes(
                      shared_consts.PRODUCTTYPE.PRODUCT
                    ))
                "
                :id="product._id"
                :complete="false"
                :cosa="cosa"
                :optcatalogo="optcatalogo"
                :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>
  </q-page>
</template>

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

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