- Cataloghi: parte finale... prima bozza 9 dic

2024-12-09 12:32:19 +01:00
parent 5c20e75b6a
commit 29c59588c7
33 changed files with 1009 additions and 397 deletions
--- a/src/components/CBarCode/CBarCode.scss
+++ b/src/components/CBarCode/CBarCode.scss
@@ -1,5 +1,5 @@
 .barcode-container {
-    padding: 5px;
+    padding: 5px 5px 5px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
--- a/src/components/CBarCode/CBarCode.vue
+++ b/src/components/CBarCode/CBarCode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row barcode-container justify-center text-center">
+  <div class="row barcode-container">
    <div class="text-center" :style="`font-size: ${fontsize}px`">
      {{ text }}
    </div>
--- a/src/components/CCatalogo/CCatalogo.ts
+++ b/src/components/CCatalogo/CCatalogo.ts
@@ -1,31 +1,51 @@
-import { PropType, defineComponent } from 'vue'
+import { PropType, defineComponent, ref, watch } from 'vue'

-import { Catalogo } from '@src/views/ecommerce'
+import { Catalogo } from '@src/views/ecommerce/catalogo'
 import { ICatalogo } from '@src/model'

 export default defineComponent({
  name: 'CCatalogo',
  components: { Catalogo },
+  emits: ['update:modelValue', 'updateCatalogo'],
  props: {
    // add options ICatalogo
-    optcatalogo: {
+    modelValue: {
      type: Object as PropType<ICatalogo>,
-      required: false,
-      default: () => ({
-        //++AddCATALOGO_FIELDS
-        productTypes: [],
-        excludeproductTypes: [],
-        formato: [],
-        Categoria: [],
-        Editore: [],
-        pdf: false,
-      }),
+      required: true,
    },
  },

-  setup(props) {
+  setup(props, { emit }) {
+    // Crea una copia locale reattiva di modelValue
+    const localCatalogo = ref<ICatalogo>({ ...props.modelValue });
+
+    // Watcher per sincronizzare le modifiche di modelValue
+    watch(() => props.modelValue, (newVal) => {
+      localCatalogo.value = { ...newVal };
+      // updateCatalogoPadre()
+    }, { deep: true });
+
+    function updateCatalogoPadre() {
+      emit('update:modelValue', localCatalogo.value);
+      emit('updateCatalogo', localCatalogo.value);
+    }
+
+    // Metodo per aggiornare il valore del catalogo
+    const updateCatalogo = (updatedCatalogo: ICatalogo) => {
+      localCatalogo.value = updatedCatalogo; // Aggiorna la copia locale
+      updateCatalogoPadre()
+    };
+
+    function updateCatalogoEmit(updatedCatalogo: ICatalogo) {
+      console.log('updateCatalogoEmit')
+      localCatalogo.value = updatedCatalogo; // Aggiorna la copia locale
+      updateCatalogoPadre()
+      
+    }

    return {
-    }
+      localCatalogo,
+      updateCatalogoEmit,
+    };
  }
 })
--- a/src/components/CCatalogo/CCatalogo.vue
+++ b/src/components/CCatalogo/CCatalogo.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Catalogo :optcatalogo="optcatalogo">
+    <Catalogo v-model="localCatalogo" @updateCatalogo="updateCatalogoEmit()">

    </Catalogo>
  </div>
--- a/src/components/CCatalogoCard/CCatalogoCard.scss
+++ b/src/components/CCatalogoCard/CCatalogoCard.scss
@@ -362,9 +362,26 @@
  z-index: 2; /* Posiziona l'immagine principale sopra l'ombra */
 }

+$grigiochiaro: rgb(180, 180, 180);
+$grigioscuro: rgb(120, 120, 120);
+
 .border-box {
-  border-left: 1px solid lightgray;
-  border-top: 1px solid lightgray;
-  border-right: 1px solid gray; 
-  border-bottom: 1px solid gray; 
+  border-left: 1px solid $grigiochiaro;
+  border-top: 1px solid $grigiochiaro;
+  border-right: 1px solid $grigioscuro; 
+  border-bottom: 1px solid $grigioscuro;
 }
+
+.etichetta{
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-weight: bold;
+  font-size: 1.15rem;
+}
+
+.boxtitleval{
+  padding: 10px;
+  vertical-align: middle;
+}
--- a/src/components/CCatalogoCard/CCatalogoCard.ts
+++ b/src/components/CCatalogoCard/CCatalogoCard.ts
@@ -9,11 +9,16 @@ import { CCardState } from '../CCardState'
 import { CCopyBtn } from '../CCopyBtn'
 import { CMyValueDb } from '../CMyValueDb'
 import { CPrice } from '../CPrice'
+import { CLabel } from '@src/components/CLabel'
+
 import { CBarCode } from '../CBarCode'

 import { func_tools, toolsext } from '@store/Modules/toolsext'

-import { IBaseOrder, ICatalogo, IGasordine, IMyScheda, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
+import {
+  IBaseOrder, ICatalogo, IGasordine, IMyScheda, IOrder, IOrderCart,
+  IProduct, IVariazione
+} from '@src/model'
 import { tools } from '@store/Modules/tools'
 import { useProducts } from '@store/Products'

@@ -29,7 +34,7 @@ import 'vue3-pdf-app/dist/icons/main.css'

 export default defineComponent({
  name: 'CCatalogoCard',
-  emits: ['selauthor', 'opendetail'],
+  emits: ['selauthor', 'opendetail', 'update:modelValue'],
  props: {
    product: {
      type: Object as PropType<IProduct | null>,
@@ -56,19 +61,9 @@ export default defineComponent({
      required: false,
      default: () => { }
    },
-    optcatalogo: {
+    modelValue: {
      type: Object as PropType<ICatalogo>,
-      required: false,
-      default: () => ({
-        //++AddCATALOGO_FIELDS
-        productTypes: [0],
-        excludeproductTypes: [],
-        formato: [],
-        Categoria: [],
-        Editore: [],
-        pdf: false,
-        backgroundimage: '',
-      }),
+      required: true,
    },
    scheda: {
      type: Object as PropType<IMyScheda>,
@@ -78,7 +73,7 @@ export default defineComponent({
      }),
    },
  },
-  components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice, CBarCode },
+  components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice, CBarCode, CLabel },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
@@ -100,6 +95,25 @@ export default defineComponent({

    const apriSchedaPDF = ref(false)

+    // Crea una copia locale reattiva di modelValue
+    const optcatalogo = ref<ICatalogo>({ ...props.modelValue });
+
+    // Watcher per sincronizzare le modifiche di modelValue
+    watch(() => props.modelValue, (newVal) => {
+      optcatalogo.value = { ...newVal };
+      // updateCatalogoPadre()
+    }, { deep: true });
+
+    function updateCatalogoPadre() {
+      emit('update:modelValue', optcatalogo.value);
+    }
+
+    // Metodo per aggiornare il valore del catalogo
+    const updateCatalogo = (updatedCatalogo: ICatalogo) => {
+      optcatalogo.value = updatedCatalogo; // Aggiorna la copia locale
+      updateCatalogoPadre()
+    };
+
    let myorder = reactive(<IOrder>{
      idapp: process.env.APP_ID,
      quantity: 0,
@@ -112,6 +126,8 @@ export default defineComponent({

    const storeSelected = ref('')
    const arrordersCart = ref(<IOrderCart[]>[])
+    const modifOn = ref(false)
+    const modifProd = ref(false)

    const timerInterval = ref(<any>null)
    const timerLabelScadenza = ref('')
@@ -128,6 +144,29 @@ export default defineComponent({
    const startY = ref(0)
    const scale = ref(1)

+    const getTesto_Right = computed(() => {
+      return products.replaceKeyWordsByProduct(
+        optcatalogo.value,
+        myproduct.value!,
+        props.scheda!.testo_right!
+      )
+    })
+    const getTesto_Debug = computed(() => {
+      return products.replaceKeyWordsByProduct(
+        optcatalogo.value,
+        myproduct.value!,
+        { contenuto: '{debug}', maxlength: 10000 },
+      )
+    })
+
+    const getTesto_Bottom = computed(() => {
+      return products.replaceKeyWordsByProduct(
+        optcatalogo.value,
+        myproduct.value!,
+        props.scheda!.testo_bottom!
+      )
+    })
+

    watch(() => editOn.value, (to: any, from: any) => {
      if (!editOn.value)
@@ -231,7 +270,7 @@ export default defineComponent({

      if (carica) {
        myproduct.value = null;
-        myproduct.value = await products.getProductById(props.id)
+        updateproductmodif()
      }

      // products.updateQuantityAvailable(myproduct.value._id)
@@ -250,7 +289,7 @@ export default defineComponent({
    }

    async function updateproductmodif() {
-
+      console.log('updateproductmodif')
      try {
        myproduct.value = await products.getProductById(props.id)

@@ -512,11 +551,11 @@ export default defineComponent({
    }

    function click_opendetail(id: any, autore: any) {
-      if (!props.optcatalogo.pdf)
+      if (!optcatalogo.value.pdf)
        emit('opendetail')
    }
    function escludiArticolo(variazione: IVariazione) {
-      let hasExcludeProductTypes = !props.optcatalogo.excludeproductTypes || (props.optcatalogo.excludeproductTypes && (props.optcatalogo.excludeproductTypes.includes(variazione.versione!)))
+      let hasExcludeProductTypes = !optcatalogo.value.excludeproductTypes || (optcatalogo.value.excludeproductTypes && (optcatalogo.value.excludeproductTypes.includes(variazione.versione!)))

      return hasExcludeProductTypes
    }
@@ -550,6 +589,13 @@ export default defineComponent({

    }

+    function getScale() {
+      if (optcatalogo.value.printable)
+        return optcatalogo.value.areadistampa!.scale_printable
+      else
+        return optcatalogo.value.areadistampa!.scale
+    }
+
    onMounted(mounted)
    onBeforeUnmount(beforeDestroy)

@@ -608,6 +654,14 @@ export default defineComponent({
      checkIfVariazioneDaVisu,
      isProductNovita,
      isProductBestseller,
+      modifOn,
+      modifProd,
+      getTesto_Right,
+      getTesto_Bottom,
+      getTesto_Debug,
+      getScale,
+      updateCatalogo,
+      optcatalogo,
    }
  }
 })
--- a/src/components/CCatalogoCard/CCatalogoCard.vue
+++ b/src/components/CCatalogoCard/CCatalogoCard.vue
@@ -1,5 +1,6 @@
 <template>
  <div
+    v-if="optcatalogo"
    :class="{
      ' items-start q-gutter-sm': true,
    }"
@@ -23,15 +24,6 @@
        colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
      }"
    >
-      <q-toggle
-        v-if="tools.isManager() && !optcatalogo.pdf"
-        v-model="editOn"
-        class="absolute-top-right"
-        color="green"
-        icon="fas fa-pencil-alt"
-        dense
-      >
-      </q-toggle>
      <q-page-sticky
        v-if="complete && !optcatalogo.pdf"
        position="bottom-right"
@@ -49,29 +41,8 @@

      <q-card-section>
        <!-- per immagine di ombra -->
-        <div v-if="false" class="shadow-image-wrapper">
-          <q-img
-            src="images/ombra.png"
-            :style="{
-              position: 'absolute',
-              justifyContent: 'center',
-              width:
-                tools.adjustSize(
-                  optcatalogo,
-                  scheda.dimensioni?.immagine_prodotto?.size.width,
-                  10
-                ) ?? '100%',
-              height: tools.adjustSize(
-                optcatalogo,
-                scheda.dimensioni?.immagine_prodotto?.size.height,
-                10
-              ),
-              zIndex: 1,
-            }"
-          >
-          </q-img>
-        </div>
        <div
+          v-if="scheda.testo_right && scheda.testo_right?.font"
          :class="[
            'flex', // Classi comuni
            'image-container',
@@ -104,69 +75,70 @@
            ),
          }"
        >
-          <a :href="myproduct.productInfo.link_macro" target="_blank">
-            <q-img
-              v-if="myproduct.productInfo"
-              :src="
-                myproduct.productInfo.imagefile
-                  ? tools.getFullFileNameByImageFile(
-                      'productInfos',
-                      myproduct.productInfo.imagefile
-                    )
-                  : myproduct.productInfo.image_link
-              "
-              :alt="myproduct.productInfo.name"
-              :fit="scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'"
-              :class="{
-                'book-image-fixed': complete,
-                'cursor-pointer': !complete,
-                'shadow-4': !optcatalogo.pdf,
-                'border-box': optcatalogo.pdf,
-              }"
-              :style="{
-                zIndex: 2,
-                width:
-                  scheda.testo_right.font?.posiz_text ===
-                  costanti.POSIZ_TESTO.IN_BASSO
-                    ? scheda.testo_right.font?.perc_text ?? '50%'
-                    : '45%',
-                ...(tools.adjustSize(
-                  optcatalogo,
-                  scheda.dimensioni?.immagine_prodotto?.size?.width
-                ) && {
+          <div style="position: relative; display: inline-block">
+            <a :href="myproduct.productInfo.link_macro" target="_blank">
+              <q-img
+                v-if="myproduct.productInfo"
+                :src="
+                  myproduct.productInfo.imagefile
+                    ? tools.getFullFileNameByImageFile(
+                        'productInfos',
+                        myproduct.productInfo.imagefile
+                      )
+                    : myproduct.productInfo.image_link
+                "
+                :alt="myproduct.productInfo.name"
+                :fit="
+                  scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'
+                "
+                :class="{
+                  'book-image-fixed': complete,
+                  'cursor-pointer': !complete,
+                  'shadow-4': !optcatalogo.pdf,
+                  'border-box': optcatalogo.pdf,
+                }"
+                :style="{
+                  zIndex: 2,
                  width:
-                    tools.adjustSize(
-                      optcatalogo,
-                      scheda.dimensioni?.immagine_prodotto.size?.width
-                    ) + ' !important',
-                }),
-                height: scheda.dimensioni?.immagine_prodotto?.size?.height
-                  ? tools.adjustSize(
-                      optcatalogo,
-                      scheda.dimensioni?.immagine_prodotto?.size?.height
-                    )
-                  : undefined,
-                display: 'block',
-              }"
-              @click="click_opendetail()"
-            />
-          </a>
-          <span v-if="false && !optcatalogo.generazionePDFInCorso && editOn" class="prod_disp">
-            <CMyValueDb
-              v-if="editOn"
-              :editOn="editOn"
-              :title="t('products.stockQty')"
-              table="products"
-              :id="myproduct._id"
-              :rec="myproduct"
-              mykey="stockQty"
-              debounce="1000"
-              :save="updateproductmodif()"
-              :type="costanti.FieldType.number"
+                    scheda.testo_right.font?.posiz_text ===
+                    costanti.POSIZ_TESTO.IN_BASSO
+                      ? scheda.testo_right.font?.perc_text ?? '50%'
+                      : '45%',
+                  ...(tools.adjustSize(
+                    optcatalogo,
+                    scheda.dimensioni?.immagine_prodotto?.size?.width
+                  ) && {
+                    width:
+                      tools.adjustSize(
+                        optcatalogo,
+                        scheda.dimensioni?.immagine_prodotto.size?.width
+                      ) + ' !important',
+                  }),
+                  height: scheda.dimensioni?.immagine_prodotto?.size?.height
+                    ? tools.adjustSize(
+                        optcatalogo,
+                        scheda.dimensioni?.immagine_prodotto?.size?.height
+                      )
+                    : undefined,
+                  display: 'block',
+                }"
+                @click="click_opendetail()"
+              />
+            </a>
+            <q-btn
+              v-if="
+                tools.isManager() &&
+                !optcatalogo.generazionePDFInCorso &&
+                globalStore.editOn
+              "
+              icon="fas fa-pencil-alt"
+              color="primary"
+              @click.stop="modifOn = !modifOn"
+              dense
+              style="position: absolute; top: 0px; left: 0px; z-index: 3"
            >
-            </CMyValueDb>
-          </span>
-
+            </q-btn>
+          </div>
          <!-- Testo associato all'immagine -->
          <div
            :style="{
@@ -185,7 +157,7 @@
            <div
              v-if="scheda.testo_right && scheda.testo_right"
              :style="{
-                '--scalecatalog': optcatalogo.areadistampa.scale,
+                '--scalecatalog': tools.getScale(optcatalogo),
                'line-height': scheda.testo_right.font?.line_height,
                height: '100%',
                display: 'flex',
@@ -193,13 +165,7 @@
              }"
            >
              <div
-                v-html="
-                  products.replaceKeyWordsByProduct(
-                    optcatalogo,
-                    myproduct,
-                    scheda.testo_right
-                  )
-                "
+                v-html="getTesto_Right"
                style="
                  display: flex;
                  flex-direction: column;
@@ -207,7 +173,7 @@
                  height: 100%;
                "
              ></div>
-              <div class="row justify-center">
+              <div class="row">
                <div v-if="scheda.barcode && scheda.barcode.show">
                  <CBarCode
                    :value="myproduct.productInfo.code"
@@ -234,8 +200,8 @@
                  <q-img
                    src="images/bestseller.png"
                    alt="Bestseller"
-                    :width="(40 * optcatalogo.areadistampa.scale) + 'px'"
-                    :height="(40 * optcatalogo.areadistampa.scale) + 'px'"
+                    :width="40 * tools.getScale(optcatalogo) + 'px'"
+                    :height="40 * tools.getScale(optcatalogo) + 'px'"
                    fit="contain"
                  ></q-img>
                </div>
@@ -247,8 +213,8 @@
                  <q-img
                    src="images/novita.png"
                    alt="Novita"
-                    :width="(40 * optcatalogo.areadistampa.scale) + 'px'"
-                    :height="(40 * optcatalogo.areadistampa.scale) + 'px'"
+                    :width="40 * tools.getScale(optcatalogo) + 'px'"
+                    :height="40 * tools.getScale(optcatalogo) + 'px'"
                    fit="contain"
                  ></q-img>
                </div>
@@ -256,23 +222,31 @@
            </div>
          </div>
          <div
-            v-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
+            v-if="optcatalogo.indebug"
            :style="{
              width: '100%',
            }"
          >
            <div
              :style="{
-                '--scalecatalog': optcatalogo.areadistampa.scale,
+                '--scalecatalog': tools.getScale(optcatalogo),
                'line-height': scheda.testo_bottom.font?.line_height,
              }"
-              v-html="
-                products.replaceKeyWordsByProduct(
-                  optcatalogo,
-                  myproduct,
-                  scheda.testo_bottom
-                )
-              "
+              v-html="getTesto_Debug"
+            ></div>
+          </div>
+          <div
+            v-else-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
+            :style="{
+              width: '100%',
+            }"
+          >
+            <div
+              :style="{
+                '--scalecatalog': tools.getScale(optcatalogo),
+                'line-height': scheda.testo_bottom.font?.line_height,
+              }"
+              v-html="getTesto_Bottom"
            ></div>
          </div>
        </div>
@@ -485,6 +459,264 @@
        ></q-btn>
      </div>
    </q-dialog>
+    <q-dialog v-if="myproduct && modifOn" v-model="modifOn">
+      <q-card class="dialog_card">
+        <q-toolbar class="bg-primary text-white">
+          <q-toolbar-title>
+            Modifica a {{ myproduct.productInfo.name }}</q-toolbar-title
+          >
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-toolbar>
+        <q-card-section class="q-pa-xs inset-shadow">
+          <div class="column">
+            <div class="etichetta">Titolo:</div>
+            <CMyValueDb
+              :editOn="modifOn"
+              table="productinfos"
+              :id="myproduct.productInfo._id"
+              :rec="myproduct.productInfo"
+              mykey="name"
+              debounce="1000"
+              :save="updateproductmodif()"
+              :type="costanti.FieldType.string"
+            >
+            </CMyValueDb>
+            <div class="etichetta">SottoTitolo:</div>
+            <CMyValueDb
+              :editOn="modifOn"
+              table="productinfos"
+              :id="myproduct.productInfo._id"
+              :rec="myproduct.productInfo"
+              mykey="sottotitolo"
+              debounce="1000"
+              :save="updateproductmodif()"
+              :type="costanti.FieldType.string"
+            >
+            </CMyValueDb>
+            <div class="etichetta">Descrizione Estesa:</div>
+            <CMyValueDb
+              :editOn="modifOn"
+              :title="t('catalogo.descrizione_estesa')"
+              table="productinfos"
+              :id="myproduct.productInfo._id"
+              :rec="myproduct.productInfo"
+              mykey="descrizione_completa_macro"
+              :maxlength="
+                scheda.testo_bottom.maxlength
+                  ? scheda.testo_bottom.maxlength
+                  : 10000
+              "
+              debounce="1000"
+              :save="updateproductmodif()"
+              :type="costanti.FieldType.string"
+            >
+            </CMyValueDb>
+            <div class="row q-ma-xm q-pa-xs">
+              <div class="boxtitleval">
+                <div class="etichetta">Pagine:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.pagine')"
+                  table="arrvariazioni"
+                  :id="myproduct._id"
+                  :rec="myproduct"
+                  mykey="pagine"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.number"
+                >
+                </CMyValueDb>
+              </div>
+              <div class="boxtitleval">
+                <div class="etichetta">Misure:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.misure')"
+                  table="arrvariazioni"
+                  :id="myproduct._id"
+                  :rec="myproduct"
+                  mykey="misure"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.string"
+                >
+                </CMyValueDb>
+              </div>
+              <div class="boxtitleval">
+                <div class="etichetta">Pubblicazione:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.date_pub')"
+                  table="productinfos"
+                  :id="myproduct.productInfo._id"
+                  :rec="myproduct.productInfo"
+                  mykey="date_publishing"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.date"
+                >
+                </CMyValueDb>
+              </div>
+              <div class="boxtitleval">
+                <div class="etichetta">Formato:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.formato')"
+                  table="arrvariazioni"
+                  :id="myproduct._id"
+                  :rec="myproduct"
+                  mykey="formato"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.string"
+                >
+                </CMyValueDb>
+              </div>
+            </div>
+            <div class="row">
+              <div class="boxtitleval">
+                <div class="etichetta">Prezzo:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.prezzo')"
+                  table="arrvariazioni"
+                  :id="myproduct._id"
+                  :rec="myproduct"
+                  mykey="price"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.number"
+                >
+                </CMyValueDb>
+              </div>
+              <div class="boxtitleval">
+                <div class="etichetta">Prezzo Scontato:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.prezzo_scontato')"
+                  table="arrvariazioni"
+                  :id="myproduct._id"
+                  :rec="myproduct"
+                  mykey="sale_price"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.number"
+                >
+                </CMyValueDb>
+              </div>
+            </div>
+            <div class="row">
+              <div class="boxtitleval">
+                <div class="etichetta">Descrizione breve macro:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.descrizione_breve_macro')"
+                  table="productinfos"
+                  :id="myproduct.productInfo._id"
+                  :rec="myproduct.productInfo"
+                  mykey="descrizione_breve_macro"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.string"
+                >
+                </CMyValueDb>
+              </div>
+              <div class="boxtitleval">
+                <div class="etichetta">Link a gruppomacro.com:</div>
+                <CMyValueDb
+                  :editOn="modifOn"
+                  :title="t('catalogo.link_macro')"
+                  table="productinfos"
+                  :id="myproduct.productInfo._id"
+                  :rec="myproduct.productInfo"
+                  mykey="link_macro"
+                  debounce="1000"
+                  :save="updateproductmodif()"
+                  :type="costanti.FieldType.string"
+                >
+                </CMyValueDb>
+              </div>
+            </div>
+            <div class="row bg-blue-4">
+              <div class="etichetta">Venduti:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="totaleVenduti"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+              <div class="etichetta">Venduti Ultimo Mese:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="venditeLastM"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+              <div class="etichetta">Venduti Ultimi 6 Mesi:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="venditeLast6M"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+              <CLabel :value="myproduct.indiceRanking" label="N° in Classifica:" />
+              
+              <div class="etichetta">3 Mesi:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="rank3M"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+              <div class="etichetta">6 Mesi:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="rank6M"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+              <div class="etichetta">1 Anno:</div>
+              <CMyValueDb
+                :editOn="modifOn"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
+                mykey="rank1Y"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
  </div>
 </template>

--- a/src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts
+++ b/src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts
@@ -20,7 +20,7 @@ import { ICatalogo, IMyScheda, IProduct } from '@src/model'

 export default defineComponent({
  name: 'CContainerCatalogoCard',
-  emits: ['selauthor'],
+  emits: ['selauthor', 'update:modelValue'],
  props: {
    id: {
      type: String,
@@ -47,24 +47,15 @@ export default defineComponent({
      required: false,
      default: () => { }
    },
-    optcatalogo: {
+    modelValue: {
      type: Object as PropType<ICatalogo>,
-      required: false,
-      default: () => ({
-        //++AddCATALOGO_FIELDS
-        productTypes: [0],
-        excludeproductTypes: [],
-        formato: [],
-        Categoria: [],
-        Editore: [],
-        pdf: false,
-      }),
+      required: true,
    },
    scheda: {
      type: Object as PropType<IMyScheda>,
      required: false,
      default: () => ({
-        
+
      }),
    },
  },
@@ -77,6 +68,25 @@ export default defineComponent({

    const opendetailbool = ref(false)

+    // Crea una copia locale reattiva di modelValue
+    const optcatalogo = ref<ICatalogo>({ ...props.modelValue });
+
+    // Watcher per sincronizzare le modifiche di modelValue
+    watch(() => props.modelValue, (newVal) => {
+      optcatalogo.value = { ...newVal };
+      // updateCatalogoPadre()
+    }, { deep: true });
+
+    function updateCatalogoPadre() {
+      emit('update:modelValue', optcatalogo.value);
+    }
+
+    // Metodo per aggiornare il valore del catalogo
+    const updateCatalogo = (updatedCatalogo: ICatalogo) => {
+      optcatalogo.value = updatedCatalogo; // Aggiorna la copia locale
+      updateCatalogoPadre()
+    };
+
    function selauthor(id: any, autore: any) {
      emit('selauthor', id, autore)
    }
@@ -102,6 +112,8 @@ export default defineComponent({
      selauthor,
      opendetail,
      opendetailbool,
+      optcatalogo,
+      updateCatalogo,
    }
  }
 })
--- a/src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue
+++ b/src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue
@@ -7,7 +7,7 @@
    :options="options"
    @selauthor="selauthor"
    @opendetail="opendetail"
-    :optcatalogo="optcatalogo"
+    v-model="optcatalogo"
    :scheda="scheda"
  >
  </CCatalogoCard>
@@ -32,7 +32,7 @@
              quante_col: 'c1',
              in_3d: true,
            }"
-            :optcatalogo="optcatalogo"
+            v-model="optcatalogo"
            @selauthor="selauthor"
            :scheda="scheda"
          >
--- a/src/components/CMyDimensioni/CMyDimensioni.ts
+++ b/src/components/CMyDimensioni/CMyDimensioni.ts
@@ -38,6 +38,11 @@ export default defineComponent({
      required: false,
      default: false,
    },
+    showDim: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
    disable: {
      type: Boolean,
      required: false,
--- a/src/components/CMyDimensioni/CMyDimensioni.vue
+++ b/src/components/CMyDimensioni/CMyDimensioni.vue
@@ -12,7 +12,8 @@

    <div v-if="internalModel" class="sfondo_margine row">
      <CMySize
-        label="Dinemsioni:"
+        v-if="showDim"
+        label="Dimensioni:"
        v-model="internalModel.size"
        @update:model-value="modifSize"
      ></CMySize>
--- a/src/components/CMyEditElem/CMyEditElem.ts
+++ b/src/components/CMyEditElem/CMyEditElem.ts
@@ -1,8 +1,9 @@
 import {
  defineComponent, onMounted, PropType, computed, ref, toRef, watch,
+  nextTick,
 } from 'vue'

-import { IColGridTable, IElemText, IElementiScheda, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
+import { ICatalogo, IColGridTable, IElemText, IElementiScheda, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'

 import { CImgTitle } from '@/components/CImgTitle'
@@ -37,6 +38,9 @@ import { costanti } from '@costanti'
 import objectId from '@src/js/objectId'
 import { useProducts } from '@src/store/Products'

+import html2pdf from 'html2pdf.js'
+
+
 export default defineComponent({
  name: 'CMyEditElem',
  components: {
@@ -287,10 +291,10 @@ export default defineComponent({
              recscheda.scheda.etichette!.bestseller = {
                show: false,
                primiNInClassifica: 0,
-                
+
              }
            }
-              
+
            if ((!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
              recscheda.scheda.barcode = {
                show: false,
@@ -888,10 +892,135 @@ export default defineComponent({
      }
    }

+    function toggleDebug() {
+      myel.value.catalogo!.indebug = !myel.value.catalogo!.indebug      
+    }
+
+    const preparePDF = async () => {
+      myel.value.catalogo!.generazionePDFInCorso = true
+      myel.value.catalogo!.areadistampa!.scale = myel.value.catalogo!.areadistampa!.scale_printable
+    }
+
+    const terminaPDF = async () => {
+      myel.value.catalogo!.generazionePDFInCorso = false
+      myel.value.catalogo!.areadistampa!.scale = 1
+    }
+
+
+    const generatePDF = async (optcatalogo: ICatalogo) => {
+
+      await nextTick()
+
+      $q.dialog({
+        message: 'Generare il PDF ?',
+        ok: {
+          label: t('dialog.yes'),
+          push: true
+        },
+        cancel: {
+          label: t('dialog.cancel')
+        },
+        title: 'Generazione PDF'
+      }).onOk(async () => {
+
+
+        $q.loading.show({
+          message: 'Caricamento immagini e generazione PDF in corso...'
+        })
+
+
+        try {
+
+          let defaultMargin = 0.1
+          if (optcatalogo.printable) {
+            defaultMargin = 0
+          } else {
+            defaultMargin = 0
+          }
+          const unit = optcatalogo.areadistampa!.unit
+
+          let myformat = { ...optcatalogo.areadistampa!.format }
+
+          let scale = tools.getScale(optcatalogo)
+
+          let scalecanvas = 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 = (optcatalogo.pdf_filename ?? 'catalogo_completo')
+
+          myfile += '_' + formatwidth + '_' + formatheight + '_' + unit + '_scale_' + scale
+
+          myfile += '.pdf'
+
+
+          const element = document.getElementById('pdf-content')
+          const opt = {
+            margin: [
+              optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.top) || defaultMargin) : defaultMargin,
+              optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.left) || defaultMargin) : defaultMargin,
+              optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.bottom) || defaultMargin) : defaultMargin,
+              optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.right) || defaultMargin) : defaultMargin
+            ],
+            filename: myfile,
+            image: {
+              type: 'jpeg',
+              quality: 0.98
+            },
+            html2canvas: {
+              scale: scalecanvas,
+              useCORS: true,
+              letterRendering: true,
+            },
+            jsPDF: {
+              unit: unit,
+              format: [formatwidth, formatheight],
+              orientation: optcatalogo.areadistampa!.orientation,
+              compress: optcatalogo.areadistampa!.compress,
+            },
+            enableLinks: true,
+            pagebreak: { mode: 'avoid-all', before: '.card-page' }
+          }
+
+          console.log('opt di stampa', opt)
+          // a4: [595.28, 841.89]
+
+          await html2pdf().set(opt).from(element).save()
+
+          optcatalogo.generazionePDFInCorso = false
+          optcatalogo.areadistampa!.scale = 1
+
+          $q.loading.hide()
+          $q.notify({
+            color: 'positive',
+            message: 'PDF generato con successo!',
+            icon: 'check'
+          })
+        } catch (error) {
+          $q.loading.hide()
+          $q.notify({
+            color: 'negative',
+            message: 'Errore nella generazione del PDF',
+            icon: 'error'
+          })
+          console.error('Errore nella generazione del PDF:', error)
+        }
+      })
+    }
+

    onMounted(mounted)

    return {
+      preparePDF, terminaPDF, generatePDF,
+      toggleDebug,
      tools,
      shared_consts,
      getArrDisciplines,
--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -1460,7 +1460,7 @@
              dense
              dense-toggle
              expand-separator
-              label="Schede"
+              label="Configura Catalogo"
              icon="fas fa-play-circle"
            >
              <div class="row">
@@ -1473,22 +1473,29 @@
                  @click="addNewScheda"
                >
                </q-btn>
+              </div>

+              <div class="row">
                <q-tabs
                  v-model="tabScheda"
                  dense
                  class="text-grey"
                  active-color="primary"
                  indicator-color="primary"
-                  align="justify"
+                  align="center"
+                  vertical
                  narrow-indicator
                >
                  <q-tab
                    v-for="(rec, ind) in myel.catalogo.arrSchede"
                    :key="rec._id"
                    :name="ind"
-                    :label="`Scheda ` + (ind + 1)"
-                    icon="fas fa-pencil-alt"
+                    dense
+                    :label="
+                      `${ind}. ` + rec.scheda.name
+                        ? rec.scheda.name
+                        : `Scheda ` + (ind + 1)
+                    "
                  >
                  </q-tab>
                </q-tabs>
@@ -1500,7 +1507,7 @@
                    :name="ind"
                  >
                    <q-bar v-if="recscheda" class="bg-primary text-white">
-                      Scheda {{ ind + 1 }}
+                      {{ ind + 1 }}.
                      <span v-if="recscheda.scheda">
                        '{{ recscheda.scheda.name }}'</span
                      >
@@ -1568,7 +1575,7 @@
                          :options="SchedeOpt()"
                          @update:model-value="modifElem"
                          label="Scheda collegata:"
-                          style="width: 150px"
+                          style="width: 250px"
                          emit-value
                          map-options
                        >
@@ -1586,7 +1593,7 @@
                            :options="SchedeOpt()"
                            @update:model-value="modifElem"
                            label="Scegli Scheda"
-                            style="width: 150px"
+                            style="width: 250px"
                            emit-value
                            map-options
                          >
@@ -1601,6 +1608,7 @@
                          </q-btn>
                        </div>
                      </div>
+                      <br />

                      <CMySlider
                        label="Pagine max da visualizzare"
@@ -1765,6 +1773,7 @@
                        <CMyDimensioni
                          v-model="recscheda.scheda.dimensioni.riga"
                          :path="costanti.DIR_SCHEDA"
+                          :showDim="false"
                          @modifElem="modifElem"
                          :show_imgsfondo="false"
                          @update:model-value="modifElem"
@@ -2036,6 +2045,14 @@
                  @update:model-value="modifElem"
                >
                </q-toggle>
+                <q-toggle
+                  v-model="myel.catalogo.indebug"
+                  color="positive"
+                  icon="fas fa-file-pdf"
+                  label="In Debug"
+                  @update:model-value="modifElem"
+                >
+                </q-toggle>

                <q-select
                  rounded
@@ -2070,6 +2087,19 @@
                  map-options
                >
                </q-select>
+                <q-select
+                  rounded
+                  style="width: 200px"
+                  outlined
+                  v-model="myel.catalogo.areadistampa.scale_printable"
+                  :options="tools.SelectListScalePDF"
+                  @update:model-value="modifElem"
+                  dense
+                  label="Scale per Stampa:"
+                  emit-value
+                  map-options
+                >
+                </q-select>
                <q-select
                  rounded
                  style="width: 200px"
@@ -2125,6 +2155,29 @@
                ></CBorders>
              </div>
            </q-expansion-item>
+            <div></div>
+            <q-btn
+              v-if="myel.catalogo.pdf && !myel.catalogo.generazionePDFInCorso"
+              :label="`Prepara PDF ${myel.catalogo.pdf_filename}`"
+              @click="preparePDF"
+            ></q-btn>
+            <q-btn
+              v-if="myel.catalogo.generazionePDFInCorso"
+              :label="`Termina Generazione`"
+              @click="terminaPDF"
+            ></q-btn>
+            <q-btn
+              v-if="myel.catalogo.pdf && myel.catalogo.generazionePDFInCorso"
+              :label="`Genera PDF ${myel.catalogo.pdf_filename}`"
+              @click="generatePDF(myel.catalogo)"
+              color="positive"
+            ></q-btn>
+            <q-btn
+              label="Debug"
+              @click="toggleDebug()"
+              :push="myel.catalogo.indebug"
+              :color="myel.catalogo.indebug ? `positive` : 'primary'"
+            ></q-btn>
          </div>
        </div>
      </q-list>
--- a/src/components/CMyElem/CMyElem.ts
+++ b/src/components/CMyElem/CMyElem.ts
@@ -3,7 +3,7 @@ import {
  defineComponent, onMounted, PropType, ref, toRef, watch, nextTick,
 } from 'vue'

-import { ICoordGPS, IMyCard, IMyElem, IMyPage, IOperators, ISocial } from '@src/model'
+import { ICatalogo, ICoordGPS, IMyCard, IMyElem, IMyPage, IOperators, ISocial } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'

 import { CImgTitle } from '../CImgTitle/index'
@@ -283,6 +283,11 @@ export default defineComponent({
      return `col-${width}`
    }

+    function updateCatalogoEmit(updatedCatalogo: ICatalogo) {
+      console.log('CMyElem: updateCatalogoEmit')
+      myel.value.catalogo = updatedCatalogo
+    }
+
    onMounted(mounted)

    return {
@@ -324,6 +329,7 @@ export default defineComponent({
      cardGroups,
      currentCardsPerSlide,
      animarecard,
+      updateCatalogoEmit,
    }
  },

--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -658,7 +658,7 @@
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
          <div v-if="editOn" class="elemEdit">PRODOTTI CATALOGO:</div>
-          <CCatalogo :optcatalogo="myel.catalogo"> </CCatalogo>
+          <CCatalogo v-model="myel.catalogo" @updateCatalogo="updateCatalogoEmit()"/>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA">
          <div v-if="editOn" class="elemEdit">MAPPA:</div>
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -468,7 +468,7 @@ export default defineComponent({

      try {

-        // console.log('mounted', 'isFieldDb()', myrow.value)
+        console.log('mounted', 'isFieldDb()', myrow.value, 'sub', props.subfield, 'field', props.field)
        if (isFieldDb() && !props.isrec) {
          // console.log(' .  none...')
        } else {
@@ -480,8 +480,13 @@ export default defineComponent({
              myvalue.value = myrow.value[props.field][props.subfield]
            }
          } else {
+            let miorecord = myrow.value
+            if (props.table === 'arrvariazioni') {
+              miorecord = myrow.value.arrvariazioni[0]
+            }
+
            if (props.field !== '')
-              myvalue.value = myrow.value[props.field]
+              myvalue.value = miorecord[props.field]
            else {
              // @ts-ignore
              myvalue.value = myrow.value
@@ -578,7 +583,7 @@ export default defineComponent({
      return myval
    }*/

-    function SaveValueInt(newVal: any, valinitial: any) {
+    async function SaveValueInt(newVal: any, valinitial: any) {

      console.log('SaveValueInt', newVal, valinitial)

@@ -603,7 +608,7 @@ export default defineComponent({
      console.log('newVal', newVal)

      if (isFieldDb()) {
-        savefield(newVal, valinitial, $q)
+        await savefield(newVal, valinitial, $q)
      } else {
        // Update value in table memory
        if (props.subfield !== '') {
@@ -627,10 +632,10 @@ export default defineComponent({
    }


-    function savefield(value: any, initialval: any, myq: any) {
+    async function savefield(value: any, initialval: any, myq: any) {
      if (!props.insertMode) {
        myvalue.value = value
-        tools.saveInDBForTypes(myq, props.field, myvalue.value, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
+        return tools.saveInDBForTypes(myq, props.field, myvalue.value, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
      }
    }

--- a/src/components/CMyValueDb/CMyValueDb.ts
+++ b/src/components/CMyValueDb/CMyValueDb.ts
@@ -152,11 +152,11 @@ export default defineComponent({

    const { setValDb, getValDb } = MixinBase()

-    function showandsave(row: any, col: any, newval: any, valinitial: any) {
+    async function showandsave(row: any, col: any, newval: any, valinitial: any) {
      console.log('showandsave CMyFieldDb', row, col, newval)

      if (newval !== valinitial) {
-        tools.saveInDBForTypes($q, props.mykey, newval, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey, props.specialField)
+        return tools.saveInDBForTypes($q, props.mykey, newval, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey, props.specialField)
      }

    }