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"
            >
              {{ col.label }}
            </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">
            <!-- Icona Drag Handle -->
            <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>

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

            <!-- Quantità -->
            <td v-if="isColumnVisible('quantity')">{{ 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="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 v-if="selProd" :idprodtoshow="selProd._id" nameLinkTemplate="SEARCH_Prima"> </CSearchProduct>
  </CMyDialog>
</template>

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