HTML Editor go on

package.json

@@ -22,55 +22,55 @@
     "generate-sw": "workbox generateSW workbox-config.js"
   },
   "dependencies": {
-    "@quasar/extras": "^1.15.2",
+    "@quasar/extras": "^1.15.5",
     "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.13",
     "@vue-leaflet/vue-leaflet": "^0.6.1",
-    "@vue/compat": "^3.2.38",
+    "@vue/compat": "^3.2.45",
-    "@vue/compiler-sfc": "^3.2.38",
+    "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-standard": "7.0.0",
-    "@vuelidate/core": "^2.0.0-alpha.44",
+    "@vuelidate/core": "^2.0.0",
-    "@vuelidate/validators": "^2.0.0-alpha.31",
+    "@vuelidate/validators": "^2.0.0",
-    "acorn": "^8.8.0",
+    "acorn": "^8.8.1",
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "^10.4.13",
-    "axios": "^0.27.2",
+    "axios": "^1.1.3",
     "bcryptjs": "^2.4.3",
     "chart.js": "^3.9.1",
-    "core-js": "^3.25.0",
+    "core-js": "^3.26.0",
-    "date-fns": "^2.29.2",
+    "date-fns": "^2.29.3",
-    "dotenv": "^16.0.2",
+    "dotenv": "^16.0.3",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.0",
     "eslint-plugin-quasar": "^1.1.0",
     "eslint-plugin-standard": "^5.0.0",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
-    "gsap": "^3.11.1",
+    "gsap": "^3.11.3",
     "jquery": "^3.6.1",
     "js-cookie": "^3.0.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "npm": "^8.19.1",
+    "npm": "^9.1.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.22",
+    "pinia": "^2.0.23",
     "prerender-spa-plugin": "^3.4.0",
-    "quasar": "^2.7.7",
+    "quasar": "^2.10.1",
     "quasar-extras": "^2.0.9",
     "register-service-worker": "^1.7.2",
-    "vee-validate": "^4.6.7",
+    "vee-validate": "^4.7.2",
-    "vue": "^3.2.38",
+    "vue": "^3.2.45",
     "vue-chart-3": "^3.1.8",
     "vue-class-component": "^8.0.0-rc.1",
     "vue-country-code": "^1.1.3",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^9.2.2",
     "vue-idb": "^0.2.0",
-    "vue-loader": "^17.0.0",
+    "vue-loader": "^17.0.1",
     "vue-property-decorator": "^10.0.0-rc.3",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.1.6",
     "vue-scroll-reveal": "^1.0.11",
     "vue-svgicon": "^4.0.0-alpha.3",
     "vue2-dragula": "^2.5.5",
-    "vuex": "^4.0.2",
+    "vuex": "^4.1.0",
     "vuex-router-sync": "^6.0.0-rc.1"
   },
   "devDependencies": {
@@ -78,41 +78,41 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/dotenv": "^8.2.0",
     "@types/googlemaps": "^3.43.3",
-    "@types/jest": "^29.0.0",
+    "@types/jest": "^29.2.2",
     "@types/js-cookie": "^3.0.2",
-    "@types/node": "18.7.15",
+    "@types/node": "18.11.9",
     "@types/nprogress": "^0.2.0",
     "@types/vue-tel-input": "^2.1.2",
     "@types/vuelidate": "^0.7.15",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.23.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.4.0",
+    "eslint-plugin-vue": "^9.7.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^2.0.6",
-    "jest": "^29.0.2",
+    "jest": "^29.3.1",
     "json-loader": "^0.5.7",
     "node-sass": "7.0.1",
-    "npm-check-updates": "^16.1.0",
+    "npm-check-updates": "^16.3.25",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.19",
     "postcss-loader": "^7.0.1",
-    "sass-loader": "^13.0.2",
+    "sass-loader": "^13.2.0",
     "strip-ansi": "=7.0.1",
-    "ts-jest": "^28.0.8",
+    "ts-jest": "^29.0.3",
-    "ts-loader": "^9.3.1",
+    "ts-loader": "^9.4.1",
     "tslint": "^6.1.3",
     "tslint-config-standard": "^9.0.0",
     "tslint-loader": "^3.5.4",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.4",
     "vue-cli-plugin-element-ui": "^1.1.4",
     "vueify": "^9.4.1",
-    "webpack": "^5.74.0",
+    "webpack": "^5.75.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "browser": {

src/common/axios.ts

@@ -49,7 +49,7 @@ export function UseAxios(router: any) { // VueRouter
 
       if (response) {
         if (response.status === 401 && handle(response.status, exclude)) {
-          const location: string = response.headers.location || response.headers.Location
+          const location: string | undefined = response.headers.location || response.headers.Location
 
           if (location) {
             const redirectTo = `/${location}`

src/common/shared_vuejs.ts

@@ -1204,6 +1204,10 @@ export const shared_consts = {
       value: 30,
       label: 'Immagine',
     },
+    {
+      value: 35,
+      label: 'Immagine da Caricare',
+    },
     {
       value: 40,
       label: 'Separatore',
@@ -1262,6 +1266,7 @@ export const shared_consts = {
     TEXT: 10,
     HTML: 20,
     IMAGE: 30,
+    IMAGEUPLOAD: 35,
     SEPARATOR: 40,
     VIDEO: 50,
     PAGE: 55,
@@ -1283,6 +1288,7 @@ export const shared_consts = {
     RIGHT: 3,
   },
 
+
   getStatusStr(status: number) {
     const trovatorec = this.OrderStatusStr.find((rec) => rec.value === status)
     return (trovatorec) ? trovatorec.label : ''

src/components/CMyEditElem/CMyEditElem.scss

@@ -0,0 +1,482 @@
+
+.testo-banda {
+  //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
+  //background: linear-gradient(180deg, #3144f0, transparent);
+  //background: rgba(0, 0, 0, .6)
+}
+
+$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 {
+}
+
+.landing_background {
+  background: #000 url(../../../public/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
+}
+
+.landing__swirl-bg {
+  background-repeat: no-repeat !important;
+  background-position: top;
+  background-size: contain !important;
+  background-image: url(../../../public/images/landing_first_section.png) !important
+}
+
+.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 {
+  //background: unset
+}
+
+body.mobile .landing:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../public/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;
+}
+
+.homep-cover-img-1 {
+  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-2 {
+  background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-3 {
+  background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img.hide-filter:before {
+  opacity: 0
+}
+
+.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(../../public/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;
+}

src/components/CMyEditElem/CMyEditElem.ts

@@ -0,0 +1,259 @@
+import {
+  defineComponent, onMounted, PropType, ref, toRef, watch,
+} from 'vue'
+
+import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '@/components/CTitle/index'
+import { tools } from '@store/Modules/tools'
+import { shared_consts } from '@/common/shared_vuejs'
+import { LandingFooter } from '@/components/LandingFooter'
+import { COpenStreetMap } from '@src/components/COpenStreetMap'
+import { CCardCarousel } from '@src/components/CCardCarousel'
+import { CMyPage } from '@src/components/CMyPage'
+import { CMyPageIntro } from '@src/components/CMyPageIntro'
+import { CEventsCalendar } from '@src/components/CEventsCalendar'
+import { CMyEditor } from '@src/components/CMyEditor'
+import { CMyFieldRec } from '@src/components/CMyFieldRec'
+import { CSelectColor } from '@src/components/CSelectColor'
+import { CSelectFontSize } from '@src/components/CSelectFontSize'
+
+import MixinMetaTags from '@/mixins/mixin-metatags'
+import MixinBase from '@/mixins/mixin-base'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { emitKeypressEvents } from 'readline'
+import { costanti } from '@costanti'
+
+
+export default defineComponent({
+  name: 'CMyEditElem',
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+    CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
+    CSelectColor, CSelectFontSize },
+  emits: ['saveElem'],
+  props: {
+    myelem: {
+      type: Object as PropType<IMyElem>,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    editOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const globalStore = useGlobalStore()
+
+    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 arrPages = ref([] as any[])
+    const disableSave = ref(true)
+    const enableEdit = ref(true)
+    const elemChanged = ref(false)
+    const enableAdd = ref(true)
+
+    const neworder = ref(<number|undefined>0)
+
+    const myel = toRef(props, 'myelem')
+    const newtype = ref(<any>'')
+
+    watch(() => myel.value.order, (value, oldval) => {
+      mounted()
+    })
+
+    function getArrDisciplines() {
+      return globalStore.disciplines.filter((rec: any) => rec.showinhome)
+    }
+
+    function getheightgallery() {
+      if (tools.isMobile())
+        return '400px'
+      else
+        return '600px'
+    }
+
+    function saveElem(exit?: boolean) {
+      // Save Elem record
+      const myelem = props.myelem
+      myelem.order = neworder.value
+      globalStore.saveMyElem($q, t, myelem).then((ris) => {
+        if (ris) {
+          // OK
+          disableSave.value = true
+          emit('saveElem', myelem)
+          if (exit)
+            elemChanged.value = false
+        }
+      })
+    }
+
+    function addNewElem(order?: number) {
+
+      const newrec: IMyElem = {
+        _id: undefined,
+        type: newtype.value,
+        path: props.myelem.path,
+        order: order ? order : 1000,
+        active: true,
+        container: ''
+      }
+
+      if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
+        newrec.container2 = '8'
+        newrec.height = 600
+      } else if (newrec.type === shared_consts.ELEMTYPE.CARD) {
+        newrec.class2 = 'row justify-center'
+      }
+
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
+    function dupElem(order?: number) {
+
+      const newrec = props.myelem
+
+      newrec._id = undefined
+      newrec.order = order ? order : newrec.order! + 10
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
+    function delElem() {
+      $q.dialog({
+        message: 'Eliminare ' + props.myelem.container + ' ?',
+        html: true,
+        ok: {
+          label: 'Elimina',
+          push: true,
+        },
+        title: '',
+        cancel: true,
+        persistent: false,
+      }).onOk(async () => {
+
+        // Save Elem record
+        await globalStore.delMyElem($q, t, props.myelem).then((ris) => {
+          if (ris) {
+            // OK
+            disableSave.value = true
+          }
+        })
+      })
+
+    }
+
+    function modifElem(value: any) {
+      disableSave.value = false
+      elemChanged.value = true
+    }
+
+    function mounted() {
+      neworder.value = props.myelem.order
+
+      arrPages.value = []
+      arrPages.value.push({label: '[Vuoto]', path: ''})
+      for (const page of globalStore.mypage) {
+
+        const rec = {
+          // @ts-ignore
+          label: page.title,
+          // @ts-ignore
+          value: page.path
+        }
+        arrPages.value.push(rec)
+      }
+
+      if (props.myelem)
+        newtype.value = props.myelem.type
+    }
+
+    function clickOnElem() {
+      if (props.editOn) {
+      }
+    }
+
+    function addNewCard() {
+      if (!myel.value.listcards)
+        myel.value.listcards = []
+      myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
+      modifElem(true)
+    }
+
+    function getClass() {
+      let mycl = ''
+      if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
+        mycl += ' align_center'
+      } else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
+        mycl += ' align_right'
+      } else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
+        mycl += ' align_left'
+      }
+
+      return mycl
+    }
+
+    function showFit() {
+      if (props.myelem.type)
+        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
+      else
+        return false
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      shared_consts,
+      getArrDisciplines,
+      getheightgallery,
+      slide,
+      slide2,
+      animare,
+      setmeta,
+      getsrcbyimg,
+      saveElem,
+      myel,
+      disableSave,
+      modifElem,
+      delElem,
+      addNewElem,
+      newtype,
+      neworder,
+      elemChanged,
+      enableAdd,
+      clickOnElem,
+      getClass,
+      showFit,
+      getValDb,
+      dupElem,
+      enableEdit,
+      addNewCard,
+      arrPages,
+      costanti,
+    }
+  },
+
+})

src/components/CMyEditElem/CMyEditElem.vue

@@ -0,0 +1,647 @@
+<template>
+  <div
+    v-if="myel"
+    :class="
+      (editOn ? ` clEditDiv` : ``) +
+      `` +
+      (!myel.active ? ` clEditNotActive` : ``)
+    "
+  >
+    <div>
+      <q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
+        <q-toggle
+          left-label="Attiva"
+          v-model="myel.active"
+          color="positive"
+          icon="fas fa-eye"
+        >
+        </q-toggle>
+        <!--<q-toggle v-if="tools.isManager()"
+                v-model="enableAdd"
+                icon="fas fa-plus"
+      </q-toggle>
+      >-->
+        &nbsp;
+        <q-input
+          style="max-width: 60px"
+          hide-bottom-space
+          borderless
+          dense
+          @update:model-value="modifElem"
+          v-model="neworder"
+          v-on:keyup.enter="saveElem(false)"
+          type="number"
+        >
+        </q-input>
+
+        <q-space />
+        <q-btn
+          icon="fas fa-trash-alt"
+          color="negative"
+          dense
+          flat
+          size="sm"
+          @click="delElem"
+        >
+        </q-btn>
+        <q-btn
+          icon="far fa-copy"
+          color="primary"
+          dense
+          flat
+          size="sm"
+          @click="dupElem(myel.order + 10)"
+        >
+        </q-btn>
+        <q-select
+          v-if="enableAdd"
+          v-model="newtype"
+          dense
+          style="width: 150px"
+          :options="shared_consts.TypesElem"
+          emit-value
+          map-options
+        >
+        </q-select>
+        <q-btn
+          v-if="enableAdd"
+          size="sm"
+          dense
+          flat
+          icon="fas fa-plus"
+          color="positive"
+          @click="addNewElem(myel.order - 10)"
+        >
+        </q-btn>
+      </q-bar>
+      <div class="justify-center q-gutter-xs row">
+        <q-btn
+          dense
+          v-if="enableEdit && !disableSave"
+          icon="fas fa-check"
+          color="positive"
+          label="Applica"
+          size="sm"
+          :disable="disableSave"
+          @click="saveElem"
+        >
+        </q-btn>
+        <q-btn
+          dense
+          v-if="enableEdit && !disableSave"
+          icon="fas fa-check"
+          color="positive"
+          label="Salva"
+          size="sm"
+          :disable="disableSave"
+          @click="saveElem(true)"
+        >
+        </q-btn>
+      </div>
+
+      <div class="row">
+        <q-select
+          v-if="enableEdit"
+          rounded
+          outlined
+          v-model="myel.align"
+          :options="tools.SelectListAlign"
+          @update:model-value="modifElem"
+          dense
+          label="Allinea"
+          style="min-width: 100px"
+          emit-value
+          map-options
+        >
+        </q-select>
+        <q-select
+          v-if="enableEdit"
+          rounded
+          style="min-width: 100px"
+          outlined
+          v-model="myel.class"
+          :options="tools.SelectListClass"
+          @update:model-value="modifElem"
+          dense
+          label="Classe"
+          emit-value
+          map-options
+        >
+        </q-select>
+        <q-select
+          v-if="enableEdit && showFit"
+          rounded
+          style="min-width: 100px"
+          outlined
+          v-model="myel.fit"
+          :options="tools.SelectListFit"
+          @update:model-value="modifElem"
+          dense
+          label="Fit"
+          emit-value
+          map-options
+        >
+        </q-select>
+      </div>
+      <div class="row">
+        <q-input
+          label="Classe:"
+          @update:model-value="modifElem"
+          v-model="myel.class2"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+
+      <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
+        <div v-if="enableEdit">
+          <q-input
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            dense
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div
+        v-if="myel.type === shared_consts.ELEMTYPE.CARD"
+        :class="myel.span ? '' : ''"
+      >
+        <q-btn
+          rounded
+          dense
+          color="primary"
+          label="Card"
+          icon="fas fa-plus"
+          @click="addNewCard"
+        >
+        </q-btn>
+        <div v-for="(rec, ind) in myel.listcards" :key="ind">
+          <div v-if="enableEdit" class="column">
+            <CMyFieldRec
+              title="Lista Immagini:"
+              table="myelems"
+              :id="myel._id"
+              :rec="myel"
+              field="listcards"
+              @update:model-value="modifElem"
+              :canEdit="true"
+              :canModify="true"
+            >
+            </CMyFieldRec>
+            <q-input
+              label="Immagine:"
+              dense
+              class="fa-border"
+              @update:model-value="modifElem"
+              v-model="rec.imagefile"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <div v-if="enableEdit" class="row">
+              <q-input
+                dense
+                style="min-width: 100px"
+                label="Titolo:"
+                class="fa-border"
+                @update:model-value="modifElem"
+                v-model="rec.alt"
+                filled
+                v-on:keyup.enter="saveElem"
+              >
+              </q-input>
+              <CSelectColor
+                v-if="enableEdit"
+                style="min-width: 100px"
+                v-model="rec.color"
+                @update:model-value="modifElem"
+                title="Col Titolo"
+              >
+              </CSelectColor>
+              <CSelectFontSize
+                v-if="enableEdit"
+                style="min-width: 100px"
+                v-model="rec.size"
+                @update:model-value="modifElem"
+                title="Font Titolo"
+              >
+              </CSelectFontSize>
+            </div>
+            <CMyEditor
+              v-model:value="rec.content"
+              title="Contenuto:"
+              @keyup.enter.stop
+              :showButtons="false"
+              :canModify="true"
+              @update:value="modifElem"
+              @showandsave="saveElem"
+            >
+            </CMyEditor>
+
+            <q-input
+              label="Sottotitolo:"
+              class="fa-border"
+              dense
+              @update:model-value="modifElem"
+              v-model="rec.description"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+          </div>
+          <div v-if="enableEdit" class="row">
+            <CSelectColor
+              v-if="enableEdit"
+              v-model="rec.colorsub"
+              @update:model-value="modifElem"
+              title="Col Sottotitolo"
+            >
+            </CSelectColor>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
+        <div v-if="enableEdit">
+          <q-input
+            label="Margine:"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.size"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
+        <div v-if="enableEdit">
+          <q-input
+            label="Titolo"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.title"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Style"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.styleadd"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Immagine:"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.imgback"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
+        <div v-if="enableEdit">
+          <q-input
+            label="Img"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            filled
+            v-on:keyup.enter="saveElem(false)"
+          >
+          </q-input>
+
+          <q-input
+            label="Title"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
+        <div v-if="enableEdit">
+          <q-input
+            label="Classe:"
+            @update:model-value="modifElem"
+            v-model="myel.class"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <CMyEditor
+            v-model:value="myel.containerHtml"
+            title=""
+            @keyup.enter.stop
+            :showButtons="false"
+            :canModify="true"
+            @update:value="modifElem"
+            @showandsave="saveElem"
+          >
+          </CMyEditor>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
+        <div v-if="enableEdit">
+          <q-input
+            label="NomeFile Img:"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            filled
+            dense
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <CMyFieldRec
+            title="NomeFile Img:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="container"
+            @update:model-value="modifElem"
+            :canEdit="true"
+            :canModify="true"
+            :type="costanti.FieldType.images"
+          >
+          </CMyFieldRec>
+
+          <div class="row">
+            <q-input
+              label="Width:"
+              @update:model-value="modifElem"
+              v-model="myel.widthimg"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              label="Height:"
+              @update:model-value="modifElem"
+              v-model="myel.heightimg"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
+        <div v-if="enableEdit">
+          <q-input
+            label="NomeFile Img:"
+            @update:model-value="modifElem"
+            v-model="myel.image"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <CMyFieldRec
+            title="NomeFile Img:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="image"
+            @update:model-value="modifElem"
+            :canEdit="true"
+            :canModify="true"
+            :type="costanti.FieldType.images"
+          >
+          </CMyFieldRec>
+          <div class="row">
+            <q-input
+              label="Width:"
+              @update:model-value="modifElem"
+              v-model="myel.widthimg"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              label="Height:"
+              @update:model-value="modifElem"
+              v-model="myel.heightimg"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+        <div v-if="enableEdit" class="row">
+          <q-input
+            label="NomeFile Video:"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Ratio:"
+            type="number"
+            @update:model-value="modifElem"
+            v-model="myel.ratio"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
+        <div v-if="enableEdit" class="row">
+          <q-select
+            rounded
+            outlined
+            v-model="myel.container"
+            :options="arrPages"
+            label="Pagina"
+            emit-value
+            map-options
+            @change="saveElem"
+          >
+          </q-select>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
+        <div v-if="enableEdit" class="row">
+          <q-input
+            label="NomeFile Img:"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Width:"
+            type="number"
+            @update:model-value="modifElem"
+            debounce="1000"
+            v-model="myel.widthimg"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Height:"
+            type="number"
+            @update:model-value="modifElem"
+            debounce="1000"
+            v-model="myel.heightimg"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Link:"
+            @update:model-value="modifElem"
+            debounce="1000"
+            v-model="myel.link"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div
+        v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
+      >
+        <CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+        <div v-if="enableEdit" class="row">
+          <q-input
+            label="ImgMap:"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="UrlMap:"
+            @update:model-value="modifElem"
+            v-model="myel.container2"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Title:"
+            @update:model-value="modifElem"
+            v-model="myel.container3"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Coordinata Mappa 1:"
+            @update:model-value="modifElem"
+            v-model="myel.containerHtml"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Coordinata Mappa Big:"
+            @update:model-value="modifElem"
+            v-model="myel.link"
+            debounce="1000"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
+        <div v-if="enableEdit" class="row">
+          <CMyFieldRec
+            title="Lista Immagini:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="list"
+            @update:model-value="modifElem"
+            :canEdit="true"
+            :canModify="true"
+          >
+          </CMyFieldRec>
+
+          <!--sss
+          -->
+
+          <q-input
+            label="Secondi tra un'immagine e l'altra:"
+            @update:model-value="modifElem"
+            debounce="1000"
+            v-model="myel.container2"
+            type="number"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-toggle
+            label="Sottotitoli"
+            v-model="myel.parambool"
+            color="positive"
+            icon="fas fa-eye"
+          >
+          </q-toggle>
+
+          <q-toggle
+            label="Miniature"
+            v-model="myel.parambool2"
+            color="positive"
+            icon="fas fa-eye"
+          >
+          </q-toggle>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
+        <div v-if="enableEdit" class="row">
+          <q-input
+            label="Visualizza ultimi N eventi:"
+            @update:model-value="modifElem"
+            debounce="1000"
+            v-model="myel.number"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyEditElem.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyEditElem.scss';
+</style>

src/components/CMyEditElem/index.ts

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

src/components/CMyElem/CMyElem.scss

@@ -474,3 +474,9 @@ body.mobile .landing:before {
 .align_left {
   text-align: left;
 }
+
+.flex3 {
+  display: flex;
+  justify-content: space-between;
+  background-color: green;
+}

src/components/CMyElem/CMyElem.ts

@@ -2,7 +2,7 @@ import {
   defineComponent, onMounted, PropType, ref, toRef, watch,
 } from 'vue'
 
-import { IMyElem, IMyPage, IOperators } from '@src/model'
+import { IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '../CImgTitle/index'
@@ -17,15 +17,21 @@ import { CMyPageIntro } from '@src/components/CMyPageIntro'
 import { CEventsCalendar } from '@src/components/CEventsCalendar'
 import { CMyEditor } from '@src/components/CMyEditor'
 import { CMyFieldRec } from '@src/components/CMyFieldRec'
+import { CSelectColor } from '@src/components/CSelectColor'
+import { CSelectFontSize } from '@src/components/CSelectFontSize'
 
 import MixinMetaTags from '@/mixins/mixin-metatags'
+import MixinBase from '@/mixins/mixin-base'
 import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
 
 
 export default defineComponent({
   name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec },
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+    CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
+    CSelectColor, CSelectFontSize },
+  emits: ['selElemClick'],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
@@ -47,10 +53,12 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const globalStore = useGlobalStore()
 
     const { setmeta, getsrcbyimg } = MixinMetaTags()
+    const { setValDb, getValDb } = MixinBase()
+
 
     const $q = useQuasar()
     const { t } = useI18n()
@@ -115,6 +123,16 @@ export default defineComponent({
       globalStore.addNewElem($q, t, newrec)
     }
 
+    function dupElem(order?: number) {
+
+      const newrec = props.myelem
+
+      newrec._id = undefined
+      newrec.order = order ? order : newrec.order! + 10
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
     function delElem() {
       $q.dialog({
         message: 'Eliminare ' + props.myelem.container + ' ?',
@@ -153,6 +171,7 @@ export default defineComponent({
     function clickOnElem() {
       if (props.editOn) {
         enableEdit.value = true
+        emit('selElemClick', props.myelem)
       }
     }
 
@@ -166,9 +185,24 @@ export default defineComponent({
         mycl += ' align_left'
       }
 
+      if (props.myelem.class2)
+        mycl += ' ' + props.myelem.class2
+
       return mycl
     }
 
+    function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
+      if (elem) {
+        if (elem.type === shared_consts.ELEMTYPE.CARD) {
+          return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
+        } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
+          return 'upload/pages/' + elem.path + '/' + elem.container
+        } else {
+          return 'upload/pages/' + elem.path + '/' + elem.image
+        }
+      }
+    }
+
     function showFit() {
       if (props.myelem.type)
         return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
@@ -201,6 +235,9 @@ export default defineComponent({
       clickOnElem,
       getClass,
       showFit,
+      getValDb,
+      dupElem,
+      getImgFileByElem,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -1,125 +1,48 @@
 <template>
-  <div v-if="myel"
+  <div
-       :class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
+    v-if="myel"
+    :class="
+      (editOn ? ` clEditDiv` : ``) +
+      `` +
+      (!myel.active ? ` clEditNotActive` : ``)
+    "
   >
-    <q-bar v-if="enableEdit" dense class="bg-blue-1 text-white q-px-sm">
+    <div>
-      <q-toggle
+      <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
-        v-model="myel.active"
+        <div
-        color="positive"
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-        icon="fas fa-eye"
+          @click="clickOnElem"
-      >
-      </q-toggle>
-      <q-toggle
-        v-model="enableEdit"
-        icon="fas fa-pencil-alt"
-      >
-      </q-toggle>
-      <!--<q-toggle v-if="tools.isManager()"
-                v-model="enableAdd"
-                icon="fas fa-plus"
-      </q-toggle>
-      >-->
-
-      <q-input
-        style="max-width: 60px"
-        hide-bottom-space
-        borderless
-        dense
-        @update:model-value="modifElem"
-        v-model="neworder"
-        v-on:keyup.enter="saveElem(false)"
-        type="number"
-      >
-      </q-input>
-      <q-select
-        v-if="enableEdit"
-        rounded outlined v-model="myel.align"
-        :options="tools.SelectListAlign"
-        @update:model-value="modifElem"
-        dense
-        label="Allinea" emit-value map-options>
-      </q-select>
-      <q-select
-        v-if="enableEdit"
-        rounded outlined v-model="myel.class"
-        :options="tools.SelectListClass"
-        @update:model-value="modifElem"
-        dense
-        label="Classe" emit-value map-options>
-      </q-select>
-      <q-select
-        v-if="enableEdit && showFit"
-        rounded outlined v-model="myel.fit"
-        :options="tools.SelectListFit"
-        @update:model-value="modifElem"
-        dense
-        label="Fit" emit-value map-options>
-      </q-select>
-      <q-space/>
-      <q-btn
-        icon="fas fa-trash-alt"
-        color="negative"
-        dense
-        flat
-        size="sm"
-        @click="delElem">
-      </q-btn>
-
-      <q-select v-if="enableAdd"
-                v-model="newtype"
-                dense
-                style="width: 150px;"
-                :options="shared_consts.TypesElem"
-                emit-value map-options>
-
-      </q-select>
-      <q-btn
-        v-if="enableAdd"
-        size="sm"
-        dense
-        flat
-        icon="fas fa-plus"
-        color="positive"
-        @click="addNewElem(myel.order-10)">
-      </q-btn>
-
-    </q-bar>
-
-    <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
-      <div v-if="enableEdit">
-        <q-input
-          class="fa-border"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          filled
-          v-on:keyup.enter="saveElem"
         >
-
+          {{ myel.container }}
-        </q-input>
+        </div>
-
       </div>
       <div
-        :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+        v-if="myel.type === shared_consts.ELEMTYPE.CARD"
-        @click="clickOnElem">{{ myel.container }}
+        :class="myel.span ? '' : ''"
+      >
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <div v-for="(rec, ind) in myel.listcards" :key="ind" >
+            <q-card class="my-card center_img" flat bordered>
+              rec: {{rec}}
+              <q-img :src="getImgFileByElem(myel, rec)" />
+              <q-card-section>
+                <div :class="` ` + rec.size" :style="`color: ` + rec.color">
+                  {{ rec.alt }}
+                </div>
+                <div :class="`q-mt-sm q-mb-xs `" v-html="rec.content"></div>
+                <div
+                  v-if="rec.description"
+                  class="text-caption"
+                  :style="`color: ` + rec.colorsub"
+                >
+                  {{ rec.description }}
+                </div>
+              </q-card-section>
 
-      </div>
+              <!--<q-card-actions>
-    </div>
-    <div v-if="myel.type === shared_consts.ELEMTYPE.CARD">
-
-      <q-card class="my-card" flat bordered>
-        <q-img
-          :src="myel.img"
-        />
-
-        <q-card-section>
-          <div class="text-overline text-orange-9">{{ myel.container }}</div>
-          <div class="text-h5 q-mt-sm q-mb-xs">{{ myel.container2 }}</div>
-          <div class="text-caption text-grey">
-            {{ myel.container3 }}
-          </div>
-        </q-card-section>
-
-        <!--<q-card-actions>
           <q-btn flat color="dark" label="Share"/>
           <q-btn flat color="primary" label="Book"/>
 
@@ -135,436 +58,309 @@
           />
         </q-card-actions>-->
 
-        <q-slide-transition>
+              <!--<q-slide-transition>
-          <div v-show="expanded">
+            <div v-show="expanded">
-            <q-separator/>
+              <q-separator />
-            <q-card-section class="text-subitle2">
+              <q-card-section class="text-subitle2">
-              {{ lorem }}
+
-            </q-card-section>
+              </q-card-section>
+            </div>
+          </q-slide-transition>
+          -->
+            </q-card>
           </div>
-        </q-slide-transition>
+        </div>
-      </q-card>
-    </div>
-
-    <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
-      <div v-if="enableEdit">
-        <q-input
-          label="Margine:"
-          class="fa-border"
-          @update:model-value="modifElem"
-          v-model="myel.size"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-
       </div>
-      <div
-        :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-        @click="clickOnElem"
-        :style="`margin: ` + myel.size">&nbsp;
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
-      <div v-if="enableEdit">
-        <q-input
-          class="fa-border"
-          @update:model-value="modifElem"
-          v-model="myel.title"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
 
-      </div>
+      <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
-      <div>
         <div
           :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-          @click="clickOnElem">
+          @click="clickOnElem"
-          <CTitle
+          :style="`margin: ` + myel.size"
-            :imgbackground="myel.imgback"
+        >
-            :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
+          &nbsp;
-          </CTitle>
         </div>
       </div>
-    </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
+        <div>
-      <div v-if="enableEdit">
+          <div
-        <q-input
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-          label="Img"
+            @click="clickOnElem"
-          class="fa-border"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          filled
-          v-on:keyup.enter="saveElem(false)"
-        >
-        </q-input>
-        <q-input
-          label="Title"
-          class="fa-border"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-
-      </div>
-      <div>
-        <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-             @click="clickOnElem">
-          <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
-          </CImgTitle>
-        </div>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
-      <div v-if="enableEdit">
-        <q-input
-          label="Classe:"
-          @update:model-value="modifElem"
-          v-model="myel.class"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <CMyEditor
-          v-model:value="myel.containerHtml" title="" @keyup.enter.stop
-          :showButtons="false"
-          :canModify="true"
-          @update:value="modifElem"
-          @showandsave="saveElem"
-        >
-        </CMyEditor>
-
-      </div>
-      <div>
-        <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-             @click="clickOnElem"
-             v-html="myel.containerHtml"></div>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
-      <div v-if="enableEdit">
-        <q-input
-          label="NomeFile Img:"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <div class="row">
-          <q-input
-            label="Width:"
-            @update:model-value="modifElem"
-            v-model="myel.widthimg"
-            filled
-            v-on:keyup.enter="saveElem"
           >
-          </q-input>
+            <CTitle
-          <q-input
+              :imgbackground="myel.imgback"
-            label="Height:"
+              :headtitle="myel.title"
-            @update:model-value="modifElem"
+              :sizes="myel.size"
-            v-model="myel.heightimg"
+              :styleadd="myel.styleadd"
-            filled
+            >
-            v-on:keyup.enter="saveElem"
+            </CTitle>
-          >
+          </div>
-          </q-input>
         </div>
       </div>
-      <div class="text-center">
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
-        <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+        <div>
-             @click="clickOnElem">
+          <div
-          <q-img :src="myel.container" :fit="myel.fit" class="img" :width="myel.widthimg ? myel.widthimg: undefined" :height="myel.heightimg ? myel.heightimg : undefined"></q-img>
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            @click="clickOnElem"
+          >
+            <CImgTitle
+              v-if="myel.container"
+              :src="myel.container"
+              :title="myel.title"
+            >
+            </CImgTitle>
+          </div>
         </div>
       </div>
-    </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+        <div>
-      <div v-if="enableEdit" class="row">
+          <div
-        <q-input
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-          label="NomeFile Video:"
+            @click="clickOnElem"
-          @update:model-value="modifElem"
+            v-html="myel.containerHtml"
-          v-model="myel.container"
+          ></div>
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <q-input
-          label="Ratio:"
-          type="number"
-          @update:model-value="modifElem"
-          v-model="myel.ratio"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-      </div>
-      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-           @click="clickOnElem">
-        <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
-        </q-video>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
-      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-           @click="clickOnElem">
-
-        <LandingFooter></LandingFooter>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
-      <div v-if="enableEdit" class="row">
-        <q-input
-          label="Importa Pagina:"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-      </div>
-      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-           @click="clickOnElem">
-        <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
-      <div v-if="enableEdit" class="row">
-        <q-input
-          label="NomeFile Img:"
-          @update:model-value="modifElem"
-          v-model="myel.container"
-          debounce="1000"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <q-input
-          label="Width:"
-          type="number"
-          @update:model-value="modifElem"
-          debounce="1000"
-          v-model="myel.widthimg"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <q-input
-          label="Height:"
-          type="number"
-          @update:model-value="modifElem"
-          debounce="1000"
-          v-model="myel.heightimg"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <q-input
-          label="Link:"
-          @update:model-value="modifElem"
-          debounce="1000"
-          v-model="myel.link"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-      </div>
-      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-           @click="clickOnElem">
-        <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
-      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
-      <CCardCarousel :myarr="getArrDisciplines()">
-
-      </CCardCarousel>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
-      <!-- Da Fare -->
-      <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
-                      :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
-
-      </COpenStreetMap>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
-      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center">
-
-        <div v-if="enableEdit" class="row">
-          <CMyFieldRec
-            title="Lista Immagini:"
-            table="myelems"
-            :id="myel._id"
-            :rec="myel"
-            field="list"
-            @update:model-value="modifElem"
-            :canEdit="true"
-            :canModify="true">
-          </CMyFieldRec>
-
-          <!--sss
-          -->
-
-          <q-input
-            label="Secondi tra un'immagine e l'altra:"
-            @update:model-value="modifElem"
-            debounce="1000"
-            v-model="myel.container2"
-            type="number"
-            filled
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
-          <q-toggle
-            label="Sottotitoli"
-            v-model="myel.parambool"
-            color="positive"
-            icon="fas fa-eye"
-          >
-          </q-toggle>
-
-          <q-toggle
-            label="Miniature"
-            v-model="myel.parambool2"
-            color="positive"
-            icon="fas fa-eye"
-          >
-          </q-toggle>
-
         </div>
-        <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+      </div>
-             @click="clickOnElem">
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
-
+        <div class="text-center">
-          <q-carousel
+          <div
-            swipeable
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-            animated
+            @click="clickOnElem"
-            :autoplay="myel.container2 ? (myel.container2 * 1000) : 8000"
+          >
-            v-model="slide2"
+            <q-img
-            arrows
+              :src="getImgFileByElem(myel.container)"
-            :fit="myel.fit"
+              :fit="myel.fit"
-            :thumbnails="myel.parambool2"
+              class="img"
-            infinite
+              :width="myel.widthimg ? myel.widthimg : undefined"
-            :height="myel.height ? myel.height.toString() : 600">
+              :height="myel.heightimg ? myel.heightimg : undefined"
-            <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
+            ></q-img>
-                              :img-src="getsrcbyimg(`upload/pages/`+ path + `/`+ rec.imagefile)"
+          </div>
-                              :alt="rec.alt"
-                              class="carousel_slide">
-              <div
-                v-if="myel.parambool" class="absolute-bottom custom-caption" style="margin-bottom: 70px">
-                <div class="text-h5"><span
-                  class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}. </span>
-                  <span v-if="rec.alt"
-                        class="text-h6 text-grey-2 shadow">{{ rec.alt }}</span></div>
-                <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{ rec.description }}</span>
-                </div>
-              </div>
-            </q-carousel-slide>
-          </q-carousel>
         </div>
-      </section>
+      </div>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
 
-      <section>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
-        <div class="landing">
+        <div class="text-center">
-          <div class="landing__hero maxwidth1200 text-white">
+          <div
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            @click="clickOnElem"
+          >
+            <q-img
+              :src="getImgFileByElem(myel)"
+              :fit="myel.fit"
+              class="img"
+              :width="myel.widthimg ? myel.widthimg : undefined"
+              :height="myel.heightimg ? myel.heightimg : undefined"
+            ></q-img>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <q-video
+            v-if="!!rec.container"
+            :src="rec.container"
+            :ratio="rec.ratio"
+          >
+          </q-video>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <LandingFooter></LandingFooter>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <CMyPageIntro
+            :mypath="myel.container"
+            :maxheightimg="myel.heightimg"
+            :maxwidthimg="myel.widthimg"
+            :link="myel.link"
+          ></CMyPageIntro>
+        </div>
+      </div>
+      <div
+        v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
+      >
+        <CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <div v-if="myel.container">
+            <!-- Da Fare -->
+            <COpenStreetMap
+              :imgmap="myel.container"
+              :urlmap="myel.container2"
+              :title="myel.container3"
+              :coordinates="myel.containerHtml"
+              :coord_big="myel.link"
+            >
+            </COpenStreetMap>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
+        <section
+          class="maxwidth padding_gallery bg-white text-grey-10 text-center"
+        >
+          <div
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            @click="clickOnElem"
+          >
             <q-carousel
-              animated
-              :autoplay="animare"
               swipeable
+              animated
+              :autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
+              v-model="slide2"
+              arrows
+              :fit="myel.fit"
+              :thumbnails="myel.parambool2"
               infinite
-              navigation
+              :height="myel.height ? myel.height.toString() : 600"
-              transition-next="slide-left"
-              transition-prev="slide-right"
-              v-model="slide"
-              :height="getheightgallery()"
-              width="100%"
             >
               <q-carousel-slide
-                v-for="(myrec, ind) in myel.list" :key="ind"
+                v-for="(rec, index) in myel.list"
-                :name="ind"
+                :key="index"
-                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
+                :name="index"
-
+                :img-src="
-                <div class="landing__header"></div>
+                  getsrcbyimg(`upload/pages/` + path + `/` + rec.imagefile)
-                <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                "
-                  <div class="row">
+                :alt="rec.alt"
-                    &nbsp;
+                class="carousel_slide"
+              >
+                <div
+                  v-if="myel.parambool"
+                  class="absolute-bottom custom-caption"
+                  style="margin-bottom: 70px"
+                >
+                  <div class="text-h5">
+                    <span class="text-h6 text-grey-1 shadow-max"
+                      >{{ index + 1 }}.
+                    </span>
+                    <span v-if="rec.alt" class="text-h6 text-grey-2 shadow">{{
+                      rec.alt
+                    }}</span>
                   </div>
-                  <div class="flex justify-end">
+                  <div class="text-subtitle1" v-if="rec.description">
-                    <div class="q-gutter-xs testo-banda clgutter">
+                    <span class="text-grey-4 shadow">{{
-                      <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
+                      rec.description
-                      <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                    }}</span>
-                        {{ myel.container }}&nbsp;
+                  </div>
-                      </div>
+                </div>
-                      <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
+              </q-carousel-slide>
-                        {{ myel.container2 }}
+            </q-carousel>
-                      </div>
+          </div>
-                      <div class="text-subtitle2 shadow text-italic q-pl-sm">
+        </section>
-                        {{ myel.container3 }}
+      </div>
-                      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
-                      <div>
+        <section>
-                        <br><br>
+          <div class="landing">
-                        <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
+            <div class="landing__hero maxwidth1200 text-white">
-                          <br><br>
+              <q-carousel
+                animated
+                :autoplay="animare"
+                swipeable
+                infinite
+                navigation
+                transition-next="slide-left"
+                transition-prev="slide-right"
+                v-model="slide"
+                :height="getheightgallery()"
+                width="100%"
+              >
+                <q-carousel-slide
+                  v-for="(myrec, ind) in myel.list"
+                  :key="ind"
+                  :name="ind"
+                  :img-src="getsrcbyimg(`images/` + myrec.imagefile)"
+                >
+                  <div class="landing__header"></div>
+                  <div
+                    class="
+                      landing__hero-content
+                      row
+                      justify-center
+                      q-gutter-xs
+                      clgutter
+                    "
+                  >
+                    <div class="row">&nbsp;</div>
+                    <div class="flex justify-end">
+                      <div class="q-gutter-xs testo-banda clgutter">
+                        <h1 class="text-h1 shadow-max">
+                          {{ tools.getappname() }}
+                        </h1>
+                        <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                          {{ myel.container }}&nbsp;
+                        </div>
+                        <div
+                          class="
+                            text-subtitle1
+                            shadow-max
+                            big
+                            text-italic
+                            q-pl-sm
+                          "
+                        >
+                          {{ myel.container2 }}
+                        </div>
+                        <div class="text-subtitle2 shadow text-italic q-pl-sm">
+                          {{ myel.container3 }}
+                        </div>
+                        <div>
+                          <br /><br />
+                          <div
+                            v-if="!tools.isLogged()"
+                            style="margin: 5px; padding: 5px"
+                            class="home"
+                          >
+                            <br /><br />
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                  <!--<div class="landing__arrow absolute-bottom text-center">
-                <!--<div class="landing__arrow absolute-bottom text-center">
                   <i aria-hidden="true"
                      class="q-icon text-h2 text-white material-icons">expand_more</i>
                 </div>-->
-              </q-carousel-slide>
+                </q-carousel-slide>
-            </q-carousel>
+              </q-carousel>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
+        <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
+        </CEventsCalendar>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
+        <div class="q-pa-md q-gutter-md">
+          <div v-if="tools.isLogged() && !isVerified" class="text-verified">
+            {{ $t('components.authentication.email_verification.link_sent') }}
           </div>
         </div>
-      </section>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
-      <div v-if="enableEdit" class="row">
-        <q-input
-          label="Visualizza ultimi N eventi:"
-          @update:model-value="modifElem"
-          debounce="1000"
-          v-model="myel.number"
-          filled
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
       </div>
-
-      <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
-      </CEventsCalendar>
-    </div>
-    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
-      <div class="q-pa-md q-gutter-md">
-        <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
-            $t('components.authentication.email_verification.link_sent')
-          }}
-        </div>
-
-      </div>
-    </div>
-    <div class="justify-center q-gutter-xs row">
-      <q-btn
-        v-if="enableEdit && !disableSave"
-        icon="fas fa-check"
-        color="positive"
-        label="Applica"
-        size="sm"
-        :disable="disableSave"
-        @click="saveElem">
-      </q-btn>
-      <q-btn
-        v-if="enableEdit && !disableSave"
-        icon="fas fa-check"
-        color="positive"
-        label="Salva"
-        size="sm"
-        :disable="disableSave"
-        @click="saveElem(true)">
-      </q-btn>
     </div>
   </div>
 </template>

src/components/CMyPage/CMyPage.ts

@@ -62,9 +62,9 @@ export default defineComponent({
       if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
     })
 
-    // onMounted(load)
+    onMounted(load)
 
-    load()
+    // load()
 
     return {
       rec, globalStore

src/components/CMyPageElem/CMyPageElem.ts

@@ -7,6 +7,7 @@ import { IMyElem, IMyPage } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 import { LandingFooter } from '@/components/LandingFooter'
 import { CMyElem } from '@/components/CMyElem'
+import { CMyEditElem } from '@/components/CMyEditElem'
 
 import { CImgTitle } from '../CImgTitle/index'
 import { CTitle } from '../CTitle/index'
@@ -17,7 +18,7 @@ import { shared_consts } from '@/common/shared_vuejs'
 
 export default defineComponent({
   name: 'CMyPageElem',
-  components: { LandingFooter, CImgTitle, CTitle, CMyElem },
+  components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem },
   props: {
     title: String,
     mypath: {
@@ -61,6 +62,7 @@ export default defineComponent({
 
     const editOn = ref(false)
     const addOn = ref(false)
+    const selElem = ref({} as IMyElem)
     const myelemVoid = ref({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
 
     const globalStore = useGlobalStore()
@@ -76,6 +78,11 @@ export default defineComponent({
     const load = async (): Promise<void> => {
       // console.log('load', mypathin.value)
       if (mypathin.value !== '') rec.value = await globalStore.loadPage('/' + mypathin.value)
+
+      editOn.value = tools.getCookie('EDIT_' + mypathin.value) === '-1' ? true : false
+      if (mypathin.value === 'home')
+        editOn.value = false
+      console.log('getcookie: ',  editOn.value, mypathin.value)
     }
 
     watch(() => props.mypath, async (to: string, from: string) =>  {
@@ -84,6 +91,19 @@ export default defineComponent({
     })
 
 
+    function selElemClick(myelem: IMyElem) {
+      selElem.value = myelem
+    }
+
+    function saveElem(myelem: IMyElem) {
+      //
+    }
+
+    function changeVisuDrawer() {
+      console.log('changeVisuDrawer')
+      tools.setCookie('EDIT_' + mypathin.value, editOn.value ? '-1' : '0')
+    }
+
     onMounted(load)
 
     return {
@@ -94,6 +114,10 @@ export default defineComponent({
       tools,
       shared_consts,
       myelemVoid,
+      selElemClick,
+      selElem,
+      saveElem,
+      changeVisuDrawer,
     }
   },
 

src/components/CMyPageElem/CMyPageElem.vue

@@ -1,26 +1,44 @@
 <template>
   <div>
     <div v-if="mypathin && !!rec">
-      <q-toolbar>
+      <q-toggle
-        <q-toggle v-if="tools.isManager()"
+        v-if="tools.isManager()"
-                  v-model="editOn"
+        v-model="editOn"
-                  icon="fas fa-pencil-alt"
+        color="green"
-                  >
+        @update:model-value="changeVisuDrawer"
-
+        icon="fas fa-pencil-alt"
-        </q-toggle>
+      >
-       <!-- <q-toggle v-if="tools.isManager()"
+      </q-toggle>
-                  v-model="addOn"
+      <q-drawer
-                  icon="fas fa-plus"
+        v-model="editOn"
-                  >
+        side="right"
-
+        show-if-above
-        </q-toggle>-->
+        :width="400"
-
+        :breakpoint="700"
-
+        elevated
-      </q-toolbar>
+      >
+        <q-bar dense class="bg-primary text-white">
+          <q-toolbar-title> Editor </q-toolbar-title>
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="close"
+            @click="editOn = false; changeVisuDrawer()"
+          ></q-btn>
+        </q-bar>
+        <CMyEditElem
+          :myelem="selElem"
+          :editOn="true"
+          :path="rec.path"
+          @saveElem="saveElem"
+        >
+        </CMyEditElem>
+      </q-drawer>
 
       <div class="q-ma-sm q-gutter-sm q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
-          <q-img :src="``+ rec.img1" class="img"></q-img>
+          <q-img :src="`` + rec.img1" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content" v-html="rec.content"></div>
@@ -28,41 +46,62 @@
         </q-video>
 
         <div v-if="!!rec.img2" class="text-center">
-          <q-img :src="``+ rec.img2" class="img"></q-img>
+          <q-img :src="`` + rec.img2" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content2" v-html="rec.content2"></div>
-        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
+        <q-video
+          v-if="!!rec.video2"
+          :src="rec.video2"
+          :ratio="rec.ratio2"
+        ></q-video>
 
         <div v-if="!!rec.img3" class="text-center">
-          <q-img :src="``+ rec.img2" class="img"></q-img>
+          <q-img :src="`` + rec.img2" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content3" v-html="rec.content3"></div>
-        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
+        <q-video
+          v-if="!!rec.video3"
+          :src="rec.video3"
+          :ratio="rec.ratio3"
+        ></q-video>
         <div v-if="!!rec.content4" v-html="rec.content4"></div>
 
-        <span v-for="(myelem, ind) in myelems" :key="ind">
+        <div v-for="(myelem, ind) in myelems" :key="ind">
-          <CMyElem v-if="myelem.active || editOn" :myelem="myelem" :editOn="editOn" :addOn="addOn" :path="rec.path">
+          <CMyElem
-
+            v-if="myelem.active || editOn"
+            :myelem="myelem"
+            :editOn="editOn"
+            :addOn="addOn"
+            :path="rec.path"
+            @selElemClick="selElemClick"
+          >
           </CMyElem>
-        </span>
+        </div>
         <div v-if="myelems.length === 0">
-          <CMyElem v-if="editOn" :myelem="myelemVoid" :editOn="editOn" :addOn="addOn" :path="rec.path">
+          <CMyElem
-
+            v-if="editOn"
+            :myelem="myelemVoid"
+            :editOn="editOn"
+            :addOn="addOn"
+            :path="rec.path"
+          >
           </CMyElem>
         </div>
       </div>
     </div>
     <div v-else>
-
       <div v-if="!!title">
         <CTitle
-          v-if="imgbackground" :imgbackground="imgbackground"
+          v-if="imgbackground"
-          :headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
+          :imgbackground="imgbackground"
+          :headtitle="title"
+          :sizes="sizes"
+          :styleadd="styleadd"
+        ></CTitle>
         <div v-if="!imgbackground">
-          <CImgTitle v-if="img" :src="img" :title="title">
+          <CImgTitle v-if="img" :src="img" :title="title"> </CImgTitle>
-          </CImgTitle>
         </div>
         <slot></slot>
         <div v-if="!nofooter">

src/components/CSelectColor/CSelectColor.ts

@@ -0,0 +1,40 @@
+import { defineComponent, ref, toRef, watch } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import {  useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+
+export default defineComponent({
+  name: 'CSelectColor',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    const color = toRef(props, 'modelValue')
+
+    function updateValue(str: string) {
+      emit('update:modelValue', str)
+    }
+
+    return {
+      tools,
+      toolsext,
+      updateValue,
+      color,
+    }
+  },
+})

src/components/CSelectColor/CSelectColor.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-select
+    rounded
+    outlined
+    v-model="color"
+    @update:model-value="updateValue"
+    :options="tools.SelectListColors"
+    dense
+    :label="title"
+    emit-value
+    map-options
+  >
+    <template v-slot:selected>
+      <q-chip
+        dense
+        square
+        color="white"
+        class="q-my-none q-ml-xs q-mr-none"
+      >
+        <span :style="`color: `+ color">{{ color }}</span>
+      </q-chip>
+    </template>
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section>
+          <q-item-label :style="`color: ` + scope.opt.value">{{
+            scope.opt.label
+          }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script lang="ts" src="./CSelectColor.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSelectColor.scss';
+</style>

src/components/CSelectColor/index.ts

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

src/components/CSelectFontSize/CSelectFontSize.ts

@@ -0,0 +1,40 @@
+import { defineComponent, ref, toRef, watch } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import {  useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+
+export default defineComponent({
+  name: 'CSelectFontSize',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    const classfont = toRef(props, 'modelValue')
+
+    function updateValue(str: string) {
+      emit('update:modelValue', str)
+    }
+
+    return {
+      tools,
+      toolsext,
+      updateValue,
+      classfont,
+    }
+  },
+})

src/components/CSelectFontSize/CSelectFontSize.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-select
+    rounded
+    outlined
+    v-model="classfont"
+    @update:model-value="updateValue"
+    :options="tools.SelectListFontSize"
+    dense
+    :label="title"
+    emit-value
+    map-options
+  >
+    <template v-slot:selected>
+      <q-chip
+        dense
+        square
+        color="white"
+        class="q-my-none q-ml-xs q-mr-none"
+      >
+        <span :class="classfont">{{ classfont }}</span>
+      </q-chip>
+    </template>
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section>
+          <q-item-label :class="scope.opt.value">{{
+            scope.opt.label
+          }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script lang="ts" src="./CSelectFontSize.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSelectFontSize.scss';
+</style>

src/components/CSelectFontSize/index.ts

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

src/components/MyHeader/MyHeader.ts

@@ -244,7 +244,7 @@ export default defineComponent({
 
         mylangtopass = toolsext.checkLangPassed($q, $router, mylangtopass)
 
-        userStore.setlang($router, mylangtopass)
+        userStore.setlang($q, $router, mylangtopass)
 
         setshortlang(mylangtopass)
 

src/components/index.ts

@@ -20,6 +20,7 @@ export * from './CMyPageElem'
 export * from './CMyPageIntro'
 export * from './CMyElem'
 export * from './CMyTeacher'
+export * from './CSelectFontSize'
 export * from './CProfile'
 export * from './CProvaPao'
 export * from './CSignIn'

src/css/app.scss

@@ -288,10 +288,13 @@ $heightBtn: 100%;
 
 .my-card {
   width: 100%;
-  max-width: 300px;
+  max-width: 400px;
-  min-width: 300px;
+  min-width: 250px;
   padding: 1rem 1rem;
-
+  @media (max-width: 500px) {
+    max-width: 400px;
+    min-width: 250px;
+  }
   box-shadow: none;
 }
 

src/db/static_data.ts

@@ -846,7 +846,7 @@ const baseroutes: IListRoutes[] = [
 
 const arrLangUsed = [
   'it',
-  // 'enUs',
+  'enUs',
   // 'es',
 ]
 
@@ -860,10 +860,10 @@ const lang_available: ILang[] = [
   {
     label: 'Italiano', icon: 'fa-flag-it', value: 'it', image: '../images/it.png', short: 'IT',
   },
-  /*{
+  {
     label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../images/gb.png', short: 'EN',
   },
-  {
+  /*{
     label: 'Español', icon: 'fa-flag-es', value: 'es', image: '../images/es.png', short: 'ES',
   },
 

src/model/GlobalStore.ts

@@ -119,6 +119,7 @@ export interface IMyElem {
   container?: string
   container2?: string
   container3?: string
+  span?: boolean
   align?: number
   fit?: string
   parambool?: boolean
@@ -138,9 +139,11 @@ export interface IMyElem {
   onlyif_logged?: boolean
   active?: boolean
   class?: string
+  image?: string
+  class2?: string
   styleadd?: string
   list?: IImgGallery[]
-
+  listcards?: IMyCard[]
 }
 
 export interface IMyPage {
@@ -488,6 +491,16 @@ export interface IImgGallery {
   description?: string
 }
 
+export interface IMyCard {
+  imagefile?: string
+  alt?: string
+  description?: string
+  size?: string
+  color?: string
+  content?: string
+  colorsub?: string
+}
+
 export interface IGallery {
   _id?: string
   author_username?: string

src/store/Modules/costanti.ts

@@ -287,6 +287,7 @@ export const costanti = {
     listobj: 13000,
     label: 14000,
     currency: 15000,
+    cards: 16000,
 
   },
 

src/store/Modules/fieldsTable.ts

@@ -130,6 +130,7 @@ export const colmyelems = [
   AddCol({ name: 'type', label_trans: 'myelems.type', fieldtype: costanti.FieldType.select, jointable: 'elemtypes' }),
   AddCol({ name: 'container', label_trans: 'myelems.container' }),
   AddCol({ name: 'container2', label_trans: 'myelems.container2' }),
+  AddCol({ name: 'span', label_trans: 'myelems.span', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'container3', label_trans: 'myelems.container3' }),
   AddCol({ name: 'img', label_trans: 'myelems.img' }),
   AddCol({ name: 'align', label_trans: 'myelems.align', fieldtype: costanti.FieldType.number }),
@@ -142,6 +143,7 @@ export const colmyelems = [
   AddCol({ name: 'size', label_trans: 'myelems.size' }),
   AddCol({ name: 'ratio', label_trans: 'myelems.ratio' }),
   AddCol({ name: 'containerHtml', label_trans: 'myelems.containerHtml', fieldtype: costanti.FieldType.html }),
+  AddCol({ name: 'listcards', label_trans: 'myelems.listcards', fieldtype: costanti.FieldType.listimages }),
   AddCol({ name: 'height', label_trans: 'myelems.height', fieldtype: costanti.FieldType.number  }),
   AddCol({ name: 'heightimg', label_trans: 'myelems.heightimg', fieldtype: costanti.FieldType.string  }),
   AddCol({ name: 'widthimg', label_trans: 'pages.widthimg', fieldtype: costanti.FieldType.string }),
@@ -159,6 +161,11 @@ export const colmyelems = [
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView,
     isInModif: true,
   }),
+  AddCol({
+    name: 'image',
+    label_trans: 'myelems.image',
+    fieldtype: costanti.FieldType.image,
+  }),
   AddCol(DeleteRec),
   AddCol(DuplicateRec),
 ]

src/store/Modules/tools.ts

@@ -292,6 +292,171 @@ export const tools = {
     },
   ],
 
+  SelectListColors: [
+    {label: '[Nessuno]', value: ''},
+    {label: 'aliceblue', value: '#f0f8ff'},
+    {label: 'antiquewhite', value: '#faebd7'},
+    {label: 'aqua', value: '#00ffff'},
+    {label: 'aquamarine', value: '#7fffd4'},
+    {label: 'azure', value: '#f0ffff'},
+    {label: 'beige', value: '#f5f5dc'},
+    {label: 'bisque', value: '#ffe4c4'},
+    {label: 'black', value: '#000000'},
+    {label: 'blanchedalmond', value: '#ffebcd'},
+    {label: 'blue', value: '#0000ff'},
+    {label: 'blue-3', value: '#90caf9'},
+    {label: 'blue-4', value: '#64b5f6'},
+    {label: 'amber-10', value: '#ff6f00'},
+    {label: 'blue-6', value: '#2196f3'},
+    {label: 'blueviolet', value: '#8a2be2'},
+    {label: 'brown', value: '#a52a2a'},
+    {label: 'burlywood', value: '#deb887'},
+    {label: 'cadetblue', value: '#5f9ea0'},
+    {label: 'chartreuse', value: '#7fff00'},
+    {label: 'chocolate', value: '#d2691e'},
+    {label: 'coral', value: '#ff7f50'},
+    {label: 'cornflowerblue', value: '#6495ed'},
+    {label: 'cornsilk', value: '#fff8dc'},
+    {label: 'crimson', value: '#dc143c'},
+    {label: 'cyan', value: '#00ffff'},
+    {label: 'darkblue', value: '#00008b'},
+    {label: 'darkcyan', value: '#008b8b'},
+    {label: 'darkgoldenrod', value: '#b8860b'},
+    {label: 'darkgray', value: '#a9a9a9'},
+    {label: 'darkgreen', value: '#006400'},
+    {label: 'darkkhaki', value: '#bdb76b'},
+    {label: 'darkmagenta', value: '#8b008b'},
+    {label: 'darkolivegreen', value: '#556b2f'},
+    {label: 'darkorange', value: '#ff8c00'},
+    {label: 'darkorchid', value: '#9932cc'},
+    {label: 'darkred', value: '#8b0000'},
+    {label: 'darksalmon', value: '#e9967a'},
+    {label: 'darkseagreen', value: '#8fbc8f'},
+    {label: 'darkslateblue', value: '#483d8b'},
+    {label: 'darkslategray', value: '#2f4f4f'},
+    {label: 'darkturquoise', value: '#00ced1'},
+    {label: 'darkviolet', value: '#9400d3'},
+    {label: 'deeppink', value: '#ff1493'},
+    {label: 'deepskyblue', value: '#00bfff'},
+    {label: 'dimgray', value: '#696969'},
+    {label: 'dodgerblue', value: '#1e90ff'},
+    {label: 'firebrick', value: '#b22222'},
+    {label: 'floralwhite', value: '#fffaf0'},
+    {label: 'forestgreen', value: '#228b22'},
+    {label: 'fuchsia', value: '#ff00ff'},
+    {label: 'gainsboro', value: '#dcdcdc'},
+    {label: 'ghostwhite', value: '#f8f8ff'},
+    {label: 'gold', value: '#ffd700'},
+    {label: 'goldenrod', value: '#daa520'},
+    {label: 'gray', value: '#808080'},
+    {label: 'green', value: '#008000'},
+    {label: 'green-3', value: '#a5d6a7'},
+    {label: 'green-4', value: '#81c784'},
+    {label: 'green-6', value: '#4caf50'},
+    {label: 'greenyellow', value: '#adff2f'},
+    {label: 'honeydew', value: '#f0fff0'},
+    {label: 'hotpink', value: '#ff69b4'},
+    {label: 'indianred ', value: '#cd5c5c'},
+    {label: 'indigo-3', value: '#9fa8da'},
+    {label: 'indigo-4', value: '#7986cb'},
+    {label: 'indigo-6', value: '#3f51b5'},
+    {label: 'indigo', value: '#4b0082'},
+    {label: 'ivory', value: '#fffff0'},
+    {label: 'khaki', value: '#f0e68c'},
+    {label: 'lavender', value: '#e6e6fa'},
+    {label: 'lavenderblush', value: '#fff0f5'},
+    {label: 'lawngreen', value: '#7cfc00'},
+    {label: 'lemonchiffon', value: '#fffacd'},
+    {label: 'lightblue', value: '#add8e6'},
+    {label: 'lightcoral', value: '#f08080'},
+    {label: 'lightcyan', value: '#e0ffff'},
+    {label: 'lightgoldenrodyellow', value: '#fafad2'},
+    {label: 'lightgrey', value: '#d3d3d3'},
+    {label: 'lightgreen', value: '#90ee90'},
+    {label: 'lightpink', value: '#ffb6c1'},
+    {label: 'lightsalmon', value: '#ffa07a'},
+    {label: 'lightseagreen', value: '#20b2aa'},
+    {label: 'lightskyblue', value: '#87cefa'},
+    {label: 'lightslategray', value: '#778899'},
+    {label: 'lightsteelblue', value: '#b0c4de'},
+    {label: 'lightyellow', value: '#ffffe0'},
+    {label: 'lime', value: '#00ff00'},
+    {label: 'lime-3', value: '#e6ee9c'},
+    {label: 'lime-4', value: '#dce775'},
+    {label: 'lime-6', value: '#cddc39'},
+    {label: 'lime-8', value: '#afb42b'},
+    {label: 'limegreen', value: '#32cd32'},
+    {label: 'linen', value: '#faf0e6'},
+    {label: 'magenta', value: '#ff00ff'},
+    {label: 'maroon', value: '#800000'},
+    {label: 'mediumaquamarine', value: '#66cdaa'},
+    {label: 'mediumblue', value: '#0000cd'},
+    {label: 'mediumorchid', value: '#ba55d3'},
+    {label: 'mediumpurple', value: '#9370d8'},
+    {label: 'mediumseagreen', value: '#3cb371'},
+    {label: 'mediumslateblue', value: '#7b68ee'},
+    {label: 'mediumspringgreen', value: '#00fa9a'},
+    {label: 'mediumturquoise', value: '#48d1cc'},
+    {label: 'mediumvioletred', value: '#c71585'},
+    {label: 'midnightblue', value: '#191970'},
+    {label: 'mintcream', value: '#f5fffa'},
+    {label: 'mistyrose', value: '#ffe4e1'},
+    {label: 'moccasin', value: '#ffe4b5'},
+    {label: 'navajowhite', value: '#ffdead'},
+    {label: 'navy', value: '#000080'},
+    {label: 'oldlace', value: '#fdf5e6'},
+    {label: 'olive', value: '#808000'},
+    {label: 'olivedrab', value: '#6b8e23'},
+    {label: 'orange', value: '#ffa500'},
+    {label: 'orange-3', value: '#ffcc80'},
+    {label: 'orange-4', value: '#ffb74d'},
+    {label: 'orange-6', value: '#ff9800'},
+    {label: 'orangered', value: '#ff4500'},
+    {label: 'orchid', value: '#da70d6'},
+    {label: 'palegoldenrod', value: '#eee8aa'},
+    {label: 'palegreen', value: '#98fb98'},
+    {label: 'paleturquoise', value: '#afeeee'},
+    {label: 'palevioletred', value: '#d87093'},
+    {label: 'papayawhip', value: '#ffefd5'},
+    {label: 'peachpuff', value: '#ffdab9'},
+    {label: 'peru', value: '#cd853f'},
+    {label: 'pink', value: '#ffc0cb'},
+    {label: 'plum', value: '#dda0dd'},
+    {label: 'powderblue', value: '#b0e0e6'},
+    {label: 'purple', value: '#800080'},
+    {label: 'rebeccapurple', value: '#663399'},
+    {label: 'red', value: '#ff0000'},
+    {label: 'red-3', value: '#ef9a9a'},
+    {label: 'red-4', value: '#e57373'},
+    {label: 'red-6', value: '#f44336'},
+    {label: 'rosybrown', value: '#bc8f8f'},
+    {label: 'royalblue', value: '#4169e1'},
+    {label: 'saddlebrown', value: '#8b4513'},
+    {label: 'salmon', value: '#fa8072'},
+    {label: 'sandybrown', value: '#f4a460'},
+    {label: 'seagreen', value: '#2e8b57'},
+    {label: 'seashell', value: '#fff5ee'},
+    {label: 'sienna', value: '#a0522d'},
+    {label: 'silver', value: '#c0c0c0'},
+    {label: 'skyblue', value: '#87ceeb'},
+    {label: 'slateblue', value: '#6a5acd'},
+    {label: 'slategray', value: '#708090'},
+    {label: 'snow', value: '#fffafa'},
+    {label: 'springgreen', value: '#00ff7f'},
+    {label: 'steelblue', value: '#4682b4'},
+    {label: 'tan', value: '#d2b48c'},
+    {label: 'teal', value: '#008080'},
+    {label: 'thistle', value: '#d8bfd8'},
+    {label: 'tomato', value: '#ff6347'},
+    {label: 'turquoise', value: '#40e0d0'},
+    {label: 'violet', value: '#ee82ee'},
+    {label: 'wheat', value: '#f5deb3'},
+    {label: 'white', value: '#ffffff'},
+    {label: 'whitesmoke', value: '#f5f5f5'},
+    {label: 'yellow', value: '#ffff00'},
+    {label: 'yellowgreen', value: '#9acd32'},
+  ],
+
   SelectQuotaVersata: [
     {
       id: 1,
@@ -364,6 +529,45 @@ export const tools = {
     },
   ],
 
+  SelectListFontSize: [
+    {
+      label: '[Nessuna]',
+      value: '',
+    },
+    {
+      label: 'text-h1',
+      value: 'text-h1',
+    },
+    {
+      label: 'text-h2',
+      value: 'text-h2',
+    },
+    {
+      label: 'text-h3',
+      value: 'text-h3',
+    },
+    {
+      label: 'text-h4',
+      value: 'text-h4',
+    },
+    {
+      label: 'text-h5',
+      value: 'text-h5',
+    },
+    {
+      label: 'text-h6',
+      value: 'text-h6',
+    },
+    {
+      label: 'text-h7',
+      value: 'text-h7',
+    },
+    {
+      label: 'text-h8',
+      value: 'text-h8',
+    },
+  ],
+
   SelectListFit: [
     {
       label: '[Nessuna]',
@@ -2195,7 +2399,7 @@ export const tools = {
         mylang = 'it'
 
         // Metti come default
-        userStore.setlang($router, mylang)
+        userStore.setlang($q, $router, mylang)
       }
     }
 
@@ -2205,7 +2409,7 @@ export const tools = {
     }
 
     if (toolsext.getLocale(true) === '') {
-      userStore.setlang($router, mylang)
+      userStore.setlang($q, $router, mylang)
     }
 
     // console.log('mylang calc : ', mylang)
@@ -3162,17 +3366,18 @@ export const tools = {
       return mylang
   },
 
-  setLangAtt($router: Router, mylang: string) {
+  setLangAtt($q: any, $router: Router, mylang: string) {
     console.log('setLangAtt =', mylang)
     // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
 
-    const $q = useQuasar()
     const globalStore = useGlobalStore()
 
     // dynamic import, so loading on demand only
     import(`quasar/lang/${this.getlangforQuasar(mylang)}`).then((lang) => {
       console.log('   Import dinamically lang =', lang)
-      $q.lang.set(this.getlangforQuasar(lang.default))
+      if ($q.lang)
+        $q.lang.set(this.getlangforQuasar(lang.default.isoName))
+
       import('../../statics/i18n').then(() => {
         console.log('   *** MY LANG DOPO=', $q.lang.isoName)
       })
@@ -3202,7 +3407,7 @@ export const tools = {
     if (toolsext.getLocale() !== '') {
       // mythisq.$i18n.locale = toolsext.getLocale()
     } else {
-      userStore.setlang($router, mythisq.lang.getLocale())
+      userStore.setlang(mythisq, $router, mythisq.lang.getLocale())
     }     // Set Lang
 
     if (process.env.DEBUG) {
@@ -3541,7 +3746,7 @@ export const tools = {
     return parseFloat(myval)
   },
 
-  getCookie(mytok: any, def?: any, convertint: any = false) {
+  getCookie(mytok: any, def?: any, convertint: any = false, convertbool: any = false) {
     const ris = Cookies.get(mytok)
     // console.log('getCookie', mytok, ris)
     if (ris === 'null')
@@ -3554,6 +3759,10 @@ export const tools = {
       return parseInt(ris, 10)
     }
 
+    if (convertbool && !!ris) {
+      return ris ? true : false
+    }
+
     // if (typeof(ris) == 'number') {
     //   return this.convstrToNum(ris)
     // }

src/store/Modules/toolsext.ts

@@ -138,11 +138,9 @@ export const toolsext = {
     if (mylang === 'enUs') return 'en-us'
     return mylang
   },
-  setLangAtt($router: Router, mylang: string) {
+  setLangAtt($q: any, $router: Router, mylang: string) {
     const globalStore = useGlobalStore()
 
-    const $q = useQuasar()
-
     console.log('setLangAtt =', mylang)
     // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
 
@@ -150,7 +148,7 @@ export const toolsext = {
     import(`quasar/lang/${this.getlangforQuasar(mylang)}`).then((lang) => {
       console.log('   Import dinamically lang =', lang)
 
-      $q.lang.set(this.getlangforQuasar(lang.default))
+      $q.lang.set(this.getlangforQuasar(lang.default.isoName))
       import('../../statics/i18n').then(() => {
         console.log('   *** MY LANG DOPO=', $q.lang.isoName)
       })
@@ -274,7 +272,7 @@ export const toolsext = {
         mylang = 'it'
 
         // Metti come default
-        userStore.setlang($router, mylang)
+        userStore.setlang($q, $router, mylang)
       }
     }
 
@@ -284,7 +282,7 @@ export const toolsext = {
     }
 
     if (this.getLocale(true) === '') {
-      userStore.setlang($router, mylang)
+      userStore.setlang($q, $router, mylang)
     }
 
     // console.log('mylang calc : ', mylang)

src/store/UserStore.ts

@@ -694,10 +694,10 @@ export const useUserStore = defineStore('UserStore', {
       this.usersList = [...usersList]
     },
 
-    setlang($router: Router, newstr: string) {
+    setlang($q: any, $router: Router, newstr: string) {
       console.log('SETLANG', newstr)
       this.lang = newstr
-      toolsext.setLangAtt($router, newstr)
+      toolsext.setLangAtt($q, $router, newstr)
       tools.localStSetItem(toolsext.localStorage.lang, this.lang)
     },
 

src/store/globalStore.ts

@@ -1754,6 +1754,14 @@ export const useGlobalStore = defineStore('GlobalStore', {
 
       mydata.data = myelem
 
+      // Save in Memory
+      for (let i = 0; i < this.myelems.length; i++) {
+        if (this.myelems[i]._id === myelem._id) {
+          this.myelems[i] = myelem;
+          break;
+        }
+      }
+
       return await this.saveTable(mydata)
         .then((ris) => {
           if (ris) {