- Continuazione del Catalogo

2024-10-26 17:12:05 +02:00
parent 76b51f5b91
commit baa4188746
62 changed files with 1112 additions and 1697 deletions
--- a/src/components/CCatalogo/CCatalogo.ts
+++ b/src/components/CCatalogo/CCatalogo.ts
@@ -19,6 +19,7 @@ export default defineComponent({
        Categoria: [],
        Editore: [],
        pdf: false,
+        backgroundimage: '',
      }),
    },
  },
--- a/src/components/CCatalogoCard/CCatalogoCard.scss
+++ b/src/components/CCatalogoCard/CCatalogoCard.scss
@@ -159,7 +159,7 @@

 .book-title {
  margin: 8px;
-  font-family: 'Poppins,sans-serif';
+  font-family: 'Arial, Poppins,sans-serif';
  font-weight: bold;
  color: #333;
  display: block;
@@ -258,6 +258,10 @@
 }

 .colfix_prodotti_2 {
+  width: 240px;
+}
+
+.colfix_prodotti_3 {
  width: 170px;
 }

@@ -312,10 +316,10 @@

 .scheda-book {
  text-align: center;
-  margin-left: 20px;
+  //margin-left: 20px;

  @media (max-width: 718px) {
-    margin-left: 5px;
+    //margin-left: 5px;
  }
 }

--- a/src/components/CCatalogoCard/CCatalogoCard.ts
+++ b/src/components/CCatalogoCard/CCatalogoCard.ts
@@ -66,6 +66,7 @@ export default defineComponent({
        Categoria: [],
        Editore: [],
        pdf: false,
+        backgroundimage: '',
      }),
    },
  },
--- a/src/components/CCatalogoCard/CCatalogoCard.vue
+++ b/src/components/CCatalogoCard/CCatalogoCard.vue
@@ -1,21 +1,27 @@
 <template>
  <div
    :class="{
-      'row items-start q-gutter-sm': true,
+      ' items-start q-gutter-sm': true,
    }"
+    :style="
+      optcatalogo.height
+        ? ' height: ' + optcatalogo.height + ' !important; '
+        : ''
+    "
  >
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
    <div
      v-if="!!myproduct && !!myproduct.productInfo"
      :class="{
        'my-card-big book-details': complete,
-        'book-card': !complete,
-        colfix_prodotti_1: options.quante_col == 'c1',
-        colfix_prodotti_2: options.quante_col == 'c2',
+        'book-card': !complete && !optcatalogo.pdf,
+        colfix_prodotti_1: options.quante_col == 'c1' && !optcatalogo.pdf,
+        colfix_prodotti_2: options.quante_col == 'c2' && !optcatalogo.pdf,
+        colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
      }"
    >
      <q-toggle
-        v-if="tools.isManager()"
+        v-if="tools.isManager() && !optcatalogo.pdf"
        v-model="editOn"
        class="absolute-top-right"
        color="green"
@@ -24,7 +30,7 @@
      >
      </q-toggle>
      <q-page-sticky
-        v-if="complete"
+        v-if="complete && !optcatalogo.pdf"
        position="bottom-right"
        :offset="[18, 0]"
        style="z-index: 1000"
@@ -40,13 +46,22 @@

      <q-card-section>
        <div
-          :class="{ 'flex q-pa-sm': true, 'shadow-2': options.in_3d }"
-          style="place-content: center"
+          :class="{
+            'flex q-pa-sm': !optcatalogo.pdf,
+            'shadow-2': options.in_3d,
+            'items-center': true, // Centrare verticalmente
+            
+          }"
+          :style="'justify-items: center; '"
        >
          <q-img
+            v-if="myproduct.productInfo"
            :src="
-              productInfo.imagefile
-                ? tools.getFullFileNameByImageFile('productInfos', myproduct.myproduct.productInfo.imagefile)
+              myproduct.productInfo.imagefile
+                ? tools.getFullFileNameByImageFile(
+                    'productInfos',
+                    myproduct.productInfo.imagefile
+                  )
                : myproduct.productInfo.image_link
            "
            :alt="myproduct.productInfo.name"
@@ -54,7 +69,15 @@
              'book-image-fixed': complete,
              'cursor-pointer': !complete,
              'shadow-4': true,
+              'image-wrapper': optcatalogo.pdf,
+              'items-center': true,
            }"
+            :style="
+              'place-items: center; ' +
+              (optcatalogo.width
+                ? ' width: ' + optcatalogo.width + ' !important; '
+                : '')
+            "
            @click="click_opendetail()"
          >
            <div
@@ -62,6 +85,7 @@
              style="left: 90%; top: -18px; transform: translateX(-50%)"
            >
              <q-btn
+                v-if="!optcatalogo.pdf"
                color="blue-6"
                class="semi-transparent"
                round
@@ -72,12 +96,6 @@
            </div>
          </q-img>

-          <!--@click="
-              complete
-                ? toggleFullScreen
-                : naviga(`/catalogo/` + myproduct._id + '/' + cosa)
-            "-->
-
          <div class="scheda-book">
            <q-card-title>
              <span class="book-title" :data-col="options.quante_col">
--- a/src/components/CContainerCatalogoCard/CContainerCatalogoCard.scss
+++ b/src/components/CContainerCatalogoCard/CContainerCatalogoCard.scss
@@ -1 +1,49 @@
+.pdf-page {
+    margin-bottom: 20px;
+    background: white;
+}

+.page-break-after {
+    page-break-after: always;
+    break-after: page;
+}
+
+.page-break-before {
+    page-break-before: always;
+    break-before: page;
+}
+
+.page-break-avoid {
+    page-break-inside: avoid;
+    break-inside: avoid;
+}
+
+@media print {
+    .pdf-page {
+        margin: 0;
+        page-break-after: always;
+    }
+}
+
+.image-container {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+    margin-bottom: 20px;
+  }
+
+  .image-wrapper {
+    max-width: 100%;
+    display: block;
+  }
+
+  .image-wrapper img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Per forzare una nuova pagina prima dell'immagine se necessario */
+  .force-new-page {
+    page-break-before: always;
+    break-before: page;
+  }
--- a/src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts
+++ b/src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts
@@ -53,6 +53,7 @@ export default defineComponent({
        Categoria: [],
        Editore: [],
        pdf: false,
+        backgroundimage: '',
      }),
    },
  },
--- a/src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue
+++ b/src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue
@@ -1,16 +1,14 @@
 <template>
-  <div>  
-    <CCatalogoCard
-      :id="id"
-      :complete="complete"
-      :cosa="cosa"
-      :options="options"
-      @selauthor="selauthor"
-      @opendetail="opendetail"
-      :optcatalogo="optcatalogo"
-    >
-    </CCatalogoCard>
-  </div>
+  <CCatalogoCard
+    :id="id"
+    :complete="complete"
+    :cosa="cosa"
+    :options="options"
+    @selauthor="selauthor"
+    @opendetail="opendetail"
+    :optcatalogo="optcatalogo"
+  >
+  </CCatalogoCard>
  <q-dialog
    v-model="opendetailbool"
    position="top"
--- a/src/components/CMyEditElem/CMyEditElem.ts
+++ b/src/components/CMyEditElem/CMyEditElem.ts
@@ -2,7 +2,7 @@ import {
  defineComponent, onMounted, PropType, computed, ref, toRef, watch,
 } from 'vue'

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

 import { CImgTitle } from '@/components/CImgTitle'
@@ -307,6 +307,28 @@ export default defineComponent({

    }

+    function saveFieldElem(rec: any, newval: any, col: IColGridTable) {
+      console.log('saveFieldElem', rec, 'newval', newval, 'col', col)
+
+      let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
+
+      if (col.fieldtype === costanti.FieldType.image) {
+        if (iscatalogo) {
+          myel.value.catalogo[col.name] = newval.imagefile
+          //console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
+        } else {
+          myel.value[col.name] = newval.imagefile
+        }
+      } else {
+        if (iscatalogo) {
+          myel.value.catalogo[col.name] = newval
+          console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name])
+        } else {
+          myel.value[col.name] = newval
+        }
+      }
+    }
+
    function saveCard(recpass: IMyCard, myval: any) {
      if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
        if (props.myelem.listcards) {
@@ -337,8 +359,13 @@ export default defineComponent({
        (props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
        myel.value.image = myval
        myel.value.vers_img = tools.getGenerateVersionImage()
+
+      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMAGE) {
+        myel.value.image = myval
+
      }
      modifElem()
+      
    }

    function showAnimation() {
@@ -358,10 +385,15 @@ export default defineComponent({
      modifElem()
    }*/

-    function generateSizeOptions() {
+    function generateSizeOptions(widthpx: boolean = true) {
      const options = [];
+
+      let add = '';
+      if (widthpx)
+        add = 'px'
      for (let i = 0; i <= 700; i += 50) {
-        options.push({ label: `${i}px`, value: `${i}px` });
+
+        options.push({ label: `${i}${add}`, value: `${i}${add}` });
      }
      return options;
    }
@@ -371,6 +403,40 @@ export default defineComponent({
      myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
      modifElem()
    }
+    function updateCatalogoSizeWidth(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.width = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoNumSchedePerCol(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.numschede_perCol = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoNumSchedePerRiga(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.numschede_perRiga = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthScheda(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthscheda = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthPag(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthpag = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeWidthPagPrintable(value: any) {
+      // Gestisce l'input dell'utente per un nuovo valore
+      myel.value.catalogo!.widthpagPrintable = value // Aggiorna widthimg con il nuovo valore
+      modifElem()
+    }
+    function updateCatalogoSizeHeight(value: any) {
+      myel.value.catalogo!.height = value
+      modifElem()
+    }

    function updateSizeHeight(value: any) {
      myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
@@ -520,6 +586,14 @@ export default defineComponent({
      updateClass4,
      selectedClasses,
      classiImmagineOptions,
+      saveFieldElem,
+      updateCatalogoSizeWidth,
+      updateCatalogoSizeHeight,
+      updateCatalogoSizeWidthScheda,
+      updateCatalogoSizeWidthPag,
+      updateCatalogoSizeWidthPagPrintable,
+      updateCatalogoNumSchedePerCol,
+      updateCatalogoNumSchedePerRiga,
    }
  },

--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -189,7 +189,10 @@
            />
            <q-select
              label="Altezza Carosello:"
-              v-if="(myel.type === shared_consts.ELEMTYPE.CARD) || (myel.type === shared_consts.ELEMTYPE.GRID_ORIZ)"
+              v-if="
+                myel.type === shared_consts.ELEMTYPE.CARD ||
+                myel.type === shared_consts.ELEMTYPE.GRID_ORIZ
+              "
              v-model="myel.heightcarousel"
              emit-value
              map-options
@@ -226,6 +229,7 @@
              style="width: 100px"
              emit-value
              map-options
+              @save="saveCard"
            >
            </q-select>
            <q-select
@@ -464,12 +468,12 @@
                  :rec="rec"
                  field="imagefile"
                  @update:model-value="modifElem"
-                  @save="saveCard"
                  :canEdit="true"
                  :canModify="true"
                  :nosaveToDb="true"
                  :path="myel.path"
                  :fieldtype="costanti.FieldType.imgcard"
+                  @save="saveCard"
                >
                </CMyFieldRec>

@@ -861,6 +865,56 @@
            </CMyFieldRec>
          </div>
        </div>
+        <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
+          <div v-if="enableEdit">
+            <q-input
+              dense
+              label="Link:"
+              @update:model-value="modifElem"
+              v-model="myel.container"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              dense
+              label="Testo Link:"
+              @update:model-value="modifElem"
+              v-model="myel.container2"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-toggle
+              v-model="myel.parambool"
+              color="positive"
+              label="Leggi"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-input
+              label="NomeFile Img:"
+              @update:model-value="modifElem"
+              v-model="myel.image"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <CMyFieldRec
+              title="NomeFile Img:"
+              table="myelems"
+              :id="myel._id"
+              :rec="myel"
+              field="image"
+              @update:model-value="modifElem"
+              :canEdit="true"
+              :canModify="true"
+              :path="myel.path"
+              :fieldtype="costanti.FieldType.image"
+            >
+            </CMyFieldRec>
+          </div>
+        </div>

        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
          <div v-if="enableEdit">
@@ -1271,6 +1325,15 @@
          <div v-if="enableEdit" class="row">
            <div>Cataloghi:</div>
            <br />
+            <q-toggle
+              v-model="myel.catalogo.pdf"
+              color="positive"
+              icon="fas fa-file-pdf"
+              label="Versione PDF"
+              @update:model-value="modifElem"
+            >
+            </q-toggle>
+            <br>

            <!--++AddCATALOGO_FIELDS-->
            <q-select
@@ -1326,14 +1389,191 @@
              option-label="name"
            >
            </q-select>
-            Versione PDF:
-            <q-toggle
-              v-model="myel.catalogo.pdf"
-              color="positive"
-              icon="fas fa-file-pdf"
+
+            <q-select
+              label="Largh. Schede:"
+              v-model="myel.catalogo.widthscheda"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidthScheda"
+              filled
+              dense
+              style="width: 150px"
+            />
+            <q-select
+              label="Largh. Pagina:"
+              v-model="myel.catalogo.widthpag"
+              emit-value
+              map-options
+              :options="generateSizeOptions(false)"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidthPag"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Largh. Immagini:"
+              v-model="myel.catalogo.width"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeWidth"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Altezza Schede:"
+              v-model="myel.catalogo.height"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoSizeHeight"
+              filled
+              dense
+              style="width: 180px"
+            />
+          </div>
+          <div class="sfondo_margine">
+            Margini:<br />
+            <q-select
+              label="Schede per Riga"
+              v-model="myel.catalogo.numschede_perRiga"
+              emit-value
+              map-options
+              :options="[
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+              ]"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoNumSchedePerRiga"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-select
+              label="Schede per Colonna"
+              v-model="myel.catalogo.numschede_perCol"
+              emit-value
+              map-options
+              :options="[
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+              ]"
+              use-input
+              use-chips
+              @input="modifElem"
+              @new-value="updateCatalogoNumSchedePerCol"
+              filled
+              dense
+              style="width: 180px"
+            />
+            <q-input
+              dense
+              label="Margine per Pagina:"
              @update:model-value="modifElem"
+              v-model="myel.catalogo.margine_pagina"
+              filled
+              v-on:keyup.enter="saveFieldElem"
            >
-            </q-toggle>
+            </q-input>
+            <q-input
+              dense
+              label="Margine per Riga:"
+              @update:model-value="modifElem"
+              v-model="myel.catalogo.margine_riga"
+              filled
+              v-on:keyup.enter="saveFieldElem"
+            >
+            </q-input>
+          </div>
+          <div>Sfondo:</div>
+          <div v-if="enableEdit">
+            Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
+            <CMyFieldRec
+              title="Per Web:"
+              table="catalogo"
+              :rec="myel.catalogo"
+              field="backgroundimage"
+              @update:model-value="modifElem"
+              :canEdit="true"
+              :canModify="true"
+              :fieldtype="costanti.FieldType.image"
+              @save="saveFieldElem"
+            >
+            </CMyFieldRec>
+            <br />
+            <div class="sfondo_print">
+              Per Stampa:
+              <q-toggle
+                v-model="myel.catalogo.printable"
+                color="positive"
+                icon="fas fa-file-pdf"
+                label="Versione Stampabile"
+                @update:model-value="modifElem"
+              >
+              </q-toggle>
+
+              <q-input
+                dense
+                label="Margine per Pagina:"
+                @update:model-value="modifElem"
+                v-model="myel.catalogo.margine_paginaPrintable"
+                filled
+                v-on:keyup.enter="saveFieldElem"
+              >
+              </q-input>
+              <q-input
+                dense
+                label="Margine per Riga:"
+                @update:model-value="modifElem"
+                v-model="myel.catalogo.margine_rigaPrintable"
+                filled
+                v-on:keyup.enter="saveFieldElem"
+              >
+              </q-input>
+
+              Nome File Printable: {{ myel.catalogo.backgroundimage_printable }}
+              <CMyFieldRec
+                title="Sfondo:"
+                table="catalogo"
+                :rec="myel.catalogo"
+                field="backgroundimage_printable"
+                @update:model-value="modifElem"
+                :canEdit="true"
+                :canModify="true"
+                :fieldtype="costanti.FieldType.image"
+                @save="saveFieldElem"
+              >
+              </CMyFieldRec>
+              <q-select
+                label="Largh. Pag. Stampa:"
+                v-model="myel.catalogo.widthpagPrintable"
+                emit-value
+                map-options
+                :options="generateSizeOptions(false)"
+                use-input
+                use-chips
+                @input="modifElem"
+                @new-value="updateCatalogoSizeWidthPagPrintable"
+                filled
+                dense
+                style="width: 180px"
+              />
+            </div>
          </div>
        </div>
      </q-list>
--- a/src/components/CMyElem/CMyElem.ts
+++ b/src/components/CMyElem/CMyElem.ts
@@ -15,6 +15,7 @@ import { shared_consts } from '@/common/shared_vuejs'
 import { LandingFooter } from '@/components/LandingFooter'
 import { CMyActivities } from '@/components/CMyActivities'
 import { CECommerce } from '@/components/CECommerce'
+import { CQRCode } from '@/components/CQRCode'
 import { CAITools } from '@/components/CAITools'
 import { CCatalogo } from '@/components/CCatalogo'
 // import { CMapMarker } from '@src/components/CMapMarker.off'
@@ -67,7 +68,7 @@ export default defineComponent({
    CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
    CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
    CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup, CMovements, CGridOriz,
+    CDashGroup, CMovements, CGridOriz, CQRCode,
    // ,  //CMapMarker, 
  },
  emits: ['selElemClick'],
--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -88,60 +88,62 @@
            :key="groupIndex"
            :name="groupIndex"
          >
-           <div class="row no-wrap justify-start items-center q-px-md full-width">
-            <template v-for="(rec, cardIndex) in group" :key="cardIndex">
-              <div :class="cardColumnClass">
-                <q-card
-                  :class="
-                    `flex-card bordered ` +
-                    myel.class3 +
-                    (rec.link ? ' titolo_card' : '')
-                  "
-                  :style="
-                    rec.style +
-                    `; height: ${
-                      myel.heightimg || `300px`
-                    } !important; width: ${
-                      myel.widthimg || `300px`
-                    } !important;`
-                  "
-                  @click="rec.link ? tools.openUrl(rec.link) : undefined"
-                >
-                  <div
-                    class="img-container"
-                    :style="`height: ${
-                      myel.heightimg.replace('px', '') * 0.7
-                    }px; overflow: hidden;`"
+            <div
+              class="row no-wrap justify-start items-center q-px-md full-width"
+            >
+              <template v-for="(rec, cardIndex) in group" :key="cardIndex">
+                <div :class="cardColumnClass">
+                  <q-card
+                    :class="
+                      `flex-card bordered ` +
+                      myel.class3 +
+                      (rec.link ? ' titolo_card' : '')
+                    "
+                    :style="
+                      rec.style +
+                      `; height: ${
+                        myel.heightimg || `300px`
+                      } !important; width: ${
+                        myel.widthimg || `300px`
+                      } !important;`
+                    "
+                    @click="rec.link ? tools.openUrl(rec.link) : undefined"
                  >
-                    <q-img
-                      :class="
-                        tools.getClassAnim(myel.anim2) + ` ` + myel.class4
-                      "
-                      :src="tools.getImgFileByElem(myel, rec)"
-                    />
-                  </div>
-                  <q-card-section>
-                    <div :class="rec.size" :style="`color: ` + rec.color">
-                      {{ tools.getText(rec.alt) }}
-                    </div>
                    <div
-                      :class="
-                        `q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
-                      "
-                      v-html="rec.content"
-                    ></div>
-                    <div
-                      v-if="rec.description"
-                      class="text-caption"
-                      :style="`color: ` + rec.colorsub"
+                      class="img-container"
+                      :style="`height: ${
+                        myel.heightimg.replace('px', '') * 0.7
+                      }px; overflow: hidden;`"
                    >
-                      {{ rec.description }}
+                      <q-img
+                        :class="
+                          tools.getClassAnim(myel.anim2) + ` ` + myel.class4
+                        "
+                        :src="tools.getImgFileByElem(myel, rec)"
+                      />
                    </div>
-                  </q-card-section>
-                </q-card>
-              </div>
-            </template>
-           </div>
+                    <q-card-section>
+                      <div :class="rec.size" :style="`color: ` + rec.color">
+                        {{ tools.getText(rec.alt) }}
+                      </div>
+                      <div
+                        :class="
+                          `q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
+                        "
+                        v-html="rec.content"
+                      ></div>
+                      <div
+                        v-if="rec.description"
+                        class="text-caption"
+                        :style="`color: ` + rec.colorsub"
+                      >
+                        {{ rec.description }}
+                      </div>
+                    </q-card-section>
+                  </q-card>
+                </div>
+              </template>
+            </div>
          </q-carousel-slide>
        </q-carousel>
      </div>
@@ -236,6 +238,15 @@
          ></div>
        </div>
      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
+        <div v-if="editOn" class="elemEdit">QRCODE:</div>
+        <CQRCode          
+          :read="myel.parambool"
+          :link="myel.container"
+          :textlink="myel.container2"
+          :imglogo="tools.getImgFileByElem(myel)"
+        ></CQRCode>
+      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
        <div class="text-center">
          <div
@@ -249,7 +260,7 @@
            @click="clickOnElem"
          >
            <q-img
-              :src="tools.getImgFileByElem(myel.image)"
+              :src="tools.getImgFileByElem(myel)"
              :fit="myel.fit"
              class="img"
              :width="myel.widthimg ? myel.widthimg : undefined"
--- a/src/components/CMyFieldRec/CMyFieldRec.ts
+++ b/src/components/CMyFieldRec/CMyFieldRec.ts
@@ -173,19 +173,23 @@ export default defineComponent({
        if (arrk.length > 2)
          mysubsubkey.value = arrk[2]
      }
-      // console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
+      console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value, 'mysubkey', mysubkey.value)

    }

    function showandsave(row: any, col: any, newval: any, valinitial: any) {
      console.log('showandsave CMyFieldDb', row, col, newval)
-      emit('save', props.rec, newval)
+      emit('save', props.rec, newval, col)

      if (props.nosaveToDb)
        return

      if (newval !== valinitial) {
-        tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
+        if (props.id) {
+          tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
+        } else {
+
+        }
      }

    }
--- a/src/components/CQRCode/CQRCode.ts
+++ b/src/components/CQRCode/CQRCode.ts
@@ -33,6 +33,11 @@ export default defineComponent({
      required: false,
      default: '',
    },
+    imglogo: {
+      type: String,
+      required: false,
+      default: '',
+    },
    read: {
      type: Boolean,
      required: false,
@@ -82,6 +87,7 @@ export default defineComponent({
      ...toRefs(state),
      onDecode,
      naviga,
+      globalStore,
    }
  },
 })
--- a/src/components/CQRCode/CQRCode.vue
+++ b/src/components/CQRCode/CQRCode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="globalStore.finishLoading"> 
    <div v-if="read">
      <div class="stream">
        <qr-stream @decode="onDecode" class="mb">
@@ -27,8 +27,9 @@
    </div>
    <div v-else>
      <div class="q-ma-sm">
-        {{textlink}}<br>
-        {{link}}
+        {{ textlink }}<br />
+        {{ link }}<br />
+        Logo: {{imglogo}}<br />
      </div>
      <qrcode-vue
        :width="250"
@@ -47,10 +48,10 @@
            ],
          },
        }"
-        :image="tools.getimglogo()"
+        :image="imglogo ? imglogo : tools.getimglogo()"
        :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
        :cornersDotOptions="{ type: undefined, color: '#000000' }"
-          fileExt="png"
+        fileExt="png"
        :download="true"
        :value="link"
        downloadButton="button_download"