993 lines
27 KiB
TypeScript
Executable File
993 lines
27 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 '@/model';
|
|
import { IImgGallery, ILabelValue, IMyPage, IOperators } from '@/model';
|
|
import { useGlobalStore } from '@store/globalStore';
|
|
import { useCatalogStore } from '@store/CatalogStore';
|
|
|
|
import { CImgTitle } from '@/components/CImgTitle';
|
|
import { CImgPoster } from '@/components/CImgPoster';
|
|
import { CMyElemAdd } from '@/components/CMyElemAdd';
|
|
import { CTitle } from '@/components/CTitle/index';
|
|
import { tools } from '@tools';
|
|
import { useRouter } from 'vue-router';
|
|
import { shared_consts } from '@/common/shared_vuejs';
|
|
import { LandingFooter } from '@/components/LandingFooter';
|
|
import { COpenStreetMap } from '@/components/COpenStreetMap';
|
|
import { CCardCarousel } from '@/components/CCardCarousel';
|
|
import { CMyPage } from '@/components/CMyPage';
|
|
import { CMyPageIntro } from '@/components/CMyPageIntro';
|
|
import { CEventsCalendar } from '@/components/CEventsCalendar';
|
|
import { CMyEditor } from '@/components/CMyEditor';
|
|
import { CMySlider } from '@/components/CMySlider';
|
|
import { CMySlideNumber } from '@/components/CMySlideNumber';
|
|
import { CMyFieldRec } from '@/components/CMyFieldRec';
|
|
import { CSelectImage } from '@/components/CSelectImage';
|
|
import { CSelectAnimation } from '@/components/CSelectAnimation';
|
|
import { CSelectColor } from '@/components/CSelectColor';
|
|
import { CSelectFontSize } from '@/components/CSelectFontSize';
|
|
import { CMySize } from '@/components/CMySize';
|
|
import { CBorders } from '@/components/CBorders';
|
|
import { CMyDimensioni } from '@/components/CMyDimensioni';
|
|
import { CMyText } from '@/components/CMyText';
|
|
import { CPickColor } from '@/components/CPickColor';
|
|
|
|
import MixinMetaTags from '@/mixins/mixin-metatags';
|
|
import MixinBase from '@/mixins/mixin-base';
|
|
import { useQuasar } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { emitKeypressEvents } from 'readline';
|
|
import { costanti } from '@costanti';
|
|
import objectId from '@/js/objectId';
|
|
import { useProducts } from '@/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,
|
|
CMySlideNumber,
|
|
CMyElemAdd,
|
|
CPickColor,
|
|
},
|
|
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 catalogStore = useCatalogStore();
|
|
const router = useRouter();
|
|
|
|
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 colorPicker = ref(null);
|
|
|
|
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 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, 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.path,
|
|
};
|
|
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.print_isTemplate = false;
|
|
myel.value.catalogo.print_linkIdTemplate = '';
|
|
}
|
|
|
|
myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(
|
|
myel.value.catalogo.areadistampa
|
|
);
|
|
}
|
|
|
|
if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
|
|
myel.value.catalogo.dimensioni_def = {
|
|
isTemplate: false,
|
|
linkIdTemplate: '',
|
|
name: '',
|
|
pagina: {},
|
|
};
|
|
}
|
|
if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
|
|
myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(
|
|
myel.value.catalogo.dimensioni_def.pagina
|
|
);
|
|
}
|
|
|
|
// console.log('Area di stampa MOUNTED... ',myel.value.catalogo.areadistampa)
|
|
} 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.CENTER) {
|
|
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.imagerec;
|
|
|
|
if (col.fieldtype === costanti.FieldType.imagerec) {
|
|
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;
|
|
}
|
|
if (newval.idElemParent) {
|
|
rec['idElemParent'] = newval.idElemParent;
|
|
}
|
|
} 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;
|
|
}
|
|
/*if (newval.idElemParent) {
|
|
myel.value['idElemParent'] = newval.idElemParent;
|
|
}*/
|
|
}
|
|
}
|
|
|
|
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 isLayoutContainer() {
|
|
const t = myel.value?.type;
|
|
return (
|
|
t === shared_consts.ELEMTYPE.SECTION ||
|
|
t === shared_consts.ELEMTYPE.ROW ||
|
|
t === shared_consts.ELEMTYPE.COLUMN
|
|
);
|
|
}
|
|
|
|
/*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();
|
|
}
|
|
}
|
|
|
|
function naviga(path: string) {
|
|
router.push(path);
|
|
}
|
|
|
|
function isElementoSpecifico() {
|
|
return myel.value.type === shared_consts.ELEMTYPE.CATALOGO;
|
|
}
|
|
|
|
function AddedNewElem(newrec: any) {
|
|
emit('selElemClick', newrec);
|
|
}
|
|
|
|
function openColorPicker() {
|
|
// Apre la finestra del picker
|
|
colorPicker.value.openDialog();
|
|
}
|
|
|
|
function removeFeature(index: number) {
|
|
myel.value.features.splice(index, 1);
|
|
saveElem();
|
|
}
|
|
|
|
function addFeature() {
|
|
myel.value.features.push({
|
|
name: 'Titolo',
|
|
description: 'sottotitolo',
|
|
icon: 'fas fa-heading',
|
|
});
|
|
saveElem();
|
|
}
|
|
|
|
const styleDialogOpen = ref(false);
|
|
const scriptDialogOpen = ref(false);
|
|
const tempStyle = ref('');
|
|
const tempScript = ref('');
|
|
const originalStyle = ref('');
|
|
const originalScript = ref('');
|
|
|
|
function openStyleDialog() {
|
|
originalStyle.value = myel.value.container2 || '';
|
|
tempStyle.value = myel.value.container2 || '';
|
|
styleDialogOpen.value = true;
|
|
}
|
|
|
|
function openScriptDialog() {
|
|
originalScript.value = myel.value.container3 || '';
|
|
tempScript.value = myel.value.container3 || '';
|
|
scriptDialogOpen.value = true;
|
|
}
|
|
|
|
function updateStylePreview() {
|
|
myel.value.container2 = tempStyle.value;
|
|
modifElem();
|
|
}
|
|
|
|
function updateScriptPreview() {
|
|
myel.value.container3 = tempScript.value;
|
|
modifElem();
|
|
}
|
|
|
|
function confirmCancel(type: 'style' | 'script') {
|
|
let modificato = false;
|
|
|
|
if (type === 'style') {
|
|
modificato = myel.value.container2 !== originalStyle.value;
|
|
} else {
|
|
modificato = myel.value.container3 !== originalScript.value;
|
|
}
|
|
|
|
if (modificato) {
|
|
$q.dialog({
|
|
title: 'Conferma',
|
|
message: 'Vuoi scartare le modifiche fatte?',
|
|
cancel: true,
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
if (type === 'style') {
|
|
myel.value.container2 = originalStyle.value;
|
|
modifElem();
|
|
styleDialogOpen.value = false;
|
|
} else {
|
|
myel.value.container3 = originalScript.value;
|
|
modifElem();
|
|
scriptDialogOpen.value = false;
|
|
}
|
|
});
|
|
} else {
|
|
styleDialogOpen.value = false;
|
|
scriptDialogOpen.value = false;
|
|
}
|
|
}
|
|
|
|
function saveStyle() {
|
|
originalStyle.value = tempStyle.value;
|
|
styleDialogOpen.value = false;
|
|
}
|
|
|
|
function saveScript() {
|
|
originalScript.value = tempScript.value;
|
|
scriptDialogOpen.value = false;
|
|
}
|
|
onMounted(mounted);
|
|
|
|
return {
|
|
tempStyle,
|
|
tempScript,
|
|
saveScript,
|
|
saveStyle,
|
|
confirmCancel,
|
|
updateScriptPreview,
|
|
updateStylePreview,
|
|
styleDialogOpen,
|
|
scriptDialogOpen,
|
|
openScriptDialog,
|
|
openStyleDialog,
|
|
tools,
|
|
shared_consts,
|
|
getArrDisciplines,
|
|
slide,
|
|
slide2,
|
|
animare,
|
|
setmeta,
|
|
getsrcbyimg,
|
|
saveElem,
|
|
myel,
|
|
disableSave,
|
|
modifElem,
|
|
delElem,
|
|
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,
|
|
catalogStore,
|
|
naviga,
|
|
isElementoSpecifico,
|
|
AddedNewElem,
|
|
openColorPicker,
|
|
colorPicker,
|
|
removeFeature,
|
|
addFeature,
|
|
};
|
|
},
|
|
});
|