myprojplanet_vite/src/components/CProductTable/CProductTable.vue

<template>
  <div>
    <!-- Selezione Colonne -->
    <div class="q-mb-md">
      <q-select
        v-model="selectedColumns"
        :options="allColumns"
        label="Colonne da visualizzare"
        multiple
        emit-value
        map-options
        option-value="name"
        option-label="label"
        filled
        style="max-width: 400px"
      />
    </div>

    <!-- Tabella Prodotti -->
    <table>
      <!-- Intestazioni (Thead) -->
      <thead>
        <tr>
          <template v-for="col in allColumns">
            <th
              v-if="isColumnVisible(col.name)"
              :key="col.name"
              @click="sortTable(col.name)"
            >
              {{ col.label }}
              <q-icon
                v-if="(sortAttribute === col.name) && optcatalogo.showListaArgomenti"
                :name="sortDirection === 1 ? 'arrow_drop_up' : 'arrow_drop_down'"
                size="16px"
                class="q-ml-xs"
              />
              <q-icon
                v-else-if="optcatalogo.showListaArgomenti"
                name="arrow_drop_up"
                size="16px"
                class="q-ml-xs"
              />
            </th>
          </template>
        </tr>
      </thead>
      <!-- Corpo della Tabella (Tbody) -->
      <draggable
        v-model="internalProducts"
        tag="tbody"
        handle=".drag-handle"
        item-key="_id"
        @end="onDragEnd"
      >
        <template #item="{ element }">
          <tr
            :key="element._id"
            :class="{
              'bg-yellow': products.isPubblicato(element.productInfo) && products.isQtaLimitata(element),
              'bg-orange': products.isPubblicato(element.productInfo) && products.isInEsaurendo(element),
              'text-white bg-red-10': products.isPubblicato(element.productInfo) && products.isEsaurito(element),
              'bg-grey': !products.isPubblicato(element.productInfo),
            }"
          >
            <!-- Icona Drag Handle -->
            <td v-if="isColumnVisible('pos')">
              {{
                // put index in the first column
                internalProducts.indexOf(element) + 1
              }}
            </td>
            <td
              v-if="isColumnVisible('drag')"
              class="drag-handle"
            >
              <q-icon
                name="drag_handle"
                size="32px"
                color="primary"
              />
            </td>

            <!-- Immagine Piccola -->
            <td v-if="isColumnVisible('image')">
              <q-img
                :src="
                  element.productInfo?.imagefile
                    ? tools.getFullFileNameByImageFile('productInfos', element.productInfo?.imagefile)
                    : element.productInfo?.image_link
                "
                style="width: 50px; height: 50px"
                class="rounded-borders cursor-pointer"
                @click="showProduct(element)"
              />
            </td>

            <!-- Titolo -->
            <td v-if="isColumnVisible('name')">{{ element.productInfo?.name }}</td>

            <!-- Autore -->
            <td v-if="isColumnVisible('authors')">{{ formatAuthors(element.productInfo?.authors) }}</td>

            <td
              v-if="isColumnVisible('trafiletto')"
              style="text-align: center"
              :class="element.productInfo?.descr_trafiletto_catalogo?.length > 100 ? 'text-green' : 'text-red'"
            >
              {{ element.productInfo?.descr_trafiletto_catalogo?.length > 100 ? 'SI' : 'NO' }}
            </td>

            <!-- Argomento -->
            <td v-if="isColumnVisible('catprods')">{{ tools.formatCatProds(element.productInfo?.catprods) }}</td>
            <!-- Collana -->
            <td v-if="isColumnVisible('idCollana')">{{ tools.formatCollane(element.productInfo?.idCollana) }}</td>
            <td v-if="isColumnVisible('stato')">
              {{ products.getDescrStatiProdottoByIdStatoProdotto(element.productInfo.idStatoProdotto || '') }}
            </td>

            <td v-if="isColumnVisible('date_pub')">{{ tools.getstrDate(element.productInfo?.date_pub) }}</td>

            <td
              v-if="isColumnVisible('rank3M')"
              style="text-align: right"
            >
              {{ element.productInfo?.rank3M }}
            </td>
            <td
              v-if="isColumnVisible('rank6M')"
              style="text-align: right"
            >
              {{ element.productInfo?.rank6M }}
            </td>
            <td
              v-if="isColumnVisible('rank1Y')"
              style="text-align: right"
            >
              {{ element.productInfo?.rank1Y }}
            </td>

            <td
              v-if="isColumnVisible('pagine')"
              style="text-align: right"
            >
              {{ element.arrvariazioni[0].pagine }}
            </td>

            <td
              v-if="isColumnVisible('totVen')"
              style="text-align: right"
            >
              {{ element.productInfo?.totVen }}
            </td>
            <td
              v-if="isColumnVisible('totFat')"
              style="text-align: right"
            >
              {{ element.productInfo?.totFat }}
            </td>
            <td
              v-if="isColumnVisible('fatLast6M')"
              style="text-align: right"
            >
              {{ element.productInfo?.fatLast6M }}
            </td>
            <td
              v-if="isColumnVisible('fatLast1Y')"
              style="text-align: right"
            >
              {{ element.productInfo?.fatLast1Y }}
            </td>
            <td v-if="isColumnVisible('ult_ord')">{{ tools.getstrDate(element.productInfo?.dataUltimoOrdine) }}</td>

            <!-- Quantità -->
            <td
              v-if="isColumnVisible('quantity')"
              style="text-align: right"
            >
              {{ element.arrvariazioni[0].quantita }}
            </td>

            <!-- ISBN -->
            <td v-if="isColumnVisible('isbn')">{{ element.isbn }}</td>

            <!-- Azioni -->
            <td v-if="isColumnVisible('actions')">
              <q-btn-dropdown
                label="Azioni"
                color="primary"
                flat
              >
                <q-list>
                  <q-item
                    clickable
                    v-close-popup
                    @click="modifyProduct(element)"
                  >
                    <q-item-section>
                      <q-item-label>Modifica</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    v-close-popup
                    @click="removeProduct(element)"
                  >
                    <q-item-section>
                      <q-item-label>Elimina</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </td>
          </tr>
        </template>
      </draggable>
    </table>
  </div>
  <CMyDialog
    v-model="showProd"
    title="Prodotto"
    class="q-ma-md"
  >
    <CSearchProduct
      :idprodtoshow="selProd?._id"
      nameLinkTemplate="SEARCH_Prima"
      @updateproductmodif="updateproductmodif"
    >
    </CSearchProduct>
  </CMyDialog>
  <q-dialog
    v-model="modifOn"
    maximized
  >
    <q-spinner
      v-if="loading"
      color="primary"
      size="3em"
      :thickness="2"
    />

    <div v-if="!!selProd && !!selProd.productInfo">
      <CSchedaProdotto
        v-model="selProd"
        @updateproductmodif="updateproductmodif"
      >
      </CSchedaProdotto>
    </div>
  </q-dialog>
  <q-dialog
    v-if="visufromgm"
    v-model="visufromgm"
    @hide="visufromgm = false"
  >
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title> Visu </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>
      <q-card-section class="q-pa-xs inset-shadow">
        <q-spinner
          v-if="loading"
          color="primary"
          size="3em"
          :thickness="2"
        />

        <div v-if="visufromgm && selProd">
          <CViewTable
            :options="{
              nameTable: 'T_Web_Articoli',
              campispeciali: true,
              numrec: 1,
              where:
                'T.IdArticolo =' +
                selProd.productInfo.sku +
                ' AND T.DataPubblicazione IS NOT NULL ORDER BY T.DataOra DESC;',
              showQtaDisponibile,
              outhtml: true,
            }"
          >
          </CViewTable>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog
    v-if="updatefromgm && selProd"
    v-model="updatefromgm"
    @hide="updatefromgm = false"
  >
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title> Aggiorna da GM: </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>
      <q-card-section class="q-pa-xs inset-shadow">
        <q-inner-loading
          id="spinner"
          :showing="loading"
        >
          <q-spinner-tail
            color="primary"
            size="4em"
          >
          </q-spinner-tail>
        </q-inner-loading>
        <br />
        Valore: {{ field_updated_fromGM }}
        <br />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" src="./CProductTable.ts"></script>
<style lang="scss" scoped>
@import './CProductTable.scss';
</style>