HTML Editor go on

src/components/CMyEditElem/CMyEditElem.ts

@@ -0,0 +1,259 @@
+import {
+  defineComponent, onMounted, PropType, ref, toRef, watch,
+} from 'vue'
+
+import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '@/components/CTitle/index'
+import { tools } from '@store/Modules/tools'
+import { shared_consts } from '@/common/shared_vuejs'
+import { LandingFooter } from '@/components/LandingFooter'
+import { COpenStreetMap } from '@src/components/COpenStreetMap'
+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 { CMyFieldRec } from '@src/components/CMyFieldRec'
+import { CSelectColor } from '@src/components/CSelectColor'
+import { CSelectFontSize } from '@src/components/CSelectFontSize'
+
+import MixinMetaTags from '@/mixins/mixin-metatags'
+import MixinBase from '@/mixins/mixin-base'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { emitKeypressEvents } from 'readline'
+import { costanti } from '@costanti'
+
+
+export default defineComponent({
+  name: 'CMyEditElem',
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+    CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
+    CSelectColor, CSelectFontSize },
+  emits: ['saveElem'],
+  props: {
+    myelem: {
+      type: Object as PropType<IMyElem>,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    editOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const globalStore = useGlobalStore()
+
+    const { setmeta, getsrcbyimg } = MixinMetaTags()
+    const { setValDb, getValDb } = MixinBase()
+
+
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const animare = ref(0)
+    const slide = ref(0)
+    const slide2 = ref(0)
+    const arrPages = ref([] as any[])
+    const disableSave = ref(true)
+    const enableEdit = ref(true)
+    const elemChanged = ref(false)
+    const enableAdd = 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)
+    }
+
+    function getheightgallery() {
+      if (tools.isMobile())
+        return '400px'
+      else
+        return '600px'
+    }
+
+    function saveElem(exit?: boolean) {
+      // Save Elem record
+      const myelem = props.myelem
+      myelem.order = neworder.value
+      globalStore.saveMyElem($q, t, myelem).then((ris) => {
+        if (ris) {
+          // OK
+          disableSave.value = true
+          emit('saveElem', myelem)
+          if (exit)
+            elemChanged.value = false
+        }
+      })
+    }
+
+    function addNewElem(order?: number) {
+
+      const newrec: IMyElem = {
+        _id: undefined,
+        type: newtype.value,
+        path: props.myelem.path,
+        order: order ? order : 1000,
+        active: true,
+        container: ''
+      }
+
+      if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
+        newrec.container2 = '8'
+        newrec.height = 600
+      } else if (newrec.type === shared_consts.ELEMTYPE.CARD) {
+        newrec.class2 = 'row justify-center'
+      }
+
+
+      globalStore.addNewElem($q, t, newrec)
+    }
+
+    function dupElem(order?: number) {
+
+      const newrec = props.myelem
+
+      newrec._id = undefined
+      newrec.order = order ? order : newrec.order! + 10
+
+      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
+      elemChanged.value = true
+    }
+
+    function mounted() {
+      neworder.value = props.myelem.order
+
+      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)
+      }
+
+      if (props.myelem)
+        newtype.value = props.myelem.type
+    }
+
+    function clickOnElem() {
+      if (props.editOn) {
+      }
+    }
+
+    function addNewCard() {
+      if (!myel.value.listcards)
+        myel.value.listcards = []
+      myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
+      modifElem(true)
+    }
+
+    function getClass() {
+      let mycl = ''
+      if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
+        mycl += ' align_center'
+      } else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
+        mycl += ' align_right'
+      } else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
+        mycl += ' align_left'
+      }
+
+      return mycl
+    }
+
+    function showFit() {
+      if (props.myelem.type)
+        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
+      else
+        return false
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      shared_consts,
+      getArrDisciplines,
+      getheightgallery,
+      slide,
+      slide2,
+      animare,
+      setmeta,
+      getsrcbyimg,
+      saveElem,
+      myel,
+      disableSave,
+      modifElem,
+      delElem,
+      addNewElem,
+      newtype,
+      neworder,
+      elemChanged,
+      enableAdd,
+      clickOnElem,
+      getClass,
+      showFit,
+      getValDb,
+      dupElem,
+      enableEdit,
+      addNewCard,
+      arrPages,
+      costanti,
+    }
+  },
+
+})