- Continuazione del Catalogo

src/views/ecommerce/catalogo/catalogo.ts

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, PropType } from 'vue'
+import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, PropType, nextTick } from 'vue'
 import { tools } from '@store/Modules/tools'
 import { useUserStore } from '@store/UserStore'
 import { useRouter } from 'vue-router'
@@ -72,6 +72,7 @@ export default defineComponent({
     const mycolumns = ref([])
 
     const tabvisu = ref('categorie')
+    const tabcatalogo = ref('visu')
 
     const searchList = ref([] as ISearchList[])
 
@@ -266,7 +267,7 @@ export default defineComponent({
         });
       }
 
-      console.log('filter.value.sort', filter.value.sort)
+      // console.log('filter.value.sort', filter.value.sort)
       // sort using filter.value.sort :
       if (filter.value.sort === costanti.SORT_PUBDATE) {
 
@@ -427,6 +428,8 @@ export default defineComponent({
     }
 
     const generatePDF = async () => {
+      await nextTick()
+
       $q.loading.show({
         message: 'Caricamento immagini e generazione PDF in corso...'
       })
@@ -435,14 +438,26 @@ export default defineComponent({
 
         const element = document.getElementById('pdf-content')
         const opt = {
-          margin: 1,
-          filename: 'catalogo_libri.pdf',
-          image: { type: 'jpeg', quality: 0.98 },
-          html2canvas: { scale: 2, useCORS: true },
-          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+          margin: [0.1, 0.1, 0.1, 0.1],
+          filename: 'catalogo_completo.pdf',
+          image: {
+            type: 'jpeg',
+            quality: 0.98
+          },
+          html2canvas: {
+            scale: 2,
+            useCORS: true,
+            letterRendering: true,
+          },
+          jsPDF: {
+            unit: 'in',
+            format: 'a4',
+            orientation: 'portrait',
+            compress: true
+          },
         }
 
-        await html2pdf().from(element).set(opt).save()
+        await html2pdf().set(opt).from(element).save()
 
         $q.loading.hide()
         $q.notify({
@@ -461,6 +476,59 @@ export default defineComponent({
       }
     }
 
+    function getWidthPerc(): string {
+
+      let mynum = props.optcatalogo.numschede_perRiga! + 0
+
+      return (100 / mynum) + '%'
+    }
+
+    function getCardStyle(index: any) {
+      return {
+        'place-content': 'center',
+        'flex': `0 1 ${props.optcatalogo.widthscheda}`,
+        'width': getWidthPerc(), // per N elementi per riga
+        // 'margin-bottom': props.optcatalogo.margine_pagina, // spazio tra le righe
+      }
+    }
+
+    function groupedPages() {
+      const schedePerRiga = props.optcatalogo.numschede_perRiga || 1
+      const schedePerCol = props.optcatalogo.numschede_perCol || 1
+      const schedePerPagina = schedePerRiga * schedePerCol
+
+      const pages = []
+
+      // Iterate attraverso l'array prodotti con step = schedePerPagina
+      for (let pageStart = 0; pageStart < arrProducts.value.length; pageStart += schedePerPagina) {
+        const page = []
+
+        // Crea le righe per questa pagina
+        for (let rowStart = 0; rowStart < schedePerCol; rowStart++) {
+          const row = []
+
+          // Riempi ogni riga con il numero corretto di prodotti
+          for (let col = 0; col < schedePerRiga; col++) {
+            const productIndex = pageStart + (rowStart * schedePerRiga) + col
+            if (productIndex < arrProducts.value.length) {
+              row.push(arrProducts.value[productIndex])
+            } else {
+              // Opzionale: riempi con null se non ci sono abbastanza prodotti
+              row.push(null)
+            }
+          }
+
+          page.push(row)
+        }
+
+        pages.push(page)
+      }
+
+      return pages
+
+    }
+
+
     onMounted(mounted)
 
     return {
@@ -498,6 +566,10 @@ export default defineComponent({
       getSearchText,
       generatePDF,
       pdfContent,
+      tabcatalogo,
+      getCardStyle,
+      getWidthPerc,
+      groupedPages,
     }
   }
 })