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

<template>
  <q-page>
    <div
      v-if="ispageCatalogata"
      class="text-bold text-h6 text-center text-blue"
    >
      {{ getTitoloCatalogo() }}
    </div>
    <q-tabs
      v-if="optcatalogo.pdf && tools.isEditor()"
      v-model="tabcatalogo"
      dense
      class="bg-green text-white"
    >
      <q-tab
        name="visu"
        icon="fas fa-eye"
        label="Visualizza"
      >
      </q-tab>
      <q-tab
        v-if="lista_prodotti"
        name="lista"
        icon="fas fa-list"
        label="Lista"
      >
      </q-tab>
      <q-tab
        v-if="tools.isGrafico()"
        name="sfondo"
        icon="fas fa-image"
        label="Sfondo"
      >
      </q-tab>
      <q-tab
        v-if="tools.isGrafico()"
        name="pagine"
        icon="fas fa-book-reader"
        label="Pagine"
      >
      </q-tab>
      <q-tab
        name="tutorial"
        icon="fas fa-info"
        label="Tutorial"
      >
      </q-tab>
      <q-tab
        name="opzioni"
        icon="fas fa-save"
        label="Avanzati"
      >
      </q-tab>
    </q-tabs>
    <q-tab-panels
      v-model="tabcatalogo"
      animated
      class=""
      keep-alive
    >
      <q-tab-panel
        name="lista"
        v-if="optcatalogo"
      >
        <q-btn
          rounded
          label="Rigenera Lista Libri"
          color="primary"
          @click="generaListaLibri()"
        ></q-btn>

        <CProductTable
          :lista_prodotti="lista_prodotti"
          @update:lista_prodotti="updateProducts"
        />
      </q-tab-panel>

      <q-tab-panel
        name="visu"
        v-if="optcatalogo"
      >
        <div class="row 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-if="!ispageCatalogata"
                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
                  v-if="!ispageCatalogata"
                  name="autori"
                  icon="fas fa-user"
                  label="Autori"
                >
                  <q-badge
                    v-if="filter.author"
                    color="red"
                    floating
                    >1</q-badge
                  >
                </q-tab>
                <q-tab
                  v-if="!ispageCatalogata"
                  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=""
                keep-alive
              >
                <q-tab-panel
                  v-if="!ispageCatalogata"
                  name="categorie"
                >
                  <div class="row 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
                v-if="!ispageCatalogata"
                class="row justify-center q-mx-auto"
              >
                <q-select
                  v-model="filter.sort_field"
                  dense
                  :options="shared_consts.ORDINAMENTO_CATALOGHI_PUBBLICO"
                  label="Ordinamento"
                  placeholder=""
                  emit-value
                  map-options
                  filled
                  rounded
                ></q-select>
                <q-select
                  v-model="filter.sort_dir"
                  dense
                  :options="shared_consts.ORDINAMENTO_DIREZIONE"
                  label="Direzione"
                  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
                v-if="optcatalogo"
                id="pdf-content"
                ref="pdfContent"
                :class="{ 'fixed-width': true }"
              >
                <div
                  v-if="
                    optcatalogo.first_page &&
                    optcatalogo.first_page.text_html &&
                    optcatalogo.first_page.text_html.contenuto
                  "
                  :style="generateStyleByPageDim(optcatalogo, optcatalogo.first_page)"
                >
                  <div v-html="optcatalogo.first_page.text_html.contenuto"></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="row items-start"
                      style="place-content: center"
                    >
                      <div
                        v-for="(product, index) in arrLoaded"
                        :key="index"
                      >
                        <CContainerCatalogoCard
                          v-if="
                            product.active ||
                            (show_hide && product.productInfo.productTypes.includes(shared_consts.PRODUCTTYPE.PRODUCT))
                          "
                          :id="product._id"
                          :product="product"
                          :complete="false"
                          :cosa="cosa"
                          v-model="optcatalogo"
                          :idPage="idPage"
                          :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"
                          :product="product"
                          :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)"
                            :key="pageIndex"
                          >
                            <div
                              v-if="containsProducts(page)"
                              :class="{
                                'fixed-width': true,
                                'fixed-height': true,
                                'card-page': false,
                              }"
                              :style="generateStylePageScheda(optcatalogo, recscheda.scheda)"
                            >
                              <div
                                v-if="recscheda.scheda.dimensioni.pagina?.testo_title?.contenuto"
                                :style="{
                                  '--scalecatalog': tools.getScale(optcatalogo),
                                  'line-height': recscheda.scheda.dimensioni.pagina?.testo_title?.font.line_height,
                                  display: 'flex',
                                  flexDirection: 'column',
                                  position: 'relative', // Posizionamento assoluto
                                  top: '0', // Posiziona in alto
                                  left: '50%', // Centra orizzontalmente
                                  transform: 'translateX(-50%)', // Correzione per centrare perfettamente
                                  width: '100%', // Assicura che il contenitore occupi l'intera larghezza
                                  textAlign: 'center', // Allinea il testo al centro
                                  zIndex: '10', // Assicura che il testo sia visibile sopra altri elementi
                                }"
                              >
                                <div
                                  v-html="getTitoloPagina(null, recscheda)"
                                  style="display: flex; flex-direction: row; justify-content: center"
                                ></div>
                              </div>
                              <div
                                v-if="recscheda.scheda.dimensioni.pagina?.testo_up?.contenuto"
                                :style="{
                                  '--scalecatalog': tools.getScale(optcatalogo),
                                  'line-height': recscheda.scheda.dimensioni.pagina?.testo_up?.font.line_height,
                                  display: 'flex',
                                  flexDirection: 'column',
                                }"
                              >
                                <div
                                  v-html="getTestoIntroduttivo(recscheda)"
                                  style="display: flex; flex-direction: row"
                                ></div>
                              </div>

                              <!-- Itera sulle righe di ogni pagina -->
                              <div
                                v-for="(row, rowIndex) in page"
                                :key="`${pageIndex}-${rowIndex}`"
                                class="column"
                              >
                                <div
                                  class="card-row"
                                  :style="getStyleRow(recscheda)"
                                >
                                  <!-- Itera sui prodotti di ogni riga -->

                                  <div class="row justify-center">
                                    <!--<span v-if="optcatalogo.indebug">{{getStyleSchedaProdotto(recscheda)}}</span>-->
                                    <div
                                      v-for="(prod, colIndex) in row"
                                      :key="`${pageIndex}-${rowIndex}-${colIndex}`"
                                      class="flex-item-book"
                                      :style="getStyleSchedaProdotto(recscheda)"
                                    >
                                      <CContainerCatalogoCard
                                        v-if="prod && prod.active"
                                        :id="prod._id"
                                        :product="prod"
                                        :complete="false"
                                        :cosa="cosa"
                                        v-model="optcatalogo"
                                        :idPage="idPage"
                                        :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="prod && (prod.active || show_hide)"
                                        :id="prod._id"
                                        :complete="false"
                                        :cosa="cosa"
                                      />
                                    </div>
                                    <!-- Prodotti singoli -->
                                  </div>

                                  <!-- Separatore -->
                                  <div
                                    v-if="recscheda.scheda?.show_separatore && rowIndex !== page.length - 1"
                                    class="text-center"
                                    :style="getStyleRow(recscheda)"
                                  >
                                    <q-separator
                                      inset
                                      :size="tools.adjustSize(optcatalogo, '1px')"
                                    ></q-separator>
                                  </div>
                                </div>
                                <!-- Card Row -->
                              </div>
                              <!-- Righe (row) -->
                            </div>
                          </div>
                          <!-- Pagine -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="
                    optcatalogo.last_page &&
                    optcatalogo.last_page.text_html &&
                    optcatalogo.last_page.text_html.contenuto
                  "
                  :style="generateStyleByPageDim(optcatalogo, optcatalogo.last_page)"
                >
                  <div v-html="optcatalogo.last_page.text_html.contenuto"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="sfondo">
        <div class="row justify-center q-mx-auto bg-blue-1">
          <div>
            Sfondo:
            {{ tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile }}
          </div>

          <q-img
            v-if="optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile"
            :src="
              tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
            "
          >
          </q-img>
        </div>
      </q-tab-panel>
      <q-tab-panel name="pagine">
        <div class="row justify-center q-mx-auto bg-blue-1">
          <div>
            Prima Pagina:
            {{ tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.first_page.imgsfondo.imagefile }}
          </div>

          <q-img :src="tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.first_page.imgsfondo.imagefile">
          </q-img>
          <div>
            Ultima Pagina:
            {{ tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.last_page.imgsfondo.imagefile }}
          </div>

          <q-img :src="tools.getDirUpload() + costanti.DIR_CATALOGO + optcatalogo.last_page.imgsfondo.imagefile">
          </q-img>
        </div>
      </q-tab-panel>
      <q-tab-panel name="tutorial">
        <div class="q-pa-md q-ma-sm text-center">
          <q-btn
            rounded
            label="Apri Tutorial"
            color="primary"
            @click="naviga('/tutorial')"
          ></q-btn>
        </div>
      </q-tab-panel>
      <q-tab-panel name="opzioni">
        <pre>
          <strong>PASSI DA COMPIERE PER FARE AGGIORNAMENTI :</strong>

          1. Ottenere il file delle descrizioni aggiornato (da Matteo chiedere l'export di tutti i prodotti presenti su GruppoMacro - XML)

          2. Eseguire "IMPORTA DESCRIZIONI E LINK DA SITO GRUPPOMACRO (XML)" - importa_descrizioni_e_link.xml

          3. Visualizza
          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-articles-fatturati"
            target="_blank"
            >Ranking</a> -
          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-articles-sales"
            target="_blank"
            >(Ranking Ordini)</a>
            e controlla se tutto ok

          4. Esporta il file del Ranking ed importarlo con "IMPORTA RANKING DA JSON"
          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/export-articles-sales-json"
            target="_blank"
            >(Esporta Ranking Venduti e Fatturati)</a
          >

          5. Scarica Catalogo (<a
            href="https://www.fioredellavita.it/wp-content/uploads/woo-feed/custom/json/primofeed-2.json"
            target="_blank"
            >Catalogo primofeed-2.json</a
          >)

          6. Esegui "Importa Cataloghi da JSON (ImportaMacro)"

          7. GENERARE UN CATALOGO cliccando su "CREA CATALOGO ..."

          8. <a
            href="https://gruppomacro.app/admin/convertPDF"
            target="_blank"
            >CONVERTI IL PDF</a
          >

          ALTRO:

          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/getstruct/123123456"
            target="_blank"
            >Struttura Campi GM</a
          >

          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-table/T_WEB_Argomenti/100"
            target="_blank"
            >Tabella Argomenti </a>

          <a
            href="https://www.fioredellavita.it/wp-admin/admin.php?page=webappick-manage-feeds"
            target="_blank"
            >Gestisci Campi Catalogo FDV (CTXFEED)</a
          >
          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-lista-ordini-totale/2024-11-01"
            target="_blank"
            >Lista Ordini Libri - Totale Venduti (scegli data)</a
          >
          <a
            href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-ordini-test/1000"
            target="_blank"
            >Lista di Tutti gli Ordini (mostra gli ultimi N)</a
          >
          <br />
        </pre>
      </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>