surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Cataloghi: pagine, schede, formato

Browse Source
This commit is contained in:
Surya Paolo
2024-11-19 19:19:14 +01:00
parent 90ed545070
commit 5cd9bd40f6
103 changed files with 3593115 additions and 1603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/ecommerce/catalogo/catalogo.scss
View File

@@ -56,6 +56,9 @@ $heightBtn: 100%;
.fixed-width {
width: var(--width) !important; /* Usa una variabile CSS */
}
.fixed-height {
height: var(--height) !important; /* Usa una variabile CSS */
}
.break {
flex-basis: 100%;

158
src/views/ecommerce/catalogo/catalogo.ts
View File

@@ -190,7 +190,7 @@ export default defineComponent({
}
function calcArrProducts() {
console.log('calcArrProducts')
// console.log('calcArrProducts')
// eventuali titoli specifici estratti dall'array di Prodotti Selezionati
//const searchtext = getSearchText()
@@ -412,16 +412,16 @@ export default defineComponent({
}
}
function getProdBySchedaRigaCol(recscheda: ISchedaSingola, riga: number, col: number) {
function getProdBySchedaRigaCol(recscheda: ISchedaSingola, pagina: number, riga: number, col: number) {
try {
return recscheda.arrProdToShow![riga][col]
return recscheda.arrProdToShow![pagina][riga][col]
} catch (e) {
return null
}
}
function generatearrProdToViewSorted() {
console.log('generatearrProdToViewSorted')
// console.log('generatearrProdToViewSorted')
// Svuota
arrProdToView.value = []
@@ -438,31 +438,38 @@ export default defineComponent({
let indadded = 0
recscheda.arrProdToShow = []
for (let giro = 0; giro < schedePerPagina; giro++) {
// Aggiunge il prossimo prodotto che non è stato ancora inserito
const result = addNextProductToTheView(arrProdFiltrati, indprod);
if (result.end) {
break; // Esci dal ciclo se non ci sono più prodotti disponibili
} else {
if (result.indprod)
indprod = result.indprod // Aggiorna indprod per il prossimo giro
if (result.myrec) {
for (let pagina = 0; pagina < 100; pagina++) {
indadded = 0
if (!recscheda.arrProdToShow[pagina]) {
recscheda.arrProdToShow[pagina] = [];
}
let riga = Math.floor(indadded / schedePerCol)
let col = indadded % schedePerCol
for (let giro = 0; giro < schedePerPagina; giro++) {
// Aggiunge il prossimo prodotto che non è stato ancora inserito
const result = addNextProductToTheView(arrProdFiltrati, indprod);
if (result.end) {
break; // Esci dal ciclo se non ci sono più prodotti disponibili
} else {
if (result.indprod)
indprod = result.indprod // Aggiorna indprod per il prossimo giro
if (result.myrec) {
if (!recscheda.arrProdToShow[riga]) {
recscheda.arrProdToShow[riga] = [];
let riga = Math.floor(indadded / schedePerCol)
let col = indadded % schedePerCol
if (!recscheda.arrProdToShow[pagina][riga]) {
recscheda.arrProdToShow[pagina][riga] = [];
}
recscheda.arrProdToShow[pagina][riga][col] = result.myrec
indadded++
}
recscheda.arrProdToShow[riga][col] = result.myrec
indadded++
}
}
}
console.log('*** arrProdToShow', recscheda.arrProdToShow)
// console.log('*** arrProdToShow', recscheda.arrProdToShow)
}
}
}
@@ -635,7 +642,7 @@ export default defineComponent({
const element = document.getElementById('pdf-content')
const opt = {
margin: [0.1, 0.1, 0.1, 0.1],
filename: 'catalogo_completo.pdf',
filename: (props.optcatalogo.pdf_filename ?? 'catalogo_completo') + '.pdf',
image: {
type: 'jpeg',
quality: 0.98
@@ -687,11 +694,11 @@ export default defineComponent({
const page = []
// Crea le righe per questa pagina
for (let rowStart = 0; rowStart < schedePerCol; rowStart++) {
for (let rowStart = 0; rowStart < schedePerRiga; rowStart++) {
const row = []
// Riempi ogni riga con il numero corretto di prodotti
for (let col = 0; col < schedePerRiga; col++) {
for (let col = 0; col < schedePerCol; col++) {
const productIndex = pageStart + (rowStart * schedePerRiga) + col
row.push(indiceprodotto)
indiceprodotto++
@@ -711,53 +718,89 @@ export default defineComponent({
}
function generateStyleCatalogo(optcatalogo: ICatalogo) {
const fileimg = (optcatalogo.printable
? optcatalogo.backgroundimage_printable
: optcatalogo.backgroundimage)
const marginBottom = optcatalogo.dimensioni.pagina.margini!.bottom || ''
const backgroundImage = fileimg ? `url(${costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO + fileimg})` : ''
const backgroundSize = `${optcatalogo.printable
? optcatalogo.backgroundSize_printable
: optcatalogo.backgroundSize}`;
const width = optcatalogo.dimensioni.pagina.size?.width
return {
backgroundImage,
backgroundSize,
marginBottom,
'--width': width
};
}
}
function generateStylePageScheda(optcatalogo: ICatalogo, scheda: IMyScheda) {
const marginTop = `${scheda.dimensioni.pagina.margini!.top}`
const marginTop = scheda.dimensioni?.pagina?.margini?.top ? scheda.dimensioni?.pagina?.margini?.top : (optcatalogo.dimensioni_def?.pagina?.margini?.top ?? '')
const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? scheda.dimensioni?.pagina?.margini?.bottom : (optcatalogo.dimensioni_def?.pagina?.margini?.bottom ?? '')
const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? scheda.dimensioni?.pagina?.margini?.left : (optcatalogo.dimensioni_def?.pagina?.margini?.left ?? '')
const marginRight = scheda.dimensioni?.pagina?.margini?.right ? scheda.dimensioni?.pagina?.margini?.right : (optcatalogo.dimensioni_def?.pagina?.margini?.right ?? '')
const marginBottom = scheda.dimensioni.pagina.margini!.bottom
const paddingTop = scheda.dimensioni?.pagina?.padding?.top ? scheda.dimensioni?.pagina?.padding?.top : (optcatalogo.dimensioni_def?.pagina?.padding?.top ?? '')
const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? scheda.dimensioni?.pagina?.padding?.bottom : (optcatalogo.dimensioni_def?.pagina?.padding?.bottom ?? '')
const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? scheda.dimensioni?.pagina?.padding?.left : (optcatalogo.dimensioni_def?.pagina?.padding?.left ?? '')
const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? scheda.dimensioni?.pagina?.padding?.right : (optcatalogo.dimensioni_def?.pagina?.padding?.right ?? '')
const fileimg = (optcatalogo.printable
? scheda.bgimg_printable
: scheda.bgimg)
// Esiste un immagine di sfondo specifica della singola pagina ?
let fileimg = scheda.dimensioni?.pagina?.imgsfondo?.imagefile
let backgroundSize = scheda.dimensioni?.pagina?.imgsfondo?.fit
if (fileimg) {
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_SCHEDA + fileimg})` : ''
}
const backgroundImage = fileimg ? `url(${costanti.DIR_UPLOAD +
costanti.DIR_SCHEDA + fileimg})` : ''
if (!fileimg) {
// Esiste un immagine di sfondo uguali per tutte le pagine ?
fileimg = optcatalogo.imgsfondo_def?.imagefile
backgroundSize = optcatalogo.imgsfondo_def?.fit
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
}
const backgroundSize = `${optcatalogo.printable
? scheda.bgSize_printable
: scheda.bgSize}`;
let backgroundImage = fileimg ?? ''
const width = scheda.dimensioni.pagina.size?.width
const width = scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
const height = scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
return {
marginBottom,
marginTop,
marginLeft,
marginRight,
paddingBottom,
paddingTop,
paddingLeft,
paddingRight,
backgroundImage,
backgroundSize,
'--width': width
'--width': width,
'--height': height,
...(width ? { width: `${width} !important;` } : {}),
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
};
}
function getWidthPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
return scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
}
function getHeightPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
return scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
}
function getStyleRow(recscheda: ISchedaSingola) {
const placeContent = 'center';
const width = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width ?? '100px';
const height = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height;
const marginTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top ?? '0px';
const marginBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom ?? '0px';
const marginLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left ?? '0px';
const marginRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right ?? '0px';
const paddingTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top ?? '0px';
const paddingBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom ?? '0px';
const paddingLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left ?? '0px';
const paddingRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right ?? '0px';
return {
placeContent,
flex: `0 1 ${width} !important;`,
margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
};
}
@@ -805,6 +848,9 @@ export default defineComponent({
getProdBySchedaRigaCol,
generateStylePageScheda,
generateStyleCatalogo,
getStyleRow,
getWidthPagina,
getHeightPagina,
}
}
})

54
src/views/ecommerce/catalogo/catalogo.vue
View File

@@ -15,7 +15,7 @@
<q-tab-panel name="visu">
<q-btn
v-if="optcatalogo.pdf"
label="Crea PDF"
:label="`Crea PDF ${optcatalogo.pdf_filename}`"
@click="generatePDF"
></q-btn>
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
@@ -229,7 +229,7 @@
class="first_page"
v-html="optcatalogo.first_page_html"
></div>
</div>
\ </div>
<div :style="generateStyleCatalogo(optcatalogo)">
<div class="flex-container-book">
<q-infinite-scroll
@@ -298,7 +298,7 @@
recscheda.scheda
)"
:key="pageIndex"
:class="{ 'fixed-width': true, 'card-page': true }"
:class="{ 'fixed-width': getWidthPagina(optcatalogo, recscheda.scheda), 'fixed-height': getHeightPagina(optcatalogo, recscheda.scheda), 'card-page': true }"
:style="
generateStylePageScheda(
optcatalogo,
@@ -311,33 +311,32 @@
v-for="(row, rowIndex) in page"
:key="`${pageIndex}-${rowIndex}`"
class="card-row"
:style="`margin-bottom: ${
scheda.dimensioni.riga.bottom
? scheda.dimensioni.riga.bottom
: optcatalogo.dimensioni.riga.bottom
};`"
:style="
'margin-bottom: ' +
(scheda?.dimensioni?.riga?.bottom ?? '0px') +
';'
"
>
<!-- Itera sui prodotti di ogni riga -->
<div
v-for="(indprod, colIndex) in row"
:key="`${pageIndex}-${rowIndex}-${colIndex}`"
class="flex-item-book image-container"
:style="
'place-content: center; ' +
('flex: 0 1 ' +
recscheda.scheda.dimensioni.scheda_prodotto.width
|| '100px' + '; ')
"
:style="getStyleRow(recscheda)"
>
<!--pag: {{pageIndex}} - riga: {{rowIndex}} - col: {{colIndex}} - -->
<CContainerCatalogoCard
v-if="
getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
) &&
getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
).active
@@ -345,6 +344,7 @@
:id="
getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
)._id
@@ -366,11 +366,13 @@
v-else-if="
getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
) &&
(getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
).active ||
@@ -379,6 +381,7 @@
:id="
getProdBySchedaRigaCol(
recscheda,
pageIndex,
rowIndex,
colIndex
)._id
@@ -430,33 +433,16 @@
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage
optcatalogo.imgsfondo_def?.imagefile
}}
</div>
<q-img
v-if="optcatalogo.backgroundimage"
v-if="optcatalogo.imgsfondo_def?.imagefile"
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage
"
>
</q-img>
<div v-if="optcatalogo.backgroundimage_printable">
Sfondo Stampa:
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage_printable
}}
</div>
<q-img
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage_printable
optcatalogo.imgsfondo_def?.imagefile
"
>
</q-img>