- Creazione "AbitareGliIblei"

- Mappa Interattiva con i markers

src/views/ecommerce/catalogo/catalogo.ts

@@ -16,6 +16,10 @@ import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
 import { CSelectUserActive } from '@src/components/CSelectUserActive'
 import { ICatalogo, IProduct, ISearchList } from 'model'
 
+import html2canvas from 'html2canvas'
+// import { VueHtmlToPaper } from 'vue-html-to-paper'
+import html2pdf from 'html2pdf.js'
+
 import { fieldsTable } from '@store/Modules/fieldsTable'
 
 export default defineComponent({
@@ -32,6 +36,7 @@ export default defineComponent({
         formato: [],
         Categoria: [],
         Editore: [],
+        pdf: false,
       }),
     },
   },
@@ -46,6 +51,9 @@ export default defineComponent({
     const search = ref('')
     const optauthors = ref(<any>[])
 
+    const pdfContent = ref(null);
+
+
     const filter = ref(<any>{
       author: '',
       sort: 1,
@@ -105,6 +113,8 @@ export default defineComponent({
     watch(() => cat.value, (newval, oldval) => {
 
       if (cat.value) {
+        if (loadpage.value)
+          tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
         filter.value.author = '' // disattivo il filtro autore        
         resetSearch()
       }
@@ -127,6 +137,8 @@ export default defineComponent({
       // Se filtroAuthor attivato, allora evito il filtro per Categoria
       if (filter.value.author) {
         cat.value = '' // disattivo il filtro categoria
+        if (loadpage.value)
+          tools.setCookie(tools.COOK_CATEGORIA, '')
         resetSearch()
       }
 
@@ -145,10 +157,15 @@ export default defineComponent({
     })
 
     watch(() => cosa.value, (newval, oldval) => {
-      tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
-      if (cosa.value !== shared_consts.PROD.TUTTI)
-        cat.value = ''
-      calcArrProducts()
+      if (oldval !== 0) {
+        tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
+        if (cosa.value !== shared_consts.PROD.TUTTI) {
+          cat.value = ''
+          if (loadpage.value)
+            tools.setCookie(tools.COOK_CATEGORIA, '')
+        }
+        calcArrProducts()
+      }
     })
 
     function resetSearch() {
@@ -272,10 +289,10 @@ export default defineComponent({
       if (!search.value) {
         return arrprod
       }
-    
+     
       let lowerSearchText = search.value.toLowerCase();
       let catstr = cat.value;
-    
+     
       return arrprod.filter((product: IProduct) => {
         let lowerName = product.productInfo.name!.toLowerCase();
         const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
@@ -309,6 +326,8 @@ export default defineComponent({
       //++Todo: Per ora visualizzo solo il "Negozio" e non i GAS...
       cosa.value = shared_consts.PROD.BOTTEGA
 
+      cat.value = tools.getCookie(tools.COOK_CATEGORIA, '')
+
       //cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.GAS, true)
       //if (cosa.value === shared_consts.PROD.TUTTI)
 
@@ -398,6 +417,49 @@ export default defineComponent({
       return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
     })
 
+    const loadImage = (src) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.onload = () => resolve(img)
+        img.onerror = reject
+        img.src = src
+      })
+    }
+
+    const generatePDF = async () => {
+      $q.loading.show({
+        message: 'Caricamento immagini e generazione PDF in corso...'
+      })
+
+      try {
+
+        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' }
+        }
+
+        await html2pdf().from(element).set(opt).save()
+
+        $q.loading.hide()
+        $q.notify({
+          color: 'positive',
+          message: 'PDF generato con successo!',
+          icon: 'check'
+        })
+      } catch (error) {
+        $q.loading.hide()
+        $q.notify({
+          color: 'negative',
+          message: 'Errore nella generazione del PDF',
+          icon: 'error'
+        })
+        console.error('Errore nella generazione del PDF:', error)
+      }
+    }
 
     onMounted(mounted)
 
@@ -434,6 +496,8 @@ export default defineComponent({
       mycolumns,
       tabvisu,
       getSearchText,
+      generatePDF,
+      pdfContent,
     }
   }
 })

src/views/ecommerce/catalogo/catalogo.vue

@@ -1,11 +1,12 @@
 <template>
   <q-page>
+    <q-btn v-if="optcatalogo.pdf" label="Crea PDF" @click="generatePDF"></q-btn>
+    <!--<div ref="pdfContent" class="pdf-content">-->
+
     <div class="text-center">
       <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
     </div>
     <div v-if="loadpage" class="panel">
-      <div v-if="true"></div>
-
       <div class="container">
         <q-tabs v-model="tabvisu" dense class="bg-indigo text-white">
           <q-tab name="categorie" icon="fas fa-folder-open" label="Categorie">
@@ -140,7 +141,6 @@
           </q-tab-panel>
         </q-tab-panels>
 
-
         <div class="row justify-center q-mx-auto">
           <q-select
             v-model="filter.sort"
@@ -175,19 +175,62 @@
         </div>
 
         <div class="row justify-around">
-          <q-infinite-scroll
-            v-if="arrLoaded && arrLoaded.length > 0"
-            ref="myinfscroll"
-            :initial-index="0"
-            @load="onLoadScroll"
-            :offset="2000"
-            debounce="200"
-            class="q-pa-xs row items-start"
-            style="place-content: center"
-          >
+          <div>
+            <q-infinite-scroll
+              v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
+              ref="myinfscroll"
+              :initial-index="0"
+              @load="onLoadScroll"
+              :offset="2000"
+              debounce="200"
+              class="q-pa-xs row items-start"
+              style="place-content: center"
+            >
+              <div
+                class="q-pa-xs"
+                v-for="(product, index) in arrLoaded"
+                :key="index"
+              >
+                <CContainerCatalogoCard
+                  v-if="
+                    product.active ||
+                    (show_hide &&
+                      productInfo.productTypes.includes(
+                        shared_consts.PRODUCTTYPE.PRODUCT
+                      ))
+                  "
+                  :id="product._id"
+                  :complete="false"
+                  :cosa="cosa"
+                  :optcatalogo="optcatalogo"
+                  :options="{
+                    show_short_descr: false,
+                    show_price: false,
+                    show_cat: false,
+                    quante_col: 'c2',
+                    in_3d: false,
+                  }"
+                  @selauthor="selauthor"
+                />
+                <CProductCard
+                  v-else-if="product.active || show_hide"
+                  :id="product._id"
+                  :complete="false"
+                  :cosa="cosa"
+                />
+              </div>
+              <template v-slot:loading>
+                <div class="text-center">
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
             <div
-              class="q-pa-xs"
-              v-for="(product, index) in arrLoaded"
+              v-else
+              id="pdf-content"
+              class="q-pa-xs row items-start"
+              style="place-content: center"
+              v-for="(product, index) in arrProducts"
               :key="index"
             >
               <CContainerCatalogoCard
@@ -218,12 +261,7 @@
                 :cosa="cosa"
               />
             </div>
-            <template v-slot:loading>
-              <div class="text-center">
-                <q-spinner-dots color="primary" size="40px" />
-              </div>
-            </template>
-          </q-infinite-scroll>
+          </div>
         </div>
       </div>
     </div>