- aggiornato l'Editor HTML

src/components/CMyPageElem/CMyPageElem.ts

@@ -84,6 +84,8 @@ export default defineComponent({
     const selElem = ref(globalStore.selElem)
     const site = ref(globalStore.site)
 
+    const onloading = ref(false)
+
     const myelems = computed(() => {
       if (mypathin.value)
         return globalStore.getMyElems(mypathin.value)
@@ -91,11 +93,11 @@ export default defineComponent({
         return null
     })
 
-    function load() {
+    async function load() {
       // console.log('load', mypathin.value)
 
       if (mypathin.value !== '') {
-        globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
+        await globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
           rec.value = ris
           // console.log('LoadPage', ris)
         })
@@ -124,15 +126,8 @@ export default defineComponent({
         }
       })
 
-    function selElemClick(myelem: IMyElem) {
-      // console.log('mypageelem selElemClick', myelem)
-      selElem.value = {}
-      selElem.value = myelem
-      visuEditor.value = !!myelem
-    }
-
-    function mounted() {
-      load()
+    async function mounted() {
+      await load()
     }
 
     function saveElem(myelem: IMyElem) {
@@ -147,6 +142,20 @@ export default defineComponent({
       mywidthEditor.value = mywidthEditor.value === 400 ? 1200 : 400
     }
 
+    function deleteElem() {
+      selElem.value = {}
+      visuEditor.value = false
+    }
+    function selElemClick(myelem: IMyElem) {
+      // console.log('mypageelem selElemClick', myelem)
+
+      selElem.value = {}
+      selElem.value = myelem
+      visuEditor.value = !!myelem
+
+    }
+
+
     onMounted(mounted)
 
     return {
@@ -164,6 +173,8 @@ export default defineComponent({
       changeVisuDrawer,
       mywidthEditor,
       toggleSize,
+      onloading,
+      deleteElem,
     }
   },
 

src/components/CMyPageElem/CMyPageElem.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="mypathin && !!rec">
+    <div v-if="mypathin && !!rec && !onloading">
       <q-toggle
         v-if="tools.isManager()"
         v-model="editOn"
@@ -37,13 +37,13 @@
           ></q-btn>
         </q-bar>
 
-        <q-btn class="q-ma-sm" @click="toggleSize" label="<" color="primary" />
-
         <CMyEditElem
           :myelem="selElem"
           :editOn="true"
           :path="rec.path"
           @selElemClick="selElemClick"
+          @deleteElem="deleteElem"
+          @toggleSize="toggleSize"
         >
         </CMyEditElem>
       </q-drawer>
@@ -80,23 +80,26 @@
         ></q-video>
         <div v-if="!!rec.content4" v-html="rec.content4"></div>
 
-        <div v-for="(myelem, ind) in myelems" :key="ind">
+        <div v-for="myelem in myelems" :key="myelem._id">
           <div>
-            <CMyElem
-              v-if="(myelem.active || editOn) && !!rec.path"
-              :myelem="myelem"
-              :editOn="editOn"
-              :addOn="addOn"
-              :path="!!rec.path ? rec.path : ''"
-              :selElem="selElem"
-              @selElemClick="selElemClick"
-            >
-            </CMyElem>
+            <transition :duration="1000" appear>
+              <CMyElem
+                v-if="(myelem.active || editOn) && !!rec.path"
+                :myelem="myelem"
+                :editOn="editOn"
+                :addOn="addOn"
+                :path="!!rec.path ? rec.path : ''"
+                :selElem="selElem"
+                @selElemClick="selElemClick"
+              >
+              </CMyElem>
+            </transition>
           </div>
           <div v-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
             <CMyPageElem2 :mypath="myelem.container">&nbsp;</CMyPageElem2>
           </div>
         </div>
+
         <div v-if="myelems.length === 0">
           <CMyElem
             v-if="editOn && !!rec.path"
@@ -128,6 +131,9 @@
         <div v-if="!nofooter"></div>
       </div>
     </div>
+    <q-inner-loading id="spinner" :showing="onloading">
+      <q-spinner-tail color="primary" size="4em"> </q-spinner-tail>
+    </q-inner-loading>
   </div>
 </template>