Files
myprojplanet_vite/src/components/CMyEditElem/CMyEditElem.ts

811 lines
23 KiB
TypeScript
Executable File

import type { PropType } from 'vue';
import {
defineComponent, onMounted, computed, ref, toRef, watch,
nextTick,
} from 'vue'
import type { IOptCatalogo, IColGridTable, IElemText, IElementiScheda, IMyCard, IMyElem, IMyScheda, ISchedaSingola, IText } from '@src/model';
import { IImgGallery, ILabelValue, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '@src/components/CImgTitle'
import { CImgPoster } from '@src/components/CImgPoster'
import { CTitle } from '@src/components/CTitle/index'
import { tools } from '@tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { LandingFooter } from '@src/components/LandingFooter'
import { COpenStreetMap } from '@src/components/COpenStreetMap'
import { CCardCarousel } from '@src/components/CCardCarousel'
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 { CMySlider } from '@src/components/CMySlider'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import { CSelectImage } from '@src/components/CSelectImage'
import { CSelectAnimation } from '@src/components/CSelectAnimation'
import { CSelectColor } from '@src/components/CSelectColor'
import { CSelectFontSize } from '@src/components/CSelectFontSize'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import { CMyDimensioni } from '@src/components/CMyDimensioni'
import { CMyText } from '@src/components/CMyText'
import MixinMetaTags from '@src/mixins/mixin-metatags'
import MixinBase from '@src/mixins/mixin-base'
import { useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { emitKeypressEvents } from 'readline'
import { costanti } from '@costanti'
import objectId from '@src/js/objectId'
import { useProducts } from '@src/store/Products'
export default defineComponent({
name: 'CMyEditElem',
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
CMySize, CBorders, CMyDimensioni, CMyText,
},
emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage', 'expPage', 'impPage'],
props: {
myelem: {
type: Object as PropType<IMyElem>,
required: true,
},
path: {
type: String,
required: false,
default: '',
},
idPage: {
type: String,
required: false,
default: '',
},
editOn: {
type: Boolean,
required: false,
default: false,
},
addOn: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const globalStore = useGlobalStore()
const { setmeta, getsrcbyimg } = MixinMetaTags()
const { setValDb, getValDb } = MixinBase()
const $q = useQuasar()
const { t } = useI18n()
const animare = ref(0)
const slide = ref(0)
const slide2 = ref(0)
const tabCard = ref(0)
const tabScheda = ref(0)
const tabElemsText = ref('elem0')
const arrPages = ref([] as any[])
const disableSave = ref(true)
const enableEdit = ref(true)
const elemChanged = ref(false)
const enableAdd = ref(true)
const tabadd = ref('tools')
const Products = useProducts()
const neworder = ref(<number | undefined>0)
const idSchedaDaCopiare = ref('')
const myel = toRef(props, 'myelem')
const newtype = ref(<any>'')
const visuadd = ref(false)
const direzadd = ref(1)
const selectedClasses = ref(<any>[])
watch(() => myel.value.order, (value, oldval) => {
mounted()
})
function getArrDisciplines() {
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
}
function saveElem(exit?: boolean) {
// Save Elem record
const myelem = props.myelem
myelem.order = neworder.value
globalStore.saveMyElem($q, t, myelem).then((ris) => {
if (ris) {
// OK
disableSave.value = true
emit('saveElem', myelem)
if (exit)
elemChanged.value = false
}
})
}
function getNewOrderByThisElem() {
const myelem = props.myelem
let neword = 0
if (myelem) {
neword = myelem.order!
const recfound = globalStore.getMyElemNextThisElemId(props.idPage, myelem._id)
if (recfound) {
neword = Math.round((recfound.order! + myelem.order!) / 2)
}
}
return neword
}
async function addNewElem(elemsel: any, direz: number) {
visuadd.value = false
let neword = 0
let recfound = null
if (direz === -1) { // Sopra
// ottieni l'elemento precedente, mantenendo l'ordinamento
recfound = globalStore.getMyElemPrecThisElemId(props.idPage, elemsel._id)
} else if (direz === 1) { // Sotto
// ottieni l'elemento precedente, mantenendo l'ordinamento
recfound = globalStore.getMyElemNextThisElemId(props.idPage, elemsel._id)
}
if (recfound) {
// get the middle of the order number between thie 2 elements
neword = Math.round((recfound.order + elemsel.order) / 2)
}
const newrec = await globalStore.prepareAddNewElem(neword, $q, t, props.myelem, newtype.value)
emit('selElemClick', newrec)
// emit('updateAll', newrec)
}
async function dupPage() {
emit('dupPage', null)
}
async function exportPage() {
emit('expPage', null)
}
async function importPage() {
emit('impPage', null)
}
async function dupElem(order?: number) {
const newrec: IMyElem = tools.jsonCopy(props.myelem)
newrec._id = undefined
newrec.order = getNewOrderByThisElem()
if (newrec.type === shared_consts.ELEMTYPE.HTML) {
newrec.containerHtml = 'Copia di ' + newrec.containerHtml
}
const mynewelem = await globalStore.addNewElem($q, t, newrec)
emit('selElemClick', mynewelem)
}
function delElem() {
$q.dialog({
message: 'Eliminare ' + props.myelem.container + ' ?',
html: true,
ok: {
label: 'Elimina',
push: true,
},
title: '',
cancel: true,
persistent: false,
}).onOk(async () => {
// Save Elem record
await globalStore.delMyElem($q, t, props.myelem).then((ris) => {
if (ris) {
// OK
disableSave.value = true
emit('deleteElem', props.myelem)
}
})
})
}
function modifElem() {
disableSave.value = false
elemChanged.value = true
}
function modifElemAndSchede() {
modifElem()
myel.value.catalogo!.aggiorna++
}
function mounted() {
try {
neworder.value = props.myelem.order
arrPages.value = []
arrPages.value.push({ label: '[Vuoto]', path: '' })
for (const page of globalStore.mypage) {
const rec = {
// @ts-ignore
label: page.title,
// @ts-ignore
value: page.idPage
}
arrPages.value.push(rec)
}
if (props.myelem)
newtype.value = props.myelem.type
if (myel.value.class4) {
selectedClasses.value = myel.value.class4.split(' ').filter(Boolean)
}
if (myel.value.catalogo && myel.value.catalogo?.arrSchede) {
for (const recscheda of myel.value.catalogo!.arrSchede) {
if (recscheda.scheda) {
recscheda.scheda.testo_right_attaccato = tools.resetIText(recscheda.scheda?.testo_right_attaccato)
recscheda.scheda.testo_right = tools.resetIText(recscheda.scheda?.testo_right)
recscheda.scheda.testo_bottom = tools.resetIText(recscheda.scheda?.testo_bottom)
if ((!recscheda.scheda?.dimensioni.pagina.dimensioni)) {
recscheda.scheda.dimensioni.pagina = tools.resetRecIPagina(recscheda.scheda?.dimensioni.pagina)
}
if (!recscheda.scheda?.dimensioni?.pagina?.testo_up) {
recscheda.scheda!.dimensioni.pagina.testo_up = tools.resetIText(null)
}
if (!recscheda.scheda?.dimensioni?.pagina?.testo_title) {
recscheda.scheda!.dimensioni.pagina.testo_title = tools.resetIText(null)
}
if (!recscheda.scheda?.dimensioni?.pagina?.testo_down) {
recscheda.scheda!.dimensioni.pagina.testo_down = tools.resetIText(null)
}
if (!recscheda.scheda?.etichette?.novita?.show) {
recscheda.scheda.etichette!.novita = {
show: false,
months: 6,
}
recscheda.scheda.etichette!.bestseller = {
show: false,
quantiFattRaggiunti: 0,
}
}
if ((!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
recscheda.scheda.barcode = {
show: false,
format: '',
size: {
width: '2',
height: '33',
},
font: {
name: '',
size: '11',
}
}
}
}
}
}
if (myel.value.catalogo) {
if (!myel.value.catalogo.first_page) {
myel.value.catalogo.first_page = tools.resetRecIDimensioni(null)
}
myel.value.catalogo.first_page = tools.resetRecIDimensioni(myel.value.catalogo.first_page)
}
if (myel.value.catalogo) {
if (!myel.value.catalogo.last_page)
myel.value.catalogo.last_page = tools.resetRecIDimensioni(null)
myel.value.catalogo.last_page = tools.resetRecIDimensioni(myel.value.catalogo.last_page)
}
if (myel.value.catalogo) {
if (!myel.value.catalogo.areadistampa) {
myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(null)
myel.value.catalogo.areadistampa.margini = { left: '0.59', top: '0.59', right: '0.59', bottom: '0.28' }
}
myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(myel.value.catalogo.areadistampa)
}
if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
myel.value.catalogo.dimensioni_def = { pagina: {} }
}
if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(myel.value.catalogo.dimensioni_def.pagina)
}
} catch (error) {
console.log(error)
}
}
function clickOnElem() {
if (props.editOn) {
}
}
function addNewCard() {
if (!myel.value.listcards)
myel.value.listcards = []
myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '', vers_img: 0 })
modifElem()
}
function addNewScheda() {
Products.addNewScheda(myel.value.catalogo)
modifElem()
}
function copyfromTemplate(indscheda: number) {
// Estrai l'id da copiare e sostituisci tutto con questo
if (!idSchedaDaCopiare.value) {
return false
}
const arrschede: ISchedaSingola[] = globalStore.getMySchede()
if (arrschede.length <= 0) {
return false
}
const myschedatocopy = arrschede.find((recscheda: ISchedaSingola) => recscheda.scheda!._id === idSchedaDaCopiare.value)
const schedadest = myel.value.catalogo!.arrSchede![indscheda]
if (myschedatocopy) {
const newscheda = myschedatocopy.scheda!.name
const msg = 'Sostituisci questa scheda (' + schedadest.scheda?.name + ') con "' + newscheda + '" ?'
$q.dialog({
message: msg,
html: true,
ok: {
label: 'Sostituisci',
push: true,
},
title: '',
cancel: true,
persistent: false,
}).onOk(async () => {
const myschedadest: ISchedaSingola = myel.value.catalogo!.arrSchede![indscheda]
myschedadest.scheda = tools.jsonCopy(myschedatocopy.scheda)
myschedadest.scheda!._id = objectId()
myschedadest.order = 20
myschedadest.scheda!.name = myschedadest.scheda!.name + '_copia'
myschedadest.scheda!.isTemplate = false
})
}
}
function dupNewScheda(id: string) {
if (!myel.value.catalogo!.arrSchede)
return
const myfindscheda = myel.value.catalogo!.arrSchede.find((scheda: ISchedaSingola) => scheda._id === id)
if (myfindscheda) {
const myscheda = tools.jsonCopy(myfindscheda)
delete myscheda._id
delete myscheda.scheda!._id
myscheda.numPagineMax = 0
myscheda.order = myscheda.order + 10
myscheda._id = objectId()
myscheda.scheda!._id = objectId()
myscheda.scheda!.name = myscheda.scheda!.name + '_copia'
myscheda.scheda!.isTemplate = false
const bakscheda = [...myel.value.catalogo!.arrSchede]
myel.value.catalogo!.arrSchede.push(myscheda)
modifElem()
}
}
function dupNewCard() {
if (!myel.value.listcards)
return
const myfindcard = myel.value.listcards[tabCard.value]
if (myfindcard) {
const mycard = tools.jsonCopy(myfindcard)
delete mycard._id
mycard._id = objectId()
const bakcard = [...myel.value.listcards]
myel.value.listcards = []
myel.value.listcards = [...bakcard, mycard]
modifElem()
}
}
function addNewElemText() {
if (!myel.value.elemsText)
myel.value.elemsText = []
myel.value.elemsText.push({ _id: objectId(), text: '', color: '#ffffff', class: '', size: '', anim: { name: 'FadeIn', clduration: '', cldelay: '', timingtype: 'ease-in-out' } })
modifElem()
}
function getClass() {
let mycl = ''
if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
mycl += ' align_center'
} else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
mycl += ' align_right'
} else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
mycl += ' align_left'
}
return mycl
}
function showFit() {
if (props.myelem.type)
return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
else
return false
}
function delRecCard(id: string, myel: IMyElem) {
//
if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
if (myel.listcards)
myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id)
} else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
if (myel.elemsText)
myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id)
}
}
function delRecScheda(id: string, myel: IMyElem) {
const myscheda = myel.catalogo!.arrSchede!.find((scheda: ISchedaSingola) => scheda._id === id)
if (myscheda) {
$q.dialog({
message: 'Eliminare la scheda "' + myscheda?.scheda?.name + '" ?',
html: true,
ok: {
label: 'Elimina',
push: true,
},
title: '',
cancel: true,
persistent: false,
}).onOk(async () => {
//
myel.catalogo!.arrSchede = myel.catalogo!.arrSchede!.filter((scheda: ISchedaSingola) => scheda._id !== id)
modifElem()
})
}
}
function saveFieldElem(rec: any, newval: any, col: IColGridTable) {
//console.log('saveFieldElem', rec, 'newval', newval, 'col', col)
const iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
const isscheda = costanti.SCHEDA_FIELDS.includes(col.name)
const isIImg = costanti.IMG_FIELDS.includes(col.name) && (col.fieldtype === costanti.FieldType.image)
if (col.fieldtype === costanti.FieldType.image) {
if (iscatalogo) {
myel.value.catalogo[col.name] = newval.imagefile
//console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
} else if (isscheda) {
rec[col.name] = newval.imagefile
} else if (isIImg) {
if (!rec[col.name]) {
rec[col.name] = {}
}
rec[col.name].imagefile = newval.imagefile
} else {
myel.value[col.name] = newval.imagefile
}
} else {
if (iscatalogo) {
myel.value.catalogo[col.name] = newval
console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name])
} else if (isscheda) {
rec[col.name] = newval
} else {
myel.value[col.name] = newval
}
}
}
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) {
if (myval.imagefile) {
rec.imagefile = myval.imagefile
rec.vers_img = tools.getGenerateVersionImage()
} else {
rec.imagefile = myval
}
}
})
}
} else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
if (props.myelem.elemsText) {
props.myelem.elemsText.forEach((rec: IElemText) => {
if (recpass._id === rec._id) {
if (myval.imagefile) {
rec.text = myval.imagefile
} else {
rec.text = myval
}
}
})
}
} else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
(props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
myel.value.image = myval
myel.value.vers_img = tools.getGenerateVersionImage()
}
modifElem()
}
function showAnimation() {
return (myel.value.type === shared_consts.ELEMTYPE.IMAGE)
|| (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE)
|| (myel.value.type === shared_consts.ELEMTYPE.TEXT)
|| (myel.value.type === shared_consts.ELEMTYPE.CARD)
|| (myel.value.type === shared_consts.ELEMTYPE.HTML)
|| (myel.value.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS)
}
/*function updateElem(myvalue: any) {
console.log('updateElem', myvalue)
if (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE) {
myel.value.container = myvalue
}
modifElem()
}*/
function generateSizeOptions(widthpx: boolean = true) {
const options = [];
let add = '';
if (widthpx)
add = 'px'
for (let i = 0; i <= 700; i += 50) {
options.push({ label: `${i}${add}`, value: `${i}${add}` });
}
return options;
}
function updateSizeWidth(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateSizeHeight(value: any) {
if (value)
myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
else
myel.value.heightimg = ''
modifElem()
}
function toggleSize() {
emit('toggleSize', null)
}
const orderOptions = computed(() => {
const options = []
for (let i = 0; i <= 100; i += 1) {
options.push({ label: i.toString(), value: i });
}
for (let i = 100; i <= 1000; i += 10) {
options.push({ label: i.toString(), value: i });
}
return options;
});
function addOrder(rec: any) {
neworder.value = rec
}
function addProdSpeciale(rec: any) {
neworder.value = rec
}
async function moveElem(direz: any) {
const myelem = props.myelem
const elemprec = globalStore.getMyElemPrecThisElemId(props.idPage, myelem._id)
const elemnext = globalStore.getMyElemNextThisElemId(props.idPage, myelem._id)
if (!elemprec || !elemnext)
return false
let neworder = 0
const oldorder = myelem.order!
if (direz === -1) {
// UP
neworder = elemprec.order!
elemprec.order = oldorder
if (oldorder === elemprec.order!) {
const elemprec2 = globalStore.getMyElemPrecThisElemId(props.idPage, elemprec._id)
neworder = (elemprec2.order! + elemprec.order) / 2
elemprec.order = Math.round((oldorder + neworder) / 2)
}
await globalStore.saveMyElem($q, t, elemprec)
emit('saveElem', elemprec)
} else if (direz === 1) {
// DOWN
neworder = elemnext.order!
elemnext.order = oldorder
if (oldorder === elemnext.order!) {
const elemnext2 = globalStore.getMyElemNextThisElemId(props.idPage, elemnext._id)
neworder = (elemnext2.order! + elemnext.order) / 2
elemnext.order = Math.round((oldorder + neworder) / 2)
}
await globalStore.saveMyElem($q, t, elemnext)
emit('saveElem', elemnext)
}
myelem.order = neworder
await globalStore.saveMyElem($q, t, myelem)
emit('saveElem', myelem)
}
function classiImmagineOptions() {
// Ritorna l'array delle classi, ad esempio:
return [
{ label: 'Tonda', value: 'image-circle' },
{ label: 'Sbordata', value: 'image-round-bordered' },
{ label: 'Ombrata', value: 'image-ombra' },
// Aggiungi altre classi se necessario
];
}
function updateClass4(selectedOptions: any) {
// Aggiorna selectedClasses
selectedClasses.value = selectedOptions;
if (myel.value) {
// Imposta myel.class2 come stringa
myel.value.class4 = selectedOptions.join(' '); // Converte l'array in una stringa separata da spazi
saveElem()
}
}
onMounted(mounted)
return {
tools,
shared_consts,
getArrDisciplines,
slide,
slide2,
animare,
setmeta,
getsrcbyimg,
saveElem,
myel,
disableSave,
modifElem,
delElem,
addNewElem,
newtype,
neworder,
elemChanged,
enableAdd,
clickOnElem,
getClass,
showFit,
getValDb,
dupElem,
enableEdit,
addNewCard,
addNewElemText,
arrPages,
costanti,
delRecCard,
saveCard,
// updateElem,
showAnimation,
tabCard,
tabElemsText,
visuadd,
tabadd,
Products,
generateSizeOptions,
updateSizeWidth,
direzadd,
toggleSize,
orderOptions,
addOrder,
moveElem,
updateSizeHeight,
dupNewCard,
updateClass4,
selectedClasses,
classiImmagineOptions,
saveFieldElem,
dupPage,
tabScheda,
addNewScheda,
dupNewScheda,
delRecScheda,
addProdSpeciale,
idSchedaDaCopiare,
copyfromTemplate,
modifElemAndSchede,
exportPage,
importPage,
globalStore,
}
},
})