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

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,
+    }
+  },
+})