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

<template>
  <q-page>
    <q-tabs
      v-if="optcatalogo.pdf"
      v-model="tabcatalogo"
      dense
      class="bg-green text-white"
    >
      <q-tab name="visu" icon="fas fa-eye" label="Visualizza"> </q-tab>
      <q-tab name="sfondo" icon="fas fa-image" label="Sfondo"> </q-tab>
      <q-tab name="pagine" icon="fas fa-book-reader" label="Pagine"> </q-tab>
      <q-tab name="opzioni" icon="fas fa-save" label="Opzioni"> </q-tab>
    </q-tabs>
    <q-tab-panels v-model="tabcatalogo" animated class="">
      <q-tab-panel name="visu">
        <q-btn
          v-if="optcatalogo.pdf"
          label="Crea PDF"
          @click="generatePDF"
        ></q-btn>
        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
          <div class="text-center">
            <q-spinner
              v-if="!loadpage"
              color="primary"
              size="3em"
              :thickness="2"
            />
          </div>
          <div v-if="loadpage" class="panel">
            <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>
                      |
                    </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-if="!optcatalogo.pdf"
                  v-model="show_hide"
                  push
                  label="Mostra Nascosti"
                  rounded
                  glossy
                  toggle-color="primary"
                ></q-toggle>
              </div>

              <div
                id="pdf-content"
                ref="pdfContent"
                :class="{ 'fixed-width': true }"
              >
                <div
                  v-if="optcatalogo.first_page_img"
                  :style="{
                    backgroundImage: `url(${
                      costanti.DIR_UPLOAD +
                      costanti.DIR_CATALOGO +
                      (optcatalogo.printable
                        ? optcatalogo.first_page_img
                        : optcatalogo.first_page_img)
                    })`,
                    backgroundSize: `${
                      optcatalogo.printable
                        ? scheda.bgSize_printable
                        : scheda.bgSize
                    }`,
                    height: optcatalogo.first_page_height + 'px',
                    width: optcatalogo.first_page_width + 'px',
                  }"
                >
                  <div
                    class="first_page"
                    v-html="optcatalogo.first_page_html"
                  ></div>
                </div>
                <div :style="generateStyleCatalogo(optcatalogo)">
                  <div class="flex-container-book">
                    <q-infinite-scroll
                      v-if="
                        !optcatalogo.pdf && 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 v-else class="cards-container">
                      <!-- Itera sulle schede -->
                      <div
                        v-for="(
                          recscheda, schedaIndex
                        ) in optcatalogo.arrSchede"
                        :key="schedaIndex"
                      >
                        <div v-if="recscheda && recscheda.scheda">
                          <!-- Itera sulle pagine -->
                          <div
                            v-for="(page, pageIndex) in groupedPages(
                              recscheda.scheda
                            )"
                            :key="pageIndex"
                            :class="{ 'fixed-width': true, 'card-page': true }"
                            :style="
                              generateStylePageScheda(
                                optcatalogo,
                                recscheda.scheda
                              )
                            "
                          >
                            <!-- Itera sulle righe di ogni pagina -->
                            <div
                              v-for="(row, rowIndex) in page"
                              :key="`${pageIndex}-${rowIndex}`"
                              class="card-row"
                              :style="`margin-bottom: ${
                                scheda.dimensioni.riga.bottom
                                  ? scheda.dimensioni.riga.bottom
                                  : optcatalogo.dimensioni.riga.bottom
                              };`"
                            >
                              <!-- Itera sui prodotti di ogni riga -->
                              <div
                                v-for="(indprod, colIndex) in row"
                                :key="`${pageIndex}-${rowIndex}-${colIndex}`"
                                class="flex-item-book image-container"
                                :style="
                                  'place-content: center; ' +
                                  ('flex: 0 1 ' +
                                    recscheda.scheda.dimensioni.scheda_prodotto.width
                                     || '100px' + '; ')
                                "
                              >
                                <CContainerCatalogoCard
                                  v-if="
                                    getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    ) &&
                                    getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    ).active
                                  "
                                  :id="
                                    getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    )._id
                                  "
                                  :complete="false"
                                  :cosa="cosa"
                                  :optcatalogo="optcatalogo"
                                  :scheda="recscheda.scheda"
                                  :options="{
                                    show_short_descr: false,
                                    show_price: false,
                                    show_cat: false,
                                    quante_col: 'c2',
                                    in_3d: false,
                                  }"
                                  @selauthor="selauthor"
                                />
                                <CProductCard
                                  v-else-if="
                                    getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    ) &&
                                    (getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    ).active ||
                                      show_hide)
                                  "
                                  :id="
                                    getProdBySchedaRigaCol(
                                      recscheda,
                                      rowIndex,
                                      colIndex
                                    )._id
                                  "
                                  :complete="false"
                                  :cosa="cosa"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="optcatalogo.last_page_img"
                  :style="{
                    backgroundImage: `url(${
                      costanti.DIR_UPLOAD +
                      costanti.DIR_CATALOGO +
                      (optcatalogo.printable
                        ? optcatalogo.last_page_img
                        : optcatalogo.last_page_img)
                    })`,
                    backgroundSize: `${
                      optcatalogo.printable
                        ? scheda.bgSize_printable
                        : scheda.bgSize
                    }`,
                    height: optcatalogo.last_page_height + 'px',
                    width: optcatalogo.last_page_width + 'px',
                  }"
                >
                  <div
                    class="last_page"
                    v-html="optcatalogo.last_page_html"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="sfondo">
        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
          <div>
            Sfondo:
            {{
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.backgroundimage
            }}
          </div>

          <q-img
            v-if="optcatalogo.backgroundimage"
            :src="
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.backgroundimage
            "
          >
          </q-img>
          <div v-if="optcatalogo.backgroundimage_printable">
            Sfondo Stampa:
            {{
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.backgroundimage_printable
            }}
          </div>

          <q-img
            :src="
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.backgroundimage_printable
            "
          >
          </q-img>
        </div>
      </q-tab-panel>
      <q-tab-panel name="pagine">
        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
          <div>
            Prima Pagina:
            {{
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.first_page_img
            }}
          </div>

          <q-img
            :src="
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.first_page_img
            "
          >
          </q-img>
          <div>
            Ultima Pagina:
            {{
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.last_page_img
            }}
          </div>

          <q-img
            :src="
              costanti.DIR_UPLOAD +
              costanti.DIR_CATALOGO +
              optcatalogo.last_page_img
            "
          >
          </q-img>
        </div>
      </q-tab-panel>
      <q-tab-panel name="opzioni">
        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"></div>
      </q-tab-panel>
    </q-tab-panels>

    <!--<div ref="pdfContent" class="pdf-content">-->
  </q-page>
</template>

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

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