Web Editor home made
This commit is contained in:
Surya Paolo
@@ -2,7 +2,7 @@ import {
|
||||
defineComponent, onMounted, PropType, ref, toRef, watch,
|
||||
} from 'vue'
|
||||
|
||||
import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
|
||||
import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
|
||||
import { CImgTitle } from '../CImgTitle/index'
|
||||
@@ -26,13 +26,15 @@ import { useQuasar } from 'quasar'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import { emitKeypressEvents } from 'readline'
|
||||
import { costanti } from '@costanti'
|
||||
|
||||
import objectId from '@src/js/objectId'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyEditElem',
|
||||
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
|
||||
components: {
|
||||
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
|
||||
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
|
||||
CSelectColor, CSelectFontSize },
|
||||
CSelectColor, CSelectFontSize
|
||||
},
|
||||
emits: ['saveElem'],
|
||||
props: {
|
||||
myelem: {
|
||||
@@ -74,7 +76,7 @@ export default defineComponent({
|
||||
const elemChanged = ref(false)
|
||||
const enableAdd = ref(true)
|
||||
|
||||
const neworder = ref(<number|undefined>0)
|
||||
const neworder = ref(<number | undefined>0)
|
||||
|
||||
const myel = toRef(props, 'myelem')
|
||||
const newtype = ref(<any>'')
|
||||
@@ -87,13 +89,6 @@ export default defineComponent({
|
||||
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
|
||||
@@ -165,7 +160,7 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
|
||||
function modifElem(value: any) {
|
||||
function modifElem() {
|
||||
disableSave.value = false
|
||||
elemChanged.value = true
|
||||
}
|
||||
@@ -174,7 +169,7 @@ export default defineComponent({
|
||||
neworder.value = props.myelem.order
|
||||
|
||||
arrPages.value = []
|
||||
arrPages.value.push({label: '[Vuoto]', path: ''})
|
||||
arrPages.value.push({ label: '[Vuoto]', path: '' })
|
||||
for (const page of globalStore.mypage) {
|
||||
|
||||
const rec = {
|
||||
@@ -198,8 +193,9 @@ export default defineComponent({
|
||||
function addNewCard() {
|
||||
if (!myel.value.listcards)
|
||||
myel.value.listcards = []
|
||||
myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
|
||||
modifElem(true)
|
||||
|
||||
myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '' })
|
||||
modifElem()
|
||||
}
|
||||
|
||||
function getClass() {
|
||||
@@ -222,13 +218,37 @@ export default defineComponent({
|
||||
return false
|
||||
}
|
||||
|
||||
function delRecCard(idcard: string, myel: IMyElem) {
|
||||
//
|
||||
if (myel.listcards)
|
||||
myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== idcard)
|
||||
|
||||
}
|
||||
|
||||
function saveCard(recpass: IMyCard, myval: any) {
|
||||
if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
|
||||
if (props.myelem.listcards) {
|
||||
props.myelem.listcards.forEach((rec: IMyCard) => {
|
||||
if (recpass._id === rec._id) {
|
||||
rec.imagefile = myval
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
modifElem()
|
||||
}
|
||||
|
||||
function updateElem(myvalue: any) {
|
||||
myel.value = myvalue
|
||||
modifElem()
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
tools,
|
||||
shared_consts,
|
||||
getArrDisciplines,
|
||||
getheightgallery,
|
||||
slide,
|
||||
slide2,
|
||||
animare,
|
||||
@@ -253,6 +273,9 @@ export default defineComponent({
|
||||
addNewCard,
|
||||
arrPages,
|
||||
costanti,
|
||||
delRecCard,
|
||||
saveCard,
|
||||
updateElem,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -7,14 +7,9 @@
|
||||
(!myel.active ? ` clEditNotActive` : ``)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<div v-if="!!myel.type">
|
||||
<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 v-model="myel.active" color="positive" icon="fas fa-eye">
|
||||
</q-toggle>
|
||||
<!--<q-toggle v-if="tools.isManager()"
|
||||
v-model="enableAdd"
|
||||
@@ -74,7 +69,27 @@
|
||||
>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
<div class="justify-center q-gutter-xs row">
|
||||
<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 class="justify-center row q-ma-xs">
|
||||
<q-btn
|
||||
dense
|
||||
v-if="enableEdit && !disableSave"
|
||||
@@ -171,6 +186,16 @@
|
||||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||||
:class="myel.span ? '' : ''"
|
||||
>
|
||||
<div class="row">
|
||||
<q-input
|
||||
label="Classe Card:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.class3"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
@@ -181,28 +206,48 @@
|
||||
>
|
||||
</q-btn>
|
||||
<div v-for="(rec, ind) in myel.listcards" :key="ind">
|
||||
<div v-if="enableEdit" class="column">
|
||||
<div v-if="enableEdit" class="column bordered q-ma-xs">
|
||||
<q-bar class="bg-primary text-white">
|
||||
Card {{ ind + 1 }}
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="fas fa-trash-alt"
|
||||
color="negative"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
@click="delRecCard(rec._id, myel)"
|
||||
>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
|
||||
<CSelectImage
|
||||
:title="tools.getTitleGall()"
|
||||
:directory="tools.getDirectoryGall(myvalue, 'imgcards')"
|
||||
:imgGall="[myvalue]"
|
||||
:edit="true"
|
||||
:canModify="true"
|
||||
:isInModif="true"
|
||||
@update:imgGall="updateElem"
|
||||
@showandsave="Savedb">
|
||||
</CSelectImage>
|
||||
|
||||
<CMyFieldRec
|
||||
title="Lista Immagini:"
|
||||
table="myelems"
|
||||
:id="myel._id"
|
||||
:rec="myel"
|
||||
field="listcards"
|
||||
title="Immagine:"
|
||||
table="imgcards"
|
||||
:id="rec._id"
|
||||
:rec="rec"
|
||||
field="imagefile"
|
||||
@update:model-value="modifElem"
|
||||
@save="saveCard"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:nosaveToDb="true"
|
||||
:path="myel.path"
|
||||
:fieldtype="costanti.FieldType.imgcard"
|
||||
>
|
||||
</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
|
||||
@@ -215,6 +260,17 @@
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
dense
|
||||
style="min-width: 100px"
|
||||
label="Style:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.style"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
style="min-width: 100px"
|
||||
@@ -375,30 +431,9 @@
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
:fieldtype="costanti.FieldType.image"
|
||||
>
|
||||
</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>
|
||||
|
||||
@@ -421,7 +456,7 @@
|
||||
@update:model-value="modifElem"
|
||||
:canEdit="true"
|
||||
:canModify="true"
|
||||
:type="costanti.FieldType.images"
|
||||
:fieldtype="costanti.FieldType.image"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user