Webpage Editor functionality

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