- Continuazione del Catalogo

.env.development

@@ -1,17 +1,18 @@
 APP_VERSION="1.1.4"
 SERVICE_WORKER_FILE="service-worker.js"
-APP_ID="13"
+APP_ID="18"
 DIRECTORY_LOCAL="newfreeplanet"
 DIRECTORY_SERVER="freeplanet_serverside"
 SERVERDIR_WEBSITE=""
 SERVERPW_WEBSITE=""
 APP_URL="https://localhost"
 URL_FACEBOOK="https://www.facebook.com/freeplanetapp"
+PROVA_PAOLO="PROVA ENV FUNZIONA!"
 LANG_DEFAULT="it"
 PAO_APP_ID="KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF"
 MASTER_KEY="KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T"
 MONGODB_HOST="https://localhost:3000"
-LOGO_REG='riso-logo-full.png'
+LOGO_REG='gruppomacro-logo-full.png'
 TEST_NAME="Paolo"
 TEST_SURNAME="Arena"
 TEST_EMAIL=""
@@ -24,5 +25,5 @@ DEBUG="1"
 TELEGRAM_SUPPORT=""
 PROJECT_ID_MAIN="5cc0a13fe5c9d156728f400a"
 TEST_CELL=""
-VUE_APP_ISTEST="1"
+VUE_APP_ISTEST=1
-VUE_APP_INLOCALE="1"
+VUE_APP_INLOCALE=1

_ALL_SITES/riso.app/db/lang/ws_it.js

@@ -127,7 +127,6 @@ const msg_website_it = {
     keywords: 'Parole Chiave',
     desctiption: 'Descrizione',
     heightimg: 'Altezza Immagine',
-    heightcarousel: 'Altezza Carosello',
   },
   msg: {
     myAppName: 'Riso',

_ALL_SITES/riso.app/quasar.conf.js

@@ -154,7 +154,7 @@ module.exports = configure((ctx) => ({
     https: false,
     port: 8084,
     open: false, // opens browser window automatically
-    hot: true, // Disable hot module replacement
+    hot: false, // Disable hot module replacement
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Headers': '*',

now.txt

@@ -1 +1 @@
-TERMINA DI LAVORARE SU piuchebuono.app: (Sovrascrivo !)
+TERMINA DI LAVORARE SU riso.app: (Sovrascrivo !)

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "riso",
+  "name": "gruppomacro",
   "version": "1.1.4",
-  "description": "Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.",
+  "description": "GruppoMacro",
-  "productName": "Riso",
+  "productName": "Gruppo Macro",
   "author": "Paolo Arena",
   "private": true,
   "keywords": [],
@@ -54,9 +54,11 @@
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
     "gsap": "^3.12.5",
+    "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",
+    "jspdf": "^2.5.2",
     "leaflet": "^1.9.4",
     "leaflet-routing-machine": "^3.2.12",
     "leaflet.markercluster": "^1.5.3",
@@ -127,7 +129,6 @@
     "jest": "^29.7.0",
     "json-loader": "^0.5.7",
     "node-sass": "^9.0.0",
-    "nodemon": "^3.1.7",
     "npm-check-updates": "^17.1.3",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "parcel": "^2.12.0",

quasar.conf.js

@@ -17,8 +17,6 @@ const webpack = require('webpack')
 const helpers = require('./helpers')
 const envparser = require('./config/envparser')
 
-const package = require('./package.json');
-
 // const ESLintPlugin = require('eslint-webpack-plugin')
 
 module.exports = configure((ctx) => ({
@@ -89,7 +87,6 @@ module.exports = configure((ctx) => ({
   // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
   build: {
     env: envparser(),
-    versionCode: package.version,
     vueRouterMode: 'history',
     vueCompiler: true,
     gzip: false, // gzip true
@@ -152,9 +149,9 @@ module.exports = configure((ctx) => ({
   },
   devServer: {
     https: false,
-    port: 8084,
+    port: 8089,
     open: false, // opens browser window automatically
-    hot: false, // Disable hot module replacement
+    hot: true, // Disable hot module replacement
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Headers': '*',
@@ -251,8 +248,6 @@ module.exports = configure((ctx) => ({
       'Cookies',
       'Loading',
       'AppVisibility',
-      'LocalStorage',
-      'SessionStorage',    
     ],
     get plugins_1() {
       return this._plugins;
@@ -313,9 +308,9 @@ module.exports = configure((ctx) => ({
     },
 
     manifest: {
-      name: 'Riso',
+      name: 'Gruppo Macro',
-      short_name: 'Riso',
+      short_name: 'GruppoMacro',
-      description: 'Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.',
+      description: '',
       display: 'standalone',
       orientation: 'portrait',
       background_color: '#fff',
@@ -325,54 +320,24 @@ module.exports = configure((ctx) => ({
       start_url: "/?homescreen=1",
       icons: [
         {
-          src: 'images/riso-android-icon-512x512.png',
+          src: 'images/gm-android-icon-512x512.png',
           sizes: '512x512',
           type: 'image/png',
         },
         {
-          src: 'images/riso-android-icon-384x384.png',
+          src: 'images/gm-android-icon-192x192.png',
-          sizes: '384x384',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-android-icon-192x192.png',
           sizes: '192x192',
           type: 'image/png',
         },
         {
-          src: 'images/riso-android-icon-144x144.png',
+          src: 'images/gm-apple-touch-icon.png',
-          sizes: '144x144',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-android-icon-96x96.png',
-          sizes: '96x96',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-apple-icon-120x120.png',
-          sizes: '120x120',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-apple-icon-144x144.png',
-          sizes: '144x144',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-apple-icon-152x152.png',
-          sizes: '152x152',
-          type: 'image/png',
-        },
-        {
-          src: 'images/riso-apple-icon-180x180.png',
           sizes: '180x180',
           type: 'image/png',
         },
       ],
       related_applications: [{
         "platform": "webapp",
-        "url": "https://www.riso.app/manifest.json"
+        "url": "https://www.gruppomacro.app/manifest.json"
       }]
     },
   },
@@ -407,7 +372,7 @@ module.exports = configure((ctx) => ({
     builder: {
       // https://www.electron.build/configuration/configuration
 
-      appId: 'Riso',
+      appId: 'GruppoMacro',
     },
 
     // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain

src/common/shared_vuejs.ts

@@ -168,6 +168,7 @@ export const shared_consts = {
     MAPPAGETCOORDINATE: 380,
     EDITADDRESSBYCOORD: 390,
     GRID_ORIZ: 400,
+    QRCODE: 410,
   },
 
   QUERYTYPE_MYGROUP: 1,
@@ -1673,6 +1674,10 @@ export const shared_consts = {
       value: 400,
       label: 'Visualizzatore Tabelle',
     },
+    {
+      value: 410,
+      label: 'Qr Code',
+    },
   ],
 
   TypesElemAdminTools: [

src/components/CCatalogo/CCatalogo.ts

@@ -19,6 +19,7 @@ export default defineComponent({
         Categoria: [],
         Editore: [],
         pdf: false,
+        backgroundimage: '',
       }),
     },
   },

src/components/CCatalogoCard/CCatalogoCard.scss

@@ -159,7 +159,7 @@
 
 .book-title {
   margin: 8px;
-  font-family: 'Poppins,sans-serif';
+  font-family: 'Arial, Poppins,sans-serif';
   font-weight: bold;
   color: #333;
   display: block;
@@ -258,6 +258,10 @@
 }
 
 .colfix_prodotti_2 {
+  width: 240px;
+}
+
+.colfix_prodotti_3 {
   width: 170px;
 }
 
@@ -312,10 +316,10 @@
 
 .scheda-book {
   text-align: center;
-  margin-left: 20px;
+  //margin-left: 20px;
 
   @media (max-width: 718px) {
-    margin-left: 5px;
+    //margin-left: 5px;
   }
 }
 

src/components/CCatalogoCard/CCatalogoCard.ts

@@ -66,6 +66,7 @@ export default defineComponent({
         Categoria: [],
         Editore: [],
         pdf: false,
+        backgroundimage: '',
       }),
     },
   },

src/components/CCatalogoCard/CCatalogoCard.vue

@@ -1,21 +1,27 @@
 <template>
   <div
     :class="{
-      'row items-start q-gutter-sm': true,
+      ' items-start q-gutter-sm': true,
     }"
+    :style="
+      optcatalogo.height
+        ? ' height: ' + optcatalogo.height + ' !important; '
+        : ''
+    "
   >
     <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
     <div
       v-if="!!myproduct && !!myproduct.productInfo"
       :class="{
         'my-card-big book-details': complete,
-        'book-card': !complete,
+        'book-card': !complete && !optcatalogo.pdf,
-        colfix_prodotti_1: options.quante_col == 'c1',
+        colfix_prodotti_1: options.quante_col == 'c1' && !optcatalogo.pdf,
-        colfix_prodotti_2: options.quante_col == 'c2',
+        colfix_prodotti_2: options.quante_col == 'c2' && !optcatalogo.pdf,
+        colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
       }"
     >
       <q-toggle
-        v-if="tools.isManager()"
+        v-if="tools.isManager() && !optcatalogo.pdf"
         v-model="editOn"
         class="absolute-top-right"
         color="green"
@@ -24,7 +30,7 @@
       >
       </q-toggle>
       <q-page-sticky
-        v-if="complete"
+        v-if="complete && !optcatalogo.pdf"
         position="bottom-right"
         :offset="[18, 0]"
         style="z-index: 1000"
@@ -40,13 +46,22 @@
 
       <q-card-section>
         <div
-          :class="{ 'flex q-pa-sm': true, 'shadow-2': options.in_3d }"
+          :class="{
-          style="place-content: center"
+            'flex q-pa-sm': !optcatalogo.pdf,
+            'shadow-2': options.in_3d,
+            'items-center': true, // Centrare verticalmente
+            
+          }"
+          :style="'justify-items: center; '"
         >
           <q-img
+            v-if="myproduct.productInfo"
             :src="
-              productInfo.imagefile
+              myproduct.productInfo.imagefile
-                ? tools.getFullFileNameByImageFile('productInfos', myproduct.myproduct.productInfo.imagefile)
+                ? tools.getFullFileNameByImageFile(
+                    'productInfos',
+                    myproduct.productInfo.imagefile
+                  )
                 : myproduct.productInfo.image_link
             "
             :alt="myproduct.productInfo.name"
@@ -54,7 +69,15 @@
               'book-image-fixed': complete,
               'cursor-pointer': !complete,
               'shadow-4': true,
+              'image-wrapper': optcatalogo.pdf,
+              'items-center': true,
             }"
+            :style="
+              'place-items: center; ' +
+              (optcatalogo.width
+                ? ' width: ' + optcatalogo.width + ' !important; '
+                : '')
+            "
             @click="click_opendetail()"
           >
             <div
@@ -62,6 +85,7 @@
               style="left: 90%; top: -18px; transform: translateX(-50%)"
             >
               <q-btn
+                v-if="!optcatalogo.pdf"
                 color="blue-6"
                 class="semi-transparent"
                 round
@@ -72,12 +96,6 @@
             </div>
           </q-img>
 
-          <!--@click="
-              complete
-                ? toggleFullScreen
-                : naviga(`/catalogo/` + myproduct._id + '/' + cosa)
-            "-->
-
           <div class="scheda-book">
             <q-card-title>
               <span class="book-title" :data-col="options.quante_col">

src/components/CContainerCatalogoCard/CContainerCatalogoCard.scss

@@ -1 +1,49 @@
+.pdf-page {
+    margin-bottom: 20px;
+    background: white;
+}
 
+.page-break-after {
+    page-break-after: always;
+    break-after: page;
+}
+
+.page-break-before {
+    page-break-before: always;
+    break-before: page;
+}
+
+.page-break-avoid {
+    page-break-inside: avoid;
+    break-inside: avoid;
+}
+
+@media print {
+    .pdf-page {
+        margin: 0;
+        page-break-after: always;
+    }
+}
+
+.image-container {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+    margin-bottom: 20px;
+  }
+
+  .image-wrapper {
+    max-width: 100%;
+    display: block;
+  }
+
+  .image-wrapper img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Per forzare una nuova pagina prima dell'immagine se necessario */
+  .force-new-page {
+    page-break-before: always;
+    break-before: page;
+  }

src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts

@@ -53,6 +53,7 @@ export default defineComponent({
         Categoria: [],
         Editore: [],
         pdf: false,
+        backgroundimage: '',
       }),
     },
   },

src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>  
   <CCatalogoCard
     :id="id"
     :complete="complete"
@@ -10,7 +9,6 @@
     :optcatalogo="optcatalogo"
   >
   </CCatalogoCard>
-  </div>
   <q-dialog
     v-model="opendetailbool"
     position="top"

src/components/CMyEditElem/CMyEditElem.ts

@@ -2,7 +2,7 @@ import {
   defineComponent, onMounted, PropType, computed, ref, toRef, watch,
 } from 'vue'
 
-import { IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
+import { IColGridTable, IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '@/components/CImgTitle'
@@ -307,6 +307,28 @@ export default defineComponent({
 
     }
 
+    function saveFieldElem(rec: any, newval: any, col: IColGridTable) {
+      console.log('saveFieldElem', rec, 'newval', newval, 'col', col)
+
+      let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
+
+      if (col.fieldtype === costanti.FieldType.image) {
+        if (iscatalogo) {
+          myel.value.catalogo[col.name] = newval.imagefile
+          //console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
+        } else {
+          myel.value[col.name] = newval.imagefile
+        }
+      } else {
+        if (iscatalogo) {
+          myel.value.catalogo[col.name] = newval
+          console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name])
+        } else {
+          myel.value[col.name] = newval
+        }
+      }
+    }
+
     function saveCard(recpass: IMyCard, myval: any) {
       if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
         if (props.myelem.listcards) {
@@ -337,8 +359,13 @@ export default defineComponent({
         (props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
         myel.value.image = myval
         myel.value.vers_img = tools.getGenerateVersionImage()
+
+      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMAGE) {
+        myel.value.image = myval
+
       }
       modifElem()
+      
     }
 
     function showAnimation() {
@@ -358,10 +385,15 @@ export default defineComponent({
       modifElem()
     }*/
 
-    function generateSizeOptions() {
+    function generateSizeOptions(widthpx: boolean = true) {
       const options = [];
+
+      let add = '';
+      if (widthpx)
+        add = 'px'
       for (let i = 0; i <= 700; i += 50) {
-        options.push({ label: `${i}px`, value: `${i}px` });
+
+        options.push({ label: `${i}${add}`, value: `${i}${add}` });
       }
       return options;
     }
@@ -371,6 +403,40 @@ export default defineComponent({
       myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
       modifElem()
     }
+    function updateCatalogoSizeWidth(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.width = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoNumSchedePerCol(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.numschede_perCol = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoNumSchedePerRiga(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.numschede_perRiga = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthScheda(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthscheda = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthPag(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthpag = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthPagPrintable(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthpagPrintable = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeHeight(value: any) {
+      myel.value.catalogo!.height = value
+      modifElem()
+    }
 
     function updateSizeHeight(value: any) {
       myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
@@ -520,6 +586,14 @@ export default defineComponent({
       updateClass4,
       selectedClasses,
       classiImmagineOptions,
+      saveFieldElem,
+      updateCatalogoSizeWidth,
+      updateCatalogoSizeHeight,
+      updateCatalogoSizeWidthScheda,
+      updateCatalogoSizeWidthPag,
+      updateCatalogoSizeWidthPagPrintable,
+      updateCatalogoNumSchedePerCol,
+      updateCatalogoNumSchedePerRiga,
     }
   },
 

src/components/CMyEditElem/CMyEditElem.vue

@@ -189,7 +189,10 @@
             />
             <q-select
               label="Altezza Carosello:"
-              v-if="(myel.type === shared_consts.ELEMTYPE.CARD) || (myel.type === shared_consts.ELEMTYPE.GRID_ORIZ)"
+              v-if="
+                myel.type === shared_consts.ELEMTYPE.CARD ||
+                myel.type === shared_consts.ELEMTYPE.GRID_ORIZ
+              "
               v-model="myel.heightcarousel"
               emit-value
               map-options
@@ -226,6 +229,7 @@
               style="width: 100px"
               emit-value
               map-options
+              @save="saveCard"
             >
             </q-select>
             <q-select
@@ -464,12 +468,12 @@
                   :rec="rec"
                   field="imagefile"
                   @update:model-value="modifElem"
-                  @save="saveCard"
                   :canEdit="true"
                   :canModify="true"
                   :nosaveToDb="true"
                   :path="myel.path"
                   :fieldtype="costanti.FieldType.imgcard"
+                  @save="saveCard"
                 >
                 </CMyFieldRec>
 
@@ -861,6 +865,56 @@
             </CMyFieldRec>
           </div>
         </div>
+        <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
+          <div v-if="enableEdit">
+            <q-input
+              dense
+              label="Link:"
+              @update:model-value="modifElem"
+              v-model="myel.container"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              dense
+              label="Testo Link:"
+              @update:model-value="modifElem"
+              v-model="myel.container2"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-toggle
+              v-model="myel.parambool"
+              color="positive"
+              label="Leggi"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-input
+              label="NomeFile Img:"
+              @update:model-value="modifElem"
+              v-model="myel.image"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <CMyFieldRec
+              title="NomeFile Img:"
+              table="myelems"
+              :id="myel._id"
+              :rec="myel"
+              field="image"
+              @update:model-value="modifElem"
+              :canEdit="true"
+              :canModify="true"
+              :path="myel.path"
+              :fieldtype="costanti.FieldType.image"
+            >
+            </CMyFieldRec>
+          </div>
+        </div>
 
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
           <div v-if="enableEdit">
@@ -1271,6 +1325,15 @@
           <div v-if="enableEdit" class="row">
             <div>Cataloghi:</div>
             <br />
+            <q-toggle
+              v-model="myel.catalogo.pdf"
+              color="positive"
+              icon="fas fa-file-pdf"
+              label="Versione PDF"
+              @update:model-value="modifElem"
+            >
+            </q-toggle>
+            <br>
 
             <!--++AddCATALOGO_FIELDS-->
             <q-select
@@ -1326,14 +1389,191 @@
               option-label="name"
             >
             </q-select>
-            Versione PDF:
+
+            <q-select
+              label="Largh. Schede:"
+              v-model="myel.catalogo.widthscheda"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidthScheda"
+              filled
+              dense
+              style="width: 150px"
+            />
+            <q-select
+              label="Largh. Pagina:"
+              v-model="myel.catalogo.widthpag"
+              emit-value
+              map-options
+              :options="generateSizeOptions(false)"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidthPag"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Largh. Immagini:"
+              v-model="myel.catalogo.width"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidth"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Altezza Schede:"
+              v-model="myel.catalogo.height"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeHeight"
+              filled
+              dense
+              style="width: 180px"
+            />
+          </div>
+          <div class="sfondo_margine">
+            Margini:<br />
+            <q-select
+              label="Schede per Riga"
+              v-model="myel.catalogo.numschede_perRiga"
+              emit-value
+              map-options
+              :options="[
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+              ]"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoNumSchedePerRiga"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Schede per Colonna"
+              v-model="myel.catalogo.numschede_perCol"
+              emit-value
+              map-options
+              :options="[
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+              ]"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoNumSchedePerCol"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-input
+              dense
+              label="Margine per Pagina:"
+              @update:model-value="modifElem"
+              v-model="myel.catalogo.margine_pagina"
+              filled
+              v-on:keyup.enter="saveFieldElem"
+            >
+            </q-input>
+            <q-input
+              dense
+              label="Margine per Riga:"
+              @update:model-value="modifElem"
+              v-model="myel.catalogo.margine_riga"
+              filled
+              v-on:keyup.enter="saveFieldElem"
+            >
+            </q-input>
+          </div>
+          <div>Sfondo:</div>
+          <div v-if="enableEdit">
+            Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
+            <CMyFieldRec
+              title="Per Web:"
+              table="catalogo"
+              :rec="myel.catalogo"
+              field="backgroundimage"
+              @update:model-value="modifElem"
+              :canEdit="true"
+              :canModify="true"
+              :fieldtype="costanti.FieldType.image"
+              @save="saveFieldElem"
+            >
+            </CMyFieldRec>
+            <br />
+            <div class="sfondo_print">
+              Per Stampa:
               <q-toggle
-              v-model="myel.catalogo.pdf"
+                v-model="myel.catalogo.printable"
                 color="positive"
                 icon="fas fa-file-pdf"
+                label="Versione Stampabile"
                 @update:model-value="modifElem"
               >
               </q-toggle>
+
+              <q-input
+                dense
+                label="Margine per Pagina:"
+                @update:model-value="modifElem"
+                v-model="myel.catalogo.margine_paginaPrintable"
+                filled
+                v-on:keyup.enter="saveFieldElem"
+              >
+              </q-input>
+              <q-input
+                dense
+                label="Margine per Riga:"
+                @update:model-value="modifElem"
+                v-model="myel.catalogo.margine_rigaPrintable"
+                filled
+                v-on:keyup.enter="saveFieldElem"
+              >
+              </q-input>
+
+              Nome File Printable: {{ myel.catalogo.backgroundimage_printable }}
+              <CMyFieldRec
+                title="Sfondo:"
+                table="catalogo"
+                :rec="myel.catalogo"
+                field="backgroundimage_printable"
+                @update:model-value="modifElem"
+                :canEdit="true"
+                :canModify="true"
+                :fieldtype="costanti.FieldType.image"
+                @save="saveFieldElem"
+              >
+              </CMyFieldRec>
+              <q-select
+                label="Largh. Pag. Stampa:"
+                v-model="myel.catalogo.widthpagPrintable"
+                emit-value
+                map-options
+                :options="generateSizeOptions(false)"
+                use-input
+                use-chips
+                @input="modifElem"
+                @new-value="updateCatalogoSizeWidthPagPrintable"
+                filled
+                dense
+                style="width: 180px"
+              />
+            </div>
           </div>
         </div>
       </q-list>

src/components/CMyElem/CMyElem.ts

@@ -15,6 +15,7 @@ import { shared_consts } from '@/common/shared_vuejs'
 import { LandingFooter } from '@/components/LandingFooter'
 import { CMyActivities } from '@/components/CMyActivities'
 import { CECommerce } from '@/components/CECommerce'
+import { CQRCode } from '@/components/CQRCode'
 import { CAITools } from '@/components/CAITools'
 import { CCatalogo } from '@/components/CCatalogo'
 // import { CMapMarker } from '@src/components/CMapMarker.off'
@@ -67,7 +68,7 @@ export default defineComponent({
     CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
     CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
     CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup, CMovements, CGridOriz,
+    CDashGroup, CMovements, CGridOriz, CQRCode,
     // ,  //CMapMarker, 
   },
   emits: ['selElemClick'],

src/components/CMyElem/CMyElem.vue

@@ -88,7 +88,9 @@
             :key="groupIndex"
             :name="groupIndex"
           >
-           <div class="row no-wrap justify-start items-center q-px-md full-width">
+            <div
+              class="row no-wrap justify-start items-center q-px-md full-width"
+            >
               <template v-for="(rec, cardIndex) in group" :key="cardIndex">
                 <div :class="cardColumnClass">
                   <q-card
@@ -236,6 +238,15 @@
           ></div>
         </div>
       </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
+        <div v-if="editOn" class="elemEdit">QRCODE:</div>
+        <CQRCode          
+          :read="myel.parambool"
+          :link="myel.container"
+          :textlink="myel.container2"
+          :imglogo="tools.getImgFileByElem(myel)"
+        ></CQRCode>
+      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
         <div class="text-center">
           <div
@@ -249,7 +260,7 @@
             @click="clickOnElem"
           >
             <q-img
-              :src="tools.getImgFileByElem(myel.image)"
+              :src="tools.getImgFileByElem(myel)"
               :fit="myel.fit"
               class="img"
               :width="myel.widthimg ? myel.widthimg : undefined"

src/components/CMyFieldRec/CMyFieldRec.ts

@@ -173,19 +173,23 @@ export default defineComponent({
         if (arrk.length > 2)
           mysubsubkey.value = arrk[2]
       }
-      // console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
+      console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value, 'mysubkey', mysubkey.value)
 
     }
 
     function showandsave(row: any, col: any, newval: any, valinitial: any) {
       console.log('showandsave CMyFieldDb', row, col, newval)
-      emit('save', props.rec, newval)
+      emit('save', props.rec, newval, col)
 
       if (props.nosaveToDb)
         return
 
       if (newval !== valinitial) {
+        if (props.id) {
           tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
+        } else {
+
+        }
       }
 
     }

src/components/CQRCode/CQRCode.ts

@@ -33,6 +33,11 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    imglogo: {
+      type: String,
+      required: false,
+      default: '',
+    },
     read: {
       type: Boolean,
       required: false,
@@ -82,6 +87,7 @@ export default defineComponent({
       ...toRefs(state),
       onDecode,
       naviga,
+      globalStore,
     }
   },
 })

src/components/CQRCode/CQRCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="globalStore.finishLoading"> 
     <div v-if="read">
       <div class="stream">
         <qr-stream @decode="onDecode" class="mb">
@@ -27,8 +27,9 @@
     </div>
     <div v-else>
       <div class="q-ma-sm">
-        {{textlink}}<br>
+        {{ textlink }}<br />
-        {{link}}
+        {{ link }}<br />
+        Logo: {{imglogo}}<br />
       </div>
       <qrcode-vue
         :width="250"
@@ -47,7 +48,7 @@
             ],
           },
         }"
-        :image="tools.getimglogo()"
+        :image="imglogo ? imglogo : tools.getimglogo()"
         :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
         :cornersDotOptions="{ type: undefined, color: '#000000' }"
         fileExt="png"

src/css/app.scss

@@ -2449,3 +2449,44 @@ body.body--dark {
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* Leggera ombra per effetto di profondità */
   margin: 10px 0; /* Spaziatura verticale */
 }
+
+.flex-container-book {
+  display: flex;
+  flex-direction: row; /* Allineamento orizzontale */
+  flex-wrap: wrap;
+  gap: 10px; /* Spaziatura tra gli elementi */
+}
+
+.flex-item-book {
+  display: flex; /* Rende il div un container flex per allineare i contenuti */
+  justify-content: center; /* Allineamento orizzontale al centro */
+  align-items: center; /* Allineamento verticale al centro */
+  padding: 10px;
+  flex-grow: 1; /* Opzionale: permette agli elementi di crescere uniformemente */
+
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.card-page {
+  break-after: page;
+  page-break-after: always;
+}
+
+.card-row {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.cards-container {
+  display: flex;
+  flex-direction: column !important;
+  width: 100% !important;
+}
+
+.sfondo_print{
+  background-color: #17ead9;
+}
+.sfondo_margine{
+  background-color: #d8f38a;
+}

src/db/lang/ws_it.js

@@ -1,9 +1,9 @@
 const msg_website_it = {
   ws: {
-    sitename: 'Riso',
+    sitename: 'Gruppo Macro',
-    siteshortname: 'RISO',
+    siteshortname: 'Gruppo Macro',
-    description: 'Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.',
+    description: '',
-    keywords: 'riso, piattaforma di scambio, rete italiana scambio orizzontale, riso app, riso piattaforma, scambio e baratto, momenta RIS',
+    keywords: '',
   },
   hours: {
     descr: 'Descrizione',
@@ -16,23 +16,35 @@ const msg_website_it = {
   pages: {
     home: 'Home',
     profile: 'Profilo',
+    install_site: 'Installa Sito',
     profile2: 'ProfiloU',
     mypage2: 'mypage2',
     myservice2: 'myservice2',
     myhosps2: 'myhosps2',
     mygood2: 'mygood2',
+    catalogo: 'Catalogo',
     fundraising: 'Sostieni il Progetto',
     notifs: 'Configura le Notifiche',
     unsubscribe: 'Disiscriviti',
+    unsubscribe_user: 'Disiscriviti User',
     test: 'Test',
     projects: 'Progetti',
     report: 'Report Ore',
     producer: 'Produttore',
     orderinfo: 'Ordini Effettuati',
     products: 'Prodotti',
+    cash: 'Cassa',
+    productInfos: 'Info Prodotti',
+    listinoprodotti: 'Listino Prodotti',
     productslist: 'Lista Prodotti',
     collabora: 'Collabora',
+    categories: 'Categorie',
     storehouses: 'Magazzino',
+    providers: 'Fornitori',
+    catprods: 'Categorie',
+    subcatprods: 'Sotto-Categorie',
+    gasordine: 'Gas Ordine',
+    scontisticas: 'Scontistica',
     departments: 'Uffici',
     orders: 'Ordini Ricevuti',
     orders2: 'Ordini Ricevuti',
@@ -121,15 +133,11 @@ const msg_website_it = {
     only_residenti: 'Solo Residenti',
     only_consiglio: 'Solo Consiglieri',
     color: 'Colore',
-    mainMenu: 'Menu Principale',
+    gasordini: 'Gas Ordini',
-    subtitle: 'Sottotitolo',
+    gestoreordini: 'Gestore Ordini',
-    lang: 'Lingua',
-    keywords: 'Parole Chiave',
-    desctiption: 'Descrizione',
-    heightimg: 'Altezza Immagine',
   },
   msg: {
-    myAppName: 'Riso',
+    myAppName: 'Più che Buono',
     myAppDescription: 'Il primo Vero Social Libero, Equo e Solidale, dove Vive Consapevolezza e Aiuto Comunitario. Gratuito',
     underconstruction: 'App in costruzione...',
     myDescriz: '',

src/db/static_data.ts

@@ -67,39 +67,6 @@ function getDynamicPages(site: ISites): IListRoutes[] {
       inmenu: false,
       infooter: false,
     },
-    {
-      active: true,
-      order: 12,
-      path: '/goods',
-      materialIcon: 'fas fa-tshirt',
-      name: 'mypages.goods',
-      component: () => import('@/root/goods/goods.vue'),
-      meta: { requiresAuth: true },
-      inmenu: true,
-      infooter: true,
-    },
-    {
-      active: true,
-      order: 15,
-      path: '/services',
-      materialIcon: 'fas fa-house-user',
-      name: 'mypages.services',
-      component: () => import('@/root/services/services.vue'),
-      meta: { requiresAuth: true },
-      inmenu: true,
-      infooter: true,
-    },
-    {
-      active: true,
-      order: 15,
-      path: '/activities',
-      materialIcon: 'fas fa-house-user',
-      name: 'mypages.activities',
-      component: () => import('@/root/activities/activities.vue'),
-      meta: { requiresAuth: true },
-      inmenu: false,
-      infooter: false,
-    },
     {
       active: true,
       order: 15,
@@ -111,17 +78,6 @@ function getDynamicPages(site: ISites): IListRoutes[] {
       inmenu: false,
       infooter: false,
     },
-    {
-      active: true,
-      order: 15,
-      path: '/hosps',
-      materialIcon: 'fas fa-bed',
-      name: 'mypages.hosp',
-      component: () => import('@/root/hosp/hosp.vue'),
-      meta: { requiresAuth: true },
-      inmenu: true,
-      infooter: true,
-    },
     {
       active: site.confpages && site.confpages.enableCircuits,
       order: 16,
@@ -276,7 +232,7 @@ function getDynamicPages(site: ISites): IListRoutes[] {
     {
       active: true,
       order: 150,
-      path: '/sostieniilprogetto',
+      path: '/fundraising',
       materialIcon: 'fas fa-hand-holding-heart',
       name: 'pages.fundraising',
       component: () => import('@src/root/fundraising/fundraising.vue'),

src/model/GlobalStore.ts

@@ -681,6 +681,20 @@ export interface ICatalogo {
   Categoria: string[]
   Editore: string[]
   pdf: boolean
+  backgroundimage?: string
+  backgroundimage_printable?: string
+  widthpag?: number
+  widthpagPrintable?: number
+  widthscheda?: string
+  width?: string
+  height?: string
+  printable?: boolean
+  numschede_perCol?: number
+  numschede_perRiga?: number
+  margine_pagina?: string
+  margine_riga?: string
+  margine_paginaPrintable?: string
+  margine_rigaPrintable?: string
 }
 
 

src/store/Modules/costanti.ts

@@ -19,6 +19,29 @@ export const costanti = {
     CERCO: 2,
   },
 
+  CATALOGO_FIELDS: [
+    'productTypes',
+    'excludeproductTypes',
+    'formato',
+    'Categoria',
+    'Editore',
+    'pdf',
+    'printable',
+    'backgroundimage',
+    'backgroundimage_printable',
+    'width',
+    'widthscheda',
+    'widthpag',
+    'Printable',
+    'height',
+    'numschede_perCol',
+    'numschede_perRiga',
+    'margine_pagina',
+    'margine_riga',
+    'margine_paginaPrintable',
+    'margine_rigaPrintable',
+  ],
+
   TIPOFAVBOOK: {
     FAVORITE: 1,
     BOOKMARK: 2,
@@ -313,6 +336,8 @@ export const costanti = {
   VISUTABLE_GRID_ORIZ: -10,
 
   DIR_UPLOAD: 'upload/',
+  DIR_PRODUCTS: 'products/',
+  DIR_CATALOGO: 'catalogo/',
 
   FRIENDS: 1,
   ASK_TRUST: 2,

src/store/Modules/fieldsTable.ts

@@ -147,6 +147,26 @@ export const colmylistcards = [
   AddCol({ name: 'link', label_trans: 'link' }),
 ]
 
+export const colmyelCatalogo = [
+  AddCol({ name: 'productTypes', label_trans: 'productTypes', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'excludeproductTypes', label_trans: 'excludeproductTypes', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'pdf', label_trans: 'pdf' }),
+  AddCol({ name: 'Editore', label_trans: 'Editore' }),
+  AddCol({ name: 'backgroundimage', label_trans: 'backgroundimage', fieldtype: costanti.FieldType.image }),
+  AddCol({ name: 'backgroundimage_printable', label_trans: 'backgroundimage_printable', fieldtype: costanti.FieldType.image }),
+  AddCol({ name: 'widthscheda', label_trans: 'widthscheda', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'widthpag', label_trans: 'widthpag', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'widthpagPrintable', label_trans: 'widthpagPrintable', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'width', label_trans: 'width', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'height', label_trans: 'height', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'numschede_perCol', label_trans: 'numschede_perCol', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'numschede_perRiga', label_trans: 'numschede_perRiga', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'margine_pagina', label_trans: 'margine_pagina', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'margine_riga', label_trans: 'margine_riga', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'margine_paginaPrintable', label_trans: 'margine_paginaPrintable', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'margine_rigaPrintable', label_trans: 'margine_rigaPrintable', fieldtype: costanti.FieldType.string }),
+]
+
 export const colmyelems = [
   AddCol({ name: 'active', label_trans: 'myelems.active', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'path', label_trans: 'myelems.path' }),
@@ -4131,6 +4151,13 @@ export const fieldsTable = {
       colkey: '_id',
       collabel: 'title',
     },
+    {
+      value: 'catalogo',
+      label: 'Elementi Catalogo',
+      columns: colmyelCatalogo,
+      colkey: '_id',
+      collabel: 'title',
+    },
     {
       value: 'listcards',
       label: 'Elementi',

src/store/Modules/tools.ts

@@ -7972,6 +7972,8 @@ export const tools = {
           return ''
       } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
         return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.container + addtourl
+      } else if (elem.type === shared_consts.ELEMTYPE.QRCODE) {
+        return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.image + addtourl
       } else {
         return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.image + addtourl
       }

src/store/globalStore.ts

@@ -2192,6 +2192,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
           Categoria: [],
           Editore: [],
           pdf: false,
+          backgroundimage: '',
         }
       }
 

src/views/ecommerce/catalogo/catalogo.scss

@@ -52,3 +52,12 @@ $heightBtn: 100%;
   text-align: center;
 
 }
+
+.fixed-width {
+  width: var(--width) !important; /* Usa una variabile CSS */
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}

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,
+          margin: [0.1, 0.1, 0.1, 0.1],
-          filename: 'catalogo_libri.pdf',
+          filename: 'catalogo_completo.pdf',
-          image: { type: 'jpeg', quality: 0.98 },
+          image: {
-          html2canvas: { scale: 2, useCORS: true },
+            type: 'jpeg',
-          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+            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,
     }
   }
 })

src/views/ecommerce/catalogo/catalogo.vue

@@ -1,27 +1,55 @@
 <template>
   <q-page>
-    <q-btn v-if="optcatalogo.pdf" label="Crea PDF" @click="generatePDF"></q-btn>
+    <q-tabs
-    <!--<div ref="pdfContent" class="pdf-content">-->
+      v-if="optcatalogo.pdf"
-
+      v-model="tabcatalogo"
+      dense
+      class="bg-green text-white"
+    >
+      <q-tab name="visu" icon="fas fa-eye" label="Visualizza"> </q-tab>
+      <q-tab name="sfondo" icon="fas fa-image" label="Sfondo"> </q-tab>
+      <q-tab name="opzioni" icon="fas fa-save" label="Opzioni"> </q-tab>
+    </q-tabs>
+    <q-tab-panels v-model="tabcatalogo" animated class="">
+      <q-tab-panel name="visu">
+        <q-btn
+          v-if="optcatalogo.pdf"
+          label="Crea PDF"
+          @click="generatePDF"
+        ></q-btn>
+        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
           <div class="text-center">
-      <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
+            <q-spinner
+              v-if="!loadpage"
+              color="primary"
+              size="3em"
+              :thickness="2"
+            />
           </div>
           <div v-if="loadpage" class="panel">
             <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">
+                <q-tab
+                  name="categorie"
+                  icon="fas fa-folder-open"
+                  label="Categorie"
+                >
                   <q-badge v-if="cat" color="red" floating>1</q-badge>
                 </q-tab>
                 <q-tab name="autori" icon="fas fa-user" label="Autori">
                   <q-badge v-if="filter.author" color="red" floating>1</q-badge>
                 </q-tab>
                 <q-tab name="ricerca" icon="fas fa-search" label="Cerca">
-            <q-badge v-if="getSearchText()" color="red" floating>1</q-badge>
+                  <q-badge v-if="getSearchText()" color="red" floating
+                    >1</q-badge
+                  >
                 </q-tab>
               </q-tabs>
               <q-tab-panels v-model="tabvisu" animated class="">
                 <q-tab-panel name="categorie">
-            <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
+                  <div
+                    class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"
+                  >
                     <div v-for="(reccat, index) in getCatProds()" :key="index">
                       <span
                         :class="{
@@ -98,7 +126,11 @@
                   </q-toolbar>
                 </q-tab-panel>
                 <q-tab-panel name="ricerca">
-            <div class="col" v-for="(item, index) in searchList" :key="index">
+                  <div
+                    class="col"
+                    v-for="(item, index) in searchList"
+                    :key="index"
+                  >
                     <CMySelect
                       :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                       v-if="
@@ -119,7 +151,9 @@
                           ? item.tablesel
                           : ''
                       "
-                :pickup="item.type === costanti.FieldType.select_by_server"
+                      :pickup="
+                        item.type === costanti.FieldType.select_by_server
+                      "
                       :label-color="$q.dark.isActive ? 'white' : 'black'"
                       myclass="comboselector"
                       color="primary"
@@ -156,15 +190,19 @@
               </div>
 
               <div class="text-center q-py-sm prod_trov">
-          <span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
+                <span
+                  v-show="productStore.getNumProdTot() !== arrProducts.length"
+                  >{{
                     t('ecomm.prodotti_trovati', {
                       qta: arrProducts.length,
                       qtatot: productStore.getNumProdTot(),
                     })
-          }}</span>
+                  }}</span
+                >
               </div>
               <div class="row justify-around" v-if="tools.isManager() && false">
                 <q-toggle
+                  v-if="!optcatalogo.pdf"
                   v-model="show_hide"
                   push
                   label="Mostra Nascosti"
@@ -174,8 +212,26 @@
                 ></q-toggle>
               </div>
 
-        <div class="row justify-around">
+              <div
-          <div>
+                id="pdf-content"
+                ref="pdfContent"
+                :class="{ 'fixed-width': true }"
+                :style="{
+                  backgroundImage: `url(${
+                    costanti.DIR_UPLOAD +
+                    costanti.DIR_CATALOGO +
+                    (optcatalogo.printable
+                      ? optcatalogo.backgroundimage_printable
+                      : optcatalogo.backgroundimage)
+                  })`,
+                  backgroundSize: 'contain',
+                  '--width':
+                    (optcatalogo.printable
+                      ? optcatalogo.widthpagPrintable
+                      : optcatalogo.widthpag) + 'px',
+                }"
+              >
+                <div class="flex-container-book">
                   <q-infinite-scroll
                     v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
                     ref="myinfscroll"
@@ -225,17 +281,34 @@
                       </div>
                     </template>
                   </q-infinite-scroll>
+                  <div v-else class="cards-container">
+                    <!-- Itera sulle pagine -->
                     <div
-              v-else
+                      v-for="(page, pageIndex) in groupedPages()"
-              id="pdf-content"
+                      :key="pageIndex"
-              class="q-pa-xs row items-start"
+                      class="card-page"
-              style="place-content: center"
+                      :style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_paginaPrintable : optcatalogo.margine_pagina};`"
-              v-for="(product, index) in arrProducts"
+                    >
-              :key="index"
+                      <!-- Itera sulle righe di ogni pagina -->
+                      <div
+                        v-for="(row, rowIndex) in page"
+                        :key="`${pageIndex}-${rowIndex}`"
+                        class="card-row"
+                        :style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_rigaPrintable : optcatalogo.margine_riga};`"
+                      >
+                        <!-- Itera sui prodotti di ogni riga -->
+                        <div
+                          v-for="(product, colIndex) in row"
+                          :key="`${pageIndex}-${rowIndex}-${colIndex}`"
+                          class="flex-item-book image-container"
+                          :style="
+                            'place-content: center; ' +
+                            ('flex: 0 1 ' + optcatalogo.widthscheda + '; ')
+                          "
                         >
                           <CContainerCatalogoCard
                             v-if="
-                  product.active ||
+                              product && product.active ||
                               (show_hide &&
                                 productInfo.productTypes.includes(
                                   shared_consts.PRODUCTTYPE.PRODUCT
@@ -255,7 +328,7 @@
                             @selauthor="selauthor"
                           />
                           <CProductCard
-                v-else-if="product.active || show_hide"
+                            v-else-if="product && (product.active || show_hide)"
                             :id="product._id"
                             :complete="false"
                             :cosa="cosa"
@@ -265,6 +338,55 @@
                     </div>
                   </div>
                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="sfondo">
+        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
+          <div>
+            Sfondo:
+            {{
+              costanti.DIR_UPLOAD +
+              costanti.DIR_CATALOGO +
+              optcatalogo.backgroundimage
+            }}
+          </div>
+
+          <q-img
+            :src="
+              costanti.DIR_UPLOAD +
+              costanti.DIR_CATALOGO +
+              optcatalogo.backgroundimage
+            "
+          >
+          </q-img>
+          <div>
+            Sfondo Stampa:
+            {{
+              costanti.DIR_UPLOAD +
+              costanti.DIR_CATALOGO +
+              optcatalogo.backgroundimage_printable
+            }}
+          </div>
+
+          <q-img
+            :src="
+              costanti.DIR_UPLOAD +
+              costanti.DIR_CATALOGO +
+              optcatalogo.backgroundimage_printable
+            "
+          >
+          </q-img>
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="opzioni">
+        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"></div>
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <!--<div ref="pdfContent" class="pdf-content">-->
   </q-page>
 </template>
 

yarn.lock

@@ -4843,7 +4843,7 @@ chart.js@^4.4.4:
   dependencies:
     "@kurkle/color" "^0.3.0"
 
-chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@^3.5.3:
+chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -5676,7 +5676,7 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -7580,7 +7580,7 @@ html-webpack-plugin@5.6.0, html-webpack-plugin@^5.6.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
-html2canvas@^1.0.0, html2canvas@^1.0.0-rc.5:
+html2canvas@^1.0.0, html2canvas@^1.0.0-rc.5, html2canvas@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
   integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
@@ -7782,11 +7782,6 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore-by-default@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
-  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
-
 ignore-walk@^6.0.4:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.5.tgz#ef8d61eab7da169078723d1f82833b36e200b0dd"
@@ -8741,11 +8736,6 @@ js-yaml@~3.7.0:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
-jsbarcode@^3.5.8:
-  version "3.11.6"
-  resolved "https://registry.yarnpkg.com/jsbarcode/-/jsbarcode-3.11.6.tgz#96e8fbc3395476e162982a6064b98a09b5ea02c0"
-  integrity sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==
-
 jsbn@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
@@ -8844,7 +8834,7 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-jspdf@^2.3.1:
+jspdf@^2.3.1, jspdf@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-2.5.2.tgz#3c35bb1063ee3ad9428e6353852b0d685d1f923a"
   integrity sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==
@@ -9959,22 +9949,6 @@ node-sass@^9.0.0:
     stdout-stream "^1.4.0"
     "true-case-path" "^2.2.1"
 
-nodemon@^3.1.7:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-3.1.7.tgz#07cb1f455f8bece6a499e0d72b5e029485521a54"
-  integrity sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==
-  dependencies:
-    chokidar "^3.5.2"
-    debug "^4"
-    ignore-by-default "^1.0.1"
-    minimatch "^3.1.2"
-    pstree.remy "^1.1.8"
-    semver "^7.5.3"
-    simple-update-notifier "^2.0.0"
-    supports-color "^5.5.0"
-    touch "^3.1.0"
-    undefsafe "^2.0.5"
-
 nopt@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
@@ -11384,11 +11358,6 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
 
-pstree.remy@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
-  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
-
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -12289,13 +12258,6 @@ sigstore@^2.2.0:
     "@sigstore/tuf" "^2.3.4"
     "@sigstore/verify" "^1.2.1"
 
-simple-update-notifier@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
-  integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==
-  dependencies:
-    semver "^7.5.3"
-
 sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -12836,7 +12798,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -13063,11 +13025,6 @@ totalist@^3.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
   integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
-touch@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
-  integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
-
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -13298,11 +13255,6 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undefsafe@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
-  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
-
 undici-types@~6.19.2:
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
@@ -13521,13 +13473,6 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
-vue-barcode@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/vue-barcode/-/vue-barcode-1.3.0.tgz#c1a4fede73b2d45cdd154a176d6fd0e20fb32df0"
-  integrity sha512-DxQ0hxes/dP6GajsJumpW6jV14VwlnTwStZbtE6G0wkewuJVDoDOdxUr5seGuxsMT9fJ0aty4X47Z5TG0M/gxg==
-  dependencies:
-    jsbarcode "^3.5.8"
-
 vue-class-component@^6.0.0, vue-class-component@^6.2.0:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"