Webpage Editor: Carousel Images

2022-11-11 18:16:28 +01:00
parent 9fe37c9f3c
commit a751c99237
18 changed files with 373 additions and 85 deletions
--- a/src/components/CMyElem/CMyElem.scss
+++ b/src/components/CMyElem/CMyElem.scss
@@ -443,3 +443,22 @@ body.mobile .landing:before {
  color: #999;
  letter-spacing: 0.093rem;
 }
+
+.clEditDiv {
+  border: #c8c9cb solid 2px;
+  padding: 2px;
+}
+
+.clEditNotActive {
+  background-color: #e6e6e6;
+}
+
+.clEdit {
+  border: #f69f09 solid 2px;
+  padding: 2px;
+}
+
+.clEdit:hover {
+  border: #11f609 solid 2px;
+  cursor: pointer;
+}
--- a/src/components/CMyElem/CMyElem.ts
+++ b/src/components/CMyElem/CMyElem.ts
@@ -16,6 +16,7 @@ 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 MixinMetaTags from '@/mixins/mixin-metatags'
 import { useQuasar } from 'quasar'
@@ -23,12 +24,17 @@ import { useI18n } from '@/boot/i18n'

 export default defineComponent({
  name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor },
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec },
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
    editOn: {
      type: Boolean,
      required: false,
@@ -52,6 +58,8 @@ export default defineComponent({
    const slide = ref(0)
    const slide2 = ref(0)
    const disableSave = ref(true)
+    const enableEdit = ref(false)
+    const enableAdd = ref(true)

    const neworder = ref(<number|undefined>0)

@@ -73,7 +81,7 @@ export default defineComponent({
        return '600px'
    }

-    function saveElem() {
+    function saveElem(exit?: boolean) {
      // Save Elem record
      const myelem = props.myelem
      myelem.order = neworder.value
@@ -81,6 +89,8 @@ export default defineComponent({
        if (ris) {
          // OK
          disableSave.value = true
+          if (exit)
+            enableEdit.value = false
        }
      })
    }
@@ -96,6 +106,11 @@ export default defineComponent({
        container: ''
      }

+      if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
+        newrec.container2 = '8'
+        newrec.height = 600
+      }
+
      globalStore.addNewElem($q, t, newrec)
    }

@@ -134,6 +149,12 @@ export default defineComponent({
        newtype.value = props.myelem.type
    }

+    function clickOnElem() {
+      if (props.editOn) {
+        enableEdit.value = true
+      }
+    }
+
    onMounted(mounted)

    return {
@@ -154,6 +175,9 @@ export default defineComponent({
      addNewElem,
      newtype,
      neworder,
+      enableEdit,
+      enableAdd,
+      clickOnElem,
    }
  },

--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -1,6 +1,25 @@
 <template>
-  <div v-if="myel">
-    <q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
+  <div v-if="myel"
+       :class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
+  >
+    <q-bar v-if="enableEdit" dense class="bg-blue-1 text-white q-px-sm">
+      <q-toggle
+        v-model="myel.active"
+        color="positive"
+        icon="fas fa-eye"
+      >
+      </q-toggle>
+      <q-toggle
+        v-model="enableEdit"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+      <!--<q-toggle v-if="tools.isManager()"
+                v-model="enableAdd"
+                icon="fas fa-plus"
+      </q-toggle>
+      >-->
+
      <q-input
        style="max-width: 60px"
        hide-bottom-space
@@ -8,7 +27,7 @@
        dense
        @update:model-value="modifElem"
        v-model="neworder"
-        v-on:keyup.enter="saveElem"
+        v-on:keyup.enter="saveElem(false)"
        type="number"
      >
      </q-input>
@@ -22,7 +41,7 @@
        @click="delElem">
      </q-btn>

-      <q-select v-if="addOn"
+      <q-select v-if="enableAdd"
                v-model="newtype"
                dense
                style="width: 150px;"
@@ -31,7 +50,7 @@

      </q-select>
      <q-btn
-        v-if="addOn"
+        v-if="enableAdd"
        size="sm"
        dense
        flat
@@ -42,7 +61,7 @@

    </q-bar>
    <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          class="fa-border"
          @update:model-value="modifElem"
@@ -54,13 +73,14 @@
        </q-input>

      </div>
-      <div v-else
-           :class="myel.class">{{ myel.container }}
+      <div
+        :class="myel.class + (editOn ? ` clEdit` : ``)"
+        @click="clickOnElem">{{ myel.container }}

      </div>
    </div>
    <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          label="Margine:"
          class="fa-border"
@@ -72,10 +92,14 @@
        </q-input>

      </div>
-      <div :style="`margin: ` + myel.size"></div>
+      <div
+        :class="myel.class + (editOn ? ` clEdit` : ``)"
+        @click="clickOnElem"
+        :style="`margin: ` + myel.size">&nbsp;
+      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          class="fa-border"
          @update:model-value="modifElem"
@@ -86,22 +110,26 @@
        </q-input>

      </div>
-      <div v-else>
-        <CTitle
-          :imgbackground="myel.imgback"
-          :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
-        </CTitle>
+      <div>
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``)"
+          @click="clickOnElem">
+          <CTitle
+            :imgbackground="myel.imgback"
+            :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
+          </CTitle>
+        </div>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          label="Img"
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
-          v-on:keyup.enter="saveElem"
+          v-on:keyup.enter="saveElem(false)"
        >
        </q-input>
        <q-input
@@ -115,13 +143,16 @@
        </q-input>

      </div>
-      <div v-else>
-        <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
-        </CImgTitle>
+      <div>
+        <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+             @click="clickOnElem">
+          <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
+          </CImgTitle>
+        </div>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          label="Classe:"
          @update:model-value="modifElem"
@@ -140,12 +171,14 @@
        </CMyEditor>

      </div>
-      <div v-else>
-        <div :class="myel.class" v-html="myel.containerHtml"></div>
+      <div>
+        <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+             @click="clickOnElem"
+             v-html="myel.containerHtml"></div>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
-      <div v-if="editOn">
+      <div v-if="enableEdit">
        <q-input
          label="NomeFile Img:"
          @update:model-value="modifElem"
@@ -176,11 +209,14 @@
        </div>
      </div>
      <div class="text-center">
-        <q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
+        <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+             @click="clickOnElem">
+          <q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
+        </div>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
-      <div v-if="editOn" class="row">
+      <div v-if="enableEdit" class="row">
        <q-input
          label="NomeFile Video:"
          @update:model-value="modifElem"
@@ -199,16 +235,19 @@
        >
        </q-input>
      </div>
-      <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
-      </q-video>
+      <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+           @click="clickOnElem">
+        <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
+        </q-video>
+      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
      <LandingFooter></LandingFooter>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
-      <div v-if="editOn" class="row">
+      <div v-if="enableEdit" class="row">
        <q-input
-          label="Nome Pagina:"
+          label="Importa Pagina:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
@@ -216,10 +255,13 @@
        >
        </q-input>
      </div>
-      <CMyPage :mypath="myel.container"></CMyPage>
+      <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+           @click="clickOnElem">
+        <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
+      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
-      <div v-if="editOn" class="row">
+      <div v-if="enableEdit" class="row">
        <q-input
          label="NomeFile Img:"
          @update:model-value="modifElem"
@@ -255,7 +297,10 @@
        >
        </q-input>
      </div>
-      <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
+      <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+           @click="clickOnElem">
+        <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
+      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
      <CCardCarousel :myarr="getArrDisciplines()">
@@ -272,40 +317,72 @@
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center">

-        <div v-if="editOn" class="row">
-          <q-input
-            label="lista:"
+        <div v-if="enableEdit" class="row">
+          <CMyFieldRec
+            title="Lista Immagini:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="list"
            @update:model-value="modifElem"
-            v-model="myel.list"
+            :canEdit="true"
+            :canModify="true">
+          </CMyFieldRec>
+
+          <q-input
+            label="Secondi tra un'immagine e l'altra:"
+            @update:model-value="modifElem"
+            v-model="myel.container2"
+            type="number"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
-        </div>
+          <q-toggle
+            label="Sottotitoli"
+            v-model="myel.parambool"
+            color="positive"
+            icon="fas fa-eye"
+          >
+          </q-toggle>

-        <q-carousel
-          swipeable
-          animated
-          :autoplay="8000"
-          v-model="slide2"
-          arrows
-          thumbnails
-          infinite
-          height="600">
-          <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
-                            :img-src="getsrcbyimg(`images/`+ rec.imagefile)"
-                            :alt="rec.alt"
-                            class="carousel_slide">
-            <div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
-              <div class="text-h5"><span
-                class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}. </span>
-                <span v-if="rec.alt"
-                      class="text-h6 text-grey-2 shadow">{{ rec.alt }}</span></div>
-              <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{ rec.description }}</span>
+          <q-toggle
+            label="Miniature"
+            v-model="myel.parambool2"
+            color="positive"
+            icon="fas fa-eye"
+          >
+          </q-toggle>
+
+        </div>
+        <div :class="myel.class + (editOn ? ` clEdit` : ``)"
+             @click="clickOnElem">
+
+          <q-carousel
+            swipeable
+            animated
+            :autoplay="myel.container2 ? (myel.container2 * 1000) : 8000"
+            v-model="slide2"
+            arrows
+            :thumbnails="myel.parambool2"
+            infinite
+            :height="myel.height ? myel.height.toString() : 600">
+            <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
+                              :img-src="getsrcbyimg(`upload/pages/`+ path + `/`+ rec.imagefile)"
+                              :alt="rec.alt"
+                              class="carousel_slide">
+              <div
+                v-if="myel.parambool" class="absolute-bottom custom-caption" style="margin-bottom: 70px">
+                <div class="text-h5"><span
+                  class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}. </span>
+                  <span v-if="rec.alt"
+                        class="text-h6 text-grey-2 shadow">{{ rec.alt }}</span></div>
+                <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{ rec.description }}</span>
+                </div>
              </div>
-            </div>
-          </q-carousel-slide>
-        </q-carousel>
+            </q-carousel-slide>
+          </q-carousel>
+        </div>
      </section>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
@@ -367,6 +444,17 @@
      </section>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
+      <div v-if="enableEdit" class="row">
+        <q-input
+          label="Visualizza ultimi N eventi:"
+          @update:model-value="modifElem"
+          v-model="myel.number"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+
      <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
      </CEventsCalendar>
    </div>
@@ -379,15 +467,26 @@

      </div>
    </div>
-    <q-btn
-      v-if="editOn && !disableSave"
-      icon="fas fa-check"
-      color="positive"
-      label="Salva"
-      size="sm"
-      :disable="disableSave"
-      @click="saveElem">
-    </q-btn>
+    <div class="justify-center q-gutter-xs row">
+      <q-btn
+        v-if="enableEdit && !disableSave"
+        icon="fas fa-check"
+        color="positive"
+        label="Applica"
+        size="sm"
+        :disable="disableSave"
+        @click="saveElem">
+      </q-btn>
+      <q-btn
+        v-if="enableEdit && !disableSave"
+        icon="fas fa-check"
+        color="positive"
+        label="Salva"
+        size="sm"
+        :disable="disableSave"
+        @click="saveElem(true)">
+      </q-btn>
+    </div>

  </div>
 </template>