Web Editor home made

.gitignore

@@ -40,3 +40,4 @@ key.pem
 _ALL_SITES/kolibrilab.it/.env.development
 _ALL_SITES/kolibrilab.it/.env.test
 _ALL_SITES/arcadei.it/.env.development
+public/upload/

.vscode/launch.json

@@ -19,6 +19,12 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "npm run spanorefresh",
+      "name": "SPA no Refresh",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "type": "node",
       "request": "launch",

_ALL_SITES/kolibrilab.it/root_spec/home_kolibrilab/home_kolibrilab.scss

@@ -1,452 +0,0 @@
-
-.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;
-  }
-
-  .carousel_img_3 {
-    //background-image: url(../../public/images/cibo_sano.jpg);
-    background-size: 620px 620px !important;
-    background-position: 50% top !important;
-    background-repeat: no-repeat !important;
-  }
-
-}
-
-.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;
-}

_ALL_SITES/kolibrilab.it/root_spec/home_kolibrilab/home_kolibrilab.ts

@@ -1,54 +0,0 @@
-import { defineComponent, ref, onMounted, watch, computed } from 'vue'
-
-import { useGlobalStore } from '@store/globalStore'
-import { useRoute } from 'vue-router'
-import { useUserStore } from '@store/UserStore'
-
-import { Logo } from '@/components/logo'
-
-import { LandingFooter } from '@/components/LandingFooter'
-import { CMyPage } from '@/components/CMyPage/index'
-
-import { tools } from '@src/store/Modules/tools'
-import { static_data } from '@src/db/static_data'
-import { toolsext } from '@src/store/Modules/toolsext'
-import { Screen } from 'quasar'
-import { CCardCarousel, CEventsCalendar, CMyElem, COpenStreetMap } from '@components'
-import MixinBase from '@src/mixins/mixin-base'
-import { firstimagehome } from '@src/db/static_data'
-import MixinMetaTags from '@/mixins/mixin-metatags'
-
-export default defineComponent({
-  name: 'home_kolibrilab',
-  components: { Logo, LandingFooter, CMyPage, CMyElem },
-
-  setup() {
-    const userStore = useUserStore()
-    const globalStore = useGlobalStore()
-
-    const { setValDb, getValDb } = MixinBase()
-
-    function getheightgallery() {
-      if (tools.isMobile())
-        return '400px'
-      else
-        return '600px'
-    }
-
-    function created() {
-      //
-    }
-
-    created()
-
-    return {
-      tools,
-      toolsext,
-      static_data,
-      getheightgallery,
-      getValDb,
-      globalStore,
-    }
-  },
-})
-

_ALL_SITES/kolibrilab.it/root_spec/home_kolibrilab/home_kolibrilab.vue

@@ -1,18 +0,0 @@
-<template>
-    <q-page>
-        <CMyPage title="Home">
-          <span v-for="(myelem, ind) in globalStore.getMyElems('home')" :key="ind">
-            <CMyElem v-if="myelem.active" :myelem="myelem" path="home">
-
-            </CMyElem>
-          </span>
-        </CMyPage>
-    </q-page>
-</template>
-
-<script lang="ts" src="./home_kolibrilab.ts">
-</script>
-
-<style lang="scss" scoped>
-    @import './home_kolibrilab.scss';
-</style>

_ALL_SITES/riso.app/root_spec/home_kolibrilab/home_kolibrilab.ts

@@ -1,54 +0,0 @@
-import { defineComponent, ref, onMounted, watch, computed } from 'vue'
-
-import { useGlobalStore } from '@store/globalStore'
-import { useRoute } from 'vue-router'
-import { useUserStore } from '@store/UserStore'
-
-import { Logo } from '@/components/logo'
-
-import { LandingFooter } from '@/components/LandingFooter'
-import { CMyPage } from '@/components/CMyPage/index'
-
-import { tools } from '@src/store/Modules/tools'
-import { static_data } from '@src/db/static_data'
-import { toolsext } from '@src/store/Modules/toolsext'
-import { Screen } from 'quasar'
-import { CCardCarousel, CEventsCalendar, CMyElem, COpenStreetMap } from '@components'
-import MixinBase from '@src/mixins/mixin-base'
-import { firstimagehome } from '@src/db/static_data'
-import MixinMetaTags from '@/mixins/mixin-metatags'
-
-export default defineComponent({
-  name: 'home_kolibrilab',
-  components: { Logo, LandingFooter, CMyPage, CMyElem },
-
-  setup() {
-    const userStore = useUserStore()
-    const globalStore = useGlobalStore()
-
-    const { setValDb, getValDb } = MixinBase()
-
-    function getheightgallery() {
-      if (tools.isMobile())
-        return '400px'
-      else
-        return '600px'
-    }
-
-    function created() {
-      //
-    }
-
-    created()
-
-    return {
-      tools,
-      toolsext,
-      static_data,
-      getheightgallery,
-      getValDb,
-      globalStore,
-    }
-  },
-})
-

_ALL_SITES/riso.app/root_spec/home_kolibrilab/home_kolibrilab.vue

@@ -1,18 +0,0 @@
-<template>
-    <q-page>
-        <CMyPage title="Home">
-          <span v-for="(myelem, ind) in globalStore.myelems" :key="ind">
-            <CMyElem v-if="myelem.active" :myelem="myelem">
-
-            </CMyElem>
-          </span>
-        </CMyPage>
-    </q-page>
-</template>
-
-<script lang="ts" src="./home_kolibrilab.ts">
-</script>
-
-<style lang="scss" scoped>
-    @import './home_kolibrilab.scss';
-</style>

package.json

@@ -18,6 +18,7 @@
     "fix": "eslint --ext .ts,.vue --ignore-path .gitignore ./ --fix > file.out.txt",
     "pwa": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
     "spa": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m spa",
+    "spanorefresh": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m spa",
     "test": "echo \"No test specified\" && exit 0",
     "generate-sw": "workbox generateSW workbox-config.js"
   },

public/js/storage.js

@@ -105,7 +105,7 @@ let idbKeyval = (() => {
       });
       return req.result;
     },
-    async set(key, value) {
+    set(key, value) {
       let req;
       /*await withStore('readwrite', 'keyval', store => {
         req = store.put(value, key);

quasar.conf.js

@@ -149,6 +149,7 @@ module.exports = configure((ctx) => ({
     https: false,
     port: 8090,
     open: false, // opens browser window automatically
+    // vueDevtools: true,
   },
 
   // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

src/common/shared_vuejs.ts

@@ -1206,7 +1206,7 @@ export const shared_consts = {
     },
     {
       value: 35,
-      label: 'Immagine da Caricare',
+      label: 'Img da Caricare',
     },
     {
       value: 40,

src/components/CMyEditElem/CMyEditElem.ts

@@ -2,7 +2,7 @@ import {
   defineComponent, onMounted, PropType, ref, toRef, watch,
 } from 'vue'
 
-import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
+import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '../CImgTitle/index'
@@ -26,13 +26,15 @@ import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
 import { emitKeypressEvents } from 'readline'
 import { costanti } from '@costanti'
-
+import objectId from '@src/js/objectId'
 
 export default defineComponent({
   name: 'CMyEditElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+  components: {
+    CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize },
+    CSelectColor, CSelectFontSize
+  },
   emits: ['saveElem'],
   props: {
     myelem: {
@@ -87,13 +89,6 @@ export default defineComponent({
       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
@@ -165,7 +160,7 @@ export default defineComponent({
 
     }
 
-    function modifElem(value: any) {
+    function modifElem() {
       disableSave.value = false
       elemChanged.value = true
     }
@@ -198,8 +193,9 @@ export default defineComponent({
     function addNewCard() {
       if (!myel.value.listcards)
         myel.value.listcards = []
-      myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
+
-      modifElem(true)
+      myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '' })
+      modifElem()
     }
 
     function getClass() {
@@ -222,13 +218,37 @@ export default defineComponent({
         return false
     }
 
+    function delRecCard(idcard: string, myel: IMyElem) {
+      //
+      if (myel.listcards)
+        myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== idcard)
+
+    }
+
+    function saveCard(recpass: IMyCard, myval: any) {
+      if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
+        if (props.myelem.listcards) {
+          props.myelem.listcards.forEach((rec: IMyCard) => {
+            if (recpass._id === rec._id) {
+              rec.imagefile = myval
+            }
+          })
+        }
+      }
+      modifElem()
+    }
+
+    function updateElem(myvalue: any) {
+      myel.value = myvalue
+      modifElem()
+    }
+
     onMounted(mounted)
 
     return {
       tools,
       shared_consts,
       getArrDisciplines,
-      getheightgallery,
       slide,
       slide2,
       animare,
@@ -253,6 +273,9 @@ export default defineComponent({
       addNewCard,
       arrPages,
       costanti,
+      delRecCard,
+      saveCard,
+      updateElem,
     }
   },
 

src/components/CMyEditElem/CMyEditElem.vue

@@ -7,14 +7,9 @@
       (!myel.active ? ` clEditNotActive` : ``)
     "
   >
-    <div>
+    <div v-if="!!myel.type">
       <q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
-        <q-toggle
+        <q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
-          left-label="Attiva"
-          v-model="myel.active"
-          color="positive"
-          icon="fas fa-eye"
-        >
         </q-toggle>
         <!--<q-toggle v-if="tools.isManager()"
                 v-model="enableAdd"
@@ -74,7 +69,27 @@
         >
         </q-btn>
       </q-bar>
-      <div class="justify-center q-gutter-xs row">
+      <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 class="justify-center row q-ma-xs">
         <q-btn
           dense
           v-if="enableEdit && !disableSave"
@@ -171,6 +186,16 @@
         v-if="myel.type === shared_consts.ELEMTYPE.CARD"
         :class="myel.span ? '' : ''"
       >
+        <div class="row">
+          <q-input
+            label="Classe Card:"
+            @update:model-value="modifElem"
+            v-model="myel.class3"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
         <q-btn
           rounded
           dense
@@ -181,28 +206,48 @@
         >
         </q-btn>
         <div v-for="(rec, ind) in myel.listcards" :key="ind">
-          <div v-if="enableEdit" class="column">
+          <div v-if="enableEdit" class="column bordered q-ma-xs">
+            <q-bar class="bg-primary text-white">
+              Card {{ ind + 1 }}
+              <q-space />
+              <q-btn
+                icon="fas fa-trash-alt"
+                color="negative"
+                dense
+                flat
+                size="sm"
+                @click="delRecCard(rec._id, myel)"
+              >
+              </q-btn>
+            </q-bar>
+
+            <CSelectImage
+                :title="tools.getTitleGall()"
+                :directory="tools.getDirectoryGall(myvalue, 'imgcards')"
+                :imgGall="[myvalue]"
+                :edit="true"
+                :canModify="true"
+                :isInModif="true"
+                @update:imgGall="updateElem"
+                @showandsave="Savedb">
+            </CSelectImage>
+
             <CMyFieldRec
-              title="Lista Immagini:"
+              title="Immagine:"
-              table="myelems"
+              table="imgcards"
-              :id="myel._id"
+              :id="rec._id"
-              :rec="myel"
+              :rec="rec"
-              field="listcards"
+              field="imagefile"
               @update:model-value="modifElem"
+              @save="saveCard"
               :canEdit="true"
               :canModify="true"
+              :nosaveToDb="true"
+              :path="myel.path"
+              :fieldtype="costanti.FieldType.imgcard"
             >
             </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
@@ -215,6 +260,17 @@
                 v-on:keyup.enter="saveElem"
               >
               </q-input>
+              <q-input
+                dense
+                style="min-width: 100px"
+                label="Style:"
+                class="fa-border"
+                @update:model-value="modifElem"
+                v-model="rec.style"
+                filled
+                v-on:keyup.enter="saveElem"
+              >
+              </q-input>
               <CSelectColor
                 v-if="enableEdit"
                 style="min-width: 100px"
@@ -375,30 +431,9 @@
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"
-            :type="costanti.FieldType.images"
+            :fieldtype="costanti.FieldType.image"
           >
           </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>
 
@@ -421,7 +456,7 @@
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"
-            :type="costanti.FieldType.images"
+            :fieldtype="costanti.FieldType.image"
           >
           </CMyFieldRec>
           <div class="row">

src/components/CMyEditor/CMyEditor.ts

@@ -16,7 +16,8 @@ export default defineComponent({
     },
     value: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     myclass: {
       type: String,

src/components/CMyElem/CMyElem.scss

@@ -462,6 +462,9 @@ body.mobile .landing:before {
   border: #11f609 solid 2px;
   cursor: pointer;
 }
+.selectedElem {
+  border: #200e96 solid 3px !important;
+}
 
 .align_center {
   text-align: center;

src/components/CMyElem/CMyElem.ts

@@ -28,15 +28,21 @@ import { useI18n } from '@/boot/i18n'
 
 export default defineComponent({
   name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+  components: {
+    CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize },
+    CSelectColor, CSelectFontSize
+  },
   emits: ['selElemClick'],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
       required: true,
     },
+    selElem: {
+      type: Object as PropType<IMyElem>,
+      required: false,
+    },
     path: {
       type: String,
       required: false,
@@ -157,7 +163,7 @@ export default defineComponent({
 
     }
 
-    function modifElem(value: any) {
+    function modifElem() {
       disableSave.value = false
     }
 
@@ -171,6 +177,7 @@ export default defineComponent({
     function clickOnElem() {
       if (props.editOn) {
         enableEdit.value = true
+        console.log('selElemClick', props.myelem)
         emit('selElemClick', props.myelem)
       }
     }
@@ -188,13 +195,21 @@ export default defineComponent({
       if (props.myelem.class2)
         mycl += ' ' + props.myelem.class2
 
+      if (props.selElem && props.editOn) {
+        if (props.myelem._id === props.selElem._id)
+          mycl += ' selectedElem'
+      }
+
       return mycl
     }
 
     function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
       if (elem) {
         if (elem.type === shared_consts.ELEMTYPE.CARD) {
-          return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
+          if (reccard?.imagefile)
+            return 'upload/pages/' + elem.path + '/' + reccard.imagefile
+          else
+            return ''
         } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
           return 'upload/pages/' + elem.path + '/' + elem.container
         } else {

src/components/CMyElem/CMyElem.vue

@@ -25,8 +25,8 @@
           @click="clickOnElem"
         >
           <div v-for="(rec, ind) in myel.listcards" :key="ind" >
-            <q-card class="my-card center_img" flat bordered>
+            <q-card :class="`my-card center_img bordered ` + myel.class3"
-              rec: {{rec}}
+              :style="rec.style">
               <q-img :src="getImgFileByElem(myel, rec)" />
               <q-card-section>
                 <div :class="` ` + rec.size" :style="`color: ` + rec.color">
@@ -221,7 +221,7 @@
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
         <section
-          class="maxwidth padding_gallery bg-white text-grey-10 text-center"
+          class="padding_gallery bg-white text-grey-10 text-center"
         >
           <div
             :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -236,14 +236,15 @@
               :fit="myel.fit"
               :thumbnails="myel.parambool2"
               infinite
-              :height="myel.height ? myel.height.toString() : 600"
+              :height="myel.heightimg ? myel.heightimg.toString() : tools.getheightgallery()"
             >
+
               <q-carousel-slide
                 v-for="(rec, index) in myel.list"
                 :key="index"
                 :name="index"
                 :img-src="
-                  getsrcbyimg(`upload/pages/` + path + `/` + rec.imagefile)
+                  getsrcbyimg(`upload/pages/` + myel.path + `/` + rec.imagefile)
                 "
                 :alt="rec.alt"
                 class="carousel_slide"

src/components/CMyFieldDb/CMyFieldDb.ts

@@ -96,7 +96,7 @@ export default defineComponent({
       default: null,
     },
     mycol: {
-      type: Object as PropType<IColGridTable>,
+      type: Object as PropType<IColGridTable> | undefined,
       required: false,
       default: () => {
         return { name: '' }
@@ -142,16 +142,24 @@ export default defineComponent({
     }
 
     function withBorder() {
+      if (col.value)
         return col.value.fieldtype !== costanti.FieldType.onlydate && col.value.fieldtype !== costanti.FieldType.date
+      else
+        return false
     }
 
     function mounted() {
       if (props.rec) {
         row.value = props.rec
       }
-      if (props.mycol.name !== '') {
+      if (props.mycol && props.mycol.name !== '') {
         col.value = props.mycol
+      } else {
+        console.log('Tab = ', props.table, 'key=', props.mykey)
+        col.value = fieldsTable.getColByTable(props.table, props.mykey)
+        console.log('MYCOL = ', col.value)
       }
+
     }
 
     onMounted(mounted)

src/components/CMyFieldDb/CMyFieldDb.vue

@@ -23,6 +23,7 @@
       <div :class="` q-ma-sm q-pa-sm col-grow popupedit `" :style="withBorder() ? `` : ``">
 
         <CMyPopupEdit
+          :fielddb="true"
           v-bind="$attrs"
           :rec="rec"
           :isrec="!!rec"
@@ -43,7 +44,7 @@
           :canEdit="true"
           :id="id"
           :idmain="idmain"
-          :mycol="col"
+          :mycol="col ? col : {}"
           :tablesel="tablesel"
           :pickup="pickup"
           v-model:row="row"

src/components/CMyFieldRec/CMyFieldRec.ts

@@ -12,6 +12,7 @@ import MixinBase from '@/mixins/mixin-base'
 
 export default defineComponent({
   name: 'CMyFieldRec',
+  emits: ['save'],
   props: {
     table: {
       type: String,
@@ -95,7 +96,12 @@ export default defineComponent({
       tupe: String,
       required: false,
       default: '',
-    }
+    },
+    nosaveToDb: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   components: { CMyPopupEdit },
   setup(props, { emit }) {
@@ -143,15 +149,23 @@ export default defineComponent({
           mysubkey.value = arrk[1]
         if (arrk.length > 2)
           mysubsubkey.value = arrk[2]
+        else
+          mykey.value = props.field
       }
 
     }
 
     function showandsel(row: any, col: any, newval: any, valinitial: any) {
-      console.log('showandsel CMyFieldDb', row, col, newval)
+      // console.log('showandsel CMyFieldDb', row, col, newval)
+      emit('save', props.rec, newval)
+
+      if (props.nosaveToDb)
+        return
+
 
       if (newval !== valinitial)
         setValDb($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
+
     }
 
     function withBorder() {

src/components/CMyFieldRec/CMyFieldRec.vue

@@ -18,6 +18,7 @@
       </q-field>
     </div>
 
+
     <div :class="` col-grow clpopupVisuCard ` + getclass()" :style="withBorder() ? `` : ``">
       <CMyPopupEdit
         v-bind="$attrs"
@@ -43,6 +44,7 @@
         :pickup="pickup"
         v-model:row="rec"
         minuteinterval="1"
+        :nosaveToDb="nosaveToDb"
         @showandsave="showandsel"
       >
 

src/components/CMyPage/CMyPage.ts

@@ -54,12 +54,12 @@ export default defineComponent({
 
     const load = async (): Promise<void> => {
       // console.log('load', mypath.value)
-      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value, 'cmypage')
     }
 
     watch(() => props.mypath, async (to: string, from: string) =>  {
-      // console.log('load', mypath.value)
+      console.log('load', mypath.value, to, from )
-      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value, 'cmypage watch')
     })
 
     onMounted(load)

src/components/CMyPageElem/CMyPageElem.ts

@@ -15,6 +15,7 @@ import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
 import { shared_consts } from '@/common/shared_vuejs'
+import objectId from '@src/js/objectId'
 
 export default defineComponent({
   name: 'CMyPageElem',
@@ -59,13 +60,14 @@ export default defineComponent({
     const $q = useQuasar()
 
     const { t } = useI18n()
+    const globalStore = useGlobalStore()
 
     const editOn = ref(false)
     const addOn = ref(false)
-    const selElem = ref({} as IMyElem)
+    const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
-    const myelemVoid = ref({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
 
-    const globalStore = useGlobalStore()
+
+    const selElem = ref(globalStore.selElem)
 
     const myelems = computed(() => {
       if (mypathin.value)
@@ -74,37 +76,52 @@ export default defineComponent({
         return null
     })
 
-
+    function load() {
-    const load = async (): Promise<void> => {
       // console.log('load', mypathin.value)
-      if (mypathin.value !== '') rec.value = await globalStore.loadPage('/' + mypathin.value)
+      if (mypathin.value !== '') {
-
+        globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
-      editOn.value = tools.getCookie('EDIT_' + mypathin.value) === '-1' ? true : false
+          rec.value = ris
-      if (mypathin.value === 'home')
+        })
-        editOn.value = false
-      console.log('getcookie: ',  editOn.value, mypathin.value)
       }
 
-    watch(() => props.mypath, async (to: string, from: string) =>  {
+      if (tools.isManager()) {
+        editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
+        console.log('getcookie: ', editOn.value, mypathin.value)
+      }
+    }
+
+    watch(() => props.mypath, (to: string, from: string) => {
       console.log('... load', mypathin.value, props.mypath)
-      await load()
+      selElem.value = {}
+      load()
     })
 
+    watch(
+      () => editOn.value,
+      () => {
+        if (!editOn.value) {
+          selElem.value = {}
+        }
+      })
 
     function selElemClick(myelem: IMyElem) {
+      console.log('mypageelem selElemClick', myelem)
       selElem.value = myelem
     }
 
+    function mounted() {
+      load()
+    }
+
     function saveElem(myelem: IMyElem) {
       //
     }
 
-    function changeVisuDrawer() {
+    function changeVisuDrawer(path: string, edit: boolean) {
-      console.log('changeVisuDrawer')
+      globalStore.changeVisuDrawer(path, edit)
-      tools.setCookie('EDIT_' + mypathin.value, editOn.value ? '-1' : '0')
     }
 
-    onMounted(load)
+    onMounted(mounted)
 
     return {
       rec, myelems,

src/components/CMyPageElem/CMyPageElem.vue

@@ -5,18 +5,18 @@
         v-if="tools.isManager()"
         v-model="editOn"
         color="green"
-        @update:model-value="changeVisuDrawer"
+        @update:model-value="changeVisuDrawer(mypathin, editOn)"
         icon="fas fa-pencil-alt"
       >
       </q-toggle>
       <q-drawer
         v-model="editOn"
         side="right"
-        show-if-above
         :width="400"
         :breakpoint="700"
         elevated
       >
+        <q-scroll-area class="fit">
           <q-bar dense class="bg-primary text-white">
             <q-toolbar-title> Editor </q-toolbar-title>
             <q-btn
@@ -24,16 +24,18 @@
               round
               color="white"
               icon="close"
-            @click="editOn = false; changeVisuDrawer()"
+              @click="
+                editOn = false;
+              "
             ></q-btn>
           </q-bar>
           <CMyEditElem
             :myelem="selElem"
             :editOn="true"
             :path="rec.path"
-          @saveElem="saveElem"
           >
           </CMyEditElem>
+        </q-scroll-area>
       </q-drawer>
 
       <div class="q-ma-sm q-gutter-sm q-pa-xs">
@@ -75,6 +77,7 @@
             :editOn="editOn"
             :addOn="addOn"
             :path="rec.path"
+            :selElem="selElem"
             @selElemClick="selElemClick"
           >
           </CMyElem>
@@ -85,7 +88,9 @@
             :myelem="myelemVoid"
             :editOn="editOn"
             :addOn="addOn"
+            :selElem="selElem"
             :path="rec.path"
+            @selElemClick="selElemClick"
           >
           </CMyElem>
         </div>

src/components/CMyPopupEdit/CMyPopupEdit.ts

@@ -13,6 +13,7 @@ import { CMySelect } from '../CMySelect'
 import { CCurrencyValue } from '../CCurrencyValue'
 import { CMyEditor } from '../CMyEditor'
 import { CGallery } from '../CGallery'
+import { CSelectImage } from '../CSelectImage'
 import { CAccomodation } from '../CAccomodation'
 import { tools } from '@store/Modules/tools'
 import { costanti } from '@costanti'
@@ -46,13 +47,18 @@ export default defineComponent({
       required: false,
       default: null,
     },
+    fielddb: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isrec: {
       type: Boolean,
       required: false,
       default: false,
     },
     mycol: {
-      type: Object as PropType<IColGridTable>,
+      type: Object as PropType<IColGridTable | undefined>,
       required: true,
     },
     canEdit: {
@@ -185,9 +191,19 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    nosaveToDb: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery,
-    CCurrencyValue, CLabel, CAccomodation },
+    CCurrencyValue, CLabel, CAccomodation, CSelectImage },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -203,14 +219,14 @@ export default defineComponent({
 
     const myImgGall = ref([{}] as IImgGallery[])
 
-    const col = ref({
+    const col = ref(<IColGridTable>{
       name: 'test',
       fieldtype: 0,
       showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
       visible: true,
       maxlength: props.mycol ? props.mycol.maxlength : 0,
       minlength: props.mycol ? props.mycol.minlength : undefined
-    } as IColGridTable)
+    })
 
     const { setValDb, getValDb } = MixinBase()
     const { getMyUsername } = MixinUsers()
@@ -227,24 +243,11 @@ export default defineComponent({
     })
 
     function crea() {
-      // console.log('crea', isFieldDb())
+      // console.log('crea', isFieldDb(), 'props.mycol', props.mycol)
 
-      if (props.isrec) {
+      if (props.mycol && props.mycol.name) {
         col.value = props.mycol
-
       } else {
-        if (isFieldDb()) {
-          // mykey -> field
-          // mysubkey -> subfield
-          // table -> table
-          // serv -> serv
-          // id -> id
-          // idmain -> idmain
-
-          // console.table(props)
-
-          myvalue.value = getValDb(props.field, props.serv, '', props.table, props.subfield, props.id, props.idmain, props.indrec, props.mysubsubkey, props.specialField)
-          // console.log('myvalue.value', myvalue.value)
         col.value.jointable = props.jointable
         if (props.filter)
           col.value.filter = props.filter
@@ -258,10 +261,23 @@ export default defineComponent({
             // order: 1,
             alt: 'img',
           }]
+        } else if (props.type === costanti.FieldType.imgcard) {
+          myImgGall.value = [myvalue.value]
         }
 
-          // console.log('col', col.value);
+        console.log('* col', col.value);
+      }
+
+      if (props.type) {
+        col.value.fieldtype = props.type
+      }
+
+      if (props.isrec) {
       } else {
+        if (isFieldDb()) {
+          myvalue.value = getValDb(props.field, props.serv, '', props.table, props.subfield, props.id, props.idmain, props.indrec, props.mysubsubkey, props.specialField)
+        } else {
+          if (props.mycol && props.mycol.name)
             col.value = { ...props.mycol }
         }
       }
@@ -275,7 +291,8 @@ export default defineComponent({
 
 
     function isFieldDb() {
-      return props.type !== 0
+      // return props.type !== 0
+      return props.fielddb
     }
 
     function isviewfield() {
@@ -404,6 +421,8 @@ export default defineComponent({
       // console.log('myvalue.value', myvalue.value)
       myvalueprec.value = myvalue.value
 
+      crea()
+
       // console.log('myvalueprec', myvalueprec)
     }
 
@@ -510,6 +529,9 @@ export default defineComponent({
       if (col.value.fieldtype === costanti.FieldType.image) {
         console.log('newVal.imagefile', newVal)
         myvalue.value = newVal
+      } else if (col.value.fieldtype === costanti.FieldType.imgcard) {
+        console.log('newVal.imagefile', newVal)
+        myvalue.value = newVal
       }
 
       if (col.value.fieldtype === costanti.FieldType.listobj) {
@@ -660,52 +682,6 @@ export default defineComponent({
       }
     }
 
-    function getTitleGall() {
-      if (fieldsTable.tableForUsers.includes(props.table)) {
-        return 'Profilo'
-      } else {
-        return fieldsTable.getTitleImgByTable(props.table)
-      }
-    }
-
-    function getDirectoryGall() {
-      console.log('getDirectoryGall', myrow.value)
-
-      let ris = ''
-      try {
-        let username = myrow.value.hasOwnProperty('username') ? myrow.value['username'] : ''
-        const userId = myrow.value.hasOwnProperty('userId') ? myrow.value['userId'] : ''
-
-        if (username === '') {
-          if (userId === userStore.my._id)
-            username = userStore.my.username
-        }
-        if (username === '') {
-          username = userStore.my.username
-        }
-        if (fieldsTable.tableForUsers.includes(props.table)) {
-          ris = 'profile/' + username + '/' + props.table
-        } else if (props.table === 'users') {
-          ris = 'profile/' + userStore.my.username
-        } else if (props.table === 'mygroups') {
-          if (myrow.value.hasOwnProperty('groupname'))
-            ris = 'mygroups/' + myrow.value['groupname']
-        } else if (props.table === 'circuits') {
-          if (myrow.value.hasOwnProperty('path'))
-            ris = 'circuits/' + myrow.value['path']
-        } else if (!!myrow.value && !!myrow.value.directory) {
-          ris = myrow.value.directory
-        } else if (props.table === 'myelems') {
-          ris = 'pages/' + myrow.value.path
-        } else {
-          ris = props.table
-        }
-      } catch (e) {
-        console.error('err getDirectoryGall', e)
-      }
-      console.log('getDirectoryGall', ris)
-      return ris
-    }
 
     function uploaded(info: any) {
 
@@ -726,6 +702,7 @@ export default defineComponent({
     function noPopupeditByCol(mycol: IColGridTable) {
       return (mycol.fieldtype !== costanti.FieldType.html
         && mycol.fieldtype !== costanti.FieldType.image
+        && mycol.fieldtype !== costanti.FieldType.imgcard
         && mycol.fieldtype !== costanti.FieldType.listimages
         && mycol.fieldtype !== costanti.FieldType.listobj
         && mycol.fieldtype !== costanti.FieldType.number
@@ -749,7 +726,7 @@ export default defineComponent({
 
     onBeforeMount(mounted)
 
-    crea()
+
 
     return {
       myvalue,
@@ -778,8 +755,6 @@ export default defineComponent({
       onInput,
       globalStore,
       userStore,
-      getTitleGall,
-      getDirectoryGall,
       removephoto,
       isFieldDb,
       col,

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -79,6 +79,7 @@
               <q-input
                 v-bind="$attrs"
                 v-model="myvalue"
+
                 :autogrow="col.fieldtype !== costanti.FieldType.crypted"
                 :style="$q.screen.lt.sm ? 'min-width: 300px' : ''"
                 counter
@@ -173,8 +174,8 @@
           <div v-else-if="col.fieldtype === costanti.FieldType.listimages" style="text-align: center;">
             <CGallery
               :imagebak="col.showpicprofile_ifnotset ? ((userStore.getImgByProfile(row, true) === '') ? costanti.NESSUN_IMMAGINE : userStore.getImgByProfile(row, true)) : ''"
-              :title="getTitleGall()"
+              :title="tools.getTitleGall()"
-              :directory="getDirectoryGall()"
+              :directory="tools.getDirectoryGall(myrow, table, path)"
               :imgGall="myvalue"
               :isInModif="isInModif"
               :edit="isviewfield() && isInModif"
@@ -196,13 +197,13 @@
               {{ $t('reg.photo') }}
               <CGallery
                 :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
-                :title="getTitleGall()"
+                :title="tools.getTitleGall()"
-                :directory="getDirectoryGall()"
+                :directory="tools.getDirectoryGall()"
                 :imgGall="[{ imagefile: myvalue }]"
                 :edit="isviewfield()"
                 :canModify="canModify"
                 :isInModif="isInModif"
-                :single="isFieldDb()"
+                :single="true"
                 @update:imgGall="changevalRec"
                 @showandsave="Savedb">
               </CGallery>
@@ -232,6 +233,47 @@
 
             </div>
           </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.imgcard">
+            <div v-if="canEdit">
+              {{ $t('reg.photo') }}
+              <CSelectImage
+                v-bind="$attrs"
+                :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
+                :title="tools.getTitleGall()"
+                :directory="tools.getDirectoryGall()"
+                :imgGall="[myvalue]"
+                :edit="isviewfield()"
+                :canModify="canModify"
+                :isInModif="isInModif"
+                @update:imgGall="changevalRec"
+                @showandsave="Savedb">
+              </CSelectImage>
+            </div>
+            <div v-else>
+              <div v-if="myvalue" class="text-center">
+                <q-img
+                  :src="myvalue"
+                  class="text-center"
+                  style="height: 100px; width: 100px;"
+                  alt="foto">
+                </q-img>
+              </div>
+              <div v-else class="text-center">
+                <q-img
+                  :src="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : 'images/noimg-user.svg'"
+                  class="text-center"
+                  style="height: 100px; width: 100px;"
+                  alt="nessuna immagine">
+                </q-img>
+              </div>
+              <q-btn
+                v-if="myvalue"
+                label="Rimuovi Foto"
+                color="blue" icon="fas fa-trash-alt" size="sm"
+                @click="removephoto"></q-btn>
+
+            </div>
+          </div>
           <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
             <div v-if="isInModif" class="justify-center q-gutter-sm clgutter q-mt-sm">
               <CMySelect
@@ -604,6 +646,7 @@
           <div v-else>
             <span v-html="visuValByType(myvalue, col, row)"></span>
           </div>
+
           <q-popup-edit
             v-if="(!isInModif && canEdit && noPopupeditByCol(col))"
             v-model="myvalue"

src/components/CSelectColor/CSelectColor.ts

@@ -11,7 +11,8 @@ export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     title: {
       type: String,

src/components/CSelectFontSize/CSelectFontSize.ts

@@ -11,7 +11,8 @@ export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     title: {
       type: String,

src/components/CSelectImage/CSelectImage.scss

@@ -0,0 +1,65 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-gallery {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-gallery {
+    font-size: 1rem;
+  }
+}
+
+.myimg {
+  border-radius: 10px !important;
+  height: 200px;
+  cursor: pointer;
+}
+
+.myimg-modify {
+  cursor: grab;
+}
+
+
+.barwidth{
+  width: 250px !important;
+}
+
+
+.q-img {
+  &__image {
+    border-radius: 10px !important;
+  }
+}
+
+.my-card-gallery {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+  padding: 0.5rem 0.5rem;
+  height: 350px;
+  margin: auto;
+}
+
+.my-card-gallery-noModif {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+  padding: 1rem 1rem;
+  height: 220px;
+}
+
+
+
+.my-card-gallery-view {
+  width: 100px;
+  height: 100px;
+  padding: 0.25rem 0.25rem;
+  margin: auto;
+}

src/components/CSelectImage/CSelectImage.ts

@@ -0,0 +1,374 @@
+import { defineComponent, ref, PropType, watch, onMounted, computed } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useQuasar } from 'quasar'
+import { IGallery, IImgGallery } from 'model'
+import { CMyPage } from '@/components/CMyPage'
+import { tools } from '@store/Modules/tools'
+import { useGlobalStore } from '@store/globalStore'
+import { costanti } from '@costanti'
+
+export default defineComponent({
+  name: 'CSelectImage',
+  props: {
+    edit: {
+      type: Boolean,
+      required: true,
+    },
+    canModify: {
+      type: Boolean,
+      required: true,
+    },
+    isInModif: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    title: String,
+    directory: {
+      type: String,
+      required: true,
+    },
+    imagebak: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgGall: {
+      type: Object as PropType<IImgGallery[] | string | undefined | null>,
+      required: true,
+    },
+  },
+  emits: ['showandsave'],
+  components: { CMyPage },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+
+    const displayGall = ref(false)
+
+    const gallerylist = ref(<IImgGallery[]>[])
+    const maximizedToggle = ref(true)
+
+    const fullscreen = ref(false)
+    const fullscreensrc = ref('')
+
+
+    function isValid(myobj: any): boolean {
+      return (myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined')
+    }
+
+    const isListImgValid = computed(() => {
+      const arr = getlistimages()
+      if (arr && tools.isArray(arr)) {
+        return arr.length > 0
+      } else {
+        return !!arr
+      }
+    })
+
+    watch(() => props.imgGall, (newval, oldval) => {
+      updateArray()
+    })
+
+    function updateArray() {
+      // console.log('created cgallery')
+      // @ts-ignore
+      let myarr: any = props.imgGall
+      gallerylist.value = []
+      if (Array.isArray(myarr)) {
+        myarr.forEach((imgfile: string) => {
+          if (imgfile) {
+            gallerylist.value.push({ imagefile: imgfile })
+          }
+        })
+      }
+    }
+
+    function created() {
+      updateArray()
+    }
+
+
+    function showandsave(value: any) {
+      console.log('EMIT: showandsave')
+      emit('showandsave', value)
+    }
+
+    function getnumimages() {
+      if (gallerylist.value)
+        return gallerylist.value.length
+      else
+        return 0
+    }
+
+    function getlistimages() {
+      if (gallerylist.value)
+        // return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
+        return gallerylist.value
+      else
+        return null
+    }
+
+    function onDragStart(e: any) {
+      console.log('onDragStart')
+      e.dataTransfer.setData('text', e.target.id)
+      e.dataTransfer.dropEffect = 'move'
+    }
+
+    function onDragEnter(e: any) {
+      if (props.canModify) {
+        // don't drop on other draggables
+        if (e.target.draggable !== true) {
+          e.target.classList.add('drag-enter')
+        }
+      }
+    }
+
+    function onDragLeave(e: any) {
+      if (props.canModify) {
+        e.target.classList.remove('drag-enter')
+      }
+    }
+
+    function onDragOver(e: any) {
+      if (props.canModify) {
+        e.preventDefault()
+      }
+    }
+
+    function onDrop(e: any) {
+      if (props.canModify) {
+        console.log('onDrop', e)
+        e.preventDefault()
+
+        // don't drop on other draggables
+        if (e.target.draggable === true) {
+          return
+        }
+
+        if (gallerylist.value) {
+
+          const draggedId = e.dataTransfer.getData('text')
+          let dragout = ''
+          try {
+            dragout = e.target.parentNode.parentNode.parentNode.id
+          } catch (err) {
+            dragout = ''
+          }
+          const draggedEl = document.getElementById(draggedId)
+          console.log('draggedId', draggedId, 'draggedEl', draggedEl)
+          console.log('dragout', dragout)
+
+          // check if original parent node
+          if (draggedEl) {
+            if (draggedEl.parentNode === e.target) {
+              e.target.classList.remove('drag-enter')
+              return
+            }
+          }
+
+          const myindexIn = gallerylist.value.findIndex((rec: any) => rec._id === draggedId)
+          const myrecIn: IImgGallery = gallerylist.value[myindexIn]
+
+          let myrecOut: IImgGallery
+          const myindexout = gallerylist.value.findIndex((rec: any) => rec._id === dragout)
+          myrecOut = gallerylist.value[myindexout]
+
+          if (myindexIn === myindexout)
+            return
+
+
+          tools.array_move(gallerylist.value, myindexIn, myindexout)
+
+          // make the exchange
+          // draggedEl.parentNode.removeChild(draggedEl)
+          // e.target.appendChild(draggedEl)
+          e.target.classList.remove('drag-enter')
+
+          save()
+        }
+      }
+    }
+
+    function getclass() {
+      return (props.edit || displayGall.value) ? (props.isInModif ? 'my-card-gallery' : 'my-card-gallery-noModif') : 'my-card-gallery-view' + ' text-center'
+    }
+
+    function getclimg() {
+      let mycl = (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
+      if (props.canModify && props.edit)
+        mycl = mycl + ' myimg-modify'
+      return mycl
+    }
+
+    /*function getlastord() {
+      if (gallerylist.value) {
+        let myord = 0
+        for (const file of gallerylist.value) {
+          if (file.order! > myord)
+            myord = file.order!
+        }
+
+        return myord + 10
+      }
+    }*/
+
+    function uploaded(info: any) {
+      console.log('uploaded', info)
+      if (gallerylist.value) {
+        for (const file of info.files) {
+          gallerylist.value.push({ imagefile: file.name })
+        }
+
+        console.log('gallerylist', gallerylist.value)
+      }
+    }
+
+    function apri() {
+      displayGall.value = true
+    }
+
+    function deleted(rec: any) {
+      console.log('deleted', rec.imagefile)
+      // console.table(mylistimages)
+
+      if (gallerylist.value) {
+        const index = gallerylist.value.findIndex((elem: any) => elem.imagefile === rec.imagefile)
+        if (index > -1) {
+          gallerylist.value.splice(index, 1)
+        }
+
+        // mylistimages = mylistimages.pop((elem) => elem.imagefile !== rec.imagefile)
+
+        // console.table(mylistimages)
+
+      }
+    }
+
+    function getfullname(rec: any) {
+      if (rec) {
+        return costanti.DIR_UPLOAD + props.directory + '/' + rec.imagefile
+      } else {
+        return props.imagebak
+      }
+
+    }
+
+    function copytoclipboard(rec: any) {
+      const filename = getfullname(rec)
+      tools.copyStringToClipboard($q, filename, true)
+    }
+
+    function deleteFile(rec: any) {
+      console.log('deleteFile....')
+      const filename = getfullname(rec)
+      const filenamerel = filename.replace(/^.*[\\\/]/, '')
+
+      $q.dialog({
+        message: 'Eliminare il file ' + filenamerel + '?',
+        html: true,
+        ok: {
+          label: 'Elimina',
+          push: true,
+        },
+        title: filenamerel,
+        cancel: true,
+        persistent: false,
+      }).onOk(async () => {
+
+        // Delete File on server:
+        const ris = await globalStore.DeleteFile({ filename })
+        // console.log('ris', ris)
+        if (ris)
+          deleted(rec)
+      })
+    }
+
+    function save() {
+      console.log('CGallery save', gallerylist.value)
+      if (gallerylist.value.length > 0) {
+        emit('showandsave', gallerylist.value[0].imagefile)
+      } else {
+        emit('showandsave', '')
+      }
+    }
+
+    function close() {
+      return ''
+    }
+
+    function getsrcimg(imgfile: any) {
+
+      if (!imgfile.imagefile) {
+        return 'images/noimg.png';
+      }
+      if (imgfile) {
+        if (tools.getextfile(imgfile.imagefile) === 'pdf')
+          return 'images/images/pdf.jpg'
+        else
+          return costanti.DIR_UPLOAD + props.directory + '/' + imgfile.imagefile
+      } else {
+        return 'images/noimg.png';
+      }
+    }
+
+    function getParamDir() {
+      return tools.escapeslash(props.directory)
+    }
+
+    function getUrl() {
+      const myurl = tools.geturlupload() + getParamDir()
+      console.log('myurl', myurl)
+      return myurl
+    }
+
+    function ImgFullScreen(mygallery: IImgGallery) {
+      fullscreen.value = true
+      fullscreensrc.value = getfullname(mygallery)
+    }
+
+    function onRejected(rejectedEntries: any) {
+      // Notify plugin needs to be installed
+      // https://quasar.dev/quasar-plugins/notify#Installation
+      console.log('rejectedEntries', rejectedEntries)
+      $q.notify({
+        type: 'negative',
+        message: 'La Dimensione massima dell\'immagine è di 2 MB'
+      })
+    }
+    onMounted(created)
+
+    return {
+      getlistimages,
+      onDragStart,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      getclass,
+      getclimg,
+      copytoclipboard,
+      deleteFile,
+      getsrcimg,
+      tools,
+      uploaded,
+      gallerylist,
+      getnumimages,
+      apri,
+      displayGall,
+      save,
+      maximizedToggle,
+      getUrl,
+      close,
+      ImgFullScreen,
+      fullscreen,
+      fullscreensrc,
+      onRejected,
+      isListImgValid,
+      costanti,
+    }
+  }
+})

src/components/CSelectImage/CSelectImage.vue

@@ -0,0 +1,289 @@
+<template>
+  <!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
+
+  <div v-if="!edit">
+    <div class="q-pa-xs">
+      <q-card v-if="isListImgValid" :class="getclass()" @click="apri">
+        <div v-for="(imgfile, index) in getlistimages()" :key="index">
+          <div v-if="index === 0">
+            <q-img
+              :src="getsrcimg(imgfile)" :class="getclimg()">
+              <div v-if="getnumimages() > 1" class="absolute-bottom text-shadow no-padding">
+                ({{ getnumimages() }})
+              </div>
+            </q-img>
+
+          </div>
+        </div>
+      </q-card>
+      <div v-else-if="!isInModif && !isListImgValid && imagebak">
+
+        <q-card v-if="imagebak !== costanti.NESSUN_IMMAGINE" :class="getclass()" @click="ImgFullScreen(imgfile)">
+          <q-img
+            :src="imagebak" :class="getclimg()">
+          </q-img>
+        </q-card>
+
+      </div>
+      <div v-else>
+        <q-card :class="getclass()" @click="apri">
+          <q-img
+            src="images/noimg.png" :class="getclimg()"
+            alt="no image">
+          </q-img>
+        </q-card>
+      </div>
+      <q-btn
+        v-if="isInModif"
+        color="primary" @click="apri"
+        icon="fas fa-file-upload"
+        :label="$t('gallery.load_image')">
+      </q-btn>
+    </div>
+  </div>
+  <div v-else>
+    <div v-if="!isListImgValid">
+      <q-btn
+        flat round color="blue" icon="fas fa-tools" size="md"
+        @click="apri"></q-btn>
+    </div>
+    <div v-else>
+      <div class=" row">
+        <!--<q-draggable-rows
+                v-model="order">-->
+
+        <div v-for="(mygallery, index) in getlistimages()" :key="index">
+          <div
+            class="q-pa-sm q-gutter-sm"
+            @dragenter="onDragEnter"
+            @dragleave="onDragLeave"
+
+            @dragover="onDragOver">
+            <q-card
+              :id="mygallery._id" :class="getclass()"
+              :draggable="canModify"
+              @dragstart="onDragStart"
+              @drop="onDrop"
+            >
+
+              <q-img
+                :src="getsrcimg(mygallery)"
+                :class="getclimg()"
+                :alt="mygallery.alt">
+                <div class="absolute-bottom text-shadow">
+                  <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
+                  <div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
+                </div>
+              </q-img>
+
+              <q-field
+                v-if="canModify"
+                stack-label
+                dense
+                label="Nome File">
+                <template v-slot:control>
+                  <div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
+                </template>
+
+              </q-field>
+
+              <q-input
+                v-if="canModify"
+                v-model="mygallery.description"
+                dense
+                :label="$t('proj.longdescr')"
+                @keyup.enter.stop
+                @update:model-value="save"
+                debounce="1000"
+                autofocus>
+              </q-input>
+
+              <q-card-actions align="center">
+                <q-btn
+                  v-if="canModify"
+                  flat round color="blue" icon="fas fa-copy" size="sm"
+                  @click="copytoclipboard(mygallery)"></q-btn>
+                <q-btn
+                  v-if="canModify"
+                  flat round color="red" icon="fas fa-trash-alt" size="sm"
+                  @click="deleteFile(mygallery)"></q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </div>
+        <div class="q-pa-sm">
+          <div v-if="edit" class="q-gutter-sm " style="max-height: 200px; width: 208px;">
+            <q-uploader
+              label="Aggiungi Immagine"
+              accept="image/jpeg, image/jpg, image/png, .pdf"
+              :url="getUrl()"
+              :headers="tools.getheaders()"
+              :max-file-size="3000000"
+              multiple
+              auto-upload
+              hide-upload-btn
+              no-thumbnails
+              @uploaded="uploaded"
+              @rejected="onRejected"
+              style="width: 208px"
+            ></q-uploader>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <q-dialog
+    v-model="displayGall"
+    persistent
+    :maximized="maximizedToggle"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card>
+      <q-bar class="bg-primary text-white">
+        <q-space/>
+
+        <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
+          <q-tooltip v-if="maximizedToggle" class="bg-white text-primary">Minimize</q-tooltip>
+        </q-btn>
+        <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
+          <q-tooltip v-if="!maximizedToggle" class="bg-white text-primary">Maximize</q-tooltip>
+        </q-btn>
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+
+      <q-card-section>
+        <div class="text-h6">{{ title }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div class=" row">
+
+          <div v-for="(mygallery, index) in getlistimages()" :key="index">
+            <div
+              class="q-pa-sm barwidth"
+              @dragenter="onDragEnter"
+              @dragleave="onDragLeave"
+              @dragover="onDragOver"
+            >
+              <q-bar
+                class="bg-primary text-white"
+              >
+                <q-btn flat round dense icon="menu" class="q-mr-sm"/>
+                <q-btn
+                  v-if="canModify"
+                  flat round icon="fas fa-copy" size="sm"
+                  @click="copytoclipboard(mygallery)"></q-btn>
+                <div>
+                  Foto {{ index + 1 }}
+                </div>
+                <q-space></q-space>
+                <q-btn v-if="canModify" flat round color="red" icon="fas fa-trash-alt"
+                       @click="deleteFile(mygallery)"></q-btn>
+              </q-bar>
+
+              <q-card
+                :id="mygallery._id" :class="getclass()"
+                :data-ind="index"
+                :draggable="canModify"
+                @dragstart="onDragStart"
+                @drop="onDrop"
+              >
+                <q-img
+                  :src="getsrcimg(mygallery)"
+                  :class="getclimg()"
+                  @click="ImgFullScreen(mygallery)"
+                  :alt="mygallery.alt">
+                  <div v-if="mygallery.description" class="absolute-bottom text-shadow">
+                    <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
+                    <div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
+                  </div>
+                </q-img>
+                <q-card-section>
+                  <q-field
+                    v-if="canModify"
+                    stack-label
+                    dense
+                    label="Nome File">
+                    <template v-slot:control>
+                      <div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
+                    </template>
+
+                  </q-field>
+                  <q-input
+                    v-if="canModify"
+                    v-model="mygallery.description"
+                    dense
+                    :label="$t('proj.longdescr')"
+                    @keyup.enter.stop
+                    @update:model-value="save"
+                    debounce="1000"
+                    autofocus>
+                  </q-input>
+                </q-card-section>
+
+              </q-card>
+            </div>
+          </div>
+          <div
+            v-if="canModify"
+            class="q-pa-sm">
+            <div class="q-gutter-sm " style="max-height: 200px; width: 208px;">
+              <q-uploader
+                label="Aggiungi Immagine"
+                accept="image/jpeg, image/jpg, image/png, .pdf"
+                :url="getUrl()"
+                :headers="tools.getheaders()"
+                :max-file-size="40000000"
+                multiple
+                auto-upload
+                hide-upload-btn
+                no-thumbnails
+                @uploaded="uploaded"
+                @rejected="onRejected"
+                style="width: 208px"
+              ></q-uploader>
+            </div>
+          </div>
+          <div v-if="!isInModif && !isListImgValid && imagebak">
+
+            <q-card :class="getclass()" @click="ImgFullScreen(mygallery)">
+              <q-img
+                :src="imagebak" :class="getclimg()">
+              </q-img>
+            </q-card>
+
+          </div>
+        </div>
+
+
+        <q-card-actions align="right">
+
+          <q-btn v-if="canModify" flat label="Annulla" color="primary" v-close-popup/>
+          <q-btn v-if="canModify" label="salva" color="primary" v-close-popup @click="save"/>
+          <q-btn v-if="!canModify" label="Chiudi" color="primary" v-close-popup/>
+        </q-card-actions>
+
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+  <q-dialog
+    v-model="fullscreen"
+    :maximized="false"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="my-card">
+      <q-img v-if="fullscreensrc" alt="fullscreen" :src="fullscreensrc" @click="fullscreen = false"></q-img>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./CSelectImage.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSelectImage.scss';
+</style>

src/components/CSelectImage/index.ts

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

src/components/CStatusReg/CStatusReg.vue

@@ -63,7 +63,7 @@
                       field="username"
                       :canEdit="false"
                       :canModify="false"
-                      :type="costanti.FieldType.username_chip">
+                      :fieldtype="costanti.FieldType.username_chip">
                     </CMyFieldRec>
 
                   </q-item-label>

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './CMyAvatar'
 export * from './CMyCart'
 export * from './CMyFieldDb'
 export * from './CMyFieldRec'
+export * from './CSelectImage'
 export * from './CMyPage'
 export * from './CMyPageElem'
 export * from './CMyPageIntro'

src/css/app.scss

@@ -295,7 +295,7 @@ $heightBtn: 100%;
     max-width: 400px;
     min-width: 250px;
   }
-  box-shadow: none;
+  // box-shadow: none;
 }
 
 .my-card-withshadow {

src/db/static_data.ts

@@ -10,8 +10,8 @@ const functionality: IFunctionality = {
   PWA: false,
   SHOW_USER_MENU: true, // Cambiare con true
   SHOW_PROFILE: true,
-  SHOW_REG_BUTTON: true,
+  SHOW_REG_BUTTON: false,
-  ENABLE_REGISTRATION: true,
+  ENABLE_REGISTRATION: false,
   ENABLE_REG_BY_BOT: false,
   ENABLE_REG_NEED_TELEGRAM: false,
   SHOW_NEWSLETTER: false,
@@ -30,7 +30,7 @@ const functionality: IFunctionality = {
   SHOW_COMPETENZE: false,
   ENABLE_VIEW_GROUPS: false,
   ENABLE_VIEW_USERS: false,
-  ENABLE_VIEW_PROFILE: true,
+  ENABLE_VIEW_PROFILE: false,
 }
 
 // const SHOW_PROJINTHEMENU = false
@@ -490,7 +490,7 @@ const baseroutes: IListRoutes[] = [
     path: '/',
     materialIcon: 'home',
     name: 'pages.home',
-    component: () => import('@src/root_spec/home_kolibrilab/home_kolibrilab.vue'),
+    component: () => import('@src/root/home/home.vue'),
     reqauth: false,
     inmenu: true,
     infooter: true,

src/js/storage.js

@@ -80,7 +80,7 @@ export let idbKeyval = (() => {
       let req;
       await withStore('readonly', table, store => {
         req = store.getAll();
-        console.log('   req', req)
+        // console.log('   req', req)
       });
       if (req) {
         return req.result;

src/mixins/mixin-metatags.ts

@@ -6,23 +6,36 @@ import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
 import { useMeta } from 'quasar'
 
-
 // You can declare a mixin as the same style as components.
 export default function () {
 
   function setmeta(mym: IMetaTags) {
+    // cancellarlo...
+    return true
+  }
+
+  function getMeta(mym: IMetaTags, t: any) {
 
     //++Todo META TAGS!
-    /*
+    if (!mym || !mym.title)
-    useMeta(() => {
+      return
-      return {
+
-        title: mym.title,
+    return {
-        description: mym.description,
+      title: t('ws.sitename'),
-        keywords: mym.keywords,
+      titleTemplate: (title: any) => `${tools.getsuffisso()} ${mym.title} - ${t('ws.sitename')}`,
-      }
+      meta: {
-    })
+        keywords: {
+          name: 'keywords',
+          content: mym.keywords,
+        },
+        description: {
+          name: 'description',
+          content: mym.description,
+        },
+        equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' },
+      },
+    }
 
-     */
   }
 
   function getsrcbyimg(myimg: string) {
@@ -35,5 +48,6 @@ export default function () {
   return {
     setmeta,
     getsrcbyimg,
+    getMeta,
   }
 }

src/model/GlobalStore.ts

@@ -141,6 +141,7 @@ export interface IMyElem {
   class?: string
   image?: string
   class2?: string
+  class3?: string
   styleadd?: string
   list?: IImgGallery[]
   listcards?: IMyCard[]
@@ -210,6 +211,8 @@ export interface ISites {
   telegram_support_chat?: string
   pathreg_add?: string
   confsite: IOption
+  description?: string
+  keywords?: string
 }
 
 export interface INewsToSent {
@@ -357,6 +360,8 @@ export interface IGlobalState {
   datastat?: INotData
   site?: ISites,
   mygroups: IMyGroup[],
+  selElem?: IMyElem,
+  editOn?: boolean,
 }
 
 export interface IMenuList {
@@ -492,9 +497,11 @@ export interface IImgGallery {
 }
 
 export interface IMyCard {
+  _id?: string
   imagefile?: string
   alt?: string
   description?: string
+  style?: string
   size?: string
   color?: string
   content?: string

src/root/home/home.ts

@@ -1,21 +1,54 @@
+import { defineComponent, ref, onMounted, watch, computed } from 'vue'
 
-import {
+import { useGlobalStore } from '@store/globalStore'
-  defineComponent, ref, computed,
+import { useRoute } from 'vue-router'
-} from 'vue'
+import { useUserStore } from '@store/UserStore'
 
 import { tools } from '@src/store/Modules/tools'
-import { CSkill } from '@/components/CSkill'
+import { static_data } from '@src/db/static_data'
-import { CChartMap } from '@src/components/CChartMap'
+import { toolsext } from '@src/store/Modules/toolsext'
-import { CMapsEsempio } from '@src/components/CMapsEsempio'
+import { CMyPageElem } from '@components'
+import MixinBase from '@src/mixins/mixin-base'
+import MixinMetaTags from '@/mixins/mixin-metatags'
+import { useMeta } from 'quasar'
+import { useI18n } from '@src/boot/i18n'
 
 
 export default defineComponent({
   name: 'Home',
-  components: { CSkill, CChartMap, CMapsEsempio },
+  components: { CMyPageElem },
   setup() {
 
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n()
+
+    const isfinishLoading = computed(() => globalStore.finishLoading)
+
+    const { getMeta } = MixinMetaTags()
+
+    const { setValDb, getValDb } = MixinBase()
+
+    function inizia() {
+      if (globalStore.site) {
+        useMeta(getMeta({
+          title: globalStore.site.name,
+          description: globalStore.site.description,
+          keywords: globalStore.site.keywords,
+        }, t))
+      }
+    }
+
+    inizia()
+
     return {
       tools,
+      toolsext,
+      static_data,
+      getValDb,
+      globalStore,
+      isfinishLoading,
     }
+
   },
 })

src/root/home/home.vue

@@ -1,23 +1,9 @@
 <template>
-  <q-page class="">
+  <div v-if="isfinishLoading">
-    <h1>Inizio:</h1>
+    <CMyPageElem title="Home" mypath="home">
-
-    <CSkill>
-
-    </CSkill>
-
-    <!--<CChartMap
-      title="Mappa"
-      subtitle="cartina..."
-      serie1="Serie 1"
-    >
-
-    </CChartMap>-->
-
-    <!--<CMapsEsempio></CMapsEsempio>-->
-
-  </q-page>
 
+    </CMyPageElem>
+  </div>
 </template>
 <script lang="ts" src="./home.ts">
 </script>

src/root/mypage/mypage.ts

@@ -19,14 +19,14 @@ export default defineComponent({
     const { setmeta } = MixinMetaTags()
 
     async function created() {
-      rec.value = await globalStore.loadPage(route.path)
+      rec.value = await globalStore.loadPage(route.path, 'mypage.ts')
       // console.log('MyPage created', rec.value)
 
       // console.log('mounted', this.rec)
     }
 
     watch(path, async (to: string, from: string) =>  {
-      // console.log('watch path', path)
+      console.log('watch path', to, from)
       rec.value = await globalStore.loadPage(to)
       // console.log('path change', rec.value)
     })

src/root_spec/home_kolibrilab/home_kolibrilab.scss

@@ -1,452 +0,0 @@
-
-.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;
-  }
-
-  .carousel_img_3 {
-    //background-image: url(../../public/images/cibo_sano.jpg);
-    background-size: 620px 620px !important;
-    background-position: 50% top !important;
-    background-repeat: no-repeat !important;
-  }
-
-}
-
-.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;
-}

src/root_spec/home_kolibrilab/home_kolibrilab.ts

@@ -1,57 +0,0 @@
-import { defineComponent, ref, onMounted, watch, computed } from 'vue'
-
-import { useGlobalStore } from '@store/globalStore'
-import { useRoute } from 'vue-router'
-import { useUserStore } from '@store/UserStore'
-
-import { Logo } from '@/components/logo'
-
-import { LandingFooter } from '@/components/LandingFooter'
-import { CMyPageElem } from '@/components/CMyPageElem/index'
-
-import { tools } from '@src/store/Modules/tools'
-import { static_data } from '@src/db/static_data'
-import { toolsext } from '@src/store/Modules/toolsext'
-import { Screen } from 'quasar'
-import { CCardCarousel, CEventsCalendar, CMyElem, COpenStreetMap } from '@components'
-import MixinBase from '@src/mixins/mixin-base'
-import { firstimagehome } from '@src/db/static_data'
-import MixinMetaTags from '@/mixins/mixin-metatags'
-
-export default defineComponent({
-  name: 'home_kolibrilab',
-  components: { Logo, LandingFooter, CMyPageElem, CMyElem },
-
-  setup() {
-    const userStore = useUserStore()
-    const globalStore = useGlobalStore()
-
-    const { setmeta } = MixinMetaTags()
-
-    const { setValDb, getValDb } = MixinBase()
-
-    function getheightgallery() {
-      if (tools.isMobile())
-        return '400px'
-      else
-        return '600px'
-    }
-
-    function created() {
-      //
-    }
-
-    created()
-
-    return {
-      tools,
-      toolsext,
-      static_data,
-      getheightgallery,
-      getValDb,
-      globalStore,
-      setmeta,
-    }
-  },
-})
-

src/root_spec/home_kolibrilab/home_kolibrilab.vue

@@ -1,24 +0,0 @@
-<template>
-  <CMyPageElem
-    title="Home"
-    mypath="home"
-  >
-
-      <span>{{
-          setmeta({
-            title: '',
-            description: '',
-            keywords: '',
-          })
-        }}
-      </span>
-
-  </CMyPageElem>
-</template>
-
-<script lang="ts" src="./home_kolibrilab.ts">
-</script>
-
-<style lang="scss" scoped>
-@import './home_kolibrilab.scss';
-</style>

src/rootgen/admin/confsite/confsite.vue

@@ -1,17 +1,89 @@
 <template>
-  <CMyPage title="Configura Sito" imgbackground="images/calendario_eventi.jpg" sizes="max-height: 120px">
+  <CMyPage
-
+    title="Configura Sito"
+    imgbackground="images/calendario_eventi.jpg"
+    sizes="max-height: 120px"
+  >
     <div class="q-ma-sm q-gutter-sm q-pa-xs">
-
       <div v-if="mysite">
         <q-banner
           rounded
           class="bg-primary text-white"
           color="primary q-title"
-          style="text-align: center;">
+          style="text-align: center"
+        >
           <p class="mybanner">{{ mysite.name }}</p>
         </q-banner>
 
+        <CMyFieldDb
+          title="Attivo"
+          table="sites"
+          mykey="active"
+          :id="mysite._id"
+          :rec="mysite"
+        >
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          title="Email Admin"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="adminemail"
+          debounce="1000"
+        >
+        </CMyFieldDb>
+
+
+        <CMyFieldDb
+          title="Titolo"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="name"
+          debounce="1000"
+        >
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          title="Descrizione"
+          debounce="1000"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="description"
+        >
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          title="Parole Chiave"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="keywords"
+          debounce="1000"
+        >
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          title="Host"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="host"
+          debounce="1000"
+        >
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          title="Host Test"
+          table="sites"
+          :id="mysite._id"
+          :rec="mysite"
+          mykey="host_test"
+          debounce="1000"
+        >
+        </CMyFieldDb>
 
         <CMyFieldRec
           title="Opzioni Sito"
@@ -28,35 +100,45 @@
                     :serv="false"
                     :type="costanti.FieldType.string">
         </CMyFieldDb>
-        <CMyFieldDb title="Nome del BOT Telegram"
+
+        <CMyFieldDb
+          title="Nome del BOT Telegram"
           mykey="TELEG_BOT_NAME"
           :serv="false"
-                    :type="costanti.FieldType.string">
+          :type="costanti.FieldType.string"
+          debounce="1000"
+        >
         </CMyFieldDb>
-        <CMyFieldDb title="BOT Telegram (per Test)"
+        <CMyFieldDb
+          title="BOT Telegram (per Test)"
           mykey="TELEG_BOT_LINK_TEST"
           :serv="false"
-                    :type="costanti.FieldType.string">
+          debounce="1000"
+          :type="costanti.FieldType.string"
+        >
         </CMyFieldDb>
-        <CMyFieldDb title="Chat di Supporto (Help)"
+        <CMyFieldDb
+          title="Chat di Supporto (Help)"
           mykey="TELEGRAM_SUPPORT"
           :serv="false"
-                    :type="costanti.FieldType.string">
+          :type="costanti.FieldType.string"
+          debounce="1000"
+        >
         </CMyFieldDb>
-        <CMyFieldDb title="Sito ONLINE"
+        <CMyFieldDb
+          title="Sito ONLINE"
           mykey="SITO_ONLINE"
           :serv="false"
-                    :type="costanti.FieldType.boolean">
+          :type="costanti.FieldType.boolean"
+          debounce="1000"
+        >
         </CMyFieldDb>
 
       </div>
-
-
     </div>
   </CMyPage>
 </template>
 <script lang="ts" src="./confsite.ts">
-
 </script>
 <style lang="scss" scoped>
 @import 'confsite.scss';

src/store/Api/index.ts

@@ -127,7 +127,7 @@ export const Api = {
           }
         }
         if (tools.isDebug())
-          console.log('result', res)
+          console.log('   ----> ', res)
         return resolve(res)
       })
       .catch((error) => {

src/store/Modules/costanti.ts

@@ -272,6 +272,7 @@ export const costanti = {
     listimages: 1024,
     exact: 2048,
     image: 3000,
+    imgcard: 3500,
     select_by_server: 4000,
     multiselect_by_server: 4010,
     nationality: 4096,

src/store/Modules/fieldsTable.ts

@@ -123,6 +123,18 @@ export const colgallery = [
   AddCol(DuplicateRec),
 ]
 
+export const colmylistcards = [
+  AddCol({ name: 'imagefile', label_trans: 'imagefile', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'alt', label_trans: 'alt', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'description', label_trans: 'description', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'style', label_trans: 'style' }),
+  AddCol({ name: 'alt', label_trans: 'alt' }),
+  AddCol({ name: 'size', label_trans: 'size' }),
+  AddCol({ name: 'color', label_trans: 'color' }),
+  AddCol({ name: 'content', label_trans: 'content' }),
+  AddCol({ name: 'colorsub', label_trans: 'colorsub' }),
+]
+
 export const colmyelems = [
   AddCol({ name: 'active', label_trans: 'myelems.active', fieldtype: costanti.FieldType.boolean  }),
   AddCol({ name: 'path', label_trans: 'myelems.path' }),
@@ -188,9 +200,14 @@ export const colmsg_templates = [
 ]
 
 export const colmypage = [
+  AddCol({ name: 'path', label_trans: 'pages.path' }),
+  AddCol({ name: 'icon', label_trans: 'pages.icon' }),
+  AddCol({ name: 'order', label_trans: 'pages.order', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'active', label_trans: 'pages.active', fieldtype: costanti.FieldType.boolean }),
+  AddCol({ name: 'inmenu', label_trans: 'pages.inmenu', fieldtype: costanti.FieldType.boolean }),
+  AddCol({ name: 'infooter', label_trans: 'pages.infooter', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'title', label_trans: 'pages.title' }),
   AddCol({ name: 'subtitle', label_trans: 'pages.subtitle' }),
-  AddCol({ name: 'path', label_trans: 'pages.path' }),
   AddCol({ name: 'img1', label_trans: 'pages.img1' }),
   AddCol({ name: 'content', label_trans: 'pages.contentfield', fieldtype: costanti.FieldType.html }),
   AddCol({ name: 'video1', label_trans: 'pages.video1' }),
@@ -205,8 +222,6 @@ export const colmypage = [
   AddCol({ name: 'ratio3', label_trans: 'pages.ratio3' }),
   AddCol({ name: 'content4', label_trans: 'pages.content4', fieldtype: costanti.FieldType.html }),
   AddCol({ name: 'lang', label_trans: 'pages.lang' }),
-  AddCol({ name: 'icon', label_trans: 'pages.icon' }),
-  AddCol({ name: 'order', label_trans: 'pages.order', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'keywords', label_trans: 'pages.keywords' }),
   AddCol({ name: 'description', label_trans: 'pages.description' }),
   AddCol({ name: 'heightimg', label_trans: 'pages.heightimg', fieldtype: costanti.FieldType.number }),
@@ -215,12 +230,9 @@ export const colmypage = [
   AddCol({ name: 'only_residenti', label_trans: 'pages.only_residenti', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'only_consiglio', label_trans: 'pages.only_consiglio', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'imgback', label_trans: 'pages.imgback', fieldtype: costanti.FieldType.string }),
-  AddCol({ name: 'active', label_trans: 'pages.active', fieldtype: costanti.FieldType.boolean }),
-  AddCol({ name: 'inmenu', label_trans: 'pages.inmenu', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'submenu', label_trans: 'pages.submenu', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'l_par', label_trans: 'pages.l_par', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'l_child', label_trans: 'pages.l_child', fieldtype: costanti.FieldType.number }),
-  AddCol({ name: 'infooter', label_trans: 'pages.infooter', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'internalpage', label_trans: 'pages.internalpage', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'iconsize', label_trans: 'pages.iconsize', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'extraclass', label_trans: 'pages.extraclass', fieldtype: costanti.FieldType.string }),
@@ -1436,6 +1448,8 @@ export const colTableSites = [
   AddCol({ name: 'domain_provider', label_trans: 'sites.domain_provider', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'domain_expiring', label_trans: 'reg.domain_expiring', fieldtype: costanti.FieldType.onlydate }),
   AddCol({ name: 'next_payment', label_trans: 'reg.next_payment', fieldtype: costanti.FieldType.onlydate }),
+  AddCol({ name: 'description', label_trans: 'reg.description' }),
+  AddCol({ name: 'keywords', label_trans: 'reg.keywords' }),
   // Configuration
   // AddCol({ name: 'confsite.notif_reg', field: 'confsite', subfield: 'notif_reg', label_trans: 'reg.notif_reg', fieldtype: costanti.FieldType.boolean }),
   AddCol({
@@ -3040,6 +3054,20 @@ export const fieldsTable = {
       colkey: '_id',
       collabel: 'title',
     },
+    {
+      value: 'listcards',
+      label: 'Elementi',
+      columns: colmylistcards,
+      colkey: '_id',
+      collabel: 'imagefile',
+    },
+    {
+      value: 'imgcards',
+      label: 'Img',
+      columns: colmylistcards,
+      colkey: '_id',
+      collabel: 'imagefile',
+    },
     {
       value: 'templemail',
       label: 'Template Email',

src/store/Modules/tools.ts

@@ -15,6 +15,8 @@ import {
   TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif,
 } from '@model'
 
+import { fieldsTable } from '@store/Modules/fieldsTable'
+
 import { addToDate } from '@quasar/quasar-ui-qcalendar'
 
 import { lists } from '@store/Modules/lists'
@@ -3846,23 +3848,6 @@ export const tools = {
     return ''
   },
 
-  metafunc(mythis: any) {
-    return {
-      title: mythis.t('ws.sitename'),
-      titleTemplate: (title: any) => `${this.getsuffisso()} ${mythis.mymeta.title} - ${mythis.t('ws.sitename')}`,
-      meta: {
-        keywords: {
-          name: 'keywords',
-          content: mythis.mymeta.keywords,
-        },
-        description: {
-          name: 'description',
-          content: mythis.mymeta.description,
-        },
-        equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' },
-      },
-    }
-  },
   geturlupload() {
     return tools.getServerHost() + `/uploadnew/${this.getvers()}/`
   },
@@ -6782,6 +6767,77 @@ export const tools = {
     return (Math.round(mynum * 100) / 100)
   },
 
+  getheightgallery() {
+    if (this.isMobile()) {
+      if (Screen.height < 700) {
+        return '400px'
+      } else {
+        return '500px'
+      }
+
+    } else {
+      if (Screen.width < 1200) {
+        return '500px'
+      } else {
+        return '600px'
+      }
+    }
+
+  },
+
+  getTitleGall(table: string) {
+    if (fieldsTable.tableForUsers.includes(table)) {
+      return 'Profilo'
+    } else {
+      return fieldsTable.getTitleImgByTable(table)
+    }
+  },
+
+  getDirectoryGall(myrow: any, table: string, path: string) {
+    const userStore = useUserStore()
+
+    // console.log('getDirectoryGall', myrow)
+
+    let ris = ''
+    try {
+      let username = myrow.hasOwnProperty('username') ? myrow['username'] : ''
+      const userId = myrow.hasOwnProperty('userId') ? myrow['userId'] : ''
+
+      if (username === '') {
+        if (userId === userStore.my._id)
+          username = userStore.my.username
+      }
+      if (username === '') {
+        username = userStore.my.username
+      }
+      if (fieldsTable.tableForUsers.includes(table)) {
+        ris = 'profile/' + username + '/' + table
+      } else if (table === 'users') {
+        ris = 'profile/' + userStore.my.username
+      } else if (table === 'mygroups') {
+        if (myrow.hasOwnProperty('groupname'))
+          ris = 'mygroups/' + myrow['groupname']
+      } else if (table === 'circuits') {
+        if (myrow.hasOwnProperty('path'))
+          ris = 'circuits/' + myrow['path']
+      } else if (!!myrow && !!myrow.directory) {
+        ris = myrow.directory
+      } else if (table === 'myelems') {
+        ris = 'pages/' + myrow.path
+      } else if (table === 'listcards') {
+        ris = 'pages/' + myrow.path
+      } else if (table === 'imgcards') {
+        ris = 'pages/' + path
+      } else {
+        ris = table
+      }
+    } catch (e) {
+      console.error('err getDirectoryGall', e)
+    }
+    console.log('getDirectoryGall', ris)
+    return ris
+  },
+
   // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]

src/store/globalStore.ts

@@ -140,6 +140,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
     },
     provinces: [],
     mygroups: [],
+    selElem: {},
+    editOn: false,
   }),
 
   getters: {
@@ -908,7 +910,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
       })
     },
 
-    async loadPage(path: string) {
+    async loadPage(path: string, dove?: string) {
       const userStore = useUserStore()
 
       path = path.substring(1)
@@ -919,7 +921,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
         return mypage
       }
 
-      console.log('loadPage', path)
+      // console.log(dove, '*** loadPage', path)
 
       return Api.SendReq('/getpage', 'POST', { path })
         .then((res) => {
@@ -1786,5 +1788,12 @@ export const useGlobalStore = defineStore('GlobalStore', {
       }
     },
 
+    changeVisuDrawer(path: string, edit: boolean) {
+      const userStore = useUserStore()
+
+      if (userStore.isManager)
+        tools.setCookie('EDITPAGES', edit ? '-1' : '0')
+    },
+
   },
 })