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

src/components/CProductTable/CProductTable.scss

@@ -0,0 +1,7 @@
+.drag-handle {
+    cursor: grab; /* Mostra la manina */
+  }
+  
+  .drag-handle:active {
+    cursor: grabbing; /* Cambia la manina quando l'utente sta trascinando */
+  }

src/components/CProductTable/CProductTable.ts

@@ -0,0 +1,131 @@
+import { defineComponent, onMounted, ref, watch } from "vue";
+import draggable from 'vuedraggable'
+
+import { tools } from '@tools'
+
+import { useGlobalStore } from '@src/store/globalStore'
+
+import { costanti } from '@costanti'
+import { IAuthor, ICatProd } from "app/src/model";
+
+export default defineComponent({
+  name: "CProductTable",
+  components: {
+    draggable,
+  },
+  props: {
+    lista_prodotti: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["update:lista_prodotti"],
+  setup(props, { emit }) {
+    // Copia locale della lista_prodotti per manipolazione interna
+    const internalProducts = ref([...props.lista_prodotti]);
+
+    const globalStore = useGlobalStore()
+
+    async function mounted() {
+
+    }
+
+    // Aggiorna la copia locale quando il prop cambia
+    watch(
+      () => props.lista_prodotti,
+      (newVal) => {
+        internalProducts.value = [...newVal];
+      }
+    );
+
+    // Colonne della tabella
+    const allColumns = [
+      { name: "drag", label: "", field: "", align: "left", style: "width: 50px" },
+      { name: "image", label: "Immagine", field: "image", align: "center" },
+      { name: "title", label: "Titolo", field: "title", align: "left" },
+      { name: "author", label: "Autore", field: "author", align: "left" },
+      { name: "topic", label: "Argomento", field: "topic", align: "left" },
+      { name: "isbn", label: "ISBN", field: "isbn", align: "left" },
+      { name: "actions", label: "Azioni", field: "", align: "center" },
+    ];
+
+    const selectedColumns = ref(
+      tools.getCookie("selColCat")
+        ? JSON.parse(tools.getCookie("selColCat"))
+        : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"] // Valori di default
+    )
+
+    // 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
+    const isColumnVisible = (column) => {
+      return selectedColumns.value.includes(column);
+    }
+
+    // Funzione per eliminare un prodotto
+    const removeProduct = (product) => {
+      internalProducts.value = internalProducts.value.filter((p: any) => p._id !== product._id);
+      emit("update:lista_prodotti", internalProducts.value); // Notifica il parent del cambiamento
+    }
+
+    // 8. Salvataggio delle colonne selezionate in un cookie
+    const saveSelectedColumns = () => {
+      tools.setCookie("selColCat", JSON.stringify(selectedColumns.value));
+    };
+
+    // 9. Watcher per salvare automaticamente le preferenze quando cambiano
+    watch(() => selectedColumns.value, () => {
+      saveSelectedColumns();
+    });
+
+    // Funzione chiamata alla fine del drag-and-drop
+    const onDragEnd = () => {
+      // console.log("Nuovo ordine:", internalProducts.value);
+      emit("update:lista_prodotti", internalProducts.value); // Notifica il parent del cambiamento
+    }
+
+    function formatAuthors(authors: IAuthor[] | undefined | null): string {
+      if (!authors || !Array.isArray(authors)) {
+        return ""; // Restituisci una stringa vuota se authors non è un array valido
+      }
+
+      // Estrai il nome e il cognome di ogni autore e uniscili con ', '
+      return authors
+        .map((author) => `${author.name ?? ""} ${author.surname ?? ""}`.trim())
+        .filter((name) => name.length > 0) // Filtra eventuali nomi vuoti
+        .join(", ");
+    }
+
+    function formatCatProds(catprods: ICatProd[] | undefined | null): string {
+      if (!catprods || !Array.isArray(catprods)) {
+          return "";
+      }
+
+      // Estrai il nome e il cognome di ogni autore e uniscili con ', '
+      return catprods
+        .map((catprod) => `${catprod.name ?? ""}`.trim())
+        .filter((name) => name.length > 0) // Filtra eventuali nomi vuoti
+        .join(", ");
+    }
+
+    // Caricamento delle preferenze al mount del componente
+    onMounted(() => {
+      const savedColumns = tools.getCookie("selColCat");
+      if (savedColumns) {
+        selectedColumns.value = JSON.parse(savedColumns);
+      }
+    });
+
+    return {
+      allColumns,
+      selectedColumns,
+      isColumnVisible,
+      internalProducts,
+      formatAuthors,
+      formatCatProds,
+      removeProduct,
+      tools,
+      globalStore,
+      costanti,
+      onDragEnd,
+    }
+  },
+})

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>

src/components/CProductTable/index.ts

@@ -0,0 +1 @@
+export { default as CProductTable } from './CProductTable.vue'