HTML Editor go on
This commit is contained in:
Surya Paolo
647
src/components/CMyEditElem/CMyEditElem.vue
Executable file
647
src/components/CMyEditElem/CMyEditElem.vue
Executable file
@@ -0,0 +1,647 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="myel"
|
||||
:class="
|
||||
(editOn ? ` clEditDiv` : ``) +
|
||||
`` +
|
||||
(!myel.active ? ` clEditNotActive` : ``)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
|
||||
<q-toggle
|
||||
left-label="Attiva"
|
||||
v-model="myel.active"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</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
|
||||
borderless
|
||||
dense
|
||||
@update:model-value="modifElem"
|
||||
v-model="neworder"
|
||||
v-on:keyup.enter="saveElem(false)"
|
||||
type="number"
|
||||
>
|
||||
</q-input>
|
||||
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="fas fa-trash-alt"
|
||||
color="negative"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="delElem"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
icon="far fa-copy"
|
||||
color="primary"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="dupElem(myel.order + 10)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-select
|
||||
v-if="enableAdd"
|
||||
v-model="newtype"
|
||||
dense
|
||||
style="width: 150px"
|
||||
:options="shared_consts.TypesElem"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-btn
|
||||
v-if="enableAdd"
|
||||
size="sm"
|
||||
dense
|
||||
flat
|
||||
icon="fas fa-plus"
|
||||
color="positive"
|
||||
@click="addNewElem(myel.order - 10)"
|
||||
>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
<div class="justify-center q-gutter-xs row">
|
||||
<q-btn
|
||||
dense
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Applica"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
v-if="enableEdit && !disableSave"
|
||||
icon="fas fa-check"
|
||||
color="positive"
|
||||
label="Salva"
|
||||
size="sm"
|
||||
:disable="disableSave"
|
||||
@click="saveElem(true)"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded
|
||||
outlined
|
||||
v-model="myel.align"
|
||||
:options="tools.SelectListAlign"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Allinea"
|
||||
style="min-width: 100px"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="enableEdit"
|
||||
rounded
|
||||
style="min-width: 100px"
|
||||
outlined
|
||||
v-model="myel.class"
|
||||
:options="tools.SelectListClass"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Classe"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="enableEdit && showFit"
|
||||
rounded
|
||||
style="min-width: 100px"
|
||||
outlined
|
||||
v-model="myel.fit"
|
||||
:options="tools.SelectListFit"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Fit"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Classe:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.class2"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
dense
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||||
:class="myel.span ? '' : ''"
|
||||
>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
label="Card"
|
||||
icon="fas fa-plus"
|
||||
@click="addNewCard"
|
||||
>
|
||||
</q-btn>
|
||||
<div v-for="(rec, ind) in myel.listcards" :key="ind">
|
||||
<div v-if="enableEdit" class="column">
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="listcards"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
<q-input
|
||||
label="Immagine:"
|
||||
dense
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.imagefile"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
dense
|
||||
style="min-width: 100px"
|
||||
label="Titolo:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.alt"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
style="min-width: 100px"
|
||||
v-model="rec.color"
|
||||
@update:model-value="modifElem"
|
||||
title="Col Titolo"
|
||||
>
|
||||
</CSelectColor>
|
||||
<CSelectFontSize
|
||||
v-if="enableEdit"
|
||||
style="min-width: 100px"
|
||||
v-model="rec.size"
|
||||
@update:model-value="modifElem"
|
||||
title="Font Titolo"
|
||||
>
|
||||
</CSelectFontSize>
|
||||
</div>
|
||||
<CMyEditor
|
||||
v-model:value="rec.content"
|
||||
title="Contenuto:"
|
||||
@keyup.enter.stop
|
||||
:showButtons="false"
|
||||
:canModify="true"
|
||||
@update:value="modifElem"
|
||||
@showandsave="saveElem"
|
||||
>
|
||||
</CMyEditor>
|
||||
|
||||
<q-input
|
||||
label="Sottotitolo:"
|
||||
class="fa-border"
|
||||
dense
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.description"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-if="enableEdit" class="row">
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
v-model="rec.colorsub"
|
||||
@update:model-value="modifElem"
|
||||
title="Col Sottotitolo"
|
||||
>
|
||||
</CSelectColor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||||
<div v-if="enableEdit">
|
||||
<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>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="Titolo"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.title"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Style"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.styleadd"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Immagine:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.imgback"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
|
||||
<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(false)"
|
||||
>
|
||||
</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>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
|
||||
<div v-if="enableEdit">
|
||||
<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>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CMyFieldRec
|
||||
title="NomeFile Img:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="container"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Width:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.image"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CMyFieldRec
|
||||
title="NomeFile Img:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="image"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Width:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
|
||||
<div v-if="enableEdit" 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>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-select
|
||||
rounded
|
||||
outlined
|
||||
v-model="myel.container"
|
||||
:options="arrPages"
|
||||
label="Pagina"
|
||||
emit-value
|
||||
map-options
|
||||
@change="saveElem"
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="NomeFile Img:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Width:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.widthimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Height:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.heightimg"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Link:"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.link"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
|
||||
>
|
||||
<CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<q-input
|
||||
label="ImgMap:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="UrlMap:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container2"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Title:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.container3"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Coordinata Mappa 1:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.containerHtml"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
label="Coordinata Mappa Big:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.link"
|
||||
debounce="1000"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
|
||||
<div v-if="enableEdit" class="row">
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="list"
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
|
||||
<!--sss
|
||||
-->
|
||||
|
||||
<q-input
|
||||
label="Secondi tra un'immagine e l'altra:"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.container2"
|
||||
type="number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-toggle
|
||||
label="Sottotitoli"
|
||||
v-model="myel.parambool"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
<q-toggle
|
||||
label="Miniature"
|
||||
v-model="myel.parambool2"
|
||||
color="positive"
|
||||
icon="fas fa-eye"
|
||||
>
|
||||
</q-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></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"
|
||||
debounce="1000"
|
||||
v-model="myel.number"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyEditElem.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyEditElem.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user