myprojplanet_vite/src/components/CMyPageElem/CMyPageElem.vue

<template>
  <div>
    <div v-if="mypathin && !!rec">
      <q-inner-loading
        id="spinner"
        :showing="onloading"
      >
        <q-spinner-tail
          color="primary"
          size="4em"
        >
        </q-spinner-tail>
      </q-inner-loading>

      <div v-if="!onloading">
        <q-toggle
          v-if="tools.isManager()"
          v-model="editOn"
          dense
          color="green"
          size="sm"
          @update:model-value="changeVisuDrawer(mypathin, editOn)"
          icon="fas fa-pencil-alt"
        >
        </q-toggle>

        <q-drawer
          v-model="visuEditor"
          v-if="selElem && editOn && !tools.isObjectEmpty(selElem)"
          show-if-above
          :breakpoint="350"
          side="right"
          :width="tools.isMobile() ? 350 : mywidthEditor"
          elevated
          style="transition: 'width 0.3s ease'"
        >
          <q-bar
            dense
            class="q-ma-xs bg-primary text-white"
          >
            <q-toolbar-title> Editor </q-toolbar-title>
            <q-btn
              flat
              round
              size="md"
              color="white"
              icon="close"
              @click="
                visuEditor = false;
                selElem = {};
              "
            ></q-btn>
          </q-bar>

          <CMyEditElem
            :myelem="selElem"
            :editOn="true"
            :path="rec.path"
            :idPage="rec._id"
            @selElemClick="selElemClick"
            @deleteElem="deleteElem"
            @toggleSize="toggleSize"
            @dupPage="duplicatePage"
            @expPage="showexportPage = !showexportPage"
            @impPage="showimportPage = !showimportPage"
          >
          </CMyEditElem>
        </q-drawer>

        <div
          :class="{ 'q-gutter-xs': !hideHeader }"
          :style="[{'margin-left': hideHeader ? 0 : 1 + 'px', 'margin-right': hideHeader ? 0 : 1 + 'px' }]"
        >
          <div
            v-if="!!rec.img1"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img1"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content"
            v-html="rec.content"
          ></div>
          <q-video
            v-if="!!rec.video1"
            :src="rec.video1"
            :ratio="rec.ratio1"
          >
          </q-video>

          <div
            v-if="!!rec.img2"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img2"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content2"
            v-html="rec.content2"
          ></div>
          <q-video
            v-if="!!rec.video2"
            :src="rec.video2"
            :ratio="rec.ratio2"
          ></q-video>

          <div
            v-if="!!rec.img3"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img2"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content3"
            v-html="rec.content3"
          ></div>
          <q-video
            v-if="!!rec.video3"
            :src="rec.video3"
            :ratio="rec.ratio3"
          ></q-video>
          <div
            v-if="!!rec.content4"
            v-html="rec.content4"
          ></div>

          <div
            v-for="myelem in myelems"
            :key="myelem._id"
          >
            <div>
              <transition
                :duration="1000"
                appear
              >
                <CTitleBanner
                  v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
                  :class="`q-pa-xs `"
                  :title="myelem.titleBanner"
                  bgcolor="bg-primary"
                  :clcolor="myelem.color ? `` : `text-white`"
                  :mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
                  :myclass="myelem.classBanner"
                  :canopen="true"
                >
                  <CMyElem
                    :myelem="myelem"
                    :idPage="rec._id"
                    :editOn="editOn"
                    :addOn="addOn"
                    :path="!!rec.path ? rec.path : ''"
                    :selElem="selElem"
                    @selElemClick="selElemClick"
                  >
                  </CMyElem>
                </CTitleBanner>
                <CMyElem
                  v-else-if="(myelem.active || editOn) && !!rec.path"
                  :myelem="myelem"
                  :editOn="editOn"
                  :addOn="addOn"
                  :idPage="rec._id"
                  :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"
              :myelem="myelemVoid"
              :editOn="editOn"
              :addOn="addOn"
              :idPage="rec._id"
              :selElem="selElem"
              :path="rec.path"
              @selElemClick="selElemClick"
            >
            </CMyElem>
          </div>
        </div>
        <LandingFooter v-if="rec.showFooter"></LandingFooter>
      </div>
    </div>
    <div v-else>
      <div v-if="!!title">
        <CTitle
          v-if="imgbackground"
          :imgbackground="imgbackground"
          :headtitle="title"
          :sizes="sizes"
          :styleadd="styleadd"
        ></CTitle>
        <div v-if="!imgbackground">
          <CImgTitle
            v-if="img"
            :src="img"
            :title="title"
          >
          </CImgTitle>
        </div>
        <slot></slot>
        <div v-if="!nofooter"></div>
      </div>
    </div>

    <q-dialog v-model="showexportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
            :esporta="true"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog v-model="showimportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CMyPageElem.ts"></script>
<style lang="scss" scoped>
@import './CMyPageElem.scss';
</style>