- Cataloghi: qualita di stampa e margini

src/components/CBorders/CBorders.ts

@@ -21,6 +21,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    addstr: {
+      type: String,
+      required: false,
+      default: 'px'
+    },
     disable: {
       type: Boolean,
       required: false,

src/components/CBorders/CBorders.vue

@@ -17,7 +17,7 @@
         :min="10"
         :max="1000"
         color="green"
-        addstr="px"
+        :addstr="addstr"
         @update:model-value="modifValueTop"
       ></CMySlider>
       <CMySlider
@@ -26,7 +26,7 @@
         :min="10"
         :max="1000"
         color="red"
-        addstr="px"
+        :addstr="addstr"
         @update:model-value="modifValueBottom"
       ></CMySlider>
       <CMySlider
@@ -35,7 +35,7 @@
         :min="10"
         :max="1000"
         color="orange"
-        addstr="px"
+        :addstr="addstr"
         @update:model-value="modifValueLeft"
       ></CMySlider>
       <CMySlider
@@ -44,7 +44,7 @@
         :min="10"
         :max="1000"
         color="fuchsia"
-        addstr="px"
+        :addstr="addstr"
         @update:model-value="modifValueRight"
       ></CMySlider>
     </div>

src/components/CCatalogoCard/CCatalogoCard.vue

@@ -4,7 +4,11 @@
       ' items-start q-gutter-sm': true,
     }"
     :style="
-      scheda.height ? ' height: ' + scheda.height + 'px !important; ' : ''
+      scheda.height
+        ? ' height: ' +
+          tools.adjustSize(optcatalogo, scheda.height) +
+          'px !important; '
+        : ''
     "
   >
     <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
@@ -54,9 +58,13 @@
           ]"
           :style="{
             justifyContent: 'center',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             gap: '0.5rem',
-            width: scheda.dimensioni?.scheda_prodotto?.size.width ?? '100%',
+            width:
+              tools.adjustSize(
+                optcatalogo,
+                scheda.dimensioni?.scheda_prodotto?.size.width
+              ) ?? '100%',
           }"
         >
           <q-img
@@ -81,10 +89,15 @@
                 scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
                   ? '50%'
                   : '45%',
-              ...(scheda.dimensioni?.immagine_prodotto?.size?.width && {
+              ...(tools.adjustSize(
+                optcatalogo,
+                scheda.dimensioni?.immagine_prodotto?.size?.width
+              ) && {
                 width:
-                  scheda.dimensioni?.immagine_prodotto.size?.width +
+                  tools.adjustSize(
-                  ' !important',
+                    optcatalogo,
+                    scheda.dimensioni?.immagine_prodotto.size?.width
+                  ) + ' !important',
               }),
               display: 'block',
             }"
@@ -121,9 +134,18 @@
             }"
           >
             <div
-              v-if="scheda.testo_right"
+              v-if="scheda.testo_right && scheda.testo_right"
-              :style="`line-height: ${scheda.line_height}%; `"
+              :style="{
-              v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_right)"
+                '--scalecatalog': optcatalogo.areadistampa.scale,
+                'line-height': scheda.line_height,
+              }"
+              v-html="
+                products.replaceKeyWordsByProduct(
+                  optcatalogo,
+                  myproduct,
+                  scheda.testo_right
+                )
+              "
             ></div>
 
             <div v-if="scheda.barcode && scheda.barcode.show">
@@ -131,11 +153,19 @@
                 :value="myproduct.productInfo.code"
                 :format="scheda.barcode.format"
                 :fontsize="scheda.barcode.font?.size"
-                :width="parseInt(scheda.barcode.size.width)"
+                :width="
-                :height="parseInt(scheda.barcode.size.height)"
+                  parseInt(
-                :text="`ISBN: ${myproduct.productInfo.code}`"
+                    tools.adjustSize(optcatalogo, scheda.barcode.size?.width)
+                  )
+                "
+                :height="
+                  parseInt(
+                    tools.adjustSize(optcatalogo, scheda.barcode.size?.height)
+                  )
+                "
               >
               </CBarCode>
+              <!--:text="`ISBN: ${myproduct.productInfo.code}`"-->
             </div>
           </div>
           <div
@@ -147,8 +177,17 @@
             }"
           >
             <div
-              :style="`line-height: ${scheda.line_height}%; `"
+              :style="{
-              v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_bottom)"
+                '--scalecatalog': optcatalogo.areadistampa.scale,
+                'line-height': scheda.line_height,
+              }"
+              v-html="
+                products.replaceKeyWordsByProduct(
+                  optcatalogo,
+                  myproduct,
+                  scheda.testo_bottom
+                )
+              "
             ></div>
           </div>
         </div>

src/components/CMyDimensioni/CMyDimensioni.ts

@@ -0,0 +1,96 @@
+import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
+import { IColGridTable, IDimensioni, IOperators, ISize } from 'model'
+
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+
+import { CMySize } from '@src/components/CMySize'
+import { CBorders } from '@src/components/CBorders'
+import { CMyFieldRec } from '@src/components/CMyFieldRec'
+
+import { tools } from '@store/Modules/tools'
+
+import { costanti } from '@costanti'
+
+import { shared_consts } from '@/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CMyDimensioni',
+  emits: ['update:modelValue'],
+  components: { CMySize, CBorders, CMyFieldRec },
+  props: {
+    modelValue: {
+      type: Object as PropType<IDimensioni>,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    path: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    show_imgsfondo: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const internalModel = reactive({ ...props.modelValue })
+
+    // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
+    watch(() => [props.modelValue], (newModel: any) => {
+      Object.assign(internalModel, newModel);
+      // console.log('Internal Model updated:', newModel);
+    }, { immediate: true });
+
+    function modifSize(value: any) {
+      emit('update:modelValue', { ...internalModel, size: value });
+    }
+    function modifMargini(value: any) {
+      emit('update:modelValue', { ...internalModel, margini: value });
+    }
+    function modifPadding(value: any) {
+      emit('update:modelValue', { ...internalModel, padding: value });
+    }
+
+    function saveFielDim(rec: any, newval: any, col: IColGridTable) {
+      // console.log('saveFielDim', rec, 'newval', newval, 'col', col)
+
+      if (col.fieldtype === costanti.FieldType.image) {
+        
+        if (!rec[col.name]) {
+          rec[col.name] = {}
+        }
+        rec[col.name] = newval.imagefile
+
+        console.log('rec[col.name]', rec[col.name])
+        // rec[col.name].imagefile = newval.imagefile
+      }
+    }
+
+    return {
+      t,
+      tools,
+      shared_consts,
+      internalModel,
+      modifSize,
+      modifMargini,
+      modifPadding,
+      saveFielDim,
+      costanti,
+    }
+  }
+})

src/components/CMyDimensioni/CMyDimensioni.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="width: 380px">
+    <q-banner
+      rounded
+      dense
+      class="bg-blue-1 text-red"
+      color="primary q-title"
+      style="text-align: center"
+    >
+      {{ label }}
+    </q-banner>
+
+    <div v-if="internalModel" class="sfondo_margine row">
+      <CMySize
+        label="Pagina:"
+        v-model="internalModel.size"
+        @update:model-value="modifSize"
+      ></CMySize>
+      <CBorders
+        label="Margini Pagina:"
+        v-model="internalModel.margini"
+        @update:model-value="modifMargini"
+      ></CBorders>
+      <CBorders
+        label="Padding Pagina:"
+        v-model="internalModel.padding"
+        @update:model-value="modifPadding"
+      ></CBorders>
+
+      <div v-if="show_imgsfondo">
+        {{ internalModel.imgsfondo?.imagefile }}<br />
+        <q-select
+          v-model="internalModel.imgsfondo.fit"
+          :options="tools.SelectListFit"
+          label="Dimensione Img"
+          options-dense
+          dense
+          emit-value
+          map-options
+          style="width: 100px"
+          @update:model-value="modifElem"
+          fill-input
+          text-color="white"
+        >
+        </q-select>
+
+        <CMyFieldRec
+          title="Immagine Sfondo:"
+          table="imgs"
+          :rec="internalModel.imgsfondo"
+          field="imagefile"
+          :path="path"
+          @update:model-value="modifElem"
+          :canEdit="true"
+          :canModify="true"
+          :fieldtype="costanti.FieldType.image"
+          @save="saveFielDim"
+        >
+        </CMyFieldRec>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyDimensioni.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyDimensioni.scss';
+</style>

src/components/CMyDimensioni/index.ts

@@ -0,0 +1 @@
+export {default as CMyDimensioni} from './CMyDimensioni.vue'

src/components/CMyEditElem/CMyEditElem.ts

@@ -25,6 +25,7 @@ import { CSelectColor } from '@src/components/CSelectColor'
 import { CSelectFontSize } from '@src/components/CSelectFontSize'
 import { CMySize } from '@src/components/CMySize'
 import { CBorders } from '@src/components/CBorders'
+import { CMyDimensioni } from '@src/components/CMyDimensioni'
 
 import MixinMetaTags from '@/mixins/mixin-metatags'
 import MixinBase from '@/mixins/mixin-base'
@@ -41,7 +42,7 @@ export default defineComponent({
     CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
     CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
-    CMySize, CBorders,
+    CMySize, CBorders, CMyDimensioni,
   },
   emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage'],
   props: {
@@ -268,10 +269,16 @@ export default defineComponent({
       if (myel.value.catalogo && myel.value.catalogo?.arrSchede) {
         for (const recscheda of myel.value.catalogo?.arrSchede) {
           if (recscheda.scheda && (!recscheda.scheda?.testo_bottom)) {
-            recscheda.scheda.testo_bottom = {contenuto: '', maxlength: 100}
+            recscheda.scheda.testo_bottom = { contenuto: '', maxlength: 100 }
           }
-          if (recscheda.scheda && (!recscheda.scheda?.testo_right)) {
+          if (recscheda.scheda && !recscheda.scheda.testo_bottom!.font) {
-            recscheda.scheda.testo_right = {contenuto: ''}
+            recscheda.scheda.testo_bottom!.font = { name: '', size: ''}
+          }
+          if (recscheda.scheda && (!recscheda.scheda?.testo_right || !recscheda.scheda?.testo_right.font) ) {
+            recscheda.scheda.testo_right = { contenuto: '', font: { name: '', size: ''} }
+          }
+          if (recscheda.scheda && (!recscheda.scheda?.dimensioni.pagina.imgsfondo)) {
+            recscheda.scheda.dimensioni.pagina = tools.resetRecIDimensioni(recscheda.scheda?.dimensioni.pagina)
           }
           if (recscheda.scheda && (!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
             recscheda.scheda.barcode = {
@@ -279,11 +286,11 @@ export default defineComponent({
               format: '',
               size: {
                 width: '2',
-                height: '100',
+                height: '33',
               },
               font: {
                 name: '',
-                size: 16,
+                size: '11',
               }
             }
           }
@@ -291,34 +298,33 @@ export default defineComponent({
         }
       }
 
-      if (myel.value.catalogo && !myel.value.catalogo.imgsfondo_def) {
+      if (myel.value.catalogo) {
-        myel.value.catalogo.imgsfondo_def = {
+        if (!myel.value.catalogo.first_page) {
-          imagefile: '',
+          myel.value.catalogo.first_page = tools.resetRecIDimensioni(null)
-          fit: '',
         }
+
+        myel.value.catalogo.first_page = tools.resetRecIDimensioni(myel.value.catalogo.first_page)
+      }
+      if (myel.value.catalogo) {
+        if (!myel.value.catalogo.last_page)
+          myel.value.catalogo.last_page = tools.resetRecIDimensioni(null)
+
+        myel.value.catalogo.last_page = tools.resetRecIDimensioni(myel.value.catalogo.last_page)
+      }
+      if (myel.value.catalogo) {
+        if (!myel.value.catalogo.areadistampa) {
+          myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(null)
+          myel.value.catalogo.areadistampa.margini = { left: '0.59', top: '0.59', right: '0.59', bottom: '0.28'}
+        }
+
+        myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(myel.value.catalogo.areadistampa)
       }
 
       if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
-        myel.value.catalogo.dimensioni_def = {
+        myel.value.catalogo.dimensioni_def = { pagina: {} }
-          pagina: {
+      }
-            size: {
+      if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
-              width: '',
+        myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(myel.value.catalogo.dimensioni_def.pagina)
-              height: '',
-            },
-            margini: {
-              left: '',
-              top: '',
-              right: '',
-              bottom: '',
-            },
-            padding: {
-              left: '',
-              top: '',
-              right: '',
-              bottom: '',
-            },
-          }
-        }
       }
 
     }
@@ -346,66 +352,68 @@ export default defineComponent({
         }
       })
 
-      let defaultDimensioniPag = {
+      let defaultDimensioniPag = tools.resetRecIDimensioni(null)
-        size: {
+      defaultDimensioniPag.size = {
-          width: '800px',
+        width: '800px',
-          height: '600px',
+        height: '600px',
-        },
+      }
-        margini: {
+      defaultDimensioniPag.margini = {
-          top: '12px',
+        top: '12px',
-          bottom: '0px',
+        bottom: '0px',
-          left: '0px',
+        left: '0px',
-          right: '0px',
+        right: '0px',
-        },
+      }
-        padding: {
+      defaultDimensioniPag.padding = {
-          top: '0px',
+        top: '0px',
-          bottom: '0px',
+        bottom: '0px',
-          left: '0px',
+        left: '0px',
-          right: '0px',
+        right: '0px',
-        },
       }
 
-      let defaultDimensioniRiga = {
+      let defaultDimensioniRiga = tools.resetRecIDimensioni(null)
-        size: {
+
-          width: '800px',
+      defaultDimensioniRiga.size = {
-          height: '300px',
+        width: '800px',
-        },
+        height: '300px',
-        margini: {
+      }
-          top: '40px',
+      defaultDimensioniRiga.margini = {
-          bottom: '0px',
+        top: '40px',
-          left: '0px',
+        bottom: '0px',
-          right: '0px',
+        left: '0px',
-        },
+        right: '0px',
-        padding: {
+      }
-          top: '0px',
+      defaultDimensioniRiga.padding = {
-          bottom: '0px',
+        top: '0px',
-          left: '0px',
+        bottom: '0px',
-          right: '0px',
+        left: '0px',
-        },
+        right: '0px',
       }
 
+      let defaultSchedaProdotto = tools.resetRecIDimensioni(null)
+
+      defaultSchedaProdotto.size = {
+        width: '360px',
+        height: '230px',
+      }
+
+      defaultSchedaProdotto.margini = {
+        top: '0px',
+        bottom: '0px',
+        left: '0px',
+        right: '0px',
+      }
+
+      defaultSchedaProdotto.padding = {
+        top: '0px',
+        bottom: '0px',
+        left: '0px',
+        right: '0px',
+      }
 
       let dimensioni: IElementiScheda = {
         pagina: defaultDimensioniPag,
         riga: defaultDimensioniRiga,
-        scheda_prodotto: {
+        scheda_prodotto: defaultSchedaProdotto,
-          size: {
-            width: '360px',
-            height: '230px',
-          },
-          margini: {
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-          },
-          padding: {
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-          },
-        },
         immagine_prodotto: {
           size: {
             width: '150px',

src/components/CMyEditElem/CMyEditElem.vue

@@ -1433,66 +1433,17 @@
               icon="fas fa-play-circle"
             >
               <div
-                v-if="myel.catalogo.dimensioni_def"
+                v-if="myel.catalogo.dimensioni_def.pagina"
                 class="sfondo_margine row"
               >
-                <CMySize
+                <CMyDimensioni
-                  label="Pagina:"
+                  v-model="myel.catalogo.dimensioni_def.pagina"
-                  v-model="myel.catalogo.dimensioni_def.pagina.size"
+                  :path="costanti.DIR_CATALOGO"
+                  :show_imgsfondo="true"
                   @update:model-value="modifElem"
-                ></CMySize>
+                ></CMyDimensioni>
-                <CBorders
-                  label="Margini Pagina:"
-                  v-model="myel.catalogo.dimensioni_def.pagina.margini"
-                  @update:model-value="modifElem"
-                ></CBorders>
-                <CBorders
-                  label="Padding Pagina:"
-                  v-model="myel.catalogo.dimensioni_def.pagina.padding"
-                  @update:model-value="modifElem"
-                ></CBorders>
               </div>
             </q-expansion-item>
-            <q-expansion-item
-              dense
-              dense-toggle
-              expand-separator
-              label="Sfondi"
-              icon="fas fa-play-circle"
-            >
-              Immagine Sfondo di default:
-              {{ myel.catalogo.imgsfondo_def?.imagefile }}<br />
-
-              <q-select
-                v-model="myel.catalogo.imgsfondo_def.fit"
-                :options="tools.SelectListFit"
-                label="Dimensione Img"
-                options-dense
-                dense
-                emit-value
-                map-options
-                style="width: 100px"
-                @update:model-value="modifElem"
-                fill-input
-                text-color="white"
-              >
-              </q-select>
-
-              <CMyFieldRec
-                title="Immagine Sfondo di default:"
-                table="catalogo"
-                :rec="myel.catalogo"
-                field="imgsfondo_def"
-                @update:model-value="modifElem"
-                :canEdit="true"
-                :canModify="true"
-                :fieldtype="costanti.FieldType.image"
-                @save="saveFieldElem"
-              >
-              </CMyFieldRec>
-
-              <br />
-            </q-expansion-item>
             <q-expansion-item
               dense
               dense-toggle
@@ -1721,76 +1672,27 @@
                         label="Pagina"
                         icon="fas fa-play-circle"
                       >
-                        <div class="sfondo_margine row">
+                        <CMyDimensioni
-                          <CMySize
+                          v-model="recscheda.scheda.dimensioni.pagina"
-                            label="Pagina:"
+                          :path="costanti.DIR_SCHEDA"
-                            v-model="recscheda.scheda.dimensioni.pagina.size"
+                          :show_imgsfondo="true"
-                            @update:model-value="modifElem"
+                          @update:model-value="modifElem"
-                          ></CMySize>
+                        ></CMyDimensioni>
-                          <CBorders
-                            label="Margini Pagina:"
-                            v-model="recscheda.scheda.dimensioni.pagina.margini"
-                            @update:model-value="modifElem"
-                          ></CBorders>
-                          <CBorders
-                            label="Padding Pagina:"
-                            v-model="recscheda.scheda.dimensioni.pagina.padding"
-                            @update:model-value="modifElem"
-                          ></CBorders>
-                        </div>
                       </q-expansion-item>
 
                       <q-expansion-item
                         dense
                         dense-toggle
                         expand-separator
-                        label="Sfondi"
+                        label="Righe"
                         icon="fas fa-play-circle"
                       >
-                        Nome File Web: {{ recscheda.scheda.bgimg }}<br />
+                        <CMyDimensioni
-                        <CMyFieldRec
+                          v-model="recscheda.scheda.dimensioni.riga"
-                          title="Per Web:"
+                          :path="costanti.DIR_SCHEDA"
-                          table="myschedas"
+                          :show_imgsfondo="false"
-                          :rec="recscheda.scheda"
-                          field="bgimg"
                           @update:model-value="modifElem"
-                          :canEdit="true"
+                        ></CMyDimensioni>
-                          :canModify="true"
-                          :fieldtype="costanti.FieldType.image"
-                          @save="saveFieldElem"
-                        >
-                        </CMyFieldRec>
-
-                        <q-select
-                          v-model="recscheda.scheda.bgSize"
-                          :options="tools.SelectListFit"
-                          label="Dimensione Img"
-                          options-dense
-                          dense
-                          emit-value
-                          map-options
-                          style="width: 100px"
-                          @update:model-value="modifElem"
-                          fill-input
-                          text-color="white"
-                        >
-                        </q-select>
-
-                        {{ recscheda.scheda.dimensioni.imgsfondo }}
-                        <CMyFieldRec
-                          title="Sfondo:"
-                          table="imgs"
-                          :rec="recscheda.scheda.dimensioni"
-                          field="imgsfondo"
-                          @update:model-value="modifElem"
-                          :canEdit="true"
-                          :canModify="true"
-                          :fieldtype="costanti.FieldType.image"
-                          @save="saveFieldElem"
-                        >
-                        </CMyFieldRec>
-
-                        <br />
                       </q-expansion-item>
 
                       <q-expansion-item
@@ -1800,6 +1702,13 @@
                         label="Schede"
                         icon="fas fa-play-circle"
                       >
+                        <q-toggle
+                          v-model="recscheda.scheda.show_separatore"
+                          color="primary"
+                          label="Separatore righe"
+                          @update:model-value="modifElem"
+                        >
+                        </q-toggle>
                         <div class="row">
                           <CMySlider
                             label="Schede per Riga"
@@ -1869,8 +1778,8 @@
                         <CMySlider
                           label="Line Height:"
                           v-model="recscheda.scheda.line_height"
-                          :min="70"
+                          :min="0.5"
-                          :max="200"
+                          :max="2"
                           color="blue"
                           @update:model-value="modifElem"
                         ></CMySlider>
@@ -1880,6 +1789,21 @@
                           {descrizione_estesa} {prezzo}
                         </div>
 
+                        <q-select
+                          v-model="recscheda.scheda.testo_right.font.size"
+                          :options="fontSizeOptions"
+                          label="Font Size Titolo"
+                          options-dense
+                          dense
+                          emit-value
+                          map-options
+                          style="width: 100px"
+                          @update:model-value="modifElem"
+                          fill-input
+                          text-color="white"
+                        >
+                        </q-select>
+
                         <CMyFieldRec
                           title="Testo a Destra:"
                           table="text"
@@ -1893,6 +1817,22 @@
                           @update_col="update_col"
                         >
                         </CMyFieldRec>
+
+                        <q-select
+                          v-model="recscheda.scheda.testo_bottom.font.size"
+                          :options="fontSizeOptions"
+                          label="Dimensione Titolo"
+                          options-dense
+                          dense
+                          emit-value
+                          map-options
+                          style="width: 150px"
+                          @update:model-value="modifElem"
+                          fill-input
+                          text-color="white"
+                        >
+                        </q-select>
+
                         <CMyFieldRec
                           title="Testo in Basso :"
                           table="text"
@@ -1972,52 +1912,16 @@
             label="Prima Pagina"
             icon="fas fa-play-circle"
           >
-            Prima Pagina: {{ myel.catalogo.first_page_img }}<br />
+            Prima Pagina: <br />
             <div class="row">
-              <CMySlider
+              <CMyDimensioni
-                label="Altezza:"
+                :path="costanti.DIR_CATALOGO"
-                v-model="myel.catalogo.first_page_height"
+                v-model="myel.catalogo.first_page"
-                :min="0"
+                :show_imgsfondo="true"
-                :max="1200"
-                color="red"
                 @update:model-value="modifElem"
-              ></CMySlider>
+              ></CMyDimensioni>
-              <CMySlider
-                label="Larghezza:"
-                v-model="myel.catalogo.first_page_width"
-                :min="0"
-                :max="1200"
-                color="red"
-                @update:model-value="modifElem"
-              ></CMySlider>
             </div>
 
-            <CMyFieldRec
-              title="Per Web:"
-              table="catalogo"
-              :rec="myel.catalogo"
-              field="first_page_img"
-              @update:model-value="modifElem"
-              :canEdit="true"
-              :canModify="true"
-              :fieldtype="costanti.FieldType.image"
-              @save="saveFieldElem"
-            >
-            </CMyFieldRec>
-            <CMyFieldRec
-              title="Testo pagina:"
-              table="catalogo"
-              :rec="myel.catalogo"
-              field="first_page_html"
-              @update:model-value="modifElem"
-              :canEdit="true"
-              :canModify="true"
-              :fieldtype="costanti.FieldType.html"
-              @save="saveFieldElem"
-              @update_col="update_col"
-            >
-            </CMyFieldRec>
-
             <br />
           </q-expansion-item>
 
@@ -2028,53 +1932,12 @@
             label="Ultima Pagina"
             icon="fas fa-play-circle"
           >
-            Immagine: {{ myel.catalogo.last_page_img }}<br />
+            <CMyDimensioni
-            <div class="row">
+              :path="costanti.DIR_CATALOGO"
-              <CMySlider
+              v-model="myel.catalogo.last_page"
-                label="Altezza:"
+              :show_imgsfondo="true"
-                v-model="myel.catalogo.last_page_height"
-                :min="0"
-                :max="1200"
-                color="red"
-                @update:model-value="modifElem"
-              ></CMySlider>
-              <CMySlider
-                label="Larghezza:"
-                v-model="myel.catalogo.last_page_width"
-                :min="0"
-                :max="1200"
-                color="red"
-                @update:model-value="modifElem"
-              ></CMySlider>
-            </div>
-
-            <CMyFieldRec
-              title="Per Web:"
-              table="catalogo"
-              :rec="myel.catalogo"
-              field="last_page_img"
               @update:model-value="modifElem"
-              :canEdit="true"
+            ></CMyDimensioni>
-              :canModify="true"
-              :fieldtype="costanti.FieldType.image"
-              @save="saveFieldElem"
-            >
-            </CMyFieldRec>
-            <CMyFieldRec
-              title="Testo pagina:"
-              table="catalogo"
-              :rec="myel.catalogo"
-              field="last_page_html"
-              @update:model-value="modifElem"
-              :canEdit="true"
-              :canModify="true"
-              :fieldtype="costanti.FieldType.html"
-              @save="saveFieldElem"
-              @update_col="update_col"
-            >
-            </CMyFieldRec>
-
-            <br />
           </q-expansion-item>
           <div v-if="enableEdit">
             <q-expansion-item
@@ -2094,6 +1957,87 @@
                   @update:model-value="modifElem"
                 >
                 </q-toggle>
+
+                <q-select
+                  rounded
+                  style="width: 200px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.format"
+                  :options="tools.SelectListFormatPDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Formato:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+                <div v-if="myel.catalogo.areadistampa.format.length > 1">Ratio: {{myel.catalogo.areadistampa.format[0] / myel.catalogo.areadistampa.format[1]}}</div>
+                <q-select
+                  rounded
+                  style="width: 200px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.scale"
+                  :options="tools.SelectListScalePDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Scale:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+                <q-select
+                  rounded
+                  style="width: 200px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.scalecanvas"
+                  :options="tools.SelectListQualityPDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Qualità:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+                <q-select
+                  rounded
+                  style="width: 150px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.orientation"
+                  :options="tools.SelectListOrientamentoPDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Orientamento:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+                <q-select
+                  rounded
+                  style="width: 150px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.unit"
+                  :options="tools.SelectListUnitPDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Unità:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+                <q-toggle
+                  v-model="myel.catalogo.areadistampa.compress"
+                  color="positive"
+                  icon="fas fa-file-pdf"
+                  label="Comprimi"
+                  @update:model-value="modifElem"
+                >
+                </q-toggle>
+                <CBorders
+                  label="Margini di Stampa (mm):"
+                  v-model="myel.catalogo.areadistampa.margini"
+                  @update:model-value="modifElem"
+                  addstr=""
+                ></CBorders>
               </div>
             </q-expansion-item>
           </div>

src/components/CMyFieldRec/CMyFieldRec.ts

@@ -263,6 +263,7 @@ export default defineComponent({
       getclass,
       myrec,
       update_col,
+      getValue,
     }
   },
 })

src/components/CMySize/CMySize.ts

@@ -4,6 +4,8 @@ import { IOperators, ISize } from 'model'
 import { useI18n } from '@/boot/i18n'
 import { useQuasar } from 'quasar'
 
+import { tools } from '@store/Modules/tools'
+
 import { CMySlider } from '@src/components/CMySlider'
 
 import { shared_consts } from '@/common/shared_vuejs'
@@ -40,19 +42,50 @@ export default defineComponent({
     const $q = useQuasar()
     const { t } = useI18n()
 
+    const ratio = ref(<number>0)
+    const keepRatio = ref(false)
+
     const internalModel = reactive({ ...props.modelValue })
 
-    function modifValueWidth(value: any) {
+    function modifValueWidth(value: any, changeratio: boolean = true) {
       emit('update:modelValue', { ...internalModel, width: value });
+
+      if (keepRatio.value && changeratio) {
+        let ris = tools.getValueAndSuffix(value)
+        let myheight = ris.value * ( 1 / ratio.value)
+        modifValueHeight(myheight + ris.suffix, false)
+      }
     }
 
-    function modifValueHeight(value: any) {
+    function modifValueHeight(value: any, changeratio: boolean = true) {
       emit('update:modelValue', { ...internalModel, height: value });
+
+      if (keepRatio.value && changeratio) {
+        let ris = tools.getValueAndSuffix(value)
+        let mywidth = ris.value * (ratio.value)
+        modifValueWidth(mywidth+ ris.suffix, false)
+      }
+    }
+
+    function modifValueRatio(value: any) {
+      // modifValueWidth(0)
+
     }
 
     // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
     watch(() => props.modelValue, (newModel: any) => {
       Object.assign(internalModel, newModel);
+
+      if (internalModel.height && internalModel.width) {
+        const heightValue = parseFloat(internalModel.height) || 1;
+
+        if (heightValue === 0) {
+          ratio.value = parseFloat(internalModel.width) / 1; // Usa 1 come fallback
+        } else {
+          ratio.value = parseFloat(internalModel.width) / heightValue;
+        }
+      }
+
     }, { immediate: true });
 
     return {
@@ -60,7 +93,10 @@ export default defineComponent({
       shared_consts,
       modifValueWidth,
       modifValueHeight,
+      modifValueRatio,
       internalModel,
+      ratio,
+      keepRatio,
     }
   }
 })

src/components/CMySize/CMySize.vue

@@ -11,6 +11,24 @@
     </q-banner>
 
     <div v-if="internalModel" class="column">
+      <q-toggle
+        v-model="keepRatio"
+        push
+        label="Mantieni le proporzioni"
+        rounded
+        glossy
+        toggle-color="primary"
+      ></q-toggle>
+      <CMySlider
+        label="Ratio"
+        v-model="ratio"
+        :min="0.3"
+        :max="1.8"
+        color="green"
+        :disable="!keepRatio"
+        @update:model-value="modifValueRatio"
+      ></CMySlider>
+      
       <CMySlider
         label="Width:"
         v-model="internalModel.width"

src/components/CMySlider/CMySlider.ts

@@ -63,7 +63,12 @@ export default defineComponent({
       } else if (mioval >= 100) {
         return 5
       } else {
-        return 1
+        if (props.max < 5) {
+          return (props.max - props.min) / 100
+        } else {
+          return 1
+        }
+
       }
     }
 

src/css/app.scss

@@ -2472,7 +2472,7 @@ body.body--dark {
   display: flex;
   flex-direction: row; /* Allineamento orizzontale */
   flex-wrap: wrap;
-  gap: 10px; /* Spaziatura tra gli elementi */
+  gap: 0px; /* Spaziatura tra gli elementi */
   justify-content: space-evenly;
 }
 
@@ -2495,6 +2495,7 @@ body.body--dark {
 .card-row {
   display: flex;
   justify-content: center;
+  flex-direction: column !important;
 }
 
 .cards-container {

src/model/GlobalStore.ts

@@ -690,7 +690,7 @@ export interface ISize {
 }
 export interface IFont {
   name?: string
-  size?: number
+  size?: string
 }
 
 export interface IBorder {
@@ -717,6 +717,17 @@ export interface IDimensioni {
   margini?: IBorder
   padding?: IBorder
   imgsfondo?: IImg
+  text_html?: IText
+}
+
+export interface IAreaDiStampa {
+  margini?: IBorder
+  unit: string
+  format: number[]
+  orientation: string
+  compress: boolean
+  scale: number
+  scalecanvas: number
 }
 
 export interface IElementiPagina {
@@ -726,6 +737,7 @@ export interface IElementiPagina {
 export interface IText {
   contenuto?: string
   maxlength?: number
+  font?: IFont
 }
 
 export interface IElementiScheda {
@@ -743,6 +755,7 @@ export interface IMyScheda {
   line_height?: number
   numschede_perRiga?: number
   numschede_perCol?: number
+  show_separatore: boolean
   testo_right?: IText
   testo_bottom?: IText
   posiz_text?: number
@@ -779,16 +792,10 @@ export interface ICatalogo {
   pdf_filename?: string
   printable?: boolean
 
-  first_page_img?: string
+  first_page?: IDimensioni
-  first_page_html?: string
+  last_page?: IDimensioni
-  first_page_height?: number
+  areadistampa?: IAreaDiStampa
-  first_page_width?: number
-  last_page_img?: string
-  last_page_html?: string
-  last_page_height?: number
-  last_page_width?: number
 
-  imgsfondo_def?: IImg
   dimensioni_def?: IElementiPagina
 
   arrSchede?: ISchedaSingola[]

src/statics/lang/it.js

@@ -1208,6 +1208,8 @@ const msg_it = {
       date_updated: 'Ult. Aggiornamento',
     },
     mypages: {
+      duplica_newname: 'Inserisci il nome della Nuova Pagina (senza spazi)',
+      duplica_conferma: 'Duplicare {path} creando {newpath}',
       attivita: 'Attività',
       find_people: 'Cerca Persone',
       find_group: 'Cerca Gruppo',

src/store/Modules/costanti.ts

@@ -34,12 +34,6 @@ export const costanti = {
     'Printable',
     'numschede_perCol',
     'numschede_perRiga',
-    'first_page_img',
-    'first_page_html',
-    'first_page_height',
-    'last_page_img?',
-    'last_page_html',
-    'last_page_height',
     'text',
   ],
 

src/store/Modules/fieldsTable.ts

@@ -163,7 +163,7 @@ export const colIText = [
   AddCol({ name: 'maxlength', label_trans: 'catalogo.maxlength', fieldtype: costanti.FieldType.number }),
 ]
 export const colmyIImg = [
-  AddCol({ name: 'filename', label_trans: 'iimg.filename', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'imagefile', label_trans: 'iimg.imagefile', fieldtype: costanti.FieldType.image }),
   AddCol({ name: 'fit', label_trans: 'iimg.fit', fieldtype: costanti.FieldType.string }),
 ]
 
@@ -202,14 +202,6 @@ export const colmyelCatalogo = [
   AddCol({ name: 'optcatalogo.', label_trans: 'catalogo.optcatalogo.', 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: 'first_page_img', label_trans: 'catalogo.first_page_img', fieldtype: costanti.FieldType.image }),
-  AddCol({ name: 'last_page_img', label_trans: 'catalogo.last_page_img', fieldtype: costanti.FieldType.image }),
-  AddCol({ name: 'first_page_html', label_trans: 'catalogo.first_page_html', fieldtype: costanti.FieldType.html }),
-  AddCol({ name: 'first_page_height', label_trans: 'catalogo.first_page_height', fieldtype: costanti.FieldType.number }),
-  AddCol({ name: 'last_page_height', label_trans: 'catalogo.last_page_html', fieldtype: costanti.FieldType.number }),
-  AddCol({ name: 'last_page_html', label_trans: 'catalogo.last_page_html', fieldtype: costanti.FieldType.html }),
-
-  AddCol({ name: 'imgsfondo_def', label_trans: 'catalogo.imgsfondo_def', fieldtype: costanti.FieldType.image }),
 
 ]
 
@@ -4224,8 +4216,8 @@ export const fieldsTable = {
       value: 'imgs',
       label: 'Immagini',
       columns: colmyIImg,
-      colkey: 'filename',
+      colkey: 'imagefile',
-      collabel: 'filename',
+      collabel: 'imagefile',
     },
     {
       value: 'listcards',

src/store/Modules/tools.ts

@@ -15,6 +15,13 @@ import {
   Privacy,
   TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard, ILabelValue, ILabelValueStr, IAnim, ILang, IGroupShort, IPagination, IFavorite, IBookmark,
   IMovQuery,
+  IDimensioni,
+  ISize,
+  IBorder,
+  IImg,
+  IText,
+  IAreaDiStampa,
+  ICatalogo,
 } from '@model'
 
 import MixinBase from '@/mixins/mixin-base'
@@ -48,6 +55,7 @@ import { Router } from 'vue-router'
 import { AxiosResponse, default as Axios } from 'axios'
 import { PayloadMessageTypes } from '@/common'
 import { useNotifStore } from '@store/NotifStore'
+import { isDimensionToken } from 'html2canvas/dist/types/css/syntax/parser'
 
 export interface INotify {
   color?: string
@@ -343,6 +351,34 @@ export const tools = {
     },
   ],
 
+  SelectListFormatPDF: [
+    { label: 'a4 (mm)', value: [210, 297] },
+    { label: '22,60 x 31,26 (in mm)', value: [226.0, 312.6] },
+  ],
+
+  SelectListScalePDF: [
+    { label: 'Normale (100 DPI)', value: 1 },
+    { label: 'Medio (200 PDI)', value: 2 },
+    { label: 'Alto (300 PDI)', value: 3 },
+  ],
+  SelectListQualityPDF: [
+    { label: 'Bassa (1 scale)', value: 1 },
+    { label: 'Normale (2 scale)', value: 2 },
+    { label: 'Media (3 scale)', value: 3 },
+    { label: 'Elevata (4 scale)', value: 4 },
+  ],
+
+  SelectListOrientamentoPDF: [
+    { label: 'Verticale', value: 'portrait' },
+    { label: 'orizzontale', value: 'landscape' }
+  ],
+
+  SelectListUnitPDF: [
+    { label: 'Millimetri (mm)', value: 'mm' },
+    { label: 'Centimetri (cm)', value: 'cm' },
+    { label: 'Pollici (in)', value: 'in' },
+    { label: 'Pixel (px)', value: 'px' },
+  ],
 
   SelectListColors: [
     { label: '[Nessuno]', value: '' },
@@ -7949,6 +7985,8 @@ export const tools = {
         ris = 'pages/' + path
       } else if (table === 'productInfos') {
         ris = path
+      } else if (table === 'imgs') {
+        ris = path
       } else {
         ris = table
       }
@@ -9145,6 +9183,131 @@ export const tools = {
     return encodeURIComponent(str); // Codifica la stringa per URL
   },
 
+  resetISize(rec: ISize | null) {
+    if (!rec) {
+      rec = {
+        width: '',
+        height: ''
+      }
+    }
+
+    return rec
+  },
+
+  resetIBorder(rec: IBorder | null) {
+    if (!rec) {
+      rec = {}
+      rec.top = ''
+      rec.bottom = ''
+      rec.left = ''
+      rec.right = ''
+    }
+
+    return rec
+  },
+
+  resetIImg(rec: IImg | null) {
+    if (!rec) {
+      rec = {}
+
+      rec.imagefile = ''
+      rec.fit = ''
+    }
+
+    return rec
+  },
+
+  resetIText(rec: IText | null) {
+    if (!rec) {
+      rec = {}
+
+      rec.contenuto = ''
+      rec.maxlength = 0
+    }
+
+    return rec
+  },
+
+  resetRecIDimensioni(rec: IDimensioni | null) {
+
+    let myrec: IDimensioni = {}
+
+    if (!rec) {
+      myrec = {
+        size: {},
+        margini: {},
+        padding: {},
+        imgsfondo: {},
+        text_html: {},
+      }
+    } else {
+      myrec = rec
+    }
+
+    myrec.size = this.resetISize(myrec.size!)
+    myrec.margini = this.resetIBorder(myrec.margini!)
+    myrec.padding = this.resetIBorder(myrec.padding!)
+    myrec.imgsfondo = this.resetIImg(myrec.imgsfondo!)
+    myrec.text_html = this.resetIText(myrec.text_html!)
+
+    return myrec
+  },
+
+  resetRecIAreaDiStampa(rec: IAreaDiStampa | null) {
+
+    let myrec: IAreaDiStampa = {}
+
+    if (!rec) {
+      myrec = {
+        margini: {},
+        unit: 'mm',
+        compress: false,
+        orientation: 'portrait',
+        format: [210, 297],
+        scale: 1,
+        scalecanvas: 2,
+      }
+    } else {
+      myrec = rec
+    }
+
+    myrec.margini = this.resetIBorder(myrec.margini!)
+
+    return myrec
+  },
+
+  adjustSize(optcatalogo: ICatalogo, mysize: any) {
+    if (!mysize) {
+      return '';
+    }
+
+    // Estrae l'unità di misura
+    const unit = mysize.replace(/[\d.]/g, ''); // Ottiene il suffisso (es. 'px')
+    const numericalValue = parseFloat(mysize) || 0; // Converti la parte numerica in float
+
+    let size = numericalValue; // Inizializza size con il valore numerico
+
+    if (optcatalogo.printable && optcatalogo.areadistampa?.scale && optcatalogo.areadistampa?.scale > 0) {
+      size = size * optcatalogo.areadistampa?.scale; // Applicare la scala se necessaria
+    }
+
+    let strfinale = `${size}${unit}`
+    // console.log('mysize', mysize, ' => ', strfinale)
+    return strfinale; // Restituisce il valore con il suffisso
+  },
+
+  getValueAndSuffix(myvalue: any): {value: number, suffix: string} {
+    if (!myvalue) {
+      return {value: 0, suffix: ''};
+    }
+
+    // Estrae l'unità di misura
+    const unit = myvalue.replace(/[\d.]/g, ''); // Ottiene il suffisso (es. 'px')
+    const numericalValue = parseFloat(myvalue) || 0; // Converti la parte numerica in float
+
+    return { value: numericalValue, suffix: unit}; // Restituisce il valore con il suffisso
+  },
+
 
   // FINE !
 

src/store/Products.ts

@@ -1,4 +1,4 @@
-import { IBaseOrder, ICart, IOrder, IOrderCart, IProduct, IProductsState, IProductInfo, ICatProd, IUserShort, IGasordine, IAuthor, ISubCatProd, IText } from 'model'
+import { IBaseOrder, ICart, IOrder, IOrderCart, IProduct, IProductsState, IProductInfo, ICatProd, IUserShort, IGasordine, IAuthor, ISubCatProd, IText, ICatalogo } from 'model'
 
 import { Api } from '@api'
 import { serv_constants } from '@src/store/Modules/serv_constants'
@@ -1267,7 +1267,7 @@ export const useProducts = defineStore('Products', {
       return authorString
     },
 
-    replaceKeyWordsByProduct(myproduct: IProduct, testo: IText) {
+    replaceKeyWordsByProduct(optcatalogo: ICatalogo, myproduct: IProduct, testo: IText) {
       if (!myproduct || !testo.contenuto) {
         return testo.contenuto;
       }
@@ -1292,6 +1292,7 @@ export const useProducts = defineStore('Products', {
       const formato = myproduct.arrvariazioni ? myproduct.arrvariazioni[0].formato : ''
       const pagine = myproduct.arrvariazioni ? myproduct.arrvariazioni[0].pagine : ''
 
+      const scale = optcatalogo.printable ? optcatalogo.areadistampa?.scale : 1
       // Crea una mappa di sostituzioni
       const replacements = {
         '{autore}': autori || '',
@@ -1302,6 +1303,7 @@ export const useProducts = defineStore('Products', {
         '{misure}': misure || '',
         '{formato}': formato || '',
         '{prezzo}': prezzo || '',
+        '{scale}': scale || '',
         '{prezzo_scontato}': prezzo_scontato || '',
       };
 

src/store/globalStore.ts

@@ -1200,21 +1200,33 @@ export const useGlobalStore = defineStore('GlobalStore', {
     async duplicatePage(path: string, $q: any, t: any) {
       const userStore = useUserStore()
 
-      return Api.SendReq('/duppage', 'POST', { path })
+      let newpath = prompt(t('mypages.duplica_newname'))
-        .then((res) => {
+
-          if (res) {
+      $q.dialog({
-            tools.showPositiveNotif($q, t('mypages.duplicateok'))
+        message: t('mypages.duplica_conferma', { path, newpath }),
-            return true
+        ok: { label: t('dialog.yes'), push: true },
-          } else {
+        cancel: { label: t('dialog.cancel') },
-            tools.showNegativeNotif($q, t('mypages.duplicateerr'))
+        title: t('db.domanda')
-            return false
+      }).onOk(() => {
-          }
+
-        })
+
-        .catch((error) => {
+        return Api.SendReq('/duppage', 'POST', { path, newpath })
-          console.log('error loadTable', error)
+          .then((res) => {
-          userStore.setErrorCatch(error)
+            if (res) {
-          return null
+              tools.showPositiveNotif($q, t('mypages.duplicateok'))
-        })
+              return true
+            } else {
+              tools.showNegativeNotif($q, t('mypages.duplicateerr'))
+              return false
+            }
+          })
+          .catch((error) => {
+            console.log('error loadTable', error)
+            userStore.setErrorCatch(error)
+            return null
+          })
+      })
+
     },
 
     async loadPageTest() {
@@ -2240,11 +2252,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
           Editore: [],
           pdf: false,
           dimensioni_def: {
-            pagina: {
+            pagina: tools.resetRecIDimensioni(null)
-              size: { width: '', height: '' },
-              margini: {left: '', top: '', right: '', bottom: ''},
-              padding: {left: '', top: '', right: '', bottom: ''},
-            },
           },
         }
       }

src/views/ecommerce/catalogo/catalogo.scss

@@ -1,5 +1,9 @@
 $heightBtn: 100%;
 
+body {
+  line-height: 1.2 !important;
+}
+
 .card .product-image {
   height: 300px;
 }
@@ -64,10 +68,3 @@ $heightBtn: 100%;
   flex-basis: 100%;
   height: 0;
 }
-
-.first_page{
-  padding-top: 40px;
-  padding-bottom: 40px;
-  padding-left: 30px;
-  padding-right: 30px;
-}

src/views/ecommerce/catalogo/catalogo.ts

@@ -16,7 +16,6 @@ import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
 import { CSelectUserActive } from '@src/components/CSelectUserActive'
 import { ICatalogo, IFilterCatalogo, IMyScheda, IProdView, IProduct, ISchedaSingola, ISearchList } from 'model'
 
-import html2canvas from 'html2canvas'
 // import { VueHtmlToPaper } from 'vue-html-to-paper'
 import html2pdf from 'html2pdf.js'
 
@@ -114,12 +113,10 @@ export default defineComponent({
 
     watch(() => cat.value, (newval, oldval) => {
 
-      if (cat.value) {
+      if (loadpage.value)
-        if (loadpage.value)
+        tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
-          tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
+      filter.value.author = '' // disattivo il filtro autore        
-        filter.value.author = '' // disattivo il filtro autore        
+      resetSearch()
-        resetSearch()
-      }
 
       calcArrProducts()
     })
@@ -639,27 +636,64 @@ export default defineComponent({
 
       try {
 
+        let defaultMargin = 0.1
+        if (props.optcatalogo.printable) {
+          defaultMargin = 0
+        } else {
+          defaultMargin = 0
+        }
+        const unit = props.optcatalogo.areadistampa!.unit
+
+        let myformat = { ...props.optcatalogo.areadistampa!.format }
+
+        let scale = props.optcatalogo.areadistampa!.scale
+        let scalecanvas = props.optcatalogo.areadistampa!.scalecanvas
+
+        if (tools.isObject(myformat) && scale > 0) {
+        } else {
+          myformat = [210, 297]
+        }
+
+
+        const formatwidth = (myformat[0] * scale)
+        const formatheight = (myformat[1] * scale)
+
+        let myfile = (props.optcatalogo.pdf_filename ?? 'catalogo_completo')
+
+        myfile += '_' + formatwidth + '_' + formatheight + '_' + unit + '_scale_' + scale
+
+        myfile += '.pdf'
+
+
         const element = document.getElementById('pdf-content')
         const opt = {
-          margin: [0.1, 0.1, 0.1, 0.1],
+          margin: [
-          filename: (props.optcatalogo.pdf_filename ?? 'catalogo_completo') + '.pdf',
+            props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.left) || defaultMargin) : defaultMargin,
+            props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.top) || defaultMargin) : defaultMargin,
+            props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.bottom) || defaultMargin) : defaultMargin,
+            props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.right) || defaultMargin) : defaultMargin
+          ],
+          filename: myfile,
           image: {
             type: 'jpeg',
             quality: 0.98
           },
           html2canvas: {
-            scale: 2,
+            scale: scalecanvas,
             useCORS: true,
             letterRendering: true,
           },
           jsPDF: {
-            unit: 'in',
+            unit: unit,
-            format: 'a4',
+            format: [formatwidth, formatheight],
-            orientation: 'portrait',
+            orientation: props.optcatalogo.areadistampa!.orientation,
-            compress: true
+            compress: props.optcatalogo.areadistampa!.compress,
           },
         }
 
+        console.log('opt di stampa', opt)
+        // a4: [595.28, 841.89]
+
         await html2pdf().set(opt).from(element).save()
 
         $q.loading.hide()
@@ -679,10 +713,12 @@ export default defineComponent({
       }
     }
 
-    function groupedPages(scheda: IMyScheda) {
+    function groupedPages(recscheda: ISchedaSingola) {
-      if (scheda) {
+
-        const schedePerRiga = scheda.numschede_perRiga || 1
+      let numschedeattuali = 0
-        const schedePerCol = scheda.numschede_perCol || 1
+      if (recscheda.scheda) {
+        const schedePerRiga = recscheda.scheda.numschede_perRiga || 1
+        const schedePerCol = recscheda.scheda.numschede_perCol || 1
         const schedePerPagina = schedePerRiga * schedePerCol
 
         let indiceprodotto = 0
@@ -707,7 +743,13 @@ export default defineComponent({
             page.push(row)
           }
 
+          numschedeattuali++
           pages.push(page)
+
+          if (recscheda.numSchede! > 0) {
+            if (numschedeattuali >= recscheda.numSchede!)
+              return pages
+          }
         }
 
         return pages
@@ -725,15 +767,15 @@ export default defineComponent({
     }
 
     function generateStylePageScheda(optcatalogo: ICatalogo, scheda: IMyScheda) {
-      const marginTop = scheda.dimensioni?.pagina?.margini?.top ? scheda.dimensioni?.pagina?.margini?.top : (optcatalogo.dimensioni_def?.pagina?.margini?.top ?? '')
+      const marginTop = scheda.dimensioni?.pagina?.margini?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.top) ?? '')
-      const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? scheda.dimensioni?.pagina?.margini?.bottom : (optcatalogo.dimensioni_def?.pagina?.margini?.bottom ?? '')
+      const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.bottom) ?? '')
-      const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? scheda.dimensioni?.pagina?.margini?.left : (optcatalogo.dimensioni_def?.pagina?.margini?.left ?? '')
+      const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.left) ?? '')
-      const marginRight = scheda.dimensioni?.pagina?.margini?.right ? scheda.dimensioni?.pagina?.margini?.right : (optcatalogo.dimensioni_def?.pagina?.margini?.right ?? '')
+      const marginRight = scheda.dimensioni?.pagina?.margini?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.right): (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.right) ?? '')
 
-      const paddingTop = scheda.dimensioni?.pagina?.padding?.top ? scheda.dimensioni?.pagina?.padding?.top : (optcatalogo.dimensioni_def?.pagina?.padding?.top ?? '')
+      const paddingTop = scheda.dimensioni?.pagina?.padding?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.top) ?? '')
-      const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? scheda.dimensioni?.pagina?.padding?.bottom : (optcatalogo.dimensioni_def?.pagina?.padding?.bottom ?? '')
+      const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.bottom) ?? '')
-      const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? scheda.dimensioni?.pagina?.padding?.left : (optcatalogo.dimensioni_def?.pagina?.padding?.left ?? '')
+      const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.left) ?? '')
-      const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? scheda.dimensioni?.pagina?.padding?.right : (optcatalogo.dimensioni_def?.pagina?.padding?.right ?? '')
+      const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.right) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.right) ?? '')
 
       // Esiste un immagine di sfondo specifica della singola pagina ?
       let fileimg = scheda.dimensioni?.pagina?.imgsfondo?.imagefile
@@ -744,15 +786,15 @@ export default defineComponent({
 
       if (!fileimg) {
         // Esiste un immagine di sfondo uguali per tutte le pagine ?
-        fileimg = optcatalogo.imgsfondo_def?.imagefile
+        fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
-        backgroundSize = optcatalogo.imgsfondo_def?.fit
+        backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit
         fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
       }
 
       let backgroundImage = fileimg ?? ''
 
-      const width = scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
+      let width = scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
-      const height = scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
+      let height = scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
 
       return {
         marginBottom,
@@ -773,27 +815,64 @@ export default defineComponent({
     }
 
     function getWidthPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
-      return scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
+      return scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
     }
     function getHeightPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
-      return scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
+      return scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
+    }
+
+    function getStyleRowSeparator(recscheda: ISchedaSingola) {
+      const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
+      const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
+
+      return {
+        paddingLeft: `${paddingLeft}`,
+        paddingRight: `${paddingRight}`,
+      };
     }
 
     function getStyleRow(recscheda: ISchedaSingola) {
       const placeContent = 'center';
 
-      const width = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width ?? '100px';
+      const width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.size?.width) ?? '';
-      const height = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height;
+      const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.size?.height);
 
-      const marginTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top ?? '0px';
+      const marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.top) ?? '0px';
-      const marginBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom ?? '0px';
+      const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.bottom) ?? '0px';
-      const marginLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left ?? '0px';
+      const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.left) ?? '0px';
-      const marginRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right ?? '0px';
+      const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.right) ?? '0px';
 
-      const paddingTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top ?? '0px';
+      const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.top) ?? '0px';
-      const paddingBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom ?? '0px';
+      const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.bottom) ?? '0px';
-      const paddingLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left ?? '0px';
+      const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.left) ?? '0px';
-      const paddingRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right ?? '0px';
+      const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.right) ?? '0px';
+
+      return {
+        placeContent,
+        flex: `0 1 ${width} !important;`,
+        margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
+        padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
+        ...(width ? { width: `${width} !important;` } : {}),
+        ...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
+      };
+
+    }
+
+    function getStyleSchedaProdotto(recscheda: ISchedaSingola) {
+      const placeContent = 'center';
+
+      const width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width) ?? '100px';
+      const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height);
+
+      const marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top) ?? '0px';
+      const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom) ?? '0px';
+      const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left) ?? '0px';
+      const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right) ?? '0px';
+
+      const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top) ?? '0px';
+      const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom) ?? '0px';
+      const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
+      const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
 
       return {
         placeContent,
@@ -849,8 +928,10 @@ export default defineComponent({
       generateStylePageScheda,
       generateStyleCatalogo,
       getStyleRow,
+      getStyleSchedaProdotto,
       getWidthPagina,
       getHeightPagina,
+      getStyleRowSeparator,
     }
   }
 })

src/views/ecommerce/catalogo/catalogo.vue

@@ -18,7 +18,7 @@
           :label="`Crea PDF ${optcatalogo.pdf_filename}`"
           @click="generatePDF"
         ></q-btn>
-        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
+        <div class="row justify-center q-mx-auto bg-blue-1">
           <div class="text-center">
             <q-spinner
               v-if="!loadpage"
@@ -49,7 +49,7 @@
               <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"
+                    class="row justify-center q-mx-auto bg-blue-1"
                   >
                     <div v-for="(reccat, index) in getCatProds()" :key="index">
                       <span
@@ -207,29 +207,35 @@
                 :class="{ 'fixed-width': true }"
               >
                 <div
-                  v-if="optcatalogo.first_page_img"
+                  v-if="
+                    optcatalogo.first_page &&
+                    optcatalogo.first_page.text_html.contenuto
+                  "
                   :style="{
                     backgroundImage: `url(${
                       costanti.DIR_UPLOAD +
                       costanti.DIR_CATALOGO +
-                      (optcatalogo.printable
+                      optcatalogo.first_page.imgsfondo.imagefile
-                        ? optcatalogo.first_page_img
-                        : optcatalogo.first_page_img)
                     })`,
-                    backgroundSize: `${
+                    backgroundSize: `${optcatalogo.first_page.imgsfondo.fit}`,
-                      optcatalogo.printable
+                    backgroundRepeat: 'no-repeat',
-                        ? scheda.bgSize_printable
+                    height:
-                        : scheda.bgSize
+                      tools.adjustSize(
-                    }`,
+                        optcatalogo,
-                    height: optcatalogo.first_page_height + 'px',
+                        optcatalogo.first_page.size.height
-                    width: optcatalogo.first_page_width + 'px',
+                      ) + 'px',
+                    width:
+                      tools.adjustSize(
+                        optcatalogo,
+                        optcatalogo.first_page.size.width
+                      ) + 'px',
                   }"
                 >
                   <div
-                    class="first_page"
+                    v-html="optcatalogo.first_page.text_html.contenuto"
-                    v-html="optcatalogo.first_page_html"
                   ></div>
-               \ </div>
+                  \
+                </div>
                 <div :style="generateStyleCatalogo(optcatalogo)">
                   <div class="flex-container-book">
                     <q-infinite-scroll
@@ -241,11 +247,10 @@
                       @load="onLoadScroll"
                       :offset="2000"
                       debounce="200"
-                      class="q-pa-xs row items-start"
+                      class="row items-start"
                       style="place-content: center"
                     >
                       <div
-                        class="q-pa-xs"
                         v-for="(product, index) in arrLoaded"
                         :key="index"
                       >
@@ -294,11 +299,19 @@
                         <div v-if="recscheda && recscheda.scheda">
                           <!-- Itera sulle pagine -->
                           <div
-                            v-for="(page, pageIndex) in groupedPages(
+                            v-for="(page, pageIndex) in groupedPages(recscheda)"
-                              recscheda.scheda
-                            )"
                             :key="pageIndex"
-                            :class="{ 'fixed-width': getWidthPagina(optcatalogo, recscheda.scheda), 'fixed-height': getHeightPagina(optcatalogo, recscheda.scheda), 'card-page': true }"
+                            :class="{
+                              'fixed-width': getWidthPagina(
+                                optcatalogo,
+                                recscheda.scheda
+                              ),
+                              'fixed-height': getHeightPagina(
+                                optcatalogo,
+                                recscheda.scheda
+                              ),
+                              'card-page': true,
+                            }"
                             :style="
                               generateStylePageScheda(
                                 optcatalogo,
@@ -310,116 +323,134 @@
                             <div
                               v-for="(row, rowIndex) in page"
                               :key="`${pageIndex}-${rowIndex}`"
-                              class="card-row"
+                              class="column"
-                              :style="
-                                'margin-bottom: ' +
-                                (scheda?.dimensioni?.riga?.bottom ?? '0px') +
-                                ';'
-                              "
                             >
-                              <!-- Itera sui prodotti di ogni riga -->
-                              
                               <div
-                                v-for="(indprod, colIndex) in row"
+                                class="card-row"
-                                :key="`${pageIndex}-${rowIndex}-${colIndex}`"
-                                class="flex-item-book image-container"
                                 :style="getStyleRow(recscheda)"
                               >
-                              <!--pag: {{pageIndex}} - riga: {{rowIndex}} - col: {{colIndex}} - -->
+                                <!-- Itera sui prodotti di ogni riga -->
-                                <CContainerCatalogoCard
+
-                                  v-if="
+                                <div class="row justify-center">
-                                    getProdBySchedaRigaCol(
+                                  <div
-                                      recscheda,
+                                    v-for="(indprod, colIndex) in row"
-                                      pageIndex,
+                                    :key="`${pageIndex}-${rowIndex}-${colIndex}`"
-                                      rowIndex,
+                                    class="flex-item-book"
-                                      colIndex
+                                    :style="getStyleSchedaProdotto(recscheda)"
-                                    ) &&
+                                  >
-                                    getProdBySchedaRigaCol(
+                                    <CContainerCatalogoCard
-                                      recscheda,
+                                      v-if="
-                                      pageIndex,
+                                        getProdBySchedaRigaCol(
-                                      rowIndex,
+                                          recscheda,
-                                      colIndex
+                                          pageIndex,
-                                    ).active
+                                          rowIndex,
-                                  "
+                                          colIndex
-                                  :id="
+                                        ) &&
-                                    getProdBySchedaRigaCol(
+                                        getProdBySchedaRigaCol(
-                                      recscheda,
+                                          recscheda,
-                                      pageIndex,
+                                          pageIndex,
-                                      rowIndex,
+                                          rowIndex,
-                                      colIndex
+                                          colIndex
-                                    )._id
+                                        ).active
-                                  "
+                                      "
-                                  :complete="false"
+                                      :id="
-                                  :cosa="cosa"
+                                        getProdBySchedaRigaCol(
-                                  :optcatalogo="optcatalogo"
+                                          recscheda,
-                                  :scheda="recscheda.scheda"
+                                          pageIndex,
-                                  :options="{
+                                          rowIndex,
-                                    show_short_descr: false,
+                                          colIndex
-                                    show_price: false,
+                                        )._id
-                                    show_cat: false,
+                                      "
-                                    quante_col: 'c2',
+                                      :complete="false"
-                                    in_3d: false,
+                                      :cosa="cosa"
-                                  }"
+                                      :optcatalogo="optcatalogo"
-                                  @selauthor="selauthor"
+                                      :scheda="recscheda.scheda"
-                                />
+                                      :options="{
-                                <CProductCard
+                                        show_short_descr: false,
-                                  v-else-if="
+                                        show_price: false,
-                                    getProdBySchedaRigaCol(
+                                        show_cat: false,
-                                      recscheda,
+                                        quante_col: 'c2',
-                                      pageIndex,
+                                        in_3d: false,
-                                      rowIndex,
+                                      }"
-                                      colIndex
+                                      @selauthor="selauthor"
-                                    ) &&
+                                    />
-                                    (getProdBySchedaRigaCol(
+                                    <CProductCard
-                                      recscheda,
+                                      v-else-if="
-                                      pageIndex,
+                                        getProdBySchedaRigaCol(
-                                      rowIndex,
+                                          recscheda,
-                                      colIndex
+                                          pageIndex,
-                                    ).active ||
+                                          rowIndex,
-                                      show_hide)
+                                          colIndex
-                                  "
+                                        ) &&
-                                  :id="
+                                        (getProdBySchedaRigaCol(
-                                    getProdBySchedaRigaCol(
+                                          recscheda,
-                                      recscheda,
+                                          pageIndex,
-                                      pageIndex,
+                                          rowIndex,
-                                      rowIndex,
+                                          colIndex
-                                      colIndex
+                                        ).active ||
-                                    )._id
+                                          show_hide)
-                                  "
+                                      "
-                                  :complete="false"
+                                      :id="
-                                  :cosa="cosa"
+                                        getProdBySchedaRigaCol(
-                                />
+                                          recscheda,
+                                          pageIndex,
+                                          rowIndex,
+                                          colIndex
+                                        )._id
+                                      "
+                                      :complete="false"
+                                      :cosa="cosa"
+                                    />
+                                  </div>
+                                  <!-- Prodotti singoli -->
+                                </div>
+
+                                <!-- Separatore -->
+                                <div
+                                  v-if="recscheda.scheda?.show_separatore && rowIndex !== page.length - 1"
+                                  class="text-center"
+                                  :style="getStyleRow(recscheda)"
+                                >
+                                
+                                  <q-separator inset :size="tools.adjustSize(optcatalogo, '1px')"></q-separator>
+                                </div>
                               </div>
+                              <!-- Card Row -->
                             </div>
+                            <!-- Righe (row) -->
                           </div>
+                          <!-- Pagine -->
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  v-if="optcatalogo.last_page_img"
+                  v-if="
+                    optcatalogo.last_page &&
+                    optcatalogo.last_page.text_html.contenuto
+                  "
                   :style="{
                     backgroundImage: `url(${
                       costanti.DIR_UPLOAD +
                       costanti.DIR_CATALOGO +
-                      (optcatalogo.printable
+                      optcatalogo.last_page.imgsfondo.imagefile
-                        ? optcatalogo.last_page_img
-                        : optcatalogo.last_page_img)
                     })`,
-                    backgroundSize: `${
+                    backgroundSize: `${optcatalogo.last_page.imgsfondo.fit}`,
-                      optcatalogo.printable
+                    backgroundRepeat: 'no-repeat',
-                        ? scheda.bgSize_printable
+                    height:
-                        : scheda.bgSize
+                      tools.adjustSize(
-                    }`,
+                        optcatalogo,
-                    height: optcatalogo.last_page_height + 'px',
+                        optcatalogo.last_page.size.height
-                    width: optcatalogo.last_page_width + 'px',
+                      ) + 'px',
+                    width:
+                      tools.adjustSize(
+                        optcatalogo,
+                        optcatalogo.last_page.size.width
+                      ) + 'px',
                   }"
                 >
-                  <div
+                  <div v-html="optcatalogo.last_page.text_html.contenuto"></div>
-                    class="last_page"
-                    v-html="optcatalogo.last_page_html"
-                  ></div>
                 </div>
               </div>
             </div>
@@ -427,35 +458,35 @@
         </div>
       </q-tab-panel>
       <q-tab-panel name="sfondo">
-        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
+        <div class="row justify-center q-mx-auto bg-blue-1">
           <div>
             Sfondo:
             {{
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.imgsfondo_def?.imagefile
+              optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
             }}
           </div>
 
           <q-img
-            v-if="optcatalogo.imgsfondo_def?.imagefile"
+            v-if="optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile"
             :src="
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.imgsfondo_def?.imagefile
+              optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
             "
           >
           </q-img>
         </div>
       </q-tab-panel>
       <q-tab-panel name="pagine">
-        <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
+        <div class="row justify-center q-mx-auto bg-blue-1">
           <div>
             Prima Pagina:
             {{
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.first_page_img
+              optcatalogo.first_page.imgsfondo.imagefile
             }}
           </div>
 
@@ -463,7 +494,7 @@
             :src="
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.first_page_img
+              optcatalogo.first_page.imgsfondo.imagefile
             "
           >
           </q-img>
@@ -472,7 +503,7 @@
             {{
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.last_page_img
+              optcatalogo.last_page.imgsfondo.imagefile
             }}
           </div>
 
@@ -480,7 +511,7 @@
             :src="
               costanti.DIR_UPLOAD +
               costanti.DIR_CATALOGO +
-              optcatalogo.last_page_img
+              optcatalogo.last_page.imgsfondo.imagefile
             "
           >
           </q-img>
@@ -498,6 +529,6 @@
 <script lang="ts" src="./catalogo.ts">
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import './catalogo.scss';
 </style>