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

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'