Webpage Editor functionality

src/components/CMyElem/CMyElem.vue

@@ -1,56 +1,287 @@
 <template>
-  <div v-if="myelem">
-    <div v-if="myelem.type === shared_consts.ELEMTYPE.TEXT">
-      <div :class="myelem.class">{{ myelem.container }}</div>
-    </div>
-    <div v-if="myelem.type === shared_consts.ELEMTYPE.MARGINI">
-      <div :style="`margin: ` + myelem.size"></div>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.TITLE">
-      <CTitle
-        :imgbackground="myelem.imgback"
-        :headtitle="myelem.title" :sizes="myelem.size" :styleadd="myelem.styleadd">
-      </CTitle>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMGTITLE">
-      <CImgTitle v-if="myelem.container" :src="myelem.container" :title="myelem.title">
-      </CImgTitle>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.HTML">
-      <div :class="myelem.class" v-html="myelem.containerHtml"></div>
-    </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMAGE">
-      <div class="text-center">
-         <q-img :src="myelem.container" class="img" :width="myelem.width" :height="myelem.height"></q-img>
+  <div v-if="myel">
+    <q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
+      <q-input
+        style="max-width: 60px"
+        hide-bottom-space
+        borderless
+        dense
+        @update:model-value="modifElem"
+        v-model="neworder"
+        v-on:keyup.enter="saveElem"
+        type="number"
+      >
+      </q-input>
+      <q-space/>
+      <q-btn
+        icon="fas fa-trash-alt"
+        color="negative"
+        dense
+        flat
+        size="sm"
+        @click="delElem">
+      </q-btn>
+
+      <q-select v-if="addOn"
+                v-model="newtype"
+                dense
+                style="width: 150px;"
+                :options="shared_consts.TypesElem"
+                emit-value map-options>
+
+      </q-select>
+      <q-btn
+        v-if="addOn"
+        size="sm"
+        dense
+        flat
+        icon="fas fa-plus"
+        color="positive"
+        @click="addNewElem(myelem.order-10)">
+      </q-btn>
+
+    </q-bar>
+    <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
+      <div v-if="editOn">
+        <q-input
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+
+        </q-input>
+
+      </div>
+      <div v-else
+           :class="myel.class">{{ myel.container }}
+
       </div>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.VIDEO">
+    <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
+      <div v-if="editOn">
+        <q-input
+          label="Margine:"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.size"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div :style="`margin: ` + myel.size"></div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
+      <div v-if="editOn">
+        <q-input
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.title"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div v-else>
+        <CTitle
+          :imgbackground="myel.imgback"
+          :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
+        </CTitle>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
+      <div v-if="editOn">
+        <q-input
+          label="Img"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Title"
+          class="fa-border"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+
+      </div>
+      <div v-else>
+        <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
+        </CImgTitle>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
+      <div v-if="editOn">
+        <q-input
+          label="Classe:"
+          @update:model-value="modifElem"
+          v-model="myel.class"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <CMyEditor
+          v-model:value="myel.containerHtml" title="" @keyup.enter.stop
+          :showButtons="false"
+          :canModify="true"
+          @update:value="modifElem"
+          @showandsave="saveElem"
+        >
+        </CMyEditor>
+
+      </div>
+      <div v-else>
+        <div :class="myel.class" v-html="myel.containerHtml"></div>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
+      <div v-if="editOn">
+        <q-input
+          label="NomeFile Img:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <div class="row">
+          <q-input
+            label="Width:"
+            type="number"
+            @update:model-value="modifElem"
+            v-model="myel.width"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Height:"
+            type="number"
+            @update:model-value="modifElem"
+            v-model="myel.height"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div class="text-center">
+        <q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
+      </div>
+    </div>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="NomeFile Video:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Ratio:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.ratio"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
       <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
       </q-video>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.FOOTER">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
       <LandingFooter></LandingFooter>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
-      <CMyPage :mypath="myelem.container"></CMyPage>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="Nome Pagina:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+      <CMyPage :mypath="myel.container"></CMyPage>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGEINTRO">
-      <CMyPageIntro :mypath="myelem.container" :maxheightimg="myelem.heightimg" :maxwidthimg="myelem.widthimg" :link="myelem.link"></CMyPageIntro>
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
+      <div v-if="editOn" class="row">
+        <q-input
+          label="NomeFile Img:"
+          @update:model-value="modifElem"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Width:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.widthimg"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Height:"
+          type="number"
+          @update:model-value="modifElem"
+          v-model="myel.heightimg"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Link:"
+          @update:model-value="modifElem"
+          v-model="myel.link"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+      <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
       <CCardCarousel :myarr="getArrDisciplines()">
 
       </CCardCarousel>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
       <!-- Da Fare -->
       <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
                       :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
 
       </COpenStreetMap>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
-      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
+    <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:"
+            @update:model-value="modifElem"
+            v-model="myel.list"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
 
         <q-carousel
           swipeable
@@ -61,42 +292,43 @@
           thumbnails
           infinite
           height="600">
-          <q-carousel-slide v-for="(rec, index) in myelem.list" :key="index" :name="index"
+          <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>
+                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>
+                      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>
           </q-carousel-slide>
         </q-carousel>
       </section>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+
       <section>
         <div class="landing">
           <div class="landing__hero maxwidth1200 text-white">
-          <q-carousel
-            animated
-            :autoplay="animare"
-            swipeable
-            infinite
-            navigation
-            transition-next="slide-left"
-            transition-prev="slide-right"
-            v-model="slide"
-            :height="getheightgallery()"
-            width="100%"
-          >
-                <q-carousel-slide
-                  v-for="(myrec, ind) in myelem.list" :key="ind"
-                  :name="ind"
-                                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
+            <q-carousel
+              animated
+              :autoplay="animare"
+              swipeable
+              infinite
+              navigation
+              transition-next="slide-left"
+              transition-prev="slide-right"
+              v-model="slide"
+              :height="getheightgallery()"
+              width="100%"
+            >
+              <q-carousel-slide
+                v-for="(myrec, ind) in myel.list" :key="ind"
+                :name="ind"
+                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
 
                 <div class="landing__header"></div>
                 <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
@@ -107,13 +339,13 @@
                     <div class="q-gutter-xs testo-banda clgutter">
                       <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
                       <div class="text-subtitle1 shadow text-italic q-pl-sm">
-                        {{myelem.container}}&nbsp;
+                        {{ myel.container }}&nbsp;
                       </div>
                       <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
-                        {{myelem.container2}}
+                        {{ myel.container2 }}
                       </div>
                       <div class="text-subtitle2 shadow text-italic q-pl-sm">
-                        {{myelem.container3}}
+                        {{ myel.container3 }}
                       </div>
                       <div>
                         <br><br>
@@ -129,23 +361,34 @@
                      class="q-icon text-h2 text-white material-icons">expand_more</i>
                 </div>-->
               </q-carousel-slide>
-          </q-carousel>
-        </div>
+            </q-carousel>
+          </div>
         </div>
       </section>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CALENDAR">
-      <CEventsCalendar :mysingleevent="null" :showfirstN="myelem.number || 3">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
+      <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
       </CEventsCalendar>
     </div>
-    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
+    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
       <div class="q-pa-md q-gutter-md">
         <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
-            $t('components.authentication.email_verification.link_sent') }}
+            $t('components.authentication.email_verification.link_sent')
+          }}
         </div>
 
       </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>
 </template>