- generato lista libri, con possibilità di cambiare l'ordinamento dei libri o di cancellare libri.

src/components/CProductTable/CProductTable.vue

@@ -9,6 +9,8 @@
         multiple
         emit-value
         map-options
+        option-value="name"
+        option-label="label"
         filled
         style="max-width: 400px"
       />
@@ -19,13 +21,14 @@
       <!-- 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>
+          <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) -->
@@ -39,8 +42,15 @@
         <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
+              v-if="isColumnVisible('drag')"
+              class="drag-handle"
+            >
+              <q-icon
+                name="drag_handle"
+                size="32px"
+                color="primary"
+              />
             </td>
 
             <!-- Immagine Piccola -->
@@ -52,7 +62,8 @@
                     : element.productInfo?.image_link
                 "
                 style="width: 50px; height: 50px"
-                class="rounded-borders"
+                class="rounded-borders cursor-pointer"
+                @click="showProduct(element)"
               />
             </td>
 
@@ -65,14 +76,25 @@
             <!-- 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-btn-dropdown
+                label="Azioni"
+                color="primary"
+                flat
+              >
                 <q-list>
-                  <q-item clickable v-close-popup @click="removeProduct(element)">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="removeProduct(element)"
+                  >
                     <q-item-section>
                       <q-item-label>Elimina</q-item-label>
                     </q-item-section>
@@ -85,9 +107,15 @@
       </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';