Web Editor home made

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({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
+    const myelemVoid = ref({ _id: objectId(), 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
     })
 
-
-    const load = async (): Promise<void> => {
+    function load() {
       // 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 => {
+          rec.value = ris
+        })
+      }
 
-      editOn.value = tools.getCookie('EDIT_' + mypathin.value) === '-1' ? true : false
-      if (mypathin.value === 'home')
-        editOn.value = false
-      console.log('getcookie: ',  editOn.value, mypathin.value)
+      if (tools.isManager()) {
+        editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
+        console.log('getcookie: ', editOn.value, mypathin.value)
+      }
     }
 
-    watch(() => props.mypath, async (to: string, from: string) =>  {
+    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() {
-      console.log('changeVisuDrawer')
-      tools.setCookie('EDIT_' + mypathin.value, editOn.value ? '-1' : '0')
+    function changeVisuDrawer(path: string, edit: boolean) {
+      globalStore.changeVisuDrawer(path, edit)
     }
 
-    onMounted(load)
+    onMounted(mounted)
 
     return {
       rec, myelems,

src/components/CMyPageElem/CMyPageElem.vue

@@ -5,35 +5,37 @@
         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-bar dense class="bg-primary text-white">
-          <q-toolbar-title> Editor </q-toolbar-title>
-          <q-btn
-            flat
-            round
-            color="white"
-            icon="close"
-            @click="editOn = false; changeVisuDrawer()"
-          ></q-btn>
-        </q-bar>
-        <CMyEditElem
-          :myelem="selElem"
-          :editOn="true"
-          :path="rec.path"
-          @saveElem="saveElem"
-        >
-        </CMyEditElem>
+        <q-scroll-area class="fit">
+          <q-bar dense class="bg-primary text-white">
+            <q-toolbar-title> Editor </q-toolbar-title>
+            <q-btn
+              flat
+              round
+              color="white"
+              icon="close"
+              @click="
+                editOn = false;
+              "
+            ></q-btn>
+          </q-bar>
+          <CMyEditElem
+            :myelem="selElem"
+            :editOn="true"
+            :path="rec.path"
+          >
+          </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>