Webpage Editor functionality

src/components/CGridTableRec/CGridTableRec.ts

@@ -520,7 +520,7 @@ export default defineComponent({
         }
       }
 
-      // console.log('sortBy', sortBy)
+      console.log('sortBy', sortBy)
 
       const filtersearch: any[] = []
       const filtersearch2: any[] = []
@@ -867,7 +867,7 @@ export default defineComponent({
         pagination.value.sortBy = sortBy
         pagination.value.descending = descending
 
-        // console.log('pagination', pagination)
+        console.log('pagination', pagination)
 
         // ...and turn of loading indicator
         loading.value = false

src/components/CGridTableRec/CGridTableRec.vue

@@ -359,6 +359,7 @@
       :columns="mycolumns"
       :filter="myfilter"
       v-model:pagination="pagination"
+      @request="onRequest"
       virtual-scroll
       :row-key="colkey"
       :loading="loading"

src/components/CMyElem/CMyElem.ts

@@ -15,25 +15,52 @@ import { CCardCarousel } from '@src/components/CCardCarousel'
 import { CMyPage } from '@src/components/CMyPage'
 import { CMyPageIntro } from '@src/components/CMyPageIntro'
 import { CEventsCalendar } from '@src/components/CEventsCalendar'
+import { CMyEditor } from '@src/components/CMyEditor'
+
 import MixinMetaTags from '@/mixins/mixin-metatags'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
 
 export default defineComponent({
   name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro },
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor },
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
       required: true,
     },
+    editOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   setup(props) {
     const globalStore = useGlobalStore()
 
     const { setmeta, getsrcbyimg } = MixinMetaTags()
 
+    const $q = useQuasar()
+    const { t } = useI18n()
+
     const animare = ref(0)
     const slide = ref(0)
     const slide2 = ref(0)
+    const disableSave = ref(true)
+
+    const neworder = ref(<number|undefined>0)
+
+    const myel = toRef(props, 'myelem')
+    const newtype = ref(<any>'')
+
+    watch(() => myel.value.order, (value, oldval) => {
+      mounted()
+    })
 
     function getArrDisciplines() {
       return globalStore.disciplines.filter((rec: any) => rec.showinhome)
@@ -46,6 +73,69 @@ export default defineComponent({
         return '600px'
     }
 
+    function saveElem() {
+      // Save Elem record
+      const myelem = props.myelem
+      myelem.order = neworder.value
+      globalStore.saveMyElem($q, t, myelem).then((ris) => {
+        if (ris) {
+          // OK
+          disableSave.value = true
+        }
+      })
+    }
+
+    function addNewElem(order?: number) {
+
+      const newrec: IMyElem = {
+        _id: undefined,
+        type: newtype.value,
+        path: props.myelem.path,
+        order: order ? order : 1000,
+        active: true,
+        container: ''
+      }
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
+    function delElem() {
+      $q.dialog({
+        message: 'Eliminare ' + props.myelem.container + ' ?',
+        html: true,
+        ok: {
+          label: 'Elimina',
+          push: true,
+        },
+        title: '',
+        cancel: true,
+        persistent: false,
+      }).onOk(async () => {
+
+        // Save Elem record
+        await globalStore.delMyElem($q, t, props.myelem).then((ris) => {
+          if (ris) {
+            // OK
+            disableSave.value = true
+          }
+        })
+      })
+
+    }
+
+    function modifElem(value: any) {
+      disableSave.value = false
+    }
+
+    function mounted() {
+      neworder.value = props.myelem.order
+
+      if (props.myelem)
+        newtype.value = props.myelem.type
+    }
+
+    onMounted(mounted)
+
     return {
       tools,
       shared_consts,
@@ -56,6 +146,14 @@ export default defineComponent({
       animare,
       setmeta,
       getsrcbyimg,
+      saveElem,
+      myel,
+      disableSave,
+      modifElem,
+      delElem,
+      addNewElem,
+      newtype,
+      neworder,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -1,56 +1,287 @@
 <template>
-  <div v-if="myelem">
-    <div v-if="myelem.type === shared_consts.ELEMTYPE.TEXT">
-      <div :class="myelem.class">{{ myelem.container }}</div>
-    </div>
-    <div v-if="myelem.type === shared_consts.ELEMTYPE.MARGINI">
-      <div :style="`margin: ` + myelem.size"></div>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.TITLE">
-      <CTitle
-        :imgbackground="myelem.imgback"
-        :headtitle="myelem.title" :sizes="myelem.size" :styleadd="myelem.styleadd">
-      </CTitle>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMGTITLE">
-      <CImgTitle v-if="myelem.container" :src="myelem.container" :title="myelem.title">
-      </CImgTitle>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.HTML">
-      <div :class="myelem.class" v-html="myelem.containerHtml"></div>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMAGE">
-      <div class="text-center">
-         <q-img :src="myelem.container" class="img" :width="myelem.width" :height="myelem.height"></q-img>
+  <div v-if="myel">
+    <q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
+      <q-input
+        style="max-width: 60px"
+        hide-bottom-space
+        borderless
+        dense
+        @update:model-value="modifElem"
+        v-model="neworder"
+        v-on:keyup.enter="saveElem"
+        type="number"
+      >
+      </q-input>
+      <q-space/>
+      <q-btn
+        icon="fas fa-trash-alt"
+        color="negative"
+        dense
+        flat
+        size="sm"
+        @click="delElem">
+      </q-btn>
+
+      <q-select v-if="addOn"
+                v-model="newtype"
+                dense
+                style="width: 150px;"
+                :options="shared_consts.TypesElem"
+                emit-value map-options>
+
+      </q-select>
+      <q-btn
+        v-if="addOn"
+        size="sm"
+        dense
+        flat
+        icon="fas fa-plus"
+        color="positive"
+        @click="addNewElem(myelem.order-10)">
+      </q-btn>
+
+    </q-bar>
+    <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
+      <div v-if="editOn">
+        <q-input
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+
+        </q-input>
+
+      </div>
+      <div v-else
+           :class="myel.class">{{ myel.container }}
+
       </div>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.VIDEO">
+    <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
+      <div v-if="editOn">
+        <q-input
+          label="Margine:"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.size"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div :style="`margin: ` + myel.size"></div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
+      <div v-if="editOn">
+        <q-input
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.title"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div v-else>
+        <CTitle
+          :imgbackground="myel.imgback"
+          :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
+        </CTitle>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
+      <div v-if="editOn">
+        <q-input
+          label="Img"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Title"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div v-else>
+        <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
+        </CImgTitle>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
+      <div v-if="editOn">
+        <q-input
+          label="Classe:"
+          @update:model-value="modifElem"
+          v-model="myel.class"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <CMyEditor
+          v-model:value="myel.containerHtml" title="" @keyup.enter.stop
+          :showButtons="false"
+          :canModify="true"
+          @update:value="modifElem"
+          @showandsave="saveElem"
+        >
+        </CMyEditor>
+
+      </div>
+      <div v-else>
+        <div :class="myel.class" v-html="myel.containerHtml"></div>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
+      <div v-if="editOn">
+        <q-input
+          label="NomeFile Img:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <div class="row">
+          <q-input
+            label="Width:"
+            type="number"
+            @update:model-value="modifElem"
+            v-model="myel.width"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Height:"
+            type="number"
+            @update:model-value="modifElem"
+            v-model="myel.height"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div class="text-center">
+        <q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="NomeFile Video:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Ratio:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.ratio"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
       <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
       </q-video>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.FOOTER">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
       <LandingFooter></LandingFooter>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
-      <CMyPage :mypath="myelem.container"></CMyPage>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="Nome Pagina:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+      <CMyPage :mypath="myel.container"></CMyPage>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGEINTRO">
-      <CMyPageIntro :mypath="myelem.container" :maxheightimg="myelem.heightimg" :maxwidthimg="myelem.widthimg" :link="myelem.link"></CMyPageIntro>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="NomeFile Img:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Width:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.widthimg"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Height:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.heightimg"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Link:"
+          @update:model-value="modifElem"
+          v-model="myel.link"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+      <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
       <CCardCarousel :myarr="getArrDisciplines()">
 
       </CCardCarousel>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
       <!-- Da Fare -->
       <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
                       :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
 
       </COpenStreetMap>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
-      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
+      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center">
+
+        <div v-if="editOn" class="row">
+          <q-input
+            label="lista:"
+            @update:model-value="modifElem"
+            v-model="myel.list"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
 
         <q-carousel
           swipeable
@@ -61,42 +292,43 @@
           thumbnails
           infinite
           height="600">
-          <q-carousel-slide v-for="(rec, index) in myelem.list" :key="index" :name="index"
+          <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
                             :img-src="getsrcbyimg(`images/`+ rec.imagefile)"
                             :alt="rec.alt"
                             class="carousel_slide">
             <div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
               <div class="text-h5"><span
-                class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span>
+                class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}. </span>
                 <span v-if="rec.alt"
-                class="text-h6 text-grey-2 shadow">{{rec.alt}}</span></div>
-              <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{rec.description}}</span>
+                      class="text-h6 text-grey-2 shadow">{{ rec.alt }}</span></div>
+              <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{ rec.description }}</span>
               </div>
             </div>
           </q-carousel-slide>
         </q-carousel>
       </section>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+
       <section>
         <div class="landing">
           <div class="landing__hero maxwidth1200 text-white">
-          <q-carousel
-            animated
-            :autoplay="animare"
-            swipeable
-            infinite
-            navigation
-            transition-next="slide-left"
-            transition-prev="slide-right"
-            v-model="slide"
-            :height="getheightgallery()"
-            width="100%"
-          >
-                <q-carousel-slide
-                  v-for="(myrec, ind) in myelem.list" :key="ind"
-                  :name="ind"
-                                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
+            <q-carousel
+              animated
+              :autoplay="animare"
+              swipeable
+              infinite
+              navigation
+              transition-next="slide-left"
+              transition-prev="slide-right"
+              v-model="slide"
+              :height="getheightgallery()"
+              width="100%"
+            >
+              <q-carousel-slide
+                v-for="(myrec, ind) in myel.list" :key="ind"
+                :name="ind"
+                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
 
                 <div class="landing__header"></div>
                 <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
@@ -107,13 +339,13 @@
                     <div class="q-gutter-xs testo-banda clgutter">
                       <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
                       <div class="text-subtitle1 shadow text-italic q-pl-sm">
-                        {{myelem.container}}&nbsp;
+                        {{ myel.container }}&nbsp;
                       </div>
                       <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
-                        {{myelem.container2}}
+                        {{ myel.container2 }}
                       </div>
                       <div class="text-subtitle2 shadow text-italic q-pl-sm">
-                        {{myelem.container3}}
+                        {{ myel.container3 }}
                       </div>
                       <div>
                         <br><br>
@@ -129,23 +361,34 @@
                      class="q-icon text-h2 text-white material-icons">expand_more</i>
                 </div>-->
               </q-carousel-slide>
-          </q-carousel>
-        </div>
+            </q-carousel>
+          </div>
         </div>
       </section>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CALENDAR">
-      <CEventsCalendar :mysingleevent="null" :showfirstN="myelem.number || 3">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
+      <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
       </CEventsCalendar>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
       <div class="q-pa-md q-gutter-md">
         <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
-            $t('components.authentication.email_verification.link_sent') }}
+            $t('components.authentication.email_verification.link_sent')
+          }}
         </div>
 
       </div>
     </div>
+    <q-btn
+      v-if="editOn && !disableSave"
+      icon="fas fa-check"
+      color="positive"
+      label="Salva"
+      size="sm"
+      :disable="disableSave"
+      @click="saveElem">
+    </q-btn>
+
   </div>
 </template>
 

src/components/CMyPage/CMyPage.ts

@@ -66,7 +66,9 @@ export default defineComponent({
 
     load()
 
-    return { rec }
+    return {
+      rec, globalStore
+    }
   },
 
 })

src/components/CMyPage/CMyPage.vue

@@ -24,9 +24,7 @@
         <div v-if="!!rec.content3" v-html="rec.content3"></div>
         <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
         <div v-if="!!rec.content4" v-html="rec.content4"></div>
-
       </div>
-
     </div>
     <div v-else>
 

src/components/CMyPageElem/CMyPageElem.ts

@@ -0,0 +1,98 @@
+import {
+  computed,
+  defineComponent, onMounted, ref, toRef, watch,
+} from 'vue'
+
+import { IMyElem, IMyPage } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+import { LandingFooter } from '@/components/LandingFooter'
+import { CMyElem } from '@/components/CMyElem'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '../CTitle/index'
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { shared_consts } from '@/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CMyPageElem',
+  components: { LandingFooter, CImgTitle, CTitle, CMyElem },
+  props: {
+    title: String,
+    mypath: {
+      type: String,
+      required: true,
+    },
+    img: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgbackground: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sizes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    styleadd: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    nofooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  setup(props) {
+    const rec = ref<IMyPage | null>(null)
+    const mypathin = toRef(props, 'mypath')
+
+    const $q = useQuasar()
+
+    const { t } = useI18n()
+
+    const editOn = ref(false)
+    const addOn = ref(false)
+
+    const globalStore = useGlobalStore()
+
+    const myelems = computed(() => {
+      if (mypathin.value)
+        return globalStore.getMyElems(mypathin.value)
+      else
+        return null
+    })
+
+
+    const load = async (): Promise<void> => {
+      // console.log('load', mypathin.value)
+      if (mypathin.value !== '') rec.value = await globalStore.loadPage('/' + mypathin.value)
+    }
+
+    watch(() => props.mypath, async (to: string, from: string) =>  {
+      console.log('... load', mypathin.value, props.mypath)
+      await load()
+    })
+
+
+    onMounted(load)
+
+    return {
+      rec, myelems,
+      mypathin,
+      editOn,
+      addOn,
+      tools,
+      shared_consts,
+    }
+  },
+
+})

src/components/CMyPageElem/CMyPageElem.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div v-if="mypathin && !!rec">
+      <q-toolbar>
+        <q-toggle v-if="tools.isManager()"
+                  v-model="editOn"
+                  icon="fas fa-pencil-alt"
+                  >
+
+        </q-toggle>
+        <q-toggle v-if="tools.isManager()"
+                  v-model="addOn"
+                  icon="fas fa-plus"
+                  >
+
+        </q-toggle>
+
+
+      </q-toolbar>
+
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-img :src="``+ rec.img1" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+        <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
+        </q-video>
+
+        <div v-if="!!rec.img2" class="text-center">
+          <q-img :src="``+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content2" v-html="rec.content2"></div>
+        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
+
+        <div v-if="!!rec.img3" class="text-center">
+          <q-img :src="``+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content3" v-html="rec.content3"></div>
+        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
+        <div v-if="!!rec.content4" v-html="rec.content4"></div>
+
+        <span v-for="(myelem, ind) in myelems" :key="ind">
+          <CMyElem v-if="myelem.active" :myelem="myelem" :editOn="editOn" :addOn="addOn">
+
+          </CMyElem>
+        </span>
+      </div>
+    </div>
+    <div v-else>
+
+      <div v-if="!!title">
+        <CTitle
+          v-if="imgbackground" :imgbackground="imgbackground"
+          :headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
+        <div v-if="!imgbackground">
+          <CImgTitle v-if="img" :src="img" :title="title">
+          </CImgTitle>
+        </div>
+        <slot></slot>
+        <div v-if="!nofooter">
+          <LandingFooter></LandingFooter>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyPageElem.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyPageElem.scss';
+</style>

src/components/CMyPageElem/index.ts

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

src/components/CSignUpIscrizioneArcadei/test2

@@ -0,0 +1,4 @@
+Con la mia contribuzione, dopo l'approvazione dell'assemblea generale entro a far parte del Comitato, con la mia
+presenza morale, spirituale, intellettuale e/o contribuendo alle attività pratiche necessarie alla creazione ed
+attuazione degli scopi costitutivi.
+

src/components/index.ts

@@ -16,6 +16,7 @@ export * from './CMyCart'
 export * from './CMyFieldDb'
 export * from './CMyFieldRec'
 export * from './CMyPage'
+export * from './CMyPageElem'
 export * from './CMyPageIntro'
 export * from './CMyElem'
 export * from './CMyTeacher'

src/db/lang/ws_it.js

@@ -1,9 +1,9 @@
 const msg_website_it = {
   ws: {
-    sitename: 'Riso',
-    siteshortname: 'RISO',
-    description: 'Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.',
-    keywords: 'riso, piattaforma di scambio, rete italiana scambio orizzontale, riso app, riso piattaforma, scambio e baratto, momenta RIS',
+    sitename: 'KolibriLab',
+    siteshortname: 'KolibriLab',
+    description: '',
+    keywords: '',
   },
   products: {
     quantity: 'Quantità',
@@ -54,9 +54,9 @@ const msg_website_it = {
     need_Telegram: 'Per poter utilizzare la Piattaforma occorre avere <a href="https://play.google.com/store/apps/details?id=org.telegram.messenger" target="_blank">Telegram</a> installato<br>',
     Registrazione_Con_Bot: '1) Copia questo username cliccandoci sopra:',
     SignUpIscrizione: 'Diventa Socio CNM',
+    SignUpArcadei: 'Aderisci ad Arcadei',
     SignUp_alreadylista: 'Registrazione per quelli che erano già nella lista di Notevole (del 2019) !',
     SignUp2: 'Registrazione',
-    SignUp3: 'Reg',
     SignUpBot: 'Registrati',
     SignIn: 'Login',
     status: 'Statistiche',
@@ -114,8 +114,10 @@ const msg_website_it = {
     hours: 'Ore',
     department: 'Uffici',
     title: 'Titolo',
+    subtitle: 'SottoTitolo',
     path: 'Percorso',
     img1: 'Immagine 1',
+    imgsize: 'ImgSize',
     contentfield: 'Testo 1',
     video1: 'Video 1',
     ratio1: 'Ratio 1',
@@ -142,8 +144,8 @@ const msg_website_it = {
     color: 'Colore',
   },
   msg: {
-    myAppName: 'Riso',
-    myAppDescription: 'Il primo Vero Social Libero, Equo e Solidale, dove Vive Consapevolezza e Aiuto Comunitario. Gratuito',
+    myAppName: 'Arcadei',
+    myAppDescription: 'Modello Comunitario',
     underconstruction: 'App in costruzione...',
     myDescriz: '',
     sottoTitoloApp: 'Il primo Vero Social',
@@ -158,32 +160,37 @@ const msg_website_it = {
       + ' che intere popolazioni antiche conoscevano bene.',
     descrapp_pag2: 'E\' giunta l\'ora di utilizzare i nuovi strumenti <strong>Tecnologici</strong> a nostro <strong>favore</strong>, per <strong>Liberarci</strong> '
       + 'così piano piano dalla <strong>schiavitù</strong> del <strong>"Lavoro per generare Denaro"</strong> e trasformando le nostre <strong>Capacitá</strong> in '
-      + '<strong>Risorse Umane</strong> per poterci sostenere e vivere in <strong>Armonia</strong> con gli altri.<br>' +
-      '<br><strong>R.I.S.O.</strong><br>' +
-      '<em>Siamo una rete di comunità consapevoli, basata sul sostegno reciproco, la fiducia, la condivisione e l\'ascolto. \n' +
-      'Coltiviamo terreno fertile per creare, in armonia con la natura, un mondo di collettività libere e autosufficienti, attraverso un circuito di scambio di esperienze umane, beni e servizi.<br>' +
-      'Partecipa al cambiamento. RISO sei anche tu!</em>',
+      + '<strong>Risorse Umane</strong> per poterci sostenere e vivere in <strong>Armonia</strong> con gli altri.',
     freesocial: {
       title: 'Social',
       descr: 'Una Community organizzata per <strong>Categorie</strong>, dove potrai unirti a <strong>Gruppi Tematici</strong>, '
         + 'Condividere <strong>Esperienze</strong> e unire Competenze per organizzare e sostenere <strong>Progetti Innovativi</strong> per il Popolo.<br><br>'
         + 'Verranno evidenziati sviluppi <strong>Etici</strong> come l\'<strong>Auto-Produzione</strong>, la <strong>Sostenibilitá</strong>, '
         + 'la Buona <strong>Salute Naturale</strong> e il <strong>Rispetto per l\'Ambiente</strong> e per tutti gli <strong>Esseri Viventi</strong> di questo '
-        + '<strong>Pianeta</strong>.',
+        + '<strong>Pianeta</strong>. Chiunque potrá esprimere il proprio <strong>Consenso o Dissenso</strong> partecipando a <strong>Sondaggi Interattivi</strong>'
+        + ' e realizzare insieme i <strong>Cambiamenti</strong> necessari alla nostra Società.',
     },
     freetalent: {
       title: 'Beni e Servizi',
       descr: 'Condividi i tuoi <strong>Talenti</strong> e <strong>Abilità</strong>, '
         + 'Nel Dare e Ricevere, si creeranno così legami di <strong>Amicizia, Solidarietà, Cooperazione e Divertimento</strong><br><br>' +
-        'Favoriamo lo scambio locale di <strong>Beni e Servizi</strong> dove potrai scegliere cosa chiedere in cambio (Dono, Offerta Libera, Baratto, Monete Alternative, ecc...).'
+        'Favoriamo lo scambio locale di <strong>Beni e Servizi</strong> grazie ad un sistema di baratto organizzato, in cui la comunità stessa si pone come garante.'
     },
     coin: {
       title: 'RIS - Credito Alternativo',
+      descr: '<strong>Stiamo lavorando</strong> anche per creare una sorta di "moneta alternativa" per conteggiare gli scambi che avvengono tra di noi, quando il semplice baratto risulta non applicabile.<br>' +
+        'Partendo dalle basi del <strong>Si.Cre.Na.C.C - Sistema di Credito Naturale a Copertura Certa</strong>.<br>' +
+        '<em>Ciascun operatore potrà creare moneta all\'occorrenza, se il saldo del suo conto non sarà sufficiente a coprire la spesa. Potrà quindi mandare il suo conto in "scoperto", accollandosi il conseguente' +
+        ' Debito, accreditando l\'equivalente somma all\'operatore ricevente, il quale la annovera nel suo conto in qualità di Credito. ' +
+        'L\'equilibrio tra il credito dell\'uno ed il debito dell\'altro ha come conseguenza che il debitore dovrà lavorare per rifondere il debito, mentre il ricevente potrà usare il credito come moneta.</em><br>' +
+        'Per maggiori informazioni consultare il libro gratuito <a href="https://sicrenacc.info/" target="_blank">cliccando qui</a>.'
+
+
     },
     freeliving: {
       title: 'Gruppi Territoriali',
-      descr: 'Questo progetto vuole diffondere la creazione di Gruppi Territoriali Provinciali, '
-        + 'per poter favorire progetti condivisi in ambito territoriale e creare così una <strong>Rete di Fiducia</strong> fino al <strong>vicinato</strong>, come giá viene praticato in piccolo, in numerosi <strong>Ecovillaggi</strong> e Comunità del mondo.',
+      descr: 'Questo progetto vuole diffondere la creazione di Gruppi Territoriali Provinciali,'
+        + 'per poter favorire progetti condivisi in ambito territoriale e creare così una <strong>Rete di Fiducia</strong> fino al vicinato, come giá viene praticato in piccolo, in numerosi <strong>Ecovillaggi</strong> e Comunità del mondo.',
 
     },
     freecollabora: {
@@ -231,9 +238,9 @@ const msg_website_it = {
     },
     multiplatform: {
       title: 'Multi-piattaforma',
-      descr: 'E\' compatibile con Google Chrome, Firefox, Opera, Safari, iPhone, Android e PC. L\'Applicazione s\'installa facilmente, senza dover passare dallo store. '
+      descr: 'E\' compatibile con Google Chrome, Firefox, Opera, Safari, iPhone, Android e PC. L\'Applicazione s\'installa facilmente, senza passare dallo store. '
         + 'basta entrare sul sito <strong>www.riso.app</strong>.<br>'
-        + 'Dopo la registrazione chiederà di aggiungerlo alla <strong>Schermata Home</strong> (oppure cliccare sul menu "..." del browser e scegliere "<strong>Installa APP</strong>")',
+        + 'Dopo la registrazione chiederà di aggiungerlo allo schermo (o cliccare sul menu del browser "Installa APP")',
     },
     free: {
       title: 'Gratuita, Open Source e Niente Pubblicità',

src/db/static_data.ts

@@ -7,29 +7,29 @@ import {
 import { func } from '@store/Modules/fieldsTable'
 
 const functionality: IFunctionality = {
-  PWA: true,
+  PWA: false,
   SHOW_USER_MENU: true, // Cambiare con true
   SHOW_PROFILE: true,
   SHOW_REG_BUTTON: true,
   ENABLE_REGISTRATION: true,
-  ENABLE_REG_BY_BOT: true,
-  ENABLE_REG_NEED_TELEGRAM: true,
+  ENABLE_REG_BY_BOT: false,
+  ENABLE_REG_NEED_TELEGRAM: false,
   SHOW_NEWSLETTER: false,
   SHOW_ONLY_POLICY: true,
   ENABLE_TODOS_LOADING: false,
   ENABLE_PROJECTS_LOADING: false,
   SHOW_IF_IS_SERVER_CONNECTION: false,
   SHOW_MESSAGES: false,
-  SHOW_NOTIF: true,
-  SHOW_COINS: true,
-  BOOKING_EVENTS: true,
+  SHOW_NOTIF: false,
+  SHOW_COINS: false,
+  BOOKING_EVENTS: false,
   ENABLE_ECOMMERCE: false,
   ENABLE_REG_ISP: true,
-  ENABLE_GROUPS: true,
-  ENABLE_CIRCUITS: true,
-  SHOW_COMPETENZE: true,
-  ENABLE_VIEW_GROUPS: true,
-  ENABLE_VIEW_USERS: true,
+  ENABLE_GROUPS: false,
+  ENABLE_CIRCUITS: false,
+  SHOW_COMPETENZE: false,
+  ENABLE_VIEW_GROUPS: false,
+  ENABLE_VIEW_USERS: false,
   ENABLE_VIEW_PROFILE: true,
 }
 
@@ -345,6 +345,20 @@ const routes_manager: IListRoutes[] = [
     onlyManager: true,
     onlyEditor: true
   },
+  {
+    active: true,
+    order: 32,
+    path: '/admin/home',
+    materialIcon: 'fas fa-file-alt',
+    name: 'otherpages.admin.elems',
+    component: () => import('@/rootgen/admin/editElems/editElems.vue'),
+    inmenu: true,
+    submenu: true,
+    level_parent: 0,
+    level_child: 0.5,
+    onlyManager: true,
+    onlyEditor: true
+  },
   {
     active: true,
     order: 30,
@@ -476,78 +490,12 @@ const baseroutes: IListRoutes[] = [
     path: '/',
     materialIcon: 'home',
     name: 'pages.home',
-    component: () => import('@src/root/mainview/mainview.vue'),
+    component: () => import('@src/root_spec/home_kolibrilab/home_kolibrilab.vue'),
     reqauth: false,
     inmenu: true,
     infooter: true,
   },
-  {
-    active: true,
-    order: 12,
-    path: '/goods',
-    materialIcon: 'fas fa-tshirt',
-    name: 'mypages.goods',
-    component: () => import('@/root/goods/goods.vue'),
-    meta: { requiresAuth: true },
-    inmenu: true,
-    infooter: true,
-  },
-  {
-    active: true,
-    order: 15,
-    path: '/services',
-    materialIcon: 'fas fa-house-user',
-    name: 'mypages.services',
-    component: () => import('@/root/services/services.vue'),
-    meta: { requiresAuth: true },
-    inmenu: true,
-    infooter: true,
-  },
-  {
-    active: true,
-    order: 15,
-    path: '/provapao',
-    materialIcon: 'fas fa-house-user',
-    name: 'mypages.provapao',
-    component: () => import('@/root/provapao/provapao.vue'),
-    meta: { requiresAuth: true },
-    inmenu: false,
-    infooter: false,
-  },
-  {
-    active: true,
-    order: 15,
-    path: '/hosps',
-    materialIcon: 'fas fa-bed',
-    name: 'mypages.hosp',
-    component: () => import('@/root/hosp/hosp.vue'),
-    meta: { requiresAuth: true },
-    inmenu: true,
-    infooter: true,
-  },
-  {
-    active: true,
-    order: 20,
-    path: '/events',
-    materialIcon: 'fas fa-bullhorn',
-    name: 'mypages.events',
-    component: () => import('@/root/eventi/eventi.vue'),
-    meta: { requiresAuth: true },
-    inmenu: true,
-    infooter: true,
-  },
-  {
-    active: true,
-    order: 100,
-    path: '/presentazione',
-    materialIcon: 'fas fa-info',
-    name: 'pages.presentazione',
-    component: () => import('@src/root/presentazione/presentazione.vue'),
-    reqauth: false,
-    inmenu: true,
-    infooter: true,
-  },
-  {
+  /*{
     active: true,
     order: 120,
     path: '/myprofile',
@@ -557,7 +505,7 @@ const baseroutes: IListRoutes[] = [
     meta: { requiresAuth: true },
     inmenu: true,
     infooter: true,
-  },
+  },*/
   {
     active: true,
     order: 120,
@@ -569,17 +517,6 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: false,
   },
-  {
-    active: true,
-    order: 130,
-    path: '/friends',
-    materialIcon: 'fas fa-user-friends',
-    name: 'mypages.friends',
-    component: () => import('@/views/user/myfriends/myfriends.vue'),
-    meta: { requiresAuth: true },
-    inmenu: true,
-    infooter: true,
-  },
   {
     active: functionality.ENABLE_GROUPS,
     order: 132,
@@ -623,7 +560,7 @@ const baseroutes: IListRoutes[] = [
     meta: { requiresAuth: true, newpage: true },
     inmenu: false,
     infooter: false,
-  },{
+  }, {
     active: true,
     order: 137,
     path: '/circuit/:path',
@@ -678,16 +615,6 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: false,
   },
-  {
-    active: true,
-    order: 150,
-    path: '/fundraising',
-    materialIcon: 'fas fa-hand-holding-heart',
-    name: 'pages.fundraising',
-    component: () => import('@src/root/fundraising/fundraising.vue'),
-    inmenu: true,
-    infooter: true,
-  },
   {
     active: true,
     order: 200,
@@ -709,6 +636,17 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: false,
   },
+  {
+    active: true,
+    order: 15,
+    path: '/provapao',
+    materialIcon: 'fas fa-house-user',
+    name: 'mypages.provapao',
+    component: () => import('@/root/provapao/provapao.vue'),
+    meta: { requiresAuth: true },
+    inmenu: false,
+    infooter: false,
+  },
   {
     active: true,
     order: 400,
@@ -770,17 +708,6 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: true
   },
-  {
-    active: functionality.ENABLE_REGISTRATION && functionality.ENABLE_REG_NEED_TELEGRAM,
-    order: 1000,
-    path: '/signup/:invited/:usernameteleg/:idteleg/:regexpire',
-    materialIcon: 'how_to_reg',
-    name: 'pages.SignUp',
-    component: () => import('@/views/login/signup/signup.vue'),
-    inmenu: false,
-    infooter: false,
-    separator: false
-  },
   {
     active: functionality.ENABLE_REG_BY_BOT,
     order: 1000,
@@ -791,34 +718,23 @@ const baseroutes: IListRoutes[] = [
     infooter: functionality.ENABLE_REG_BY_BOT,
     separator: false
   },
-  /*{
+  {
     active: functionality.ENABLE_REGISTRATION && !functionality.ENABLE_REG_NEED_TELEGRAM,
     order: 1000,
     path: '/signup',
     materialIcon: 'how_to_reg',
     name: 'pages.SignUp',
-    component: () => import('@/views/login/signup/signup_noteleg.vue'),
-    inmenu: false,
-    infooter: false,
-    separator: false
-  },*/
-  {
-    active: true,
-    order: 1001,
-    path: '/signup/:invited',
-    materialIcon: 'how_to_reg',
-    name: 'pages.SignUp2',
-    component: () => import('@/views/login/signup/signup.vue'),
+    component: () => import('@/views/login/signup_noteleg/signup_noteleg.vue'),
     inmenu: false,
     infooter: false,
     separator: false
   },
   {
     active: true,
-    order: 1002,
-    path: '/signup/:invited/:regexpire',
+    order: 1001,
+    path: '/signup/:invited',
     materialIcon: 'how_to_reg',
-    name: 'pages.SignUp3',
+    name: 'pages.SignUp2',
     component: () => import('@/views/login/signup/signup.vue'),
     inmenu: false,
     infooter: false,
@@ -842,7 +758,7 @@ const baseroutes: IListRoutes[] = [
     materialIcon: 'account_circle',
     name: 'pages.SignIn',
     component: () => import('@/views/login/signin_noreg/signin_noreg.vue'),
-    inmenu: true,
+    inmenu: false,
     infooter: true
   },
   // --- NOT IN MENU: ---
@@ -882,7 +798,7 @@ const baseroutes: IListRoutes[] = [
     isseparator: true,
     inmenu: true,
   },
-  {
+  /*{
     active: true,
     order: 80,
     path: '/calendario-eventi',
@@ -893,6 +809,8 @@ const baseroutes: IListRoutes[] = [
     inmenu: true,
     infooter: true
   },
+
+   */
   {
     active: true,
     order: 1000,

src/model/GlobalStore.ts

@@ -114,6 +114,7 @@ export interface IMyBot {
 export interface IMyElem {
   _id?: string
   type?: number
+  path?: string
   title?: string
   container?: string
   container2?: string
@@ -123,11 +124,11 @@ export interface IMyElem {
   ratio?: string
   containerHtml?: string
   size?: string
-  order?: string
-  width?: string
-  height?: string
-  heightimg?: string
-  widthimg?: string
+  order?: number
+  width?: number
+  height?: number
+  heightimg?: number
+  widthimg?: number
   link?: string
   onlyif_logged?: boolean
   active?: boolean

src/root/mypage/mypage.ts

@@ -3,11 +3,11 @@ import { defineComponent, ref, onMounted, watch, computed } from 'vue'
 import { useGlobalStore } from '@store/globalStore'
 import { useRoute } from 'vue-router'
 import MixinMetaTags from '@/mixins/mixin-metatags'
-import { CMyPage } from '@/components/CMyPage'
+import { CMyPageElem } from '@/components/CMyPageElem'
 
 export default defineComponent({
   name: 'Mypage',
-  components: { CMyPage },
+  components: { CMyPageElem },
   setup() {
     const rec = ref({})
     const globalStore = useGlobalStore()

src/root/mypage/mypage.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="isfinishLoading && !!rec">
-    <CMyPage
+    <CMyPageElem
+      v-if="rec.path"
       :title="rec.title" :imgbackground="`` + rec.imgback"
       :mypath="rec.path"
       :sizes="`max-height: ` + rec.heightimg + `px`">
@@ -14,7 +15,7 @@
         }}
       </span>
 
-    </CMyPage>
+    </CMyPageElem>
   </div>
 </template>
 <script lang="ts" src="./mypage.ts">

src/root_spec/home_tdv/home_tdv.scss

@@ -412,6 +412,12 @@ body.mobile .landing:before {
     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;
+  }
 
 }
 

src/rootgen/admin/editElems/editElems.ts

@@ -0,0 +1,67 @@
+import { defineComponent, ref, onMounted, computed, watch } from 'vue'
+
+import { CImgText } from '../../../components/CImgText/index'
+import { CCard } from '@/components/CCard'
+import { CMyPage } from '@/components/CMyPage'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CGridTableRec } from '@/components/CGridTableRec'
+
+import { colmyelems } from '@src/store/Modules/fieldsTable'
+import MixinMetaTags from '@/mixins/mixin-metatags'
+import { tools } from '@store/Modules/tools'
+import { shared_consts } from '@/common/shared_vuejs'
+import { IMyPage } from 'model'
+import { useGlobalStore } from '@store/globalStore'
+
+export default defineComponent({
+  name: 'editElems',
+  setup() {
+
+    const { setmeta } = MixinMetaTags()
+
+    const globalStore = useGlobalStore()
+
+    const arrPages = ref([] as any[])
+
+    const pageSel = ref('')
+
+    watch(() => pageSel.value, (newval: any, oldval) => {
+      tools.setCookie('s_elems', newval)
+    })
+
+    const filtercustom = computed(() => [{ path: pageSel.value }] )
+
+    function mounted() {
+
+      arrPages.value = []
+      arrPages.value.push({label: '[Vuoto]', path: ''})
+      for (const page of globalStore.mypage) {
+
+        const rec = {
+          // @ts-ignore
+          label: page.title,
+          // @ts-ignore
+          value: page.path
+        }
+        arrPages.value.push(rec)
+      }
+
+
+
+        // filtercustom.value = [{ userId: userStore.my._id }]
+    }
+
+    onMounted(mounted)
+
+    pageSel.value = tools.getCookie('s_elems', '')
+
+    return {
+      colmyelems,
+      setmeta,
+      arrPages,
+      pageSel,
+      filtercustom,
+    }
+  },
+  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec }
+})

src/rootgen/admin/editElems/editElems.vue

@@ -1,5 +1,5 @@
 ù<template>
-  <CMyPage title="Pagina Home" imgbackground="images/calendario_eventi.jpg" sizes="max-height: 120px">
+  <CMyPage title="Elementi Pagine" imgbackground="images/calendario_eventi.jpg" sizes="max-height: 120px">
         <span>{{
             setmeta({
               title: 'Pagina Home',
@@ -10,22 +10,29 @@
         </span>
 
     <div class="q-ma-sm q-gutter-sm q-pa-xs">
-      <CTitleBanner title="Pagina Home"></CTitleBanner>
+      <CTitleBanner title="Elementi Pagine"></CTitleBanner>
+
+      <q-select rounded outlined v-model="pageSel"
+                :options="arrPages"
+                label="Pagina" emit-value map-options>
+
+      </q-select>
       <CGridTableRec
         prop_mytable="myelems"
-        prop_mytitle="Pagina Home"
+        prop_mytitle="Elementi Pagina"
         :prop_mycolumns="colmyelems"
+        :filtercustom="filtercustom"
         prop_colkey="title"
-        nodataLabel="Nessun elemento di Pagina Home"
+        nodataLabel="Nessun elemento di Modifica Elementi"
         noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
 
       </CGridTableRec>
     </div>
   </CMyPage>
 </template>
-<script lang="ts" src="./home.ts">
+<script lang="ts" src="./editElems.ts">
 
 </script>
 <style lang="scss" scoped>
-@import 'home.scss';
+@import 'editElems.scss';
 </style>

src/rootgen/admin/home/home.ts

@@ -1,24 +0,0 @@
-import { defineComponent, ref, onMounted } from 'vue'
-
-import { CImgText } from '../../../components/CImgText/index'
-import { CCard } from '@/components/CCard'
-import { CMyPage } from '@/components/CMyPage'
-import { CTitleBanner } from '@/components/CTitleBanner'
-import { CGridTableRec } from '@/components/CGridTableRec'
-
-import { colmyelems } from '@src/store/Modules/fieldsTable'
-import MixinMetaTags from '@/mixins/mixin-metatags'
-
-export default defineComponent({
-  name: 'Home',
-  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec },
-  setup() {
-
-    const { setmeta } = MixinMetaTags()
-
-    return {
-      colmyelems,
-      setmeta,
-    }
-  }
-})

src/statics/lang/it.js

@@ -71,6 +71,7 @@ const msg_it = {
         monete: 'Monete',
         pages: 'Pagine',
         Home: 'Pagina Home',
+        elems: 'Elementi Pagine',
         operators: 'Operatori',
         disciplines: 'Discipline',
         media: 'Media',
@@ -1250,7 +1251,32 @@ const msg_it = {
       bookings: 'Prenotaz.',
       profile: 'Profilo',
       circuits: 'Circuiti',
-    }
+    },
+
+    myelems: {
+      active: 'active',
+      title: 'title',
+      path: 'Path',
+      order: 'Order',
+      type: 'Type',
+      container: 'Container',
+      container2: 'Container2',
+      container3: 'Container3',
+      number: 'Number',
+      imgback: 'imgback',
+      size: 'size',
+      ratio: 'ratio',
+      containerHtml: 'containerHtml',
+      height: 'height',
+      heightimg: 'heightimg',
+      widthimg: 'widthimg',
+      link: 'link',
+      width: 'width',
+      onlyif_logged: 'onlyif_logged',
+      color: 'color',
+      class: 'class',
+      styleadd: 'styleadd',
+    },
   },
 
 };

src/store/Modules/fieldsTable.ts

@@ -126,6 +126,7 @@ export const colgallery = [
 export const colmyelems = [
   AddCol({ name: 'active', label_trans: 'myelems.active', fieldtype: costanti.FieldType.boolean  }),
   AddCol({ name: 'title', label_trans: 'myelems.title' }),
+  AddCol({ name: 'path', label_trans: 'myelems.path' }),
   AddCol({ name: 'order', label_trans: 'myelems.order', fieldtype: costanti.FieldType.number  }),
   AddCol({ name: 'type', label_trans: 'myelems.type', fieldtype: costanti.FieldType.select, jointable: 'elemtypes' }),
   AddCol({ name: 'container', label_trans: 'myelems.container' }),

src/store/UserStore.ts

@@ -29,6 +29,7 @@ import { static_data } from '@src/db/static_data'
 
 
 import bcrypt from 'bcryptjs'
+
 import { useTodoStore } from '@store/Todos'
 import { Router } from 'vue-router'
 import { useProjectStore } from '@store/Projects'
@@ -257,7 +258,7 @@ export const useUserStore = defineStore('UserStore', {
       // Check if is this User!
       if (this.my.username === username) return this.my
 
-      let trovato:any = null
+      let trovato: any = null
       if (this.usersList) trovato = this.usersList.find((item: any) => item.username === username)
 
       if (trovato) {
@@ -283,7 +284,7 @@ export const useUserStore = defineStore('UserStore', {
     },
 
     getImgUserByUsername(username: string): string {
-      let img = this.getImgByUsername(username)
+      const img = this.getImgByUsername(username)
       return img ? img : 'images/noimg-user.svg'
     },
 
@@ -309,6 +310,7 @@ export const useUserStore = defineStore('UserStore', {
           return costanti.DIR_UPLOAD + 'profile/' + userparam.username + '/' + userparam.profile.img
         }
       } catch (e) {
+        //
       }
       if (!reale)
         return 'images/noimg.png'
@@ -363,6 +365,7 @@ export const useUserStore = defineStore('UserStore', {
         if (circ.photos && circ.photos.length > 0)
           return costanti.DIR_UPLOAD + 'circuits/' + circ.path + '/' + circ.photos[0].imagefile
       } catch (e) {
+        //
       }
       return 'images/noimg.png'
     },
@@ -370,9 +373,10 @@ export const useUserStore = defineStore('UserStore', {
     getImgByGroup(group: IMyGroup): string {
 
       try {
-        //++Todo: Sistemare!
+        // ++Todo: Sistemare!
         return costanti.DIR_UPLOAD + 'mygroups/' + group.groupname + '/' + group.photos[0].imagefile
       } catch (e) {
+        //
       }
       return 'images/noimg.png'
     },
@@ -411,7 +415,7 @@ export const useUserStore = defineStore('UserStore', {
     },
 
     getNameSurnameByUsername(username: string): string {
-      let user = this.getUserByUsername(username)
+      const user = this.getUserByUsername(username)
       if (user) return `${user.name} ` + !!user.surname ? user.surname : ''
       return `(${username})`
     },
@@ -420,7 +424,7 @@ export const useUserStore = defineStore('UserStore', {
       // Check if is this User!
       if (this.my._id === userId) return this.my
 
-      let trovato:any = null
+      let trovato: any = null
 
       if (this.usersList) trovato = this.usersList.find((item: any) => item._id === userId)
 

src/store/globalStore.ts

@@ -5,8 +5,8 @@ import {
   IConfig,
   IDataToSet,
   IGlobalState,
-  IListRoutes,
-  IMyPage, IParamsPickup,
+  IListRoutes, IMyElem,
+  IMyPage, IMySkill, IParamsPickup,
   IParamsQuery,
   ISettings,
   StateConnection,
@@ -178,6 +178,10 @@ export const useGlobalStore = defineStore('GlobalStore', {
 
     getPage: (state: IGlobalState) => (path: string): IMyPage | undefined => state.mypage.find((page) => (`/${page.path}`) === path),
 
+    getMyElems: (state: IGlobalState) => (path: string): IMyElem[] | [] => {
+      return state.myelems.filter((page: IMyElem) => (page.path === path)).sort((a: any, b: any) => a.order - b.order)
+    },
+
     getmenu: (state: IGlobalState): any => {
       // console.log('getmenu', cfgrouter.getmenu())
 
@@ -1727,6 +1731,52 @@ export const useGlobalStore = defineStore('GlobalStore', {
 
     },
 
+    async delMyElem($q: any, t: any, myelem: IMyElem) {
+
+      if (!myelem._id)
+        return false
+
+      return await this.DeleteRec({table: 'myelems', id: myelem._id }).then((ris) => {
+        if (ris) {
+          this.myelems = this.myelems.filter((rec) => rec._id !== myelem._id)
+          tools.showPositiveNotif($q, t('db.deletedrecord'))
+        } else {
+          tools.showNegativeNotif($q, t('db.recdelfailed'))
+        }
+      })
+    },
+
+    async saveMyElem($q: any, t: any, myelem: IMyElem) {
+      const mydata = {
+        table: 'myelems',
+        data: {}
+      }
+
+      mydata.data = myelem
+
+      return await this.saveTable(mydata)
+        .then((ris) => {
+          if (ris) {
+            tools.showPositiveNotif($q, t('db.recupdated'))
+          } else {
+            tools.showNegativeNotif($q, t('db.recfailed'))
+          }
+          return ris
+        }).catch((e) => {
+          tools.showNegativeNotif($q, t('db.recfailed'))
+          return false
+        })
+
+
+    },
+
+    async addNewElem($q: any, t: any, myelem: IMyElem) {
+      const myrec = await this.saveMyElem($q, t, myelem)
+      if (myrec) {
+        myelem._id = myrec._id
+        this.myelems.push(myelem)
+      }
+    },
 
   },
 })