- Editor Pagine Elementi: Sezione, Righe, Colonne, Elementi. (rows, columns, elems)
This commit is contained in:
Surya Paolo
@@ -69,7 +69,12 @@
|
||||
|
||||
<div
|
||||
:class="{ 'q-gutter-xs': !hideHeader }"
|
||||
:style="[{'margin-left': hideHeader ? 0 : 1 + 'px', 'margin-right': hideHeader ? 0 : 1 + 'px' }]"
|
||||
:style="[
|
||||
{
|
||||
'margin-left': hideHeader ? 0 : 1 + 'px',
|
||||
'margin-right': hideHeader ? 0 : 1 + 'px',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-if="!!rec.img1"
|
||||
@@ -145,43 +150,269 @@
|
||||
:duration="1000"
|
||||
appear
|
||||
>
|
||||
<CTitleBanner
|
||||
v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
|
||||
:class="`q-pa-xs `"
|
||||
:title="myelem.titleBanner"
|
||||
bgcolor="bg-primary"
|
||||
:clcolor="myelem.color ? `` : `text-white`"
|
||||
:mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
|
||||
:myclass="myelem.classBanner"
|
||||
:canopen="true"
|
||||
>
|
||||
<CMyElem
|
||||
:myelem="myelem"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
<div>
|
||||
<CTitleBanner
|
||||
v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
|
||||
:class="`q-pa-xs`"
|
||||
:title="myelem.titleBanner"
|
||||
bgcolor="bg-primary"
|
||||
:clcolor="myelem.color ? `` : `text-white`"
|
||||
:mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
|
||||
:myclass="myelem.classBanner"
|
||||
:canopen="true"
|
||||
>
|
||||
</CMyElem>
|
||||
</CTitleBanner>
|
||||
<CMyElem
|
||||
v-else-if="(myelem.active || editOn) && !!rec.path"
|
||||
:myelem="myelem"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:idPage="rec._id"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
>
|
||||
</CMyElem>
|
||||
</CTitleBanner>
|
||||
|
||||
<!-- Sezione -->
|
||||
<div v-if="myelem.type === shared_consts.ELEMTYPE.SECTION">
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center"
|
||||
>
|
||||
<div v-if="editOn">SEZIONE:</div>
|
||||
</div>
|
||||
|
||||
<CMyElem
|
||||
:myelem="myelem"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
>
|
||||
<!-- Rendering righe dentro la sezione -->
|
||||
<div
|
||||
v-for="(row, indriga) in myelem.rows"
|
||||
:key="row._id"
|
||||
class="row-container"
|
||||
>
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center q-mb-md"
|
||||
>
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
label="Riga"
|
||||
size="sm"
|
||||
color="positive"
|
||||
icon="add"
|
||||
@click="
|
||||
addNewElemSectRow(
|
||||
myelem.order + 1,
|
||||
myelem,
|
||||
shared_consts.ELEMTYPE.ROW,
|
||||
row._id
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip> Aggiungi Riga </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="row.type === shared_consts.ELEMTYPE.ROW">
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center"
|
||||
>
|
||||
<div v-if="editOn">RIGA {{ indriga + 1 }}:</div>
|
||||
</div>
|
||||
<CMyElem
|
||||
:myelem="row"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
>
|
||||
<!-- Rendering colonne dentro la riga -->
|
||||
<div class="row q-col-gutter-md items-stretch">
|
||||
<template
|
||||
v-for="(col, index) in row.columns"
|
||||
:key="col._id"
|
||||
>
|
||||
<div
|
||||
v-if="col.type === shared_consts.ELEMTYPE.COLUMN"
|
||||
:class="getColClasses(col, row, index)"
|
||||
>
|
||||
<div
|
||||
:style="editOn ? `border: 2px dashed #1976d2` : ``"
|
||||
>
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center"
|
||||
>
|
||||
Colonna {{ index + 1 }}:
|
||||
</div>
|
||||
<div
|
||||
v-for="el in col.elems"
|
||||
:key="el._id"
|
||||
>
|
||||
<CMyElem
|
||||
:myelem="el"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
/>
|
||||
<div class="text-center q-mb-md">
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
color="negative"
|
||||
icon="delete"
|
||||
@click="deleteElemento(el)"
|
||||
>
|
||||
<q-tooltip> Elimina Elemento </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center q-mb-md">
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
color="positive"
|
||||
icon="add"
|
||||
@click="
|
||||
visuadd = true;
|
||||
myElemSel = col;
|
||||
myElemParent = myelem;
|
||||
"
|
||||
>
|
||||
<q-tooltip> Aggiungi Elemento </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="text-center q-mb-md">
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
label="Colonna"
|
||||
color="negative"
|
||||
icon="delete"
|
||||
@click="deleteCol(col)"
|
||||
>
|
||||
<q-tooltip> Elimina Colonna </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</CMyElem>
|
||||
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center q-mb-md"
|
||||
>
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
label="Colonna"
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="
|
||||
addNewElemSectRow(
|
||||
row.order + 1,
|
||||
row,
|
||||
shared_consts.ELEMTYPE.COLUMN
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip> Aggiungi Colonna </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center q-mb-md">
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
label="Riga"
|
||||
color="negative"
|
||||
icon="delete"
|
||||
@click="deleteRow(row)"
|
||||
>
|
||||
<q-tooltip> Elimina Riga </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="text-center q-mb-md"
|
||||
>
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
label="Riga"
|
||||
size="sm"
|
||||
color="positive"
|
||||
icon="add"
|
||||
@click="
|
||||
addNewElemSectRow(
|
||||
myelem.order + 1,
|
||||
myelem,
|
||||
shared_consts.ELEMTYPE.ROW
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip> Aggiungi Riga </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</CMyElem>
|
||||
</div>
|
||||
|
||||
<!-- Elementi senza Sezione (retrocompatibilità) -->
|
||||
<div v-if="myelem.type !== shared_consts.ELEMTYPE.SECTION">
|
||||
<CMyElem
|
||||
:myelem="myelem"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-center q-mb-md">
|
||||
<q-btn
|
||||
v-if="editOn"
|
||||
dense
|
||||
rounded
|
||||
size="sm"
|
||||
color="positive"
|
||||
icon="add"
|
||||
@click="
|
||||
visuadd = true;
|
||||
myElemSel =
|
||||
myelems.length > 0 ? myelems[myelems.length - 1] : null;
|
||||
myElemParent =
|
||||
myelems.length > 0 ? myelems[myelems.length - 1] : null;
|
||||
"
|
||||
>
|
||||
<q-tooltip> Aggiungi Elemento </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div v-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
|
||||
<CMyPageElem2 :mypath="myelem.container"> </CMyPageElem2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="myelems.length === 0">
|
||||
@@ -270,6 +501,34 @@
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<div>
|
||||
<q-dialog
|
||||
v-model="visuadd"
|
||||
style="
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<CMyElemAdd
|
||||
v-if="visuadd"
|
||||
:myelem="myElemSel"
|
||||
:myElemParent="myElemParent"
|
||||
:idPage="rec._id"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:addonlyinMem="true"
|
||||
@AddedNewElem="AddedNewElem"
|
||||
@close="visuadd = false"
|
||||
>
|
||||
</CMyElemAdd>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user