myprojplanet_vite/src/components/CProductTable/CProductTable.vue

<template>
  <div>
    <!-- Selezione Colonne -->
    <div class="row justify-center">
      <div class="row justify-center q-mx-auto q-pt-sm text-italic">
        {{ internalProducts?.length }} elementi nella lista
      </div>
      <div class="q-mb-md text-right">
        <q-select
          v-model="selectedColumns"
          :options="allColumns"
          label="Colonne da visualizzare"
          multiple
          filled
          dense
          class="float-right"
          outlined
          emit-value
          map-options
          option-value="name"
          option-label="label"
          style="max-width: 200px"
        >
          <template v-slot:prepend>
            <q-icon name="settings" />
          </template>
        </q-select>
        <q-btn
          class="q-ml-md float-right"
          flat
          outline
          color="primary"
          icon="archive"
          label="Esporta Lista"
          @click="exportToCSV"
        />
      </div>
    </div>

    <!-- Tabella Prodotti -->
    <table>
      <!-- Intestazioni (Thead) -->
      <thead>
        <tr>
          <template v-for="col in allColumns">
            <th
              v-if="isColumnVisible(col.name)"
              :key="col.name"
              @click="isSortable(col.name) ? sortTable(col.name) : ''"
              :style="{ 'background-color': sortAttribute === col.name ? 'yellow' : '' }"
            >
              <span>{{ col.label }}</span>
              <span v-if="isSortable(col.name)">
                <q-icon
                  v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
                  size="36px"
                  class="q-ml-xs"
                />
                <q-icon
                  v-else-if="optcatalogo.showListaArgomenti"
                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
                  size="24px"
                  class="q-ml-xs"
                />
              </span>
            </th>
          </template>
        </tr>
      </thead>
      <!-- Corpo della Tabella (Tbody) -->
      <draggable
        v-if="!loading"
        :model-value="internalProducts"
        tag="tbody"
        handle=".drag-handle"
        item-key="_id"
        @end="onDragEnd"
        @update:modelValue="handleUpdate"
      >
        <template #item="{ element }">
          <tr
            :key="element._id"
            :class="{
              'bg-grey-3': internalProducts.indexOf(element) % 2 === 1,
            }"
          >
            <template
              v-for="field in allColumns"
              :key="field.name"
            >
              <!-- Icona Drag Handle -->
              <td v-if="field.name === 'pos' && isColumnVisible('pos')">
                {{
                  // put index in the first column
                  internalProducts.indexOf(element) + 1
                }}
              </td>
              <td
                v-else-if="field.name === 'drag' && isColumnVisible('drag')"
                class="drag-handle"
              >
                <q-icon
                  name="drag_handle"
                  size="32px"
                  color="primary"
                />
              </td>

              <!-- Immagine Piccola -->
              <td v-else-if="field.name === 'image' && 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>

              <td
                v-else-if="isColumnVisible(field.name)"
                :class="getFieldClass(element, field)"
                :style="getFieldStyle(element, field)"
                @click="getFieldClick(element, field)?.()"
              >
                <span v-html="getFieldValue(element, field)"></span>
              </td>
              <!-- Azioni -->
              <td v-else-if="field.name === 'actions' && isColumnVisible('actions', true)">
                <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>
            </template>
          </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>