- Editor Pagine Elementi: Sezione, Righe, Colonne, Elementi. (rows, columns, elems)

src/common/shared_vuejs.ts

@@ -2016,17 +2016,6 @@ export const shared_consts = {
       label: 'Sezione',
       icon: 'fas fa-th-large',
     },
-    {
-      value: 1100, //ELEMTYPE.ROW,
-      label: 'Riga',
-      icon: 'fas fa-th-large',
-    },
-    {
-      value: 1200, // ELEMTYPE.COLUMN,
-      label: 'Colonna',
-      icon: 'fas fa-th-large',
-    },
-
     {
       value: 20,
       label: 'Testo',

src/components/CMyEditElem/CMyEditElem.ts

@@ -14,10 +14,11 @@ import type {
 } from '@src/model';
 import { IImgGallery, ILabelValue, IMyPage, IOperators } from '@src/model';
 import { useGlobalStore } from '@store/globalStore';
-import { useCatalogStore } from '@store/catalogStore';
+import { useCatalogStore } from '@store/CatalogStore';
 
 import { CImgTitle } from '@src/components/CImgTitle';
 import { CImgPoster } from '@src/components/CImgPoster';
+import { CMyElemAdd } from '@src/components/CMyElemAdd';
 import { CTitle } from '@src/components/CTitle/index';
 import { tools } from '@tools';
 import { useRouter } from 'vue-router';
@@ -72,9 +73,19 @@ export default defineComponent({
     CMySize,
     CBorders,
     CMyDimensioni,
-    CMyText, CMySlideNumber,
+    CMyText,
+    CMySlideNumber,
+    CMyElemAdd,
   },
-  emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage', 'expPage', 'impPage'],
+  emits: [
+    'saveElem',
+    'selElemClick',
+    'toggleSize',
+    'deleteElem',
+    'dupPage',
+    'expPage',
+    'impPage',
+  ],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
@@ -178,38 +189,6 @@ export default defineComponent({
       return neword;
     }
 
-    async function addNewElem(elemsel: any, direz: number) {
-      visuadd.value = false;
-
-      let neword = 0;
-
-      let recfound = null;
-
-      if (direz === -1) {
-        // Sopra
-        // ottieni l'elemento precedente, mantenendo l'ordinamento
-        recfound = globalStore.getMyElemPrecThisElemId(props.idPage, elemsel._id);
-      } else if (direz === 1) {
-        // Sotto
-        // ottieni l'elemento precedente, mantenendo l'ordinamento
-        recfound = globalStore.getMyElemNextThisElemId(props.idPage, elemsel._id);
-      }
-
-      if (recfound) {
-        // get the middle of the order number between thie 2 elements
-        neword = Math.round((recfound.order + elemsel.order) / 2);
-      }
-
-      let myelem = props.myelem;
-      myelem.idPage = props.idPage;
-
-      const newrec = await globalStore.prepareAddNewElem(neword, $q, t, myelem, newtype.value);
-
-      emit('selElemClick', newrec);
-
-      // emit('updateAll', newrec)
-    }
-
     async function dupPage() {
       emit('dupPage', null);
     }
@@ -228,7 +207,7 @@ export default defineComponent({
         newrec.containerHtml = 'Copia di ' + newrec.containerHtml;
       }
 
-      const mynewelem = await globalStore.addNewElem($q, t, newrec);
+      const mynewelem = await globalStore.addNewElem($q, t, newrec, newrec);
 
       emit('selElemClick', mynewelem);
     }
@@ -291,12 +270,20 @@ 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_right_attaccato = tools.resetIText(recscheda.scheda?.testo_right_attaccato);
+              recscheda.scheda.testo_right_attaccato = tools.resetIText(
-              recscheda.scheda.testo_right = tools.resetIText(recscheda.scheda?.testo_right);
+                recscheda.scheda?.testo_right_attaccato
-              recscheda.scheda.testo_bottom = tools.resetIText(recscheda.scheda?.testo_bottom);
+              );
+              recscheda.scheda.testo_right = tools.resetIText(
+                recscheda.scheda?.testo_right
+              );
+              recscheda.scheda.testo_bottom = tools.resetIText(
+                recscheda.scheda?.testo_bottom
+              );
 
               if (!recscheda.scheda?.dimensioni.pagina.dimensioni) {
-                recscheda.scheda.dimensioni.pagina = tools.resetRecIPagina(recscheda.scheda?.dimensioni.pagina);
+                recscheda.scheda.dimensioni.pagina = tools.resetRecIPagina(
+                  recscheda.scheda?.dimensioni.pagina
+                );
               }
               if (!recscheda.scheda?.dimensioni?.pagina?.testo_up) {
                 recscheda.scheda!.dimensioni.pagina.testo_up = tools.resetIText(null);
@@ -342,30 +329,40 @@ export default defineComponent({
             myel.value.catalogo.first_page = tools.resetRecIDimensioni(null);
           }
 
-          myel.value.catalogo.first_page = tools.resetRecIDimensioni(myel.value.catalogo.first_page);
+          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);
+          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);
+          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.margini = {
+              left: '0.59',
+              top: '0.59',
+              right: '0.59',
+              bottom: '0.28',
+            };
             myel.value.catalogo.print_isTemplate = false;
             myel.value.catalogo.print_linkIdTemplate = '';
           }
 
-          myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(myel.value.catalogo.areadistampa);
+          myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(
+            myel.value.catalogo.areadistampa
+          );
         }
 
         if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
           myel.value.catalogo.dimensioni_def = {
             isTemplate: false,
             linkIdTemplate: '',
-            scalexscheda: 1,
-            scaleyscheda: 1,
             name: '',
             pagina: {},
           };
@@ -390,7 +387,13 @@ export default defineComponent({
     function addNewCard() {
       if (!myel.value.listcards) myel.value.listcards = [];
 
-      myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '', vers_img: 0 });
+      myel.value.listcards.push({
+        _id: objectId(),
+        imagefile: '',
+        alt: '',
+        description: '',
+        vers_img: 0,
+      });
       modifElem();
     }
     function addNewScheda() {
@@ -420,7 +423,12 @@ export default defineComponent({
       if (myschedatocopy) {
         const newscheda = myschedatocopy.scheda!.name;
 
-        const msg = 'Sostituisci questa scheda (' + schedadest.scheda?.name + ') con "' + newscheda + '" ?';
+        const msg =
+          'Sostituisci questa scheda (' +
+          schedadest.scheda?.name +
+          ') con "' +
+          newscheda +
+          '" ?';
 
         $q.dialog({
           message: msg,
@@ -447,7 +455,9 @@ export default defineComponent({
     function dupNewScheda(id: string) {
       if (!myel.value.catalogo!.arrSchede) return;
 
-      const myfindscheda = myel.value.catalogo!.arrSchede.find((scheda: ISchedaSingola) => scheda._id === id);
+      const myfindscheda = myel.value.catalogo!.arrSchede.find(
+        (scheda: ISchedaSingola) => scheda._id === id
+      );
 
       if (myfindscheda) {
         const myscheda = tools.jsonCopy(myfindscheda);
@@ -513,20 +523,25 @@ export default defineComponent({
     }
 
     function showFit() {
-      if (props.myelem.type) return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type);
+      if (props.myelem.type)
+        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type);
       else return false;
     }
 
     function delRecCard(id: string, myel: IMyElem) {
       //
       if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
-        if (myel.listcards) myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id);
+        if (myel.listcards)
+          myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id);
       } else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
-        if (myel.elemsText) myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id);
+        if (myel.elemsText)
+          myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id);
       }
     }
     function delRecScheda(id: string, myel: IMyElem) {
-      const myscheda = myel.catalogo!.arrSchede!.find((scheda: ISchedaSingola) => scheda._id === id);
+      const myscheda = myel.catalogo!.arrSchede!.find(
+        (scheda: ISchedaSingola) => scheda._id === id
+      );
 
       if (myscheda) {
         $q.dialog({
@@ -541,7 +556,9 @@ export default defineComponent({
           persistent: false,
         }).onOk(async () => {
           //
-          myel.catalogo!.arrSchede = myel.catalogo!.arrSchede!.filter((scheda: ISchedaSingola) => scheda._id !== id);
+          myel.catalogo!.arrSchede = myel.catalogo!.arrSchede!.filter(
+            (scheda: ISchedaSingola) => scheda._id !== id
+          );
 
           modifElem();
         });
@@ -553,7 +570,9 @@ export default defineComponent({
 
       const iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name);
       const isscheda = costanti.SCHEDA_FIELDS.includes(col.name);
-      const isIImg = costanti.IMG_FIELDS.includes(col.name) && col.fieldtype === costanti.FieldType.imagerec;
+      const isIImg =
+        costanti.IMG_FIELDS.includes(col.name) &&
+        col.fieldtype === costanti.FieldType.imagerec;
 
       if (col.fieldtype === costanti.FieldType.imagerec) {
         if (iscatalogo) {
@@ -569,15 +588,27 @@ export default defineComponent({
         } else {
           myel.value[col.name] = newval.imagefile;
         }
+        if (newval.idElemParent) {
+          rec['idElemParent'] = newval.idElemParent;
+        }
       } else {
         if (iscatalogo) {
           myel.value.catalogo[col.name] = newval;
-          console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name]);
+          console.log(
+            'SALVATO IN',
+            col.name,
+            newval,
+            'RIS',
+            myel.value.catalogo[col.name]
+          );
         } else if (isscheda) {
           rec[col.name] = newval;
         } else {
           myel.value[col.name] = newval;
         }
+        /*if (newval.idElemParent) {
+          myel.value['idElemParent'] = newval.idElemParent;
+        }*/
       }
     }
 
@@ -711,7 +742,10 @@ export default defineComponent({
         elemprec.order = oldorder;
 
         if (oldorder === elemprec.order!) {
-          const elemprec2 = globalStore.getMyElemPrecThisElemId(props.idPage, elemprec._id);
+          const elemprec2 = globalStore.getMyElemPrecThisElemId(
+            props.idPage,
+            elemprec._id
+          );
 
           neworder = (elemprec2.order! + elemprec.order) / 2;
           elemprec.order = Math.round((oldorder + neworder) / 2);
@@ -725,7 +759,10 @@ export default defineComponent({
         elemnext.order = oldorder;
 
         if (oldorder === elemnext.order!) {
-          const elemnext2 = globalStore.getMyElemNextThisElemId(props.idPage, elemnext._id);
+          const elemnext2 = globalStore.getMyElemNextThisElemId(
+            props.idPage,
+            elemnext._id
+          );
 
           neworder = (elemnext2.order! + elemnext.order) / 2;
           elemnext.order = Math.round((oldorder + neworder) / 2);
@@ -770,6 +807,10 @@ export default defineComponent({
       return myel.value.type === shared_consts.ELEMTYPE.CATALOGO;
     }
 
+    function AddedNewElem(newrec: any) {
+      emit('selElemClick', newrec);
+    }
+
     onMounted(mounted);
 
     return {
@@ -786,7 +827,6 @@ export default defineComponent({
       disableSave,
       modifElem,
       delElem,
-      addNewElem,
       newtype,
       neworder,
       elemChanged,
@@ -838,6 +878,7 @@ export default defineComponent({
       catalogStore,
       naviga,
       isElementoSpecifico,
+      AddedNewElem,
     };
   },
 });

src/components/CMyEditElem/CMyEditElem.vue

@@ -2705,115 +2705,19 @@
       transition-show="slide-up"
       transition-hide="slide-down"
     >
-      <q-card class="">
+      <CMyElemAdd
-        <q-bar
+        v-if="visuadd"
-          dense
+        :myelem="myel"
-          class="bg-primary text-white"
+        :myElemParent="myel"
-        >
+        :idPage="idPage"
-          Aggiungi Elemento:
+        :path="path"
-          <q-space />
+        :editOn="editOn"
-          <q-btn
+        :direzadd="direzadd"
-            flat
+        :addOn="addOn"
-            round
+        @AddedNewElem="AddedNewElem"
-            color="white"
+        @close="visuadd = false"
-            icon="close"
+      >
-            v-close-popup
+      </CMyElemAdd>
-          ></q-btn>
-        </q-bar>
-
-        <div class="q-pa-md row justify-center">
-          <div style="width: 100%; max-width: 600px">
-            <q-list
-              padding
-              bordered
-              class="rounded-borders"
-            >
-              <q-expansion-item
-                label="Principali"
-                icon="fas fa-eye"
-                dense
-                dense-toggle
-                expand-separator
-                default-opened
-              >
-                <div class="row q-pa-sm">
-                  <div
-                    v-for="(rec, index) in shared_consts.TypesElem"
-                    :key="index"
-                    class="col-6 q-pa-xs"
-                  >
-                    <q-btn
-                      v-if="enableAdd"
-                      :label="rec.label"
-                      color="primary"
-                      class="full-width uniform-button q-px-sm"
-                      @click="
-                        newtype = rec.value;
-                        addNewElem(myel, direzadd);
-                      "
-                    >
-                    </q-btn>
-                  </div>
-                </div>
-              </q-expansion-item>
-              <q-expansion-item
-                dense
-                dense-toggle
-                expand-separator
-                label="Gestione"
-                icon="fas fa-cog"
-              >
-                <div class="row q-pa-sm">
-                  <div
-                    v-for="(rec, index) in shared_consts.TypesElemAdmin"
-                    :key="index"
-                    class="col-6 q-pa-xs"
-                  >
-                    <q-btn
-                      v-if="enableAdd"
-                      :label="rec.label"
-                      color="primary"
-                      class="full-width uniform-button q-px-sm"
-                      @click="
-                        newtype = rec.value;
-                        addNewElem(myel, direzadd);
-                      "
-                    >
-                    </q-btn>
-                  </div>
-                </div>
-              </q-expansion-item>
-              <q-expansion-item
-                dense
-                dense-toggle
-                expand-separator
-                label="Avanzati"
-                icon="fas fa-star"
-              >
-                <div class="row q-pa-sm">
-                  <div
-                    v-for="(rec, index) in shared_consts.TypesElemAdminTools"
-                    :key="index"
-                    class="col-6 q-pa-sm"
-                  >
-                    <q-btn
-                      v-if="enableAdd"
-                      :label="rec.label"
-                      color="primary"
-                      class="full-width uniform-button q-px-sm"
-                      @click="
-                        newtype = rec.value;
-                        addNewElem(myel, direzadd);
-                      "
-                    >
-                    </q-btn>
-                  </div>
-                </div>
-              </q-expansion-item>
-            </q-list>
-          </div>
-        </div>
-      </q-card>
     </q-dialog>
   </div>
 </template>

src/components/CMyElem/CMyElem.ts

@@ -241,6 +241,7 @@ export default defineComponent({
         $q,
         t,
         props.myelem,
+        {idPage: props.idPage, path: props.path},
         newtype.value
       );
     }
@@ -251,7 +252,7 @@ export default defineComponent({
       newrec._id = undefined;
       newrec.order = order ? order : newrec.order! + 10;
 
-      globalStore.addNewElem($q, t, newrec);
+      globalStore.addNewElem($q, t, newrec, newrec);
     }
 
     function modifElem() {
@@ -320,7 +321,7 @@ export default defineComponent({
     }
 
     async function clickshare() {
-      tools.addToTemporaryLinkReg();
+      tools.addToTemporaryLinkReg(t);
 
       const mytext = await tools.sendMsgTelegramCmd(
         $q,
@@ -329,10 +330,6 @@ export default defineComponent({
         true
       );
 
-      if (false) {
-        social.value.description = mytext;
-        visushare.value = true;
-      }
     }
 
     // Classe per le colonne delle card

src/components/CMyElem/CMyElem.vue

@@ -10,37 +10,6 @@
       "
     >
       <div v-if="myel.type">
-        <div v-if="myel.children && myel.children.length">
-          <template v-for="(section, sidx) in myel.children">
-            <CSection
-              v-if="section.type === shared_consts.ELEMTYPE.SECTION"
-              :key="'sec' + sidx"
-            >
-              <template
-                v-for="(row, ridx) in section.rows || section.children || []"
-                :key="'row' + ridx"
-              >
-                <CRow
-                  v-if="row.type === shared_consts.ELEMTYPE.ROW"
-                  :key="'r' + ridx"
-                >
-                  <template
-                    v-for="(col, cidx) in row.columns || row.children || []"
-                    :key="'col' + cidx"
-                  >
-                    <CColumn
-                      v-if="col"
-                      :key="'col' + cidx"
-                    >
-                      <div v-if="col.container">{{ col.container }}</div>
-                      <div v-else-if="col.title">{{ col.title }}</div>
-                    </CColumn>
-                  </template>
-                </CRow>
-              </template>
-            </CSection>
-          </template>
-        </div>
         <q-btn
           v-if="editOn"
           class="btn-edit-floating"
@@ -96,8 +65,8 @@
             control-type="flat"
             class="shadow-2 rounded-borders"
             :style="`background-color: ${myel.color} !important`"
-            @mouseenter="animarecard = false"
+            @mouseenter="animarecard = 0"
-            @mouseleave="animarecard = true"
+            @mouseleave="animarecard = 1000"
           >
             <template v-slot:control>
               <q-carousel-control
@@ -335,8 +304,17 @@
               @click="clickOnElem"
             >
               <q-img
+                v-if="tools.getImgFileByElem(myel, undefined, path)"
                 :src="tools.getImgFileByElem(myel, undefined, path)"
-                :fit="myel.fit"
+                :fit="myel.fit ? myel.fit : 'contain'"
+                class="img"
+                :width="myel.widthimg ? myel.widthimg : undefined"
+                :height="myel.heightimg ? myel.heightimg : undefined"
+              ></q-img>
+              <q-img
+              v-else
+                src="images/noimg.png"
+                :fit="myel.fit ? myel.fit : 'contain'"
                 class="img"
                 :width="myel.widthimg ? myel.widthimg : undefined"
                 :height="myel.heightimg ? myel.heightimg : undefined"
@@ -1136,6 +1114,8 @@
           <div class="q-ma-md"></div>
         </div>
       </div>
+
+      <slot></slot>
     </div>
 
     <q-dialog

src/components/CMyElemAdd/CMyElemAdd.scss

@@ -0,0 +1,462 @@
+$grayshadow: #555;
+
+$textcol: blue;
+$textcol_scuro: darkblue;
+
+p {
+  margin: 0 0 1.25rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+.mycard {
+  visibility: hidden;
+}
+
+.landing_background {
+  background: #000 url(/images/foto1.jpg) no-repeat 50% fixed;
+  background-size: cover
+}
+
+.landing>section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+}
+
+.intro {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  /* flex-flow: row nowrap; */
+
+  padding: 1.25rem 0 1.25rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__associazione {
+    min-width: 350px;
+  }
+
+  &__comeassociarsi {
+    min-width: 350px;
+  }
+}
+
+.subtitle {
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.125rem;
+  text-transform: uppercase;
+  font-size: 1rem;
+}
+
+.landing>section.padding {
+  padding: 5.62rem 1rem;
+}
+
+.landing>section.padding_testo {
+  padding-top: 1.25rem;
+  padding-bottom: 1rem;
+}
+
+.landing>section.padding_gallery {
+  padding-top: 3.125rem;
+  padding-bottom: 5.625rem;
+}
+
+.landing>section>div {
+  position: relative;
+  width: 100%
+}
+
+.maxwidth1200 {
+  max-width: 1200px;
+}
+
+.landing__toolbar {
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
+  background: linear-gradient(180deg, #000, transparent);
+  padding: 0 !important
+}
+
+.landing__toolbar .q-btn {
+  border-radius: 0 0 .315rem .315rem;
+  -ms-flex-item-align: stretch;
+  align-self: stretch
+}
+
+.landing__hero {
+  min-height: 50vh
+}
+
+.landing__header {
+  height: 18vh
+}
+
+.landing__arrow {
+  bottom: 1.5rem;
+  opacity: .4
+}
+
+.landing__front {
+  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
+}
+
+.landing__logo {
+  width: 9.40rem;
+  height: 9.40rem;
+  margin-top: 1.315rem;
+  //-webkit-animation: logo-rotate 240s linear infinite;
+  //animation: logo-rotate 240s linear infinite
+}
+
+.landing__features .q-icon {
+  font-size: 4rem
+}
+
+h4 {
+  line-height: 1.5;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.landing__features h4,
+.landing__features h6 {
+  margin: 1rem 0
+}
+
+.landing__features p {
+  opacity: .7;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.landing__footer {
+  //background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
+  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  color: #9f9f9f;
+}
+
+.icon_contact:hover {
+  color: blue;
+  border-color: white;
+  border-width: .0625rem;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.feat-descr {
+  font-size: 1.15rem;
+}
+
+.feat-descr:hover {
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0.9;
+}
+
+.q-col-gutter-sm {
+  padding: 3.125rem 3.125rem;
+  //margin-left: -48px
+}
+
+body.mobile .landing:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(/images/cover.jpg) 50%;
+
+  background-size: cover
+}
+
+/*
+@-webkit-keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+
+@keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+*/
+
+.home {
+  //background-color: rgb(250, 250, 250);
+  padding: 3.125rem;
+  display: flex;
+  //flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.btn-start {
+  margin: 3.125rem;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+}
+
+.text-h1,
+h1 {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 3rem;
+  letter-spacing: -.01562em;
+  margin-bottom: 8px !important;
+}
+
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 3.75rem;
+  letter-spacing: -.00833em;
+}
+
+.text-weight-bold {
+  font-weight: 700;
+}
+
+.text-vers {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.landing__footer-icons {
+  font-size: 1.75rem
+}
+
+.landing__footer-icons a {
+  margin: 0 .5rem .5rem;
+  text-decoration: none;
+  outline: 0;
+  color: $textcol;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: $textcol_scuro;
+}
+
+.doc-img {
+  max-width: 100%;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 1.25rem;
+}
+
+.clgutter {
+  margin-top: 1.25rem;
+  padding: .62rem;
+}
+
+.carousel_img_3 {
+  //background-image: url(/images/cibo_sano.jpg);
+  background-size: cover !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .landing__hero {
+    text-align: center
+  }
+
+  .landing__header {
+    height: 7vh
+  }
+
+  .clgutter {
+    margin-top: 0;
+    padding: 0;
+  }
+
+  .landing__hero .text-h1,
+  h1 {
+    font-size: 2rem;
+    line-height: 2.05rem;
+    margin-bottom: 1.25rem
+  }
+
+  .landing>section.padding {
+    padding: 2.5rem 1rem;
+  }
+
+  .landing>section.padding_testo {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  .landing>section.padding_gallery {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+
+    max-width: 800px;
+  }
+
+  .landing>section.padding_gallery>div {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+
+  }
+
+  .landing__features h4,
+  .landing__features h6 {
+    margin: 1.25rem 0
+  }
+
+  h4 {
+    line-height: 1.4;
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+  }
+
+  .landing .feature-item {
+    text-align: center;
+    margin-top: 1.25rem;
+  }
+
+  .landing__hero-content {
+    padding-bottom: 11.25rem;
+  }
+
+  .landing__hero2-content {
+    padding-bottom: 7.25rem;
+  }
+
+  .landing__hero-btns {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  .q-col-gutter-sm {
+    padding: .625rem .315rem;
+  }
+
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+
+  .text-vers {
+    font-size: 0.6rem;
+  }
+
+}
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+.sfondo-grigio {
+  padding: 1rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .35);
+}
+
+.mycontacts {
+  color: gray;
+  letter-spacing: 0.078rem;
+}
+
+.mycontacts_title {
+  text-shadow: 0.125rem 0.125rem 0.125rem #555;
+  font-weight: bold;
+  color: #999;
+  letter-spacing: 0.125rem;
+}
+
+.mycontacts_text {
+  color: #999;
+  letter-spacing: 0.093rem;
+}
+
+.clEditDiv {
+  border: #c8c9cb solid 2px;
+  padding: 2px;
+}
+
+.clEditNotActive {
+  background-color: #e6e6e6;
+}
+
+.clEdit {
+  border: #f69f09 solid 2px;
+  padding: 2px;
+}
+
+.clEdit:hover {
+  border: #11f609 solid 2px;
+  cursor: pointer;
+}
+
+.align_center {
+  text-align: center;
+}
+
+.align_right {
+  text-align: right;
+}
+
+.align_left {
+  text-align: left;
+}
+
+.flex3 {
+  display: flex;
+  justify-content: space-between;
+  background-color: green;
+}
+
+
+.uniform-button {
+  height: 40px;
+  /* Altezza fissa per tutti i bottoni */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/CMyElemAdd/CMyElemAdd.ts

@@ -0,0 +1,186 @@
+import type { PropType } from 'vue';
+import { defineComponent, onMounted, computed, ref, toRef, watch, nextTick } from 'vue';
+
+import type {
+  IOptCatalogo,
+  IColGridTable,
+  IElemText,
+  IElementiScheda,
+  IMyCard,
+  IMyElem,
+  IMyScheda,
+  ISchedaSingola,
+  IText,
+} from '@src/model';
+import { IImgGallery, ILabelValue, IMyPage, IOperators } from '@src/model';
+import { useGlobalStore } from '@store/globalStore';
+import { useCatalogStore } from '@store/CatalogStore';
+
+import { tools } from '@tools';
+import { useRouter } from 'vue-router';
+import { shared_consts } from '@src/common/shared_vuejs';
+
+import MixinMetaTags from '@src/mixins/mixin-metatags';
+import MixinBase from '@src/mixins/mixin-base';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { emitKeypressEvents } from 'readline';
+import { costanti } from '@costanti';
+import objectId from '@src/js/objectId';
+import { useProducts } from '@src/store/Products';
+
+export default defineComponent({
+  name: 'CMyElemAdd',
+  components: {
+  },
+  emits: [
+    'AddedNewElem',
+  ],
+  props: {
+    myelem: {
+      type: Object as PropType<IMyElem>,
+      required: true,
+    },
+    myElemParent: {
+      type: Object as PropType<IMyElem>,
+      required: true,
+    },
+    idPage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    direzadd: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    editOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addonlyinMem: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const globalStore = useGlobalStore();
+    const catalogStore = useCatalogStore();
+    const router = useRouter();
+
+    const { setmeta, getsrcbyimg } = MixinMetaTags();
+    const { setValDb, getValDb } = MixinBase();
+
+    const $q = useQuasar();
+    const { t } = useI18n();
+
+    const animare = ref(0);
+    const slide = ref(0);
+    const slide2 = ref(0);
+    const tabCard = ref(0);
+    const tabScheda = ref(0);
+    const tabElemsText = ref('elem0');
+    const arrPages = ref([] as any[]);
+    const disableSave = ref(true);
+    const enableEdit = ref(true);
+    const elemChanged = ref(false);
+    const enableAdd = ref(true);
+    const tabadd = ref('tools');
+
+    const Products = useProducts();
+
+    const neworder = ref(<number | undefined>0);
+
+    const idSchedaDaCopiare = ref('');
+
+    const myel = toRef(props, 'myelem');
+    const newtype = ref(<any>'');
+    const visuadd = ref(false);
+
+    const selectedClasses = ref(<any>[]);
+
+
+    async function addNewElem(elemsel: any, direz: number) {
+      // Nascondi la visualizzazione di aggiunta (presumo sia una variabile reattiva)
+      visuadd.value = false;
+
+      let neword = 0; // Ordinamento dell'elemento da aggiungere
+      let recfound = null; // Variabile per conservare l'elemento trovato
+
+      // Gestisci il movimento sopra o sotto
+      if (direz === -1) {
+        // Sopra: ottieni l'elemento precedente, mantenendo l'ordinamento
+        recfound = globalStore.getMyElemPrecThisElemId(props.idPage, elemsel._id);
+      } else if (direz === 1) {
+        // Sotto: ottieni l'elemento successivo, mantenendo l'ordinamento
+        recfound = globalStore.getMyElemNextThisElemId(props.idPage, elemsel._id);
+      }
+
+      // Se è stato trovato un elemento precedente o successivo
+      if (recfound) {
+        // Ottieni il "middle" del numero dell'ordinamento tra i due elementi
+        neword = Math.round((recfound.order + elemsel.order) / 2);
+      }
+
+      // Associa l'ID della pagina e l'elemento a myelem
+      let myelem = props.myelem;
+      myelem.idPage = props.idPage;
+
+      // Variabili per la gestione della sezione e della riga
+      let sectionId = '';
+      let rowId = '';
+
+      console.log('sectionId', sectionId, 'rowId', rowId)
+
+      // Aggiungi un nuovo elemento alla sezione o riga usando il metodo preparato
+      const newrec = await globalStore.prepareAddNewElem(
+        neword,
+        $q,
+        t,
+        myelem,
+        props.myElemParent,
+        newtype.value,
+      );
+
+      // Emitti l'evento per la selezione del nuovo elemento
+      emit('AddedNewElem', newrec);
+
+      // Se necessario, puoi emettere un evento per aggiornare tutti gli elementi (commentato per ora)
+      // emit('updateAll', newrec);
+    }
+
+
+    return {
+      tools,
+      shared_consts,
+      slide,
+      slide2,
+      animare,
+      setmeta,
+      getsrcbyimg,
+      disableSave,
+      addNewElem,
+      newtype,
+      neworder,
+      elemChanged,
+      enableAdd,
+      getValDb,
+      enableEdit,
+      arrPages,
+      costanti,
+      visuadd,
+      tabadd,
+      Products,
+      globalStore,
+      myel,
+    };
+  },
+});

src/components/CMyElemAdd/CMyElemAdd.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <q-card class="">
+      <q-bar
+        dense
+        class="bg-primary text-white"
+      >
+        Aggiungi Elemento:
+        <q-space />
+        <q-btn
+          flat
+          round
+          color="white"
+          icon="close"
+          v-close-popup
+        ></q-btn>
+      </q-bar>
+
+      <div class="q-pa-md row justify-center">
+        <div style="width: 100%; max-width: 600px">
+          <q-list
+            padding
+            bordered
+            class="rounded-borders"
+          >
+            <q-expansion-item
+              label="Principali"
+              icon="fas fa-eye"
+              dense
+              dense-toggle
+              expand-separator
+              default-opened
+            >
+              <div class="row q-pa-sm">
+                <div
+                  v-for="(rec, index) in shared_consts.TypesElem"
+                  :key="index"
+                  class="col-6 q-pa-xs"
+                >
+                  <q-btn
+                    v-if="enableAdd"
+                    :label="rec.label"
+                    color="primary"
+                    class="full-width uniform-button q-px-sm"
+                    @click="
+                      newtype = rec.value;
+                      addNewElem(myel, direzadd);
+                    "
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </q-expansion-item>
+            <q-expansion-item
+              dense
+              dense-toggle
+              expand-separator
+              label="Gestione"
+              icon="fas fa-cog"
+            >
+              <div class="row q-pa-sm">
+                <div
+                  v-for="(rec, index) in shared_consts.TypesElemAdmin"
+                  :key="index"
+                  class="col-6 q-pa-xs"
+                >
+                  <q-btn
+                    v-if="enableAdd"
+                    :label="rec.label"
+                    color="primary"
+                    class="full-width uniform-button q-px-sm"
+                    @click="
+                      newtype = rec.value;
+                      addNewElem(myel, direzadd);
+                    "
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </q-expansion-item>
+            <q-expansion-item
+              dense
+              dense-toggle
+              expand-separator
+              label="Avanzati"
+              icon="fas fa-star"
+            >
+              <div class="row q-pa-sm">
+                <div
+                  v-for="(rec, index) in shared_consts.TypesElemAdminTools"
+                  :key="index"
+                  class="col-6 q-pa-sm"
+                >
+                  <q-btn
+                    v-if="enableAdd"
+                    :label="rec.label"
+                    color="primary"
+                    class="full-width uniform-button q-px-sm"
+                    @click="
+                      newtype = rec.value;
+                      addNewElem(myel, direzadd);
+                    "
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </q-expansion-item>
+          </q-list>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyElemAdd.ts"></script>
+<style lang="scss" scoped>
+@import './CMyElemAdd.scss';
+</style>

src/components/CMyElemAdd/index.ts

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

src/components/CMyFieldRec/CMyFieldRec.ts

@@ -181,7 +181,7 @@ export default defineComponent({
 
 
     function showandsave(row: any, col: any, newval: any, valinitial: any) {
-      console.log('showandsave CMyFieldDb', row, col, newval)
+      console.log('showandsave CMyFieldrec', row, col, newval)
       emit('save', props.rec, newval, col)
 
       if (props.nosaveToDb)
@@ -189,7 +189,7 @@ export default defineComponent({
 
       if (newval !== valinitial) {
         if (props.id) {
-          tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
+          tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField, row)
         } else {
 
         }

src/components/CMyPageElem/CMyPageElem.scss

@@ -0,0 +1,9 @@
+.section-container {
+  padding: 20px;
+  border: 2px solid #ddd;
+  margin-bottom: 15px;
+}
+
+/* DA EVITARE se vuoi il grid di Quasar */
+.row-container { display: block; }   /* lascia gestire a .row */
+.column-container { width: 100%; }   /* meglio usare col-* */

src/components/CMyPageElem/CMyPageElem.ts

@@ -4,6 +4,7 @@ import type { IMyElem, IMyPage } from '@src/model';
 import { useGlobalStore } from '@store/globalStore';
 import { LandingFooter } from '@src/components/LandingFooter';
 import { CMyElem } from '@src/components/CMyElem';
+import { CMyElemAdd } from '@src/components/CMyElemAdd';
 import { CTitleBanner } from '@src/components/CTitleBanner';
 import { CMyEditElem } from '@src/components/CMyEditElem';
 import { CMyPageElem2 } from '@src/components/CMyPageElem2';
@@ -29,6 +30,7 @@ export default defineComponent({
     CMyPageElem2,
     CTitleBanner,
     CExportImportPage,
+    CMyElemAdd,
   },
   props: {
     title: String,
@@ -68,7 +70,7 @@ export default defineComponent({
     },
   },
 
-  setup(props) {
+  setup(props, { emit }) {
     const rec = ref<IMyPage | null>(null);
     const mypathin = toRef(props, 'mypath');
     const myidPage = toRef(props, 'idPage');
@@ -80,6 +82,10 @@ export default defineComponent({
     const $router = useRouter();
     const $route = useRoute();
 
+    const visuadd = ref(false);
+    const myElemSel = ref(<IMyElem | null>{});
+    const myElemParent = ref(<IMyElem | null>{});
+
     const mywidthEditor = ref(400);
 
     const showexportPage = ref(false);
@@ -125,7 +131,7 @@ export default defineComponent({
     async function load() {
       console.log('load', mypathin.value, 'idapp', tools.getEnv('VITE_APP_ID'));
 
-      const query = $router.currentRoute.value.query
+      const query = $router.currentRoute.value.query;
 
       if (query.edit === '1') {
         globalStore.editOn = true;
@@ -214,6 +220,267 @@ export default defineComponent({
       await globalStore.duplicatePage(mypathin.value, $q, t);
     }
 
+    async function deleteRow(myelemRow: any) {
+      const row = globalStore.myelems;
+      if (row) {
+        // cerca la riga
+        const myelem = globalStore.myelems.find(
+          (elem: any) => elem.rows && elem.rows.some((r: any) => r._id === myelemRow._id)
+        );
+
+        // Trova l'indice della riga da eliminare
+        const rowIndex = myelem.rows.findIndex((r: any) => r._id === myelemRow._id);
+
+        if (rowIndex !== -1) {
+          // Rimuovi la riga dall'array
+          myelem.rows.splice(rowIndex, 1);
+
+          await globalStore.saveMyElem($q, t, myelem);
+        }
+      } else {
+        console.error('Riga non trovata!');
+      }
+    }
+
+    async function deleteCol(myelemColumn: any) {
+      const row = globalStore.myelems
+        .flatMap((elem: any) => elem.rows || [])
+        .find(
+          (r: any) =>
+            r.columns && r.columns.some((col: any) => col._id === myelemColumn._id)
+        );
+
+      if (row) {
+        // Trova l'indice della colonna da eliminare
+        const columnIndex = row.columns.findIndex(
+          (col: any) => col._id === myelemColumn._id
+        );
+
+        if (columnIndex !== -1) {
+          // Rimuovi la colonna dall'array columns della riga
+          row.columns.splice(columnIndex, 1);
+
+          const parentElem = globalStore.myelems.find(
+            (elem: any) => elem.rows && elem.rows.some((r: any) => r._id === row._id)
+          );
+
+          if (parentElem) {
+            // Trova l'indice della riga nel genitore
+            const rowIndex = parentElem.rows.findIndex((r: any) => r._id === row._id);
+
+            if (rowIndex !== -1) {
+              // Aggiorna la riga nel suo genitore
+              parentElem.rows[rowIndex] = row; // La riga è aggiornata
+
+              // Salva l'elemento genitore che contiene la riga aggiornata
+              await globalStore.saveMyElem($q, t, parentElem);
+            }
+          }
+        }
+      } else {
+        console.error('Colonna non trovata!');
+      }
+    }
+
+    async function deleteElemento(myelem: any) {
+      const row = globalStore.myelems
+        .flatMap((elem: any) => elem.rows || [])
+        .find(
+          (r: any) =>
+            r.columns &&
+            r.columns.some(
+              (col: any) => col.elems && col.elems.some((e: any) => e._id === myelem._id)
+            )
+        );
+
+      if (row) {
+        // Trova l'indice dell'elemento da eliminare
+        const columnIndex = row.columns.findIndex(
+          (col: any) => col.elems && col.elems.some((e: any) => e._id === myelem._id)
+        );
+
+        if (columnIndex !== -1) {
+          // Trova l'indice dell'elemento da eliminare
+          const elemIndex = row.columns[columnIndex].elems.findIndex(
+            (e: any) => e._id === myelem._id
+          );
+
+          if (elemIndex !== -1) {
+            // Rimuovi l'elemento dall'array elems della colonna
+            row.columns[columnIndex].elems.splice(elemIndex, 1);
+
+            const parentElem = globalStore.myelems.find(
+              (elem: any) => elem.rows && elem.rows.some((r: any) => r._id === row._id)
+            );
+
+            if (parentElem) {
+              // Trova l'indice della riga nel genitore
+              const rowIndex = parentElem.rows.findIndex((r: any) => r._id === row._id);
+
+              if (rowIndex !== -1) {
+                // Aggiorna la riga nel suo genitore
+                parentElem.rows[rowIndex] = row; // La riga è aggiornata
+
+                // Salva l'elemento genitore che contiene la riga aggiornata
+                await globalStore.saveMyElem($q, t, parentElem);
+              }
+            }
+          }
+        }
+      } else {
+        console.error('Elemento non trovato!');
+      }
+    }
+
+    async function addNewElemSectRow(
+      neword: number,
+      myelemOrig: any, // di solito è la SECTION
+      type: number, // shared_consts.ELEMTYPE.ROW o COLUMN
+      idRowToAddDown?: string // _id della riga dopo cui inserire
+    ) {
+      // preparo il record da aggiungere (NON deve salvare qui dentro)
+      const myelemDest = { path: myelemOrig.path, idPage: myelemOrig.idPage };
+      const newrec = await globalStore.prepareAddNewElem(
+        neword,
+        $q,
+        t,
+        myelemOrig,
+        myelemDest,
+        type
+      );
+
+      // caso: stiamo aggiungendo una RIGA dentro una SECTION
+      if (
+        myelemOrig.type === shared_consts.ELEMTYPE.SECTION &&
+        type === shared_consts.ELEMTYPE.ROW
+      ) {
+        if (idRowToAddDown) {
+          await insertRowIntoSection(newrec, myelemOrig, idRowToAddDown, neword);
+          return;
+        }
+      }
+
+      // fallback: usa il flusso generico dello store (aggiunta colonna o altro)
+      await globalStore.addNewElem($q, t, myelemOrig, newrec);
+    }
+
+    /**
+     * Inserisce una riga dentro la section:
+     * - se `idRowToAddDown` è dato, inserisce subito dopo quella riga
+     * - altrimenti decide la posizione con `neword` (se fornito) o in coda
+     * - reindicizza gli order e salva la SECTION
+     */
+    async function insertRowIntoSection(
+      newElem: any,
+      sectionCandidate: any,
+      idRowToAddDown?: string,
+      neword?: number
+    ) {
+
+      const section = newElem
+      // trova la section “vera” nello store (per sicurezza)
+      const newRow =
+        newElem.rows[newElem.rows.length - 1]
+      if (!section) return;
+
+      if (!Array.isArray(section.rows)) section.rows = [];
+
+      // set campi minimi della riga appena creata
+      newRow.type = shared_consts.ELEMTYPE.ROW;
+      newRow.idElemParent = section._id;
+      if (!Array.isArray(newRow.columns)) newRow.columns = [];
+
+      let insertAt = section.rows.length; // default: in coda
+
+      if (idRowToAddDown) {
+        const idx = section.rows.findIndex((r: any) => r._id === idRowToAddDown);
+        if (idx !== -1) {
+          insertAt = idx;
+        }
+      } else if (Number.isFinite(neword)) {
+        // se è stato passato un order desiderato, inserisci nella posizione coerente
+        // (l’array è 0-based, order tipicamente 1-based)
+        insertAt = Math.max(0, Math.min(section.rows.length, Number(neword) - 1));
+      }
+
+      section.rows.splice(insertAt, 0, newRow);
+
+      // reindex orders: 1,2,3,...
+      for (let i = 0; i < section.rows.length - 1; i++) {
+        section.rows[i].order = i + 1;
+      }
+
+      // elimina l'ultima riga
+      section.rows.pop();
+
+      // salva SEMPRE la section (contenitore)
+      await globalStore.saveMyElem($q, t, section);
+    }
+
+    async function swapRows(row1: any, row2: any) {
+      const parentElem = globalStore.myelems.find(
+        (elem: any) => elem.rows && elem.rows.some((r: any) => r._id === row1._id)
+      );
+
+      if (parentElem) {
+        // Trova l'indice della riga nel genitore
+        const rowIndex1 = parentElem.rows.findIndex((r: any) => r._id === row1._id);
+        const rowIndex2 = parentElem.rows.findIndex((r: any) => r._id === row2._id);
+
+        if (rowIndex1 !== -1 && rowIndex2 !== -1) {
+          // Scambia le righe nel genitore
+          [parentElem.rows[rowIndex1], parentElem.rows[rowIndex2]] = [
+            parentElem.rows[rowIndex2],
+            parentElem.rows[rowIndex1],
+          ];
+
+          // Salva l'elemento genitore che contiene la riga aggiornata
+          await globalStore.saveMyElem($q, t, parentElem);
+        }
+      } else {
+        console.error('Elemento non trovato!');
+      }
+    }
+
+    function AddedNewElem(newrec: any) {
+      emit('selElemClick', newrec);
+    }
+
+    function getColClasses(col: any, rowOrCount?: any, idx = 0) {
+      // 1) Quante colonne ci sono nella riga?
+      const colsCount =
+        typeof rowOrCount === 'number' ? rowOrCount : rowOrCount?.columns?.length || 1;
+
+      const n = Math.max(1, Number(colsCount) || 1);
+
+      // 2) Suddivisione equa su md+ (tablet orizz. / desktop)
+      const base = Math.floor(12 / n);
+      const rest = 12 % n; // avanzo da distribuire alle prime 'rest' colonne
+      const auto = base + (idx < rest ? 1 : 0);
+
+      // 3) Override da DB se presenti (vincono sull'auto)
+      const xs = clamp12(col?.xs ?? 12); // mobile: stack
+      const sm = clamp12(col?.sm ?? 12); // piccoli tablet: stack
+      const md = clamp12(col?.md ?? auto);
+      const lg = clamp12(col?.lg ?? auto);
+      const xl = clamp12(col?.xl ?? auto);
+
+      return {
+        'q-pa-sm': true,
+        [`col-${xs}`]: true,
+        [`col-sm-${sm}`]: true,
+        [`col-md-${md}`]: true,
+        [`col-lg-${lg}`]: true,
+        [`col-xl-${xl}`]: true,
+      };
+    }
+
+    function clamp12(v: any) {
+      const n = Number(v);
+      if (!Number.isFinite(n) || n <= 0) return 12;
+      return Math.max(1, Math.min(12, Math.round(n)));
+    }
+
     onMounted(mounted);
 
     return {
@@ -239,6 +506,15 @@ export default defineComponent({
       showimportPage,
       hideHeader,
       myidPage,
+      addNewElemSectRow,
+      deleteCol,
+      deleteRow,
+      deleteElemento,
+      visuadd,
+      AddedNewElem,
+      myElemSel,
+      myElemParent,
+      getColClasses,
     };
   },
 });

src/components/CMyPageElem/CMyPageElem.vue

@@ -69,7 +69,12 @@
 
         <div
           :class="{ 'q-gutter-xs': !hideHeader }"
-          :style="[{'margin-left': hideHeader ? 0 : 1 + 'px', 'margin-right': hideHeader ? 0 : 1 + 'px' }]"
+          :style="[
+            {
+              'margin-left': hideHeader ? 0 : 1 + 'px',
+              'margin-right': hideHeader ? 0 : 1 + 'px',
+            },
+          ]"
         >
           <div
             v-if="!!rec.img1"
@@ -145,43 +150,269 @@
                 :duration="1000"
                 appear
               >
-                <CTitleBanner
+                <div>
-                  v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
+                  <CTitleBanner
-                  :class="`q-pa-xs `"
+                    v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
-                  :title="myelem.titleBanner"
+                    :class="`q-pa-xs`"
-                  bgcolor="bg-primary"
+                    :title="myelem.titleBanner"
-                  :clcolor="myelem.color ? `` : `text-white`"
+                    bgcolor="bg-primary"
-                  :mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
+                    :clcolor="myelem.color ? `` : `text-white`"
-                  :myclass="myelem.classBanner"
+                    :mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
-                  :canopen="true"
+                    :myclass="myelem.classBanner"
-                >
+                    :canopen="true"
-                  <CMyElem
-                    :myelem="myelem"
-                    :idPage="rec._id"
-                    :editOn="editOn"
-                    :addOn="addOn"
-                    :path="!!rec.path ? rec.path : ''"
-                    :selElem="selElem"
-                    @selElemClick="selElemClick"
                   >
-                  </CMyElem>
+                  </CTitleBanner>
-                </CTitleBanner>
+
-                <CMyElem
+                  <!-- Sezione -->
-                  v-else-if="(myelem.active || editOn) && !!rec.path"
+                  <div v-if="myelem.type === shared_consts.ELEMTYPE.SECTION">
-                  :myelem="myelem"
+                    <div
-                  :editOn="editOn"
+                      v-if="editOn"
-                  :addOn="addOn"
+                      class="text-center"
-                  :idPage="rec._id"
+                    >
-                  :path="!!rec.path ? rec.path : ''"
+                      <div v-if="editOn">SEZIONE:</div>
-                  :selElem="selElem"
+                    </div>
-                  @selElemClick="selElemClick"
+
-                >
+                    <CMyElem
-                </CMyElem>
+                      :myelem="myelem"
+                      :idPage="rec._id"
+                      :editOn="editOn"
+                      :addOn="addOn"
+                      :path="!!rec.path ? rec.path : ''"
+                      :selElem="selElem"
+                      @selElemClick="selElemClick"
+                    >
+                      <!-- Rendering righe dentro la sezione -->
+                      <div
+                        v-for="(row, indriga) in myelem.rows"
+                        :key="row._id"
+                        class="row-container"
+                      >
+                        <div
+                          v-if="editOn"
+                          class="text-center q-mb-md"
+                        >
+                          <q-btn
+                            v-if="editOn"
+                            dense
+                            rounded
+                            label="Riga"
+                            size="sm"
+                            color="positive"
+                            icon="add"
+                            @click="
+                              addNewElemSectRow(
+                                myelem.order + 1,
+                                myelem,
+                                shared_consts.ELEMTYPE.ROW,
+                                row._id
+                              )
+                            "
+                          >
+                            <q-tooltip> Aggiungi Riga </q-tooltip>
+                          </q-btn>
+                        </div>
+
+                        <div v-if="row.type === shared_consts.ELEMTYPE.ROW">
+                          <div
+                            v-if="editOn"
+                            class="text-center"
+                          >
+                            <div v-if="editOn">RIGA {{ indriga + 1 }}:</div>
+                          </div>
+                          <CMyElem
+                            :myelem="row"
+                            :idPage="rec._id"
+                            :editOn="editOn"
+                            :addOn="addOn"
+                            :path="!!rec.path ? rec.path : ''"
+                            :selElem="selElem"
+                            @selElemClick="selElemClick"
+                          >
+                            <!-- Rendering colonne dentro la riga -->
+                            <div class="row q-col-gutter-md items-stretch">
+                              <template
+                                v-for="(col, index) in row.columns"
+                                :key="col._id"
+                              >
+                                <div
+                                  v-if="col.type === shared_consts.ELEMTYPE.COLUMN"
+                                  :class="getColClasses(col, row, index)"
+                                >
+                                  <div
+                                    :style="editOn ? `border: 2px dashed #1976d2` : ``"
+                                  >
+                                    <div
+                                      v-if="editOn"
+                                      class="text-center"
+                                    >
+                                      Colonna {{ index + 1 }}:
+                                    </div>
+                                    <div
+                                      v-for="el in col.elems"
+                                      :key="el._id"
+                                    >
+                                      <CMyElem
+                                        :myelem="el"
+                                        :idPage="rec._id"
+                                        :editOn="editOn"
+                                        :addOn="addOn"
+                                        :path="!!rec.path ? rec.path : ''"
+                                        :selElem="selElem"
+                                        @selElemClick="selElemClick"
+                                      />
+                                      <div class="text-center q-mb-md">
+                                        <q-btn
+                                          v-if="editOn"
+                                          dense
+                                          rounded
+                                          size="sm"
+                                          color="negative"
+                                          icon="delete"
+                                          @click="deleteElemento(el)"
+                                        >
+                                          <q-tooltip> Elimina Elemento </q-tooltip>
+                                        </q-btn>
+                                      </div>
+                                    </div>
+                                  </div>
+
+                                  <div class="text-center q-mb-md">
+                                    <q-btn
+                                      v-if="editOn"
+                                      dense
+                                      rounded
+                                      size="sm"
+                                      color="positive"
+                                      icon="add"
+                                      @click="
+                                        visuadd = true;
+                                        myElemSel = col;
+                                        myElemParent = myelem;
+                                      "
+                                    >
+                                      <q-tooltip> Aggiungi Elemento </q-tooltip>
+                                    </q-btn>
+                                  </div>
+
+                                  <div class="text-center q-mb-md">
+                                    <q-btn
+                                      v-if="editOn"
+                                      dense
+                                      rounded
+                                      size="sm"
+                                      label="Colonna"
+                                      color="negative"
+                                      icon="delete"
+                                      @click="deleteCol(col)"
+                                    >
+                                      <q-tooltip> Elimina Colonna </q-tooltip>
+                                    </q-btn>
+                                  </div>
+                                </div>
+                              </template>
+                            </div>
+                          </CMyElem>
+
+                          <div
+                            v-if="editOn"
+                            class="text-center q-mb-md"
+                          >
+                            <q-btn
+                              v-if="editOn"
+                              dense
+                              rounded
+                              size="sm"
+                              label="Colonna"
+                              color="primary"
+                              icon="add"
+                              @click="
+                                addNewElemSectRow(
+                                  row.order + 1,
+                                  row,
+                                  shared_consts.ELEMTYPE.COLUMN
+                                )
+                              "
+                            >
+                              <q-tooltip> Aggiungi Colonna </q-tooltip>
+                            </q-btn>
+                          </div>
+                        </div>
+                        <div class="text-center q-mb-md">
+                          <q-btn
+                            v-if="editOn"
+                            dense
+                            rounded
+                            size="sm"
+                            label="Riga"
+                            color="negative"
+                            icon="delete"
+                            @click="deleteRow(row)"
+                          >
+                            <q-tooltip> Elimina Riga </q-tooltip>
+                          </q-btn>
+                        </div>
+                      </div>
+                      <div
+                        v-if="editOn"
+                        class="text-center q-mb-md"
+                      >
+                        <q-btn
+                          v-if="editOn"
+                          dense
+                          rounded
+                          label="Riga"
+                          size="sm"
+                          color="positive"
+                          icon="add"
+                          @click="
+                            addNewElemSectRow(
+                              myelem.order + 1,
+                              myelem,
+                              shared_consts.ELEMTYPE.ROW
+                            )
+                          "
+                        >
+                          <q-tooltip> Aggiungi Riga </q-tooltip>
+                        </q-btn>
+                      </div>
+                    </CMyElem>
+                  </div>
+
+                  <!-- Elementi senza Sezione (retrocompatibilità) -->
+                  <div v-if="myelem.type !== shared_consts.ELEMTYPE.SECTION">
+                    <CMyElem
+                      :myelem="myelem"
+                      :idPage="rec._id"
+                      :editOn="editOn"
+                      :addOn="addOn"
+                      :path="!!rec.path ? rec.path : ''"
+                      :selElem="selElem"
+                      @selElemClick="selElemClick"
+                    />
+                  </div>
+
+                  <div class="text-center q-mb-md">
+                    <q-btn
+                      v-if="editOn"
+                      dense
+                      rounded
+                      size="sm"
+                      color="positive"
+                      icon="add"
+                      @click="
+                        visuadd = true;
+                        myElemSel =
+                          myelems.length > 0 ? myelems[myelems.length - 1] : null;
+                        myElemParent =
+                          myelems.length > 0 ? myelems[myelems.length - 1] : null;
+                      "
+                    >
+                      <q-tooltip> Aggiungi Elemento </q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
               </transition>
             </div>
-            <div v-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
-              <CMyPageElem2 :mypath="myelem.container">&nbsp;</CMyPageElem2>
-            </div>
           </div>
 
           <div v-if="myelems.length === 0">
@@ -270,6 +501,34 @@
         </q-card-section>
       </q-card>
     </q-dialog>
+    <div>
+      <q-dialog
+        v-model="visuadd"
+        style="
+          width: 600px;
+          max-width: 100%;
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100%;
+        "
+        transition-show="slide-up"
+        transition-hide="slide-down"
+      >
+        <CMyElemAdd
+          v-if="visuadd"
+          :myelem="myElemSel"
+          :myElemParent="myElemParent"
+          :idPage="rec._id"
+          :editOn="editOn"
+          :addOn="addOn"
+          :addonlyinMem="true"
+          @AddedNewElem="AddedNewElem"
+          @close="visuadd = false"
+        >
+        </CMyElemAdd>
+      </q-dialog>
+    </div>
   </div>
 </template>
 

src/components/CMyValueDb/CMyValueDb.ts

@@ -174,7 +174,7 @@ export default defineComponent({
       // console.log('showandsave CMyFieldDb', row, col, newval)
 
       if (newval !== valinitial) {
-        const ris = tools.saveInDBForTypes($q, props.mykey, newval, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey, props.specialField)
+        const ris = tools.saveInDBForTypes($q, props.mykey, newval, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey, props.specialField, row)
         save(newval)
 
         return ris

src/mixins/mixin-base.ts

@@ -1,103 +1,159 @@
-import { toolsext } from '@src/store/Modules/toolsext'
+import { toolsext } from '@src/store/Modules/toolsext';
 
-import { i18n } from 'src/boot/i18n' // Importa l'istanza di i18n configurata in Quasar
+import { i18n } from 'src/boot/i18n'; // Importa l'istanza di i18n configurata in Quasar
 
-import { useUserStore } from '@store/UserStore'
+import { useUserStore } from '@store/UserStore';
-import { useGlobalStore } from '@store/globalStore'
+import { useGlobalStore } from '@store/globalStore';
-import { useQuasar } from 'quasar'
+import { useQuasar } from 'quasar';
-import type { ICatalog, IDataPass, IProduct, IProductInfo, IRaccoltaCatalogo, ISpecialField, IVariazione } from '@model';
+import type {
-import { tools } from '../store/Modules/tools'
+  ICatalog,
-import { costanti } from '@costanti'
+  IDataPass,
-import { fieldsTable } from '@store/Modules/fieldsTable'
+  IProduct,
+  IProductInfo,
+  IRaccoltaCatalogo,
+  ISpecialField,
+  IVariazione,
+} from '@model';
+import { tools } from '../store/Modules/tools';
+import { costanti } from '@costanti';
+import { fieldsTable } from '@store/Modules/fieldsTable';
 
-import { useProducts } from '@store/Products'
+import { useProducts } from '@store/Products';
-import { useCatalogStore } from '@store/CatalogStore'
+import { useCatalogStore } from '@store/CatalogStore';
 
 const { t } = i18n.global;
 
 // You can declare a mixin as the same style as components.
 export default function () {
   function showNotif(msg: string) {
-    const $q = useQuasar()
+    const $q = useQuasar();
 
-
+    tools.showNotif($q, t(msg));
-
-    tools.showNotif($q, t(msg))
   }
 
-
   function db_fieldsTable() {
-    return fieldsTable
+    return fieldsTable;
   }
 
-  function getValDb(keystr: string, serv: boolean, def?: any, table?: string, subkey?: any, id?: any, idmain?: any, indrec?: number, subsubkey?: string, specialField?: ISpecialField) {
+  function getValDb(
+    keystr: string,
+    serv: boolean,
+    def?: any,
+    table?: string,
+    subkey?: any,
+    id?: any,
+    idmain?: any,
+    indrec?: number,
+    subsubkey?: string,
+    specialField?: ISpecialField
+  ) {
     // console.log('getValDb')
-    return toolsext.getValDb(keystr, serv, def, table, subkey, id, idmain, indrec, subsubkey, specialField)
+    return toolsext.getValDb(
+      keystr,
+      serv,
+      def,
+      table,
+      subkey,
+      id,
+      idmain,
+      indrec,
+      subsubkey,
+      specialField
+    );
   }
 
-
+  function getValDbLang(
-  function getValDbLang(keystr: string, serv: boolean, def?: any, table?: string, subkey?: any, indrec?: number, subsubkey?: string) {
+    keystr: string,
-    let ris = toolsext.getValDb(`${keystr}_${toolsext.getLocale()}`, serv, def, table, subkey, indrec, subsubkey)
+    serv: boolean,
-    if (ris === def) ris = toolsext.getValDb(`${keystr}_it`, serv, def, table, subkey)
+    def?: any,
-    return ris
+    table?: string,
+    subkey?: any,
+    indrec?: number,
+    subsubkey?: string
+  ) {
+    let ris = toolsext.getValDb(
+      `${keystr}_${toolsext.getLocale()}`,
+      serv,
+      def,
+      table,
+      subkey,
+      indrec,
+      subsubkey
+    );
+    if (ris === def) ris = toolsext.getValDb(`${keystr}_it`, serv, def, table, subkey);
+    return ris;
   }
 
-  async function setValDb($q: any, key: string, value: any, type: any, serv: boolean, table?: string, subkey?: string, id?: any, indrec?: number, subsubkey?: string, specialField?: ISpecialField) {
+  async function setValDb(
-    const userStore = useUserStore()
+    $q: any,
-    const globalStore = useGlobalStore()
+    key: string,
+    value: any,
+    type: any,
+    serv: boolean,
+    table?: string,
+    subkey?: string,
+    id?: any,
+    indrec?: number,
+    subsubkey?: string,
+    specialField?: ISpecialField,
+    recordFull?: any
+  ) {
+    const userStore = useUserStore();
+    const globalStore = useGlobalStore();
 
     // console.log('setValDb', key, value, serv, table, subkey, indrec, subsubkey, specialField)
-    let mydatatosave: IDataPass | null = null
+    let mydatatosave: IDataPass | null = null;
 
     if (table === 'users') {
-      const myid = userStore.my._id
+      const myid = userStore.my._id;
 
-      const myfield: any = {}
+      const myfield: any = {};
 
       if (key === 'profile') {
-
         if (subsubkey && !!indrec && indrec >= 0) {
           // @ts-ignore
-          userStore.my.profile[subkey][indrec][subsubkey] = value
+          userStore.my.profile[subkey][indrec][subsubkey] = value;
-
         } else {
-
           if (!!specialField && subkey) {
             // @ts-ignore
-            const myrec = userStore.my.profile[subkey].filter(specialField.findsubkey)
+            const myrec = userStore.my.profile[subkey].filter(specialField.findsubkey);
-            if (myrec && tools.isArray(myrec) && myrec.length > 0 && !!specialField.paramtosetsubkey) {
+            if (
-              myrec[0][specialField.paramtosetsubkey] = value
+              myrec &&
+              tools.isArray(myrec) &&
+              myrec.length > 0 &&
+              !!specialField.paramtosetsubkey
+            ) {
+              myrec[0][specialField.paramtosetsubkey] = value;
               // console.log('myrec[specialField.paramtosetsubkey]', myrec[0][specialField.paramtosetsubkey], myrec)
               // @ts-ignore
             } else {
               //let mynewrec = tools.getDefaultRecByTableAndSpecialField(table, specialField)
               // @ts-ignore
-              let mynewrec = specialField.defaultnewrec
+              let mynewrec = specialField.defaultnewrec;
               // @ts-ignore
-              mynewrec[specialField.paramtosetsubkey] = value
+              mynewrec[specialField.paramtosetsubkey] = value;
               // console.log('mynewrec', mynewrec)
               // @ts-ignore
-              userStore.my.profile[subkey].push(mynewrec)
+              userStore.my.profile[subkey].push(mynewrec);
             }
 
             // @ts-ignore
             // console.log('saved', userStore.my.profile[subkey])
           } else {
             // @ts-ignore
-            userStore.my.profile[subkey] = value
+            userStore.my.profile[subkey] = value;
           }
         }
 
         // Save to the DB:
         // @ts-ignore
-        myfield[`${key}.${subkey}`] = userStore.my.profile[subkey]
+        myfield[`${key}.${subkey}`] = userStore.my.profile[subkey];
-
       } else {
         // Save to the DB:
-        myfield[key] = value
+        myfield[key] = value;
 
         // @ts-ignore
-        userStore.my[key] = value
+        userStore.my[key] = value;
       }
 
       // Save to the DB:
@@ -108,15 +164,15 @@ export default function () {
         id: myid,
         table,
         fieldsvalue: myfield,
-      }
+      };
     } else if (table === 'todos') {
-      const myfield: any = {}
+      const myfield: any = {};
 
       // Save to the DB:
       if (subkey) {
-        myfield[`${key}.${subkey}`] = value
+        myfield[`${key}.${subkey}`] = value;
       } else {
-        myfield[key] = value
+        myfield[key] = value;
       }
 
       // console.log('myfield', myfield)
@@ -125,36 +181,42 @@ export default function () {
         id,
         table,
         fieldsvalue: myfield,
-      }
+      };
     } else if (table === 'settings') {
-      globalStore.setValueSettingsByKey({ key, value, serv })
+      globalStore.setValueSettingsByKey({ key, value, serv });
 
-      let myrec = globalStore.getrecSettingsByKey(key, serv)
+      let myrec = globalStore.getrecSettingsByKey(key, serv);
       // console.log('settings... myrec ', myrec, 'key=', key, 'serv', serv)
       if (myrec === undefined) {
         myrec = {
           idapp: tools.getEnv('VITE_APP_ID'),
           key,
           type,
-        }
+        };
-        myrec.serv = serv
+        myrec.serv = serv;
-        if ((myrec.type === costanti.FieldType.date) || (myrec.type === costanti.FieldType.onlydate)) myrec.value_date = value
+        if (
-        else if ((myrec.type === costanti.FieldType.number) || (myrec.type === costanti.FieldType.hours)) myrec.value_num = value
+          myrec.type === costanti.FieldType.date ||
-        else if (myrec.type === costanti.FieldType.boolean) myrec.value_bool = value
+          myrec.type === costanti.FieldType.onlydate
-        else myrec.value_str = value
-
-        myrec = await tools.createNewRecord($q, 'settings', myrec).then(
-          (myrecris) => {
-            // console.log('myrec')
-            let recsett = null
-            if (serv) recsett = globalStore.serv_settings
-            else recsett = globalStore.settings
-
-            if (myrecris) recsett.push(myrecris)
-            // @ts-ignore
-            return recsett.find((rec) => rec.key === key)
-          },
         )
+          myrec.value_date = value;
+        else if (
+          myrec.type === costanti.FieldType.number ||
+          myrec.type === costanti.FieldType.hours
+        )
+          myrec.value_num = value;
+        else if (myrec.type === costanti.FieldType.boolean) myrec.value_bool = value;
+        else myrec.value_str = value;
+
+        myrec = await tools.createNewRecord($q, 'settings', myrec).then((myrecris) => {
+          // console.log('myrec')
+          let recsett = null;
+          if (serv) recsett = globalStore.serv_settings;
+          else recsett = globalStore.settings;
+
+          if (myrecris) recsett.push(myrecris);
+          // @ts-ignore
+          return recsett.find((rec) => rec.key === key);
+        });
       }
       // console.log('myrec', myrec)
 
@@ -164,15 +226,19 @@ export default function () {
         table: 'settings',
         // @ts-ignore
         fieldsvalue: myrec,
-      }
+      };
     } else {
-      const myfield: any = {}
+      const myfield: any = {};
 
       // Save to the DB:
       if (subkey) {
-        myfield[`${key}.${subkey}`] = value
+        myfield[`${key}.${subkey}`] = value;
       } else {
-        myfield[key] = value
+        myfield[key] = value;
+      }
+
+      if (table === 'myelems' && !!recordFull) {
+        myfield.idElemParent = recordFull.idElemParent;
       }
 
       // console.log('myfield', myfield)
@@ -181,16 +247,16 @@ export default function () {
         id,
         table: table || '',
         fieldsvalue: myfield,
-      }
+      };
     }
 
     if (table === 'products') {
-      const productStore = useProducts()
+      const productStore = useProducts();
-      const idprod = productStore.products.findIndex((rec: IProduct) => rec._id === id)
+      const idprod = productStore.products.findIndex((rec: IProduct) => rec._id === id);
       if (idprod >= 0 && key) {
-        productStore.products[idprod][key as keyof IProduct] = value
+        productStore.products[idprod][key as keyof IProduct] = value;
       }
-    /*} else if (table === 'productinfos') {
+      /*} else if (table === 'productinfos') {
       const productStore = useProducts()
       const idprod = productStore.products.findIndex((rec: IProduct) => rec.productInfo._id === id)
       if (idprod >= 0 && key) {
@@ -198,25 +264,27 @@ export default function () {
         productStore.products[idprod].productInfo[myfield] = value
       }*/
     } else if (table === 'arrvariazioni') {
-      const productStore = useProducts()
+      const productStore = useProducts();
-      const idprod = productStore.products.findIndex((rec: IProduct) => rec._id === id)
+      const idprod = productStore.products.findIndex((rec: IProduct) => rec._id === id);
       if (idprod >= 0 && key) {
-        const myfield = key as keyof IVariazione
+        const myfield = key as keyof IVariazione;
-        productStore.products[idprod].arrvariazioni[0][myfield] = value
+        productStore.products[idprod].arrvariazioni[0][myfield] = value;
       }
     } else if (table === 'catalogs') {
-      const catalogStore = useCatalogStore()
+      const catalogStore = useCatalogStore();
-      const idcat = catalogStore.catalogs.findIndex((rec: ICatalog) => rec._id === id)
+      const idcat = catalogStore.catalogs.findIndex((rec: ICatalog) => rec._id === id);
       if (idcat >= 0 && key) {
-        const myfield = key as keyof ICatalog
+        const myfield = key as keyof ICatalog;
-        catalogStore.catalogs[idcat][myfield] = value
+        catalogStore.catalogs[idcat][myfield] = value;
       }
     } else if (table === 'raccoltacataloghis') {
-      const catalogStore = useCatalogStore()
+      const catalogStore = useCatalogStore();
-      const idcat = catalogStore.raccoltacataloghis.findIndex((rec: IRaccoltaCatalogo) => rec._id === id)
+      const idcat = catalogStore.raccoltacataloghis.findIndex(
+        (rec: IRaccoltaCatalogo) => rec._id === id
+      );
       if (idcat >= 0 && key) {
-        const myfield = key as keyof IRaccoltaCatalogo
+        const myfield = key as keyof IRaccoltaCatalogo;
-        catalogStore.raccoltacataloghis[idcat][myfield] = value
+        catalogStore.raccoltacataloghis[idcat][myfield] = value;
       }
     }
 
@@ -225,26 +293,26 @@ export default function () {
     // @ts-ignore
     globalStore.saveFieldValue(mydatatosave).then((esito) => {
       if (esito) {
-        tools.showPositiveNotif($q, t('db.recupdated'))
+        tools.showPositiveNotif($q, t('db.recupdated'));
       } else {
-        tools.showNegativeNotif($q, t('db.recfailed'))
+        tools.showNegativeNotif($q, t('db.recfailed'));
         // Undo...
       }
-    })
+    });
   }
 
   function getarrValDb(keystr: string, serv: boolean) {
-    const globalStore = useGlobalStore()
+    const globalStore = useGlobalStore();
 
-    const myval = globalStore.getValueSettingsByKey(keystr, serv)
+    const myval = globalStore.getValueSettingsByKey(keystr, serv);
     // console.log('myval', myval)
     try {
       if (myval) {
-        return JSON.parse(myval)
+        return JSON.parse(myval);
       }
-      return []
+      return [];
     } catch (e) {
-      return []
+      return [];
     }
   }
 
@@ -255,5 +323,5 @@ export default function () {
     getValDbLang,
     setValDb,
     getarrValDb,
-  }
+  };
 }

src/model/GlobalStore.ts

@@ -148,6 +148,7 @@ export interface IMyElem {
   type?: number
   path?: string
   idPage?: string
+  idElemParent?: string
   img?: string
   container?: string
   container2?: string
@@ -195,7 +196,9 @@ export interface IMyElem {
   titleBanner?: string
   classBanner?: string
   color?: string
-  children?: any[]
+  rows?: any[]
+  columns?: any[]
+  elems?: any[]
 }
 
 export interface IElemText {

src/store/Modules/fieldsTable.ts

@@ -870,6 +870,10 @@ export const colmyelems = [
     label_trans: 'myelems.image',
     fieldtype: costanti.FieldType.imagerec,
   }),
+  AddCol({
+    name: 'idElemParent',
+    label_trans: 'myelems.idElemParent',
+  }),
   AddCol(DeleteRec),
   AddCol(DuplicateRec),
 ];

src/store/Modules/tools.ts

@@ -9010,11 +9010,11 @@ export const tools = {
           );
         } else return '';
       } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
-        return tools.getDirUpload() + 'pages/' + mypath + '/' + elem.container + addtourl;
+        return  elem.container ? tools.getDirUpload() + 'pages/' + mypath + '/' + elem.container + addtourl : '';
       } else if (elem.type === shared_consts.ELEMTYPE.QRCODE) {
-        return tools.getDirUpload() + 'pages/' + mypath + '/' + elem.image + addtourl;
+        return elem.image ? tools.getDirUpload() + 'pages/' + mypath + '/' + elem.image + addtourl : '';
       } else {
-        return tools.getDirUpload() + 'pages/' + mypath + '/' + elem.image + addtourl;
+        return elem.image ? tools.getDirUpload() + 'pages/' + mypath + '/' + elem.image + addtourl : '';
       }
     }
   },
@@ -10169,7 +10169,8 @@ export const tools = {
     id?: any,
     indrec?: number,
     mysubsubkey?: string,
-    specialField?: ISpecialField
+    specialField?: ISpecialField,
+    recordFull?: any
   ) {
     const { setValDb, getValDb } = MixinBase();
 
@@ -10189,7 +10190,8 @@ export const tools = {
         id,
         indrec,
         mysubsubkey,
-        specialField
+        specialField,
+        recordFull,
       );
       myval = newval.vers_img;
       const mykey2 = 'vers_img';
@@ -10204,7 +10206,8 @@ export const tools = {
         id,
         indrec,
         mysubsubkey,
-        specialField
+        specialField,
+        recordFull,
       );
 
       eseguito = true;

src/store/globalStore.ts

@@ -1392,7 +1392,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
           // console.table(res)
           return res.data;
         })
-        .catch((error) => {
+        .catch((error: Types.AxiosError) => {
           console.log('error loadPickup', error);
           userStore.setErrorCatch(error);
           return null;
@@ -2747,52 +2747,240 @@ export const useGlobalStore = defineStore('GlobalStore', {
       );
     },
 
-    async saveMyElem($q: any, t: any, myelem: IMyElem) {
+    // Tipi base (adatta se già definiti altrove)
-      const mydata = {
+    // type ElemType = typeof shared_consts.ELEMTYPE[keyof typeof shared_consts.ELEMTYPE];
-        table: 'myelems',
-        data: {},
-      };
-      console.log('   DA SALVARE', myelem);
 
-      mydata.data = myelem;
+    /* ===========================
+     * UTILITY / FINDERS
+     * =========================== */
 
-      return await this.saveTable(mydata)
+    // Trova una section top-level per _id
-        .then(async (newelem) => {
+    findSectionById(this: any, sectionId: string) {
-          if (newelem) {
+      return this.myelems.find((e: IMyElem) => e._id === sectionId);
-            console.log('*** newelem', newelem);
-
-            // Save in Memory
-            for (let i = 0; i < this.myelems.length; i++) {
-              if (this.myelems[i]._id === newelem._id) {
-                this.myelems[i] = newelem;
-
-                console.log('SALVATO', this.myelems[i]);
-                break;
-              }
-            }
-
-            // Aggiorna anche tutto il sito...
-            // await this.loadSite()
-
-            tools.showPositiveNotif($q, t('db.recupdated'));
-          } else {
-            tools.showNegativeNotif($q, t('db.recfailed'));
-          }
-          return newelem;
-        })
-        .catch((e) => {
-          tools.showNegativeNotif($q, t('db.recfailed'));
-          return false;
-        });
     },
 
-    async addNewElem($q: any, t: any, myelem: IMyElem) {
+    // Trova { row, section } a partire dall'id della row
-      const newelem = await this.saveMyElem($q, t, myelem);
+    findRowWithSection(this: any, rowId: string): { row?: IMyElem; section?: IMyElem } {
-      if (newelem) {
+      for (const section of this.myelems as IMyElem[]) {
-        this.myelems.push(newelem);
+        const row = (section.rows || []).find((r) => r._id === rowId);
+        if (row) return { row, section };
+      }
+      return {};
+    },
+
+    // Trova { column, row, section } a partire dall'id della column
+    findColumnWithParents(
+      this: any,
+      columnId: string
+    ): { column?: IMyElem; row?: IMyElem; section?: IMyElem } {
+      for (const section of this.myelems as IMyElem[]) {
+        for (const row of section.rows || []) {
+          const column = (row.columns || []).find((c) => c._id === columnId);
+          if (column) return { column, row, section };
+        }
+      }
+      return {};
+    },
+
+    // Piccolo helper per assicurare che la proprietà sia un array
+    ensureArray<T extends object, K extends keyof T>(obj: T, key: K) {
+      if (!Array.isArray(obj[key])) {
+        // @ts-ignore
+        obj[key] = [];
+      }
+    },
+
+    // Restituisce SEMPRE il contenitore top-level (section) da salvare.
+    // Se gli passi già una section, ritorna quella.
+    // Se gli passi row/column/elem, risale a partire dagli id.
+    resolveTopContainer(this: any, elem: IMyElem): IMyElem | null {
+      // 1) Se è già una section presente a top-level
+      if (
+        elem &&
+        (elem.rows || []).length >= 0 &&
+        this.myelems.some((s: IMyElem) => s._id === elem._id)
+      ) {
+        return elem;
       }
 
-      return newelem;
+      // 2) Prova con gli id noti
+      // - se elem è una row
+      if (elem?._id) {
+        const { row, section } = this.findRowWithSection.call(this, elem._id);
+        if (row && section) return section;
+      }
+      // - se elem è una column
+      if (elem?._id) {
+        const { column, section } = this.findColumnWithParents.call(this, elem._id);
+        if (column && section) return section;
+      }
+
+      // 3) Se ha idElemParent, risali finché non trovi la section top-level
+      let cursor: IMyElem | undefined = elem;
+      const byId = (id: string | undefined) => {
+        if (!id) return undefined;
+        // cerca a TUTTI i livelli
+        return (
+          (this.myelems as IMyElem[]).find((e) => e._id === id) ||
+          (this.myelems as IMyElem[])
+            .flatMap((s) => s.rows || [])
+            .find((r) => r._id === id) ||
+          (this.myelems as IMyElem[])
+            .flatMap((s) => s.rows || [])
+            .flatMap((r) => r.columns || [])
+            .find((c) => c._id === id) ||
+          (this.myelems as IMyElem[])
+            .flatMap((s) => s.rows || [])
+            .flatMap((r) => r.columns || [])
+            .flatMap((c) => c.elems || [])
+            .find((el) => el._id === id)
+        );
+      };
+
+      // risali la catena
+      while (cursor?.idElemParent) {
+        const parent = byId(cursor.idElemParent);
+        if (!parent) break;
+        // se il parent è una section top-level, fermati
+        if (this.myelems.some((s: IMyElem) => s._id === parent._id)) {
+          return parent;
+        }
+        cursor = parent;
+      }
+
+      return null;
+    },
+
+    /* ===========================
+     * SALVATAGGIO
+     * =========================== */
+
+    async saveContainer(this: any, $q: any, t: any, container: IMyElem) {
+      const payload = { table: 'myelems', data: container };
+
+      try {
+        const saved = await this.saveTable(payload);
+        if (saved) {
+          // aggiorna memoria: replace o push
+          const idx = (this.myelems as IMyElem[]).findIndex((e) => e._id === saved._id);
+          if (idx >= 0) this.myelems[idx] = saved;
+          else this.myelems.push(saved);
+
+          tools.showPositiveNotif($q, t('db.recupdated'));
+          return saved as IMyElem;
+        } else {
+          tools.showNegativeNotif($q, t('db.recfailed'));
+          return false;
+        }
+      } catch (e) {
+        tools.showNegativeNotif($q, t('db.recfailed'));
+        return false;
+      }
+    },
+
+    /* ===========================
+     * API PUBBLICHE
+     * =========================== */
+
+    async saveMyElem(this: any, $q: any, t: any, myelem: IMyElem) {
+      // Decide cosa salvare:
+      // - se è un semplice nuovo top-level, salva lui
+      // - altrimenti risali al contenitore top-level (section)
+      const container = this.resolveTopContainer.call(this, myelem) ?? myelem;
+      return await this.saveContainer.call(this, $q, t, container);
+    },
+
+    // Dispatcher snello (compatibile con la tua firma esistente)
+    async addNewElem(
+      this: any,
+      $q: any,
+      t: any,
+      myelemOrig: IMyElem, // "dove" sto aggiungendo
+      myelemDest: IMyElem // "cosa" sto aggiungendo
+    ) {
+      switch (true) {
+        case myelemOrig.type === shared_consts.ELEMTYPE.SECTION &&
+          myelemDest && myelemDest.type === shared_consts.ELEMTYPE.ROW:
+          return await this.addRowToSection.call(
+            this,
+            $q,
+            t,
+            myelemOrig._id!,
+            myelemDest
+          );
+
+        case myelemOrig.type === shared_consts.ELEMTYPE.ROW &&
+          myelemDest && myelemDest.type === shared_consts.ELEMTYPE.COLUMN:
+          return await this.addColumnToRow.call(this, $q, t, myelemOrig._id!, myelemDest);
+
+        case myelemOrig.type === shared_consts.ELEMTYPE.COLUMN:
+          return await this.addElemToColumn.call(
+            this,
+            $q,
+            t,
+            myelemOrig._id!,
+            myelemDest
+          );
+
+        default:
+          // fallback: crea/salva un record "piatto" top-level
+          const saved = await this.saveMyElem.call(this, $q, t, myelemDest);
+          if (saved && !(this.myelems as IMyElem[]).some((e) => e._id === saved._id)) {
+            this.myelems.push(saved);
+          }
+          return saved;
+      }
+    },
+
+    /* ===========================
+     * HELPERS DI AGGIUNTA
+     * =========================== */
+
+    async addRowToSection(
+      this: any,
+      $q: any,
+      t: any,
+      sectionId: string,
+      newRow: IMyElem
+    ) {
+      const section = this.findSectionById.call(this, sectionId);
+      if (!section) return false;
+
+      this.ensureArray(section, 'rows');
+      newRow.idElemParent = section._id!;
+      (section.rows as IMyElem[]).push(newRow);
+
+      return await this.saveMyElem.call(this, $q, t, section);
+    },
+
+    async addColumnToRow(this: any, $q: any, t: any, rowId: string, newCol: IMyElem) {
+      const { row, section } = this.findRowWithSection.call(this, rowId);
+      if (!row || !section) return false;
+
+      this.ensureArray(row, 'columns');
+      newCol.idElemParent = row._id!;
+      (row.columns as IMyElem[]).push(newCol);
+
+      // Salva la SECTION (contenitore)
+      return await this.saveMyElem.call(this, $q, t, section);
+    },
+
+    async addElemToColumn(
+      this: any,
+      $q: any,
+      t: any,
+      columnId: string,
+      newElem: IMyElem
+    ) {
+      const { column, row, section } = this.findColumnWithParents.call(this, columnId);
+      if (!column || !row || !section) return false;
+
+      this.ensureArray(column, 'elems');
+      newElem.idElemParent = column._id!;
+      (column.elems as IMyElem[]).push(newElem);
+
+      // Salva la SECTION (contenitore)
+      return await this.saveMyElem.call(this, $q, t, section);
     },
 
     changeVisuDrawer(path: string, edit: boolean) {
@@ -2854,17 +3042,25 @@ export const useGlobalStore = defineStore('GlobalStore', {
       };
     },
 
-    async prepareAddNewElem(order: any, $q: any, t: any, myelem: any, newtype: any) {
+    async prepareAddNewElem(
+      order: any,
+      $q: any,
+      t: any,
+      myelemOrig: any,
+      myelemDest: any,
+      newtype: any
+    ) {
       const newrec: IMyElem = {
         _id: undefined,
         type: newtype,
-        path: myelem.path,
+        path: myelemDest.path,
-        idPage: myelem.idPage,
+        idPage: myelemDest.idPage,
         order: order ? order : 1000,
         active: true,
         container: '',
       };
 
+      // Gestisci altri tipi di elementi con configurazioni specifiche
       if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
         newrec.container2 = '8';
         newrec.height = 600;
@@ -2876,9 +3072,16 @@ export const useGlobalStore = defineStore('GlobalStore', {
         newrec.catalogo = this.createCatalogoVuoto();
       } else if (newrec.type === shared_consts.ELEMTYPE.RACCOLTA) {
         newrec.catalogo = this.createRaccoltaCataloghiVuoto();
+      } else if (newrec.type === shared_consts.ELEMTYPE.TEXT) {
+        newrec.container = "Inserisci qui il testo"
+      } else if (newrec.type === shared_consts.ELEMTYPE.HTML) {
+        newrec.containerHtml = "Inserisci qui il testo"
+      } else if (newrec.type === shared_consts.ELEMTYPE.IMAGEUPLOAD) {
+        newrec.containerHtml
       }
 
-      const mynewrec = await this.addNewElem($q, t, newrec);
+      // Aggiungi il nuovo elemento alla struttura
+      const mynewrec = await this.addNewElem($q, t, myelemOrig, newrec);
 
       return mynewrec;
     },