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

src/components/CProductTable/CProductTable.ts

@@ -5,13 +5,21 @@ import { tools } from '@tools'
 
 import { useGlobalStore } from '@src/store/globalStore'
 
+import { CSearchProduct } from '@src/components/CSearchProduct'
+import { CMyDialog } from '@src/components/CMyDialog'
+
 import { costanti } from '@costanti'
 import { IAuthor, ICatProd } from "app/src/model";
 
+import type {
+  IProduct
+} from '@src/model';
+
+
 export default defineComponent({
   name: "CProductTable",
   components: {
-    draggable,
+    draggable, CSearchProduct, CMyDialog,
   },
   props: {
     lista_prodotti: {
@@ -26,6 +34,9 @@ export default defineComponent({
 
     const globalStore = useGlobalStore()
 
+    const showProd = ref(false)
+    const selProd = ref(<IProduct>{})
+
     async function mounted() {
 
     }
@@ -40,20 +51,28 @@ export default defineComponent({
 
     // 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: "drag", label: "Ordinamento", field: "", align: "left", style: "width: 50px" },
+      { name: "image", label: "Copertina", field: "image", align: "center" },
+      { name: "name", label: "Titolo", field: "name", align: "left" },
+      { name: "authors", label: "Autore", field: "authors", align: "left" },
+      { name: "catprods", label: "Argomento", field: "catprods", align: "left" },
+      { name: "quantity", label: "Disponibilità", field: "quantity", 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
-    )
+    let cookieValue: string | null = null;
+    try {
+      cookieValue = tools.getCookie("selColCat");
+      // Se il cookie esiste e contiene una stringa JSON valida
+      cookieValue = cookieValue ? cookieValue : [];
+    } catch (error) {
+      console.error("Errore durante la lettura del cookie 'selColCat'", error);
+      cookieValue = []; // In caso di errore, inizializza come array vuoto
+    }
+
+    const selectedColumns = ref(cookieValue.length > 0 ? cookieValue : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"]);
+
 
     // 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
     const isColumnVisible = (column) => {
@@ -96,7 +115,7 @@ export default defineComponent({
 
     function formatCatProds(catprods: ICatProd[] | undefined | null): string {
       if (!catprods || !Array.isArray(catprods)) {
-          return "";
+        return "";
       }
 
       // Estrai il nome e il cognome di ogni autore e uniscili con ', '
@@ -110,10 +129,16 @@ export default defineComponent({
     onMounted(() => {
       const savedColumns = tools.getCookie("selColCat");
       if (savedColumns) {
-        selectedColumns.value = JSON.parse(savedColumns);
+        selectedColumns.value = savedColumns;
       }
     });
 
+    function showProduct(element: any) {
+      selProd.value = element
+
+      showProd.value = true
+    }
+
     return {
       allColumns,
       selectedColumns,
@@ -126,6 +151,9 @@ export default defineComponent({
       globalStore,
       costanti,
       onDragEnd,
+      showProduct,
+      showProd,
+      selProd,
     }
   },
 })