Webpage Editor functionality

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,
+    }
+  },
+
+})