- Ricerca Titolo per nome o autore o ISBN o codice articolo

src/components/CProductTable/CProductTable.vue

@@ -0,0 +1,94 @@
+<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
+        filled
+        style="max-width: 400px"
+      />
+    </div>
+
+    <!-- Tabella Prodotti -->
+    <table>
+      <!-- Intestazioni (Thead) -->
+      <thead>
+        <tr>
+          <th v-if="isColumnVisible('drag')">Drag</th>
+          <th v-if="isColumnVisible('image')">Immagine</th>
+          <th v-if="isColumnVisible('name')">Nome</th>
+          <th v-if="isColumnVisible('authors')">Autore</th>
+          <th v-if="isColumnVisible('catprods')">Argomento</th>
+          <th v-if="isColumnVisible('isbn')">ISBN</th>
+          <th v-if="isColumnVisible('actions')">Azioni</th>
+        </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"
+              />
+            </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>
+
+            <!-- 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>
+</template>
+
+
+<script lang="ts" src="./CProductTable.ts"></script>
+<style lang="scss" scoped>
+@import './CProductTable.scss';
+</style>