- Continuazione del Catalogo

This commit is contained in:
Surya Paolo
2024-10-26 17:12:05 +02:00
parent 76b51f5b91
commit baa4188746
62 changed files with 1112 additions and 1697 deletions

View File

@@ -168,6 +168,7 @@ export const shared_consts = {
MAPPAGETCOORDINATE: 380,
EDITADDRESSBYCOORD: 390,
GRID_ORIZ: 400,
QRCODE: 410,
},
QUERYTYPE_MYGROUP: 1,
@@ -1673,6 +1674,10 @@ export const shared_consts = {
value: 400,
label: 'Visualizzatore Tabelle',
},
{
value: 410,
label: 'Qr Code',
},
],
TypesElemAdminTools: [

View File

@@ -19,6 +19,7 @@ export default defineComponent({
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
},
},

View File

@@ -159,7 +159,7 @@
.book-title {
margin: 8px;
font-family: 'Poppins,sans-serif';
font-family: 'Arial, Poppins,sans-serif';
font-weight: bold;
color: #333;
display: block;
@@ -258,6 +258,10 @@
}
.colfix_prodotti_2 {
width: 240px;
}
.colfix_prodotti_3 {
width: 170px;
}
@@ -312,10 +316,10 @@
.scheda-book {
text-align: center;
margin-left: 20px;
//margin-left: 20px;
@media (max-width: 718px) {
margin-left: 5px;
//margin-left: 5px;
}
}

View File

@@ -66,6 +66,7 @@ export default defineComponent({
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
},
},

View File

@@ -1,21 +1,27 @@
<template>
<div
:class="{
'row items-start q-gutter-sm': true,
' items-start q-gutter-sm': true,
}"
:style="
optcatalogo.height
? ' height: ' + optcatalogo.height + ' !important; '
: ''
"
>
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
<div
v-if="!!myproduct && !!myproduct.productInfo"
:class="{
'my-card-big book-details': complete,
'book-card': !complete,
colfix_prodotti_1: options.quante_col == 'c1',
colfix_prodotti_2: options.quante_col == 'c2',
'book-card': !complete && !optcatalogo.pdf,
colfix_prodotti_1: options.quante_col == 'c1' && !optcatalogo.pdf,
colfix_prodotti_2: options.quante_col == 'c2' && !optcatalogo.pdf,
colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
}"
>
<q-toggle
v-if="tools.isManager()"
v-if="tools.isManager() && !optcatalogo.pdf"
v-model="editOn"
class="absolute-top-right"
color="green"
@@ -24,7 +30,7 @@
>
</q-toggle>
<q-page-sticky
v-if="complete"
v-if="complete && !optcatalogo.pdf"
position="bottom-right"
:offset="[18, 0]"
style="z-index: 1000"
@@ -40,13 +46,22 @@
<q-card-section>
<div
:class="{ 'flex q-pa-sm': true, 'shadow-2': options.in_3d }"
style="place-content: center"
:class="{
'flex q-pa-sm': !optcatalogo.pdf,
'shadow-2': options.in_3d,
'items-center': true, // Centrare verticalmente
}"
:style="'justify-items: center; '"
>
<q-img
v-if="myproduct.productInfo"
:src="
productInfo.imagefile
? tools.getFullFileNameByImageFile('productInfos', myproduct.myproduct.productInfo.imagefile)
myproduct.productInfo.imagefile
? tools.getFullFileNameByImageFile(
'productInfos',
myproduct.productInfo.imagefile
)
: myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
@@ -54,7 +69,15 @@
'book-image-fixed': complete,
'cursor-pointer': !complete,
'shadow-4': true,
'image-wrapper': optcatalogo.pdf,
'items-center': true,
}"
:style="
'place-items: center; ' +
(optcatalogo.width
? ' width: ' + optcatalogo.width + ' !important; '
: '')
"
@click="click_opendetail()"
>
<div
@@ -62,6 +85,7 @@
style="left: 90%; top: -18px; transform: translateX(-50%)"
>
<q-btn
v-if="!optcatalogo.pdf"
color="blue-6"
class="semi-transparent"
round
@@ -72,12 +96,6 @@
</div>
</q-img>
<!--@click="
complete
? toggleFullScreen
: naviga(`/catalogo/` + myproduct._id + '/' + cosa)
"-->
<div class="scheda-book">
<q-card-title>
<span class="book-title" :data-col="options.quante_col">

View File

@@ -1 +1,49 @@
.pdf-page {
margin-bottom: 20px;
background: white;
}
.page-break-after {
page-break-after: always;
break-after: page;
}
.page-break-before {
page-break-before: always;
break-before: page;
}
.page-break-avoid {
page-break-inside: avoid;
break-inside: avoid;
}
@media print {
.pdf-page {
margin: 0;
page-break-after: always;
}
}
.image-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
margin-bottom: 20px;
}
.image-wrapper {
max-width: 100%;
display: block;
}
.image-wrapper img {
max-width: 100%;
height: auto;
display: block;
}
/* Per forzare una nuova pagina prima dell'immagine se necessario */
.force-new-page {
page-break-before: always;
break-before: page;
}

View File

@@ -53,6 +53,7 @@ export default defineComponent({
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
},
},

View File

@@ -1,16 +1,14 @@
<template>
<div>
<CCatalogoCard
:id="id"
:complete="complete"
:cosa="cosa"
:options="options"
@selauthor="selauthor"
@opendetail="opendetail"
:optcatalogo="optcatalogo"
>
</CCatalogoCard>
</div>
<CCatalogoCard
:id="id"
:complete="complete"
:cosa="cosa"
:options="options"
@selauthor="selauthor"
@opendetail="opendetail"
:optcatalogo="optcatalogo"
>
</CCatalogoCard>
<q-dialog
v-model="opendetailbool"
position="top"

View File

@@ -2,7 +2,7 @@ import {
defineComponent, onMounted, PropType, computed, ref, toRef, watch,
} from 'vue'
import { IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { IColGridTable, IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '@/components/CImgTitle'
@@ -307,6 +307,28 @@ export default defineComponent({
}
function saveFieldElem(rec: any, newval: any, col: IColGridTable) {
console.log('saveFieldElem', rec, 'newval', newval, 'col', col)
let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
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 {
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 {
myel.value[col.name] = newval
}
}
}
function saveCard(recpass: IMyCard, myval: any) {
if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
if (props.myelem.listcards) {
@@ -337,8 +359,13 @@ export default defineComponent({
(props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
myel.value.image = myval
myel.value.vers_img = tools.getGenerateVersionImage()
} else if (props.myelem.type === shared_consts.ELEMTYPE.IMAGE) {
myel.value.image = myval
}
modifElem()
}
function showAnimation() {
@@ -358,10 +385,15 @@ export default defineComponent({
modifElem()
}*/
function generateSizeOptions() {
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}px`, value: `${i}px` });
options.push({ label: `${i}${add}`, value: `${i}${add}` });
}
return options;
}
@@ -371,6 +403,40 @@ export default defineComponent({
myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoSizeWidth(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.width = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoNumSchedePerCol(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.numschede_perCol = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoNumSchedePerRiga(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.numschede_perRiga = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoSizeWidthScheda(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.widthscheda = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoSizeWidthPag(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.widthpag = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoSizeWidthPagPrintable(value: any) {
// Gestisce l'input dell'utente per un nuovo valore
myel.value.catalogo!.widthpagPrintable = value // Aggiorna widthimg con il nuovo valore
modifElem()
}
function updateCatalogoSizeHeight(value: any) {
myel.value.catalogo!.height = value
modifElem()
}
function updateSizeHeight(value: any) {
myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
@@ -520,6 +586,14 @@ export default defineComponent({
updateClass4,
selectedClasses,
classiImmagineOptions,
saveFieldElem,
updateCatalogoSizeWidth,
updateCatalogoSizeHeight,
updateCatalogoSizeWidthScheda,
updateCatalogoSizeWidthPag,
updateCatalogoSizeWidthPagPrintable,
updateCatalogoNumSchedePerCol,
updateCatalogoNumSchedePerRiga,
}
},

View File

@@ -189,7 +189,10 @@
/>
<q-select
label="Altezza Carosello:"
v-if="(myel.type === shared_consts.ELEMTYPE.CARD) || (myel.type === shared_consts.ELEMTYPE.GRID_ORIZ)"
v-if="
myel.type === shared_consts.ELEMTYPE.CARD ||
myel.type === shared_consts.ELEMTYPE.GRID_ORIZ
"
v-model="myel.heightcarousel"
emit-value
map-options
@@ -226,6 +229,7 @@
style="width: 100px"
emit-value
map-options
@save="saveCard"
>
</q-select>
<q-select
@@ -464,12 +468,12 @@
:rec="rec"
field="imagefile"
@update:model-value="modifElem"
@save="saveCard"
:canEdit="true"
:canModify="true"
:nosaveToDb="true"
:path="myel.path"
:fieldtype="costanti.FieldType.imgcard"
@save="saveCard"
>
</CMyFieldRec>
@@ -861,6 +865,56 @@
</CMyFieldRec>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
<div v-if="enableEdit">
<q-input
dense
label="Link:"
@update:model-value="modifElem"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Testo Link:"
@update:model-value="modifElem"
v-model="myel.container2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-toggle
v-model="myel.parambool"
color="positive"
label="Leggi"
@update:model-value="modifElem"
></q-toggle>
<q-input
label="NomeFile Img:"
@update:model-value="modifElem"
v-model="myel.image"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyFieldRec
title="NomeFile Img:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:path="myel.path"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div v-if="enableEdit">
@@ -1271,6 +1325,15 @@
<div v-if="enableEdit" class="row">
<div>Cataloghi:</div>
<br />
<q-toggle
v-model="myel.catalogo.pdf"
color="positive"
icon="fas fa-file-pdf"
label="Versione PDF"
@update:model-value="modifElem"
>
</q-toggle>
<br>
<!--++AddCATALOGO_FIELDS-->
<q-select
@@ -1326,14 +1389,191 @@
option-label="name"
>
</q-select>
Versione PDF:
<q-toggle
v-model="myel.catalogo.pdf"
color="positive"
icon="fas fa-file-pdf"
<q-select
label="Largh. Schede:"
v-model="myel.catalogo.widthscheda"
emit-value
map-options
:options="generateSizeOptions()"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoSizeWidthScheda"
filled
dense
style="width: 150px"
/>
<q-select
label="Largh. Pagina:"
v-model="myel.catalogo.widthpag"
emit-value
map-options
:options="generateSizeOptions(false)"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoSizeWidthPag"
filled
dense
style="width: 180px"
/>
<q-select
label="Largh. Immagini:"
v-model="myel.catalogo.width"
emit-value
map-options
:options="generateSizeOptions()"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoSizeWidth"
filled
dense
style="width: 180px"
/>
<q-select
label="Altezza Schede:"
v-model="myel.catalogo.height"
emit-value
map-options
:options="generateSizeOptions()"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoSizeHeight"
filled
dense
style="width: 180px"
/>
</div>
<div class="sfondo_margine">
Margini:<br />
<q-select
label="Schede per Riga"
v-model="myel.catalogo.numschede_perRiga"
emit-value
map-options
:options="[
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
]"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoNumSchedePerRiga"
filled
dense
style="width: 180px"
/>
<q-select
label="Schede per Colonna"
v-model="myel.catalogo.numschede_perCol"
emit-value
map-options
:options="[
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
]"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoNumSchedePerCol"
filled
dense
style="width: 180px"
/>
<q-input
dense
label="Margine per Pagina:"
@update:model-value="modifElem"
v-model="myel.catalogo.margine_pagina"
filled
v-on:keyup.enter="saveFieldElem"
>
</q-toggle>
</q-input>
<q-input
dense
label="Margine per Riga:"
@update:model-value="modifElem"
v-model="myel.catalogo.margine_riga"
filled
v-on:keyup.enter="saveFieldElem"
>
</q-input>
</div>
<div>Sfondo:</div>
<div v-if="enableEdit">
Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
<div class="sfondo_print">
Per Stampa:
<q-toggle
v-model="myel.catalogo.printable"
color="positive"
icon="fas fa-file-pdf"
label="Versione Stampabile"
@update:model-value="modifElem"
>
</q-toggle>
<q-input
dense
label="Margine per Pagina:"
@update:model-value="modifElem"
v-model="myel.catalogo.margine_paginaPrintable"
filled
v-on:keyup.enter="saveFieldElem"
>
</q-input>
<q-input
dense
label="Margine per Riga:"
@update:model-value="modifElem"
v-model="myel.catalogo.margine_rigaPrintable"
filled
v-on:keyup.enter="saveFieldElem"
>
</q-input>
Nome File Printable: {{ myel.catalogo.backgroundimage_printable }}
<CMyFieldRec
title="Sfondo:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage_printable"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<q-select
label="Largh. Pag. Stampa:"
v-model="myel.catalogo.widthpagPrintable"
emit-value
map-options
:options="generateSizeOptions(false)"
use-input
use-chips
@input="modifElem"
@new-value="updateCatalogoSizeWidthPagPrintable"
filled
dense
style="width: 180px"
/>
</div>
</div>
</div>
</q-list>

View File

@@ -15,6 +15,7 @@ import { shared_consts } from '@/common/shared_vuejs'
import { LandingFooter } from '@/components/LandingFooter'
import { CMyActivities } from '@/components/CMyActivities'
import { CECommerce } from '@/components/CECommerce'
import { CQRCode } from '@/components/CQRCode'
import { CAITools } from '@/components/CAITools'
import { CCatalogo } from '@/components/CCatalogo'
// import { CMapMarker } from '@src/components/CMapMarker.off'
@@ -67,7 +68,7 @@ export default defineComponent({
CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
CDashGroup, CMovements, CGridOriz,
CDashGroup, CMovements, CGridOriz, CQRCode,
// , //CMapMarker,
},
emits: ['selElemClick'],

View File

@@ -88,60 +88,62 @@
:key="groupIndex"
:name="groupIndex"
>
<div class="row no-wrap justify-start items-center q-px-md full-width">
<template v-for="(rec, cardIndex) in group" :key="cardIndex">
<div :class="cardColumnClass">
<q-card
:class="
`flex-card bordered ` +
myel.class3 +
(rec.link ? ' titolo_card' : '')
"
:style="
rec.style +
`; height: ${
myel.heightimg || `300px`
} !important; width: ${
myel.widthimg || `300px`
} !important;`
"
@click="rec.link ? tools.openUrl(rec.link) : undefined"
>
<div
class="img-container"
:style="`height: ${
myel.heightimg.replace('px', '') * 0.7
}px; overflow: hidden;`"
<div
class="row no-wrap justify-start items-center q-px-md full-width"
>
<template v-for="(rec, cardIndex) in group" :key="cardIndex">
<div :class="cardColumnClass">
<q-card
:class="
`flex-card bordered ` +
myel.class3 +
(rec.link ? ' titolo_card' : '')
"
:style="
rec.style +
`; height: ${
myel.heightimg || `300px`
} !important; width: ${
myel.widthimg || `300px`
} !important;`
"
@click="rec.link ? tools.openUrl(rec.link) : undefined"
>
<q-img
:class="
tools.getClassAnim(myel.anim2) + ` ` + myel.class4
"
:src="tools.getImgFileByElem(myel, rec)"
/>
</div>
<q-card-section>
<div :class="rec.size" :style="`color: ` + rec.color">
{{ tools.getText(rec.alt) }}
</div>
<div
:class="
`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
"
v-html="rec.content"
></div>
<div
v-if="rec.description"
class="text-caption"
:style="`color: ` + rec.colorsub"
class="img-container"
:style="`height: ${
myel.heightimg.replace('px', '') * 0.7
}px; overflow: hidden;`"
>
{{ rec.description }}
<q-img
:class="
tools.getClassAnim(myel.anim2) + ` ` + myel.class4
"
:src="tools.getImgFileByElem(myel, rec)"
/>
</div>
</q-card-section>
</q-card>
</div>
</template>
</div>
<q-card-section>
<div :class="rec.size" :style="`color: ` + rec.color">
{{ tools.getText(rec.alt) }}
</div>
<div
:class="
`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
"
v-html="rec.content"
></div>
<div
v-if="rec.description"
class="text-caption"
:style="`color: ` + rec.colorsub"
>
{{ rec.description }}
</div>
</q-card-section>
</q-card>
</div>
</template>
</div>
</q-carousel-slide>
</q-carousel>
</div>
@@ -236,6 +238,15 @@
></div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
<div v-if="editOn" class="elemEdit">QRCODE:</div>
<CQRCode
:read="myel.parambool"
:link="myel.container"
:textlink="myel.container2"
:imglogo="tools.getImgFileByElem(myel)"
></CQRCode>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
@@ -249,7 +260,7 @@
@click="clickOnElem"
>
<q-img
:src="tools.getImgFileByElem(myel.image)"
:src="tools.getImgFileByElem(myel)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"

View File

@@ -173,19 +173,23 @@ export default defineComponent({
if (arrk.length > 2)
mysubsubkey.value = arrk[2]
}
// console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value, 'mysubkey', mysubkey.value)
}
function showandsave(row: any, col: any, newval: any, valinitial: any) {
console.log('showandsave CMyFieldDb', row, col, newval)
emit('save', props.rec, newval)
emit('save', props.rec, newval, col)
if (props.nosaveToDb)
return
if (newval !== valinitial) {
tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
if (props.id) {
tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
} else {
}
}
}

View File

@@ -33,6 +33,11 @@ export default defineComponent({
required: false,
default: '',
},
imglogo: {
type: String,
required: false,
default: '',
},
read: {
type: Boolean,
required: false,
@@ -82,6 +87,7 @@ export default defineComponent({
...toRefs(state),
onDecode,
naviga,
globalStore,
}
},
})

View File

@@ -1,5 +1,5 @@
<template>
<div>
<div v-if="globalStore.finishLoading">
<div v-if="read">
<div class="stream">
<qr-stream @decode="onDecode" class="mb">
@@ -27,8 +27,9 @@
</div>
<div v-else>
<div class="q-ma-sm">
{{textlink}}<br>
{{link}}
{{ textlink }}<br />
{{ link }}<br />
Logo: {{imglogo}}<br />
</div>
<qrcode-vue
:width="250"
@@ -47,10 +48,10 @@
],
},
}"
:image="tools.getimglogo()"
:image="imglogo ? imglogo : tools.getimglogo()"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
fileExt="png"
fileExt="png"
:download="true"
:value="link"
downloadButton="button_download"

View File

@@ -2448,4 +2448,45 @@ body.body--dark {
border-radius: 5px; /* Angoli arrotondati */
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* Leggera ombra per effetto di profondità */
margin: 10px 0; /* Spaziatura verticale */
}
.flex-container-book {
display: flex;
flex-direction: row; /* Allineamento orizzontale */
flex-wrap: wrap;
gap: 10px; /* Spaziatura tra gli elementi */
}
.flex-item-book {
display: flex; /* Rende il div un container flex per allineare i contenuti */
justify-content: center; /* Allineamento orizzontale al centro */
align-items: center; /* Allineamento verticale al centro */
padding: 10px;
flex-grow: 1; /* Opzionale: permette agli elementi di crescere uniformemente */
break-inside: avoid;
page-break-inside: avoid;
}
.card-page {
break-after: page;
page-break-after: always;
}
.card-row {
display: flex;
justify-content: flex-start;
}
.cards-container {
display: flex;
flex-direction: column !important;
width: 100% !important;
}
.sfondo_print{
background-color: #17ead9;
}
.sfondo_margine{
background-color: #d8f38a;
}

View File

@@ -1,9 +1,9 @@
const msg_website_it = {
ws: {
sitename: 'Riso',
siteshortname: 'RISO',
description: 'Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.',
keywords: 'riso, piattaforma di scambio, rete italiana scambio orizzontale, riso app, riso piattaforma, scambio e baratto, momenta RIS',
sitename: 'Gruppo Macro',
siteshortname: 'Gruppo Macro',
description: '',
keywords: '',
},
hours: {
descr: 'Descrizione',
@@ -16,23 +16,35 @@ const msg_website_it = {
pages: {
home: 'Home',
profile: 'Profilo',
install_site: 'Installa Sito',
profile2: 'ProfiloU',
mypage2: 'mypage2',
myservice2: 'myservice2',
myhosps2: 'myhosps2',
mygood2: 'mygood2',
catalogo: 'Catalogo',
fundraising: 'Sostieni il Progetto',
notifs: 'Configura le Notifiche',
unsubscribe: 'Disiscriviti',
unsubscribe_user: 'Disiscriviti User',
test: 'Test',
projects: 'Progetti',
report: 'Report Ore',
producer: 'Produttore',
orderinfo: 'Ordini Effettuati',
products: 'Prodotti',
cash: 'Cassa',
productInfos: 'Info Prodotti',
listinoprodotti: 'Listino Prodotti',
productslist: 'Lista Prodotti',
collabora: 'Collabora',
categories: 'Categorie',
storehouses: 'Magazzino',
providers: 'Fornitori',
catprods: 'Categorie',
subcatprods: 'Sotto-Categorie',
gasordine: 'Gas Ordine',
scontisticas: 'Scontistica',
departments: 'Uffici',
orders: 'Ordini Ricevuti',
orders2: 'Ordini Ricevuti',
@@ -121,15 +133,11 @@ const msg_website_it = {
only_residenti: 'Solo Residenti',
only_consiglio: 'Solo Consiglieri',
color: 'Colore',
mainMenu: 'Menu Principale',
subtitle: 'Sottotitolo',
lang: 'Lingua',
keywords: 'Parole Chiave',
desctiption: 'Descrizione',
heightimg: 'Altezza Immagine',
gasordini: 'Gas Ordini',
gestoreordini: 'Gestore Ordini',
},
msg: {
myAppName: 'Riso',
myAppName: 'Più che Buono',
myAppDescription: 'Il primo Vero Social Libero, Equo e Solidale, dove Vive Consapevolezza e Aiuto Comunitario. Gratuito',
underconstruction: 'App in costruzione...',
myDescriz: '',

View File

@@ -67,39 +67,6 @@ function getDynamicPages(site: ISites): IListRoutes[] {
inmenu: false,
infooter: false,
},
{
active: true,
order: 12,
path: '/goods',
materialIcon: 'fas fa-tshirt',
name: 'mypages.goods',
component: () => import('@/root/goods/goods.vue'),
meta: { requiresAuth: true },
inmenu: true,
infooter: true,
},
{
active: true,
order: 15,
path: '/services',
materialIcon: 'fas fa-house-user',
name: 'mypages.services',
component: () => import('@/root/services/services.vue'),
meta: { requiresAuth: true },
inmenu: true,
infooter: true,
},
{
active: true,
order: 15,
path: '/activities',
materialIcon: 'fas fa-house-user',
name: 'mypages.activities',
component: () => import('@/root/activities/activities.vue'),
meta: { requiresAuth: true },
inmenu: false,
infooter: false,
},
{
active: true,
order: 15,
@@ -111,17 +78,6 @@ function getDynamicPages(site: ISites): IListRoutes[] {
inmenu: false,
infooter: false,
},
{
active: true,
order: 15,
path: '/hosps',
materialIcon: 'fas fa-bed',
name: 'mypages.hosp',
component: () => import('@/root/hosp/hosp.vue'),
meta: { requiresAuth: true },
inmenu: true,
infooter: true,
},
{
active: site.confpages && site.confpages.enableCircuits,
order: 16,
@@ -209,7 +165,7 @@ function getDynamicPages(site: ISites): IListRoutes[] {
meta: { requiresAuth: true, newpage: true },
inmenu: false,
infooter: false,
},
},
{
active: true,
order: 137,
@@ -276,7 +232,7 @@ function getDynamicPages(site: ISites): IListRoutes[] {
{
active: true,
order: 150,
path: '/sostieniilprogetto',
path: '/fundraising',
materialIcon: 'fas fa-hand-holding-heart',
name: 'pages.fundraising',
component: () => import('@src/root/fundraising/fundraising.vue'),

View File

@@ -681,6 +681,20 @@ export interface ICatalogo {
Categoria: string[]
Editore: string[]
pdf: boolean
backgroundimage?: string
backgroundimage_printable?: string
widthpag?: number
widthpagPrintable?: number
widthscheda?: string
width?: string
height?: string
printable?: boolean
numschede_perCol?: number
numschede_perRiga?: number
margine_pagina?: string
margine_riga?: string
margine_paginaPrintable?: string
margine_rigaPrintable?: string
}

View File

@@ -19,6 +19,29 @@ export const costanti = {
CERCO: 2,
},
CATALOGO_FIELDS: [
'productTypes',
'excludeproductTypes',
'formato',
'Categoria',
'Editore',
'pdf',
'printable',
'backgroundimage',
'backgroundimage_printable',
'width',
'widthscheda',
'widthpag',
'Printable',
'height',
'numschede_perCol',
'numschede_perRiga',
'margine_pagina',
'margine_riga',
'margine_paginaPrintable',
'margine_rigaPrintable',
],
TIPOFAVBOOK: {
FAVORITE: 1,
BOOKMARK: 2,
@@ -313,6 +336,8 @@ export const costanti = {
VISUTABLE_GRID_ORIZ: -10,
DIR_UPLOAD: 'upload/',
DIR_PRODUCTS: 'products/',
DIR_CATALOGO: 'catalogo/',
FRIENDS: 1,
ASK_TRUST: 2,

View File

@@ -147,6 +147,26 @@ export const colmylistcards = [
AddCol({ name: 'link', label_trans: 'link' }),
]
export const colmyelCatalogo = [
AddCol({ name: 'productTypes', label_trans: 'productTypes', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'excludeproductTypes', label_trans: 'excludeproductTypes', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'pdf', label_trans: 'pdf' }),
AddCol({ name: 'Editore', label_trans: 'Editore' }),
AddCol({ name: 'backgroundimage', label_trans: 'backgroundimage', fieldtype: costanti.FieldType.image }),
AddCol({ name: 'backgroundimage_printable', label_trans: 'backgroundimage_printable', fieldtype: costanti.FieldType.image }),
AddCol({ name: 'widthscheda', label_trans: 'widthscheda', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'widthpag', label_trans: 'widthpag', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'widthpagPrintable', label_trans: 'widthpagPrintable', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'width', label_trans: 'width', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'height', label_trans: 'height', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'numschede_perCol', label_trans: 'numschede_perCol', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'numschede_perRiga', label_trans: 'numschede_perRiga', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'margine_pagina', label_trans: 'margine_pagina', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'margine_riga', label_trans: 'margine_riga', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'margine_paginaPrintable', label_trans: 'margine_paginaPrintable', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'margine_rigaPrintable', label_trans: 'margine_rigaPrintable', fieldtype: costanti.FieldType.string }),
]
export const colmyelems = [
AddCol({ name: 'active', label_trans: 'myelems.active', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'path', label_trans: 'myelems.path' }),
@@ -4131,6 +4151,13 @@ export const fieldsTable = {
colkey: '_id',
collabel: 'title',
},
{
value: 'catalogo',
label: 'Elementi Catalogo',
columns: colmyelCatalogo,
colkey: '_id',
collabel: 'title',
},
{
value: 'listcards',
label: 'Elementi',

View File

@@ -7972,6 +7972,8 @@ export const tools = {
return ''
} else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.container + addtourl
} else if (elem.type === shared_consts.ELEMTYPE.QRCODE) {
return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.image + addtourl
} else {
return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.image + addtourl
}

View File

@@ -2192,6 +2192,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}
}

View File

@@ -51,4 +51,13 @@ $heightBtn: 100%;
color: black;
text-align: center;
}
.fixed-width {
width: var(--width) !important; /* Usa una variabile CSS */
}
.break {
flex-basis: 100%;
height: 0;
}

View File

@@ -1,4 +1,4 @@
import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, PropType } from 'vue'
import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, PropType, nextTick } from 'vue'
import { tools } from '@store/Modules/tools'
import { useUserStore } from '@store/UserStore'
import { useRouter } from 'vue-router'
@@ -72,6 +72,7 @@ export default defineComponent({
const mycolumns = ref([])
const tabvisu = ref('categorie')
const tabcatalogo = ref('visu')
const searchList = ref([] as ISearchList[])
@@ -266,7 +267,7 @@ export default defineComponent({
});
}
console.log('filter.value.sort', filter.value.sort)
// console.log('filter.value.sort', filter.value.sort)
// sort using filter.value.sort :
if (filter.value.sort === costanti.SORT_PUBDATE) {
@@ -427,6 +428,8 @@ export default defineComponent({
}
const generatePDF = async () => {
await nextTick()
$q.loading.show({
message: 'Caricamento immagini e generazione PDF in corso...'
})
@@ -435,14 +438,26 @@ export default defineComponent({
const element = document.getElementById('pdf-content')
const opt = {
margin: 1,
filename: 'catalogo_libri.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
margin: [0.1, 0.1, 0.1, 0.1],
filename: 'catalogo_completo.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
useCORS: true,
letterRendering: true,
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
compress: true
},
}
await html2pdf().from(element).set(opt).save()
await html2pdf().set(opt).from(element).save()
$q.loading.hide()
$q.notify({
@@ -461,6 +476,59 @@ export default defineComponent({
}
}
function getWidthPerc(): string {
let mynum = props.optcatalogo.numschede_perRiga! + 0
return (100 / mynum) + '%'
}
function getCardStyle(index: any) {
return {
'place-content': 'center',
'flex': `0 1 ${props.optcatalogo.widthscheda}`,
'width': getWidthPerc(), // per N elementi per riga
// 'margin-bottom': props.optcatalogo.margine_pagina, // spazio tra le righe
}
}
function groupedPages() {
const schedePerRiga = props.optcatalogo.numschede_perRiga || 1
const schedePerCol = props.optcatalogo.numschede_perCol || 1
const schedePerPagina = schedePerRiga * schedePerCol
const pages = []
// Iterate attraverso l'array prodotti con step = schedePerPagina
for (let pageStart = 0; pageStart < arrProducts.value.length; pageStart += schedePerPagina) {
const page = []
// Crea le righe per questa pagina
for (let rowStart = 0; rowStart < schedePerCol; rowStart++) {
const row = []
// Riempi ogni riga con il numero corretto di prodotti
for (let col = 0; col < schedePerRiga; col++) {
const productIndex = pageStart + (rowStart * schedePerRiga) + col
if (productIndex < arrProducts.value.length) {
row.push(arrProducts.value[productIndex])
} else {
// Opzionale: riempi con null se non ci sono abbastanza prodotti
row.push(null)
}
}
page.push(row)
}
pages.push(page)
}
return pages
}
onMounted(mounted)
return {
@@ -498,6 +566,10 @@ export default defineComponent({
getSearchText,
generatePDF,
pdfContent,
tabcatalogo,
getCardStyle,
getWidthPerc,
groupedPages,
}
}
})

View File

@@ -1,38 +1,66 @@
<template>
<q-page>
<q-btn v-if="optcatalogo.pdf" label="Crea PDF" @click="generatePDF"></q-btn>
<!--<div ref="pdfContent" class="pdf-content">-->
<div class="text-center">
<q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
</div>
<div v-if="loadpage" class="panel">
<div class="container">
<q-tabs v-model="tabvisu" dense class="bg-indigo text-white">
<q-tab name="categorie" icon="fas fa-folder-open" label="Categorie">
<q-badge v-if="cat" color="red" floating>1</q-badge>
</q-tab>
<q-tab name="autori" icon="fas fa-user" label="Autori">
<q-badge v-if="filter.author" color="red" floating>1</q-badge>
</q-tab>
<q-tab name="ricerca" icon="fas fa-search" label="Cerca">
<q-badge v-if="getSearchText()" color="red" floating>1</q-badge>
</q-tab>
</q-tabs>
<q-tab-panels v-model="tabvisu" animated class="">
<q-tab-panel name="categorie">
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div v-for="(reccat, index) in getCatProds()" :key="index">
<span
:class="{
category: true,
category_sel: cat === reccat.value,
}"
@click="cat = reccat.value"
>{{ reccat.label }}
</span>
|
<!--<q-btn
<q-tabs
v-if="optcatalogo.pdf"
v-model="tabcatalogo"
dense
class="bg-green text-white"
>
<q-tab name="visu" icon="fas fa-eye" label="Visualizza"> </q-tab>
<q-tab name="sfondo" icon="fas fa-image" label="Sfondo"> </q-tab>
<q-tab name="opzioni" icon="fas fa-save" label="Opzioni"> </q-tab>
</q-tabs>
<q-tab-panels v-model="tabcatalogo" animated class="">
<q-tab-panel name="visu">
<q-btn
v-if="optcatalogo.pdf"
label="Crea PDF"
@click="generatePDF"
></q-btn>
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div class="text-center">
<q-spinner
v-if="!loadpage"
color="primary"
size="3em"
:thickness="2"
/>
</div>
<div v-if="loadpage" class="panel">
<div class="container">
<q-tabs v-model="tabvisu" dense class="bg-indigo text-white">
<q-tab
name="categorie"
icon="fas fa-folder-open"
label="Categorie"
>
<q-badge v-if="cat" color="red" floating>1</q-badge>
</q-tab>
<q-tab name="autori" icon="fas fa-user" label="Autori">
<q-badge v-if="filter.author" color="red" floating>1</q-badge>
</q-tab>
<q-tab name="ricerca" icon="fas fa-search" label="Cerca">
<q-badge v-if="getSearchText()" color="red" floating
>1</q-badge
>
</q-tab>
</q-tabs>
<q-tab-panels v-model="tabvisu" animated class="">
<q-tab-panel name="categorie">
<div
class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"
>
<div v-for="(reccat, index) in getCatProds()" :key="index">
<span
:class="{
category: true,
category_sel: cat === reccat.value,
}"
@click="cat = reccat.value"
>{{ reccat.label }}
</span>
|
<!--<q-btn
:push="cat === reccat.value"
dense
:size="tools.isMobile() ? '0.70rem' : '1rem'"
@@ -44,37 +72,37 @@
@click="cat = reccat.value"
>
</q-btn>-->
</div>
</div>
</q-tab-panel>
<q-tab-panel name="autori">
<q-toolbar>
<q-select
class="full-width"
v-model="filter.author"
:options="optauthors"
label="Autore"
placeholder="Tutti"
emit-value
map-options
use-input
hide-selected
fill-input
stack-label
use-chips
filled
rounded
@filter="filterFn"
>
<template v-slot:append>
<q-icon
v-if="filter.author !== ''"
class="cursor-pointer"
name="clear"
@click.stop.prevent="filter.author = ''"
/> </template
></q-select>
<!--<q-select
</div>
</div>
</q-tab-panel>
<q-tab-panel name="autori">
<q-toolbar>
<q-select
class="full-width"
v-model="filter.author"
:options="optauthors"
label="Autore"
placeholder="Tutti"
emit-value
map-options
use-input
hide-selected
fill-input
stack-label
use-chips
filled
rounded
@filter="filterFn"
>
<template v-slot:append>
<q-icon
v-if="filter.author !== ''"
class="cursor-pointer"
name="clear"
@click.stop.prevent="filter.author = ''"
/> </template
></q-select>
<!--<q-select
v-model="filter.publisher"
:options="publishers"
label="Editore"
@@ -95,176 +123,270 @@
placeholder="Tutte"
dense
/>-->
</q-toolbar>
</q-tab-panel>
<q-tab-panel name="ricerca">
<div class="col" v-for="(item, index) in searchList" :key="index">
<CMySelect
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-if="
item.type === costanti.FieldType.select ||
item.type === costanti.FieldType.select_by_server
"
:label="
item.value && item.value._id > 0
? undefined
: labelcombo(item)
"
v-model:value="item.value"
:addall="item.addall"
:addnone="item.addnone"
:addlast="true"
:tablesel="
item.type === costanti.FieldType.select_by_server
? item.tablesel
: ''
"
:pickup="item.type === costanti.FieldType.select_by_server"
:label-color="$q.dark.isActive ? 'white' : 'black'"
myclass="comboselector"
color="primary"
:dense="true"
:icon_alternative="item.icon"
:optval="fieldsTable.getKeyByTable(item.table)"
:optlab="fieldsTable.getLabelByTable(item.table)"
:options="valoriopt(item, false)"
:filter="item.filter"
:filter_extra="item.filter_extra"
style="font-size: 0.8rem !important"
:useinput="
item.useinput &&
item.type !== costanti.FieldType.select_by_server
"
>
</CMySelect>
</div>
</q-tab-panel>
</q-tab-panels>
</q-toolbar>
</q-tab-panel>
<q-tab-panel name="ricerca">
<div
class="col"
v-for="(item, index) in searchList"
:key="index"
>
<CMySelect
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-if="
item.type === costanti.FieldType.select ||
item.type === costanti.FieldType.select_by_server
"
:label="
item.value && item.value._id > 0
? undefined
: labelcombo(item)
"
v-model:value="item.value"
:addall="item.addall"
:addnone="item.addnone"
:addlast="true"
:tablesel="
item.type === costanti.FieldType.select_by_server
? item.tablesel
: ''
"
:pickup="
item.type === costanti.FieldType.select_by_server
"
:label-color="$q.dark.isActive ? 'white' : 'black'"
myclass="comboselector"
color="primary"
:dense="true"
:icon_alternative="item.icon"
:optval="fieldsTable.getKeyByTable(item.table)"
:optlab="fieldsTable.getLabelByTable(item.table)"
:options="valoriopt(item, false)"
:filter="item.filter"
:filter_extra="item.filter_extra"
style="font-size: 0.8rem !important"
:useinput="
item.useinput &&
item.type !== costanti.FieldType.select_by_server
"
>
</CMySelect>
</div>
</q-tab-panel>
</q-tab-panels>
<div class="row justify-center q-mx-auto">
<q-select
v-model="filter.sort"
dense
:options="costanti.ORDINAMENTO_CATALOGHI"
label="Ordinamento"
placeholder=""
emit-value
map-options
filled
rounded
></q-select>
</div>
<div class="text-center q-py-sm prod_trov">
<span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
t('ecomm.prodotti_trovati', {
qta: arrProducts.length,
qtatot: productStore.getNumProdTot(),
})
}}</span>
</div>
<div class="row justify-around" v-if="tools.isManager() && false">
<q-toggle
v-model="show_hide"
push
label="Mostra Nascosti"
rounded
glossy
toggle-color="primary"
></q-toggle>
</div>
<div class="row justify-around">
<div>
<q-infinite-scroll
v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
ref="myinfscroll"
:initial-index="0"
@load="onLoadScroll"
:offset="2000"
debounce="200"
class="q-pa-xs row items-start"
style="place-content: center"
>
<div
class="q-pa-xs"
v-for="(product, index) in arrLoaded"
:key="index"
>
<CContainerCatalogoCard
v-if="
product.active ||
(show_hide &&
productInfo.productTypes.includes(
shared_consts.PRODUCTTYPE.PRODUCT
))
"
:id="product._id"
:complete="false"
:cosa="cosa"
:optcatalogo="optcatalogo"
:options="{
show_short_descr: false,
show_price: false,
show_cat: false,
quante_col: 'c2',
in_3d: false,
}"
@selauthor="selauthor"
/>
<CProductCard
v-else-if="product.active || show_hide"
:id="product._id"
:complete="false"
:cosa="cosa"
/>
<div class="row justify-center q-mx-auto">
<q-select
v-model="filter.sort"
dense
:options="costanti.ORDINAMENTO_CATALOGHI"
label="Ordinamento"
placeholder=""
emit-value
map-options
filled
rounded
></q-select>
</div>
<template v-slot:loading>
<div class="text-center">
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
<div
v-else
id="pdf-content"
class="q-pa-xs row items-start"
style="place-content: center"
v-for="(product, index) in arrProducts"
:key="index"
>
<CContainerCatalogoCard
v-if="
product.active ||
(show_hide &&
productInfo.productTypes.includes(
shared_consts.PRODUCTTYPE.PRODUCT
))
"
:id="product._id"
:complete="false"
:cosa="cosa"
:optcatalogo="optcatalogo"
:options="{
show_short_descr: false,
show_price: false,
show_cat: false,
quante_col: 'c2',
in_3d: false,
<div class="text-center q-py-sm prod_trov">
<span
v-show="productStore.getNumProdTot() !== arrProducts.length"
>{{
t('ecomm.prodotti_trovati', {
qta: arrProducts.length,
qtatot: productStore.getNumProdTot(),
})
}}</span
>
</div>
<div class="row justify-around" v-if="tools.isManager() && false">
<q-toggle
v-if="!optcatalogo.pdf"
v-model="show_hide"
push
label="Mostra Nascosti"
rounded
glossy
toggle-color="primary"
></q-toggle>
</div>
<div
id="pdf-content"
ref="pdfContent"
:class="{ 'fixed-width': true }"
:style="{
backgroundImage: `url(${
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
(optcatalogo.printable
? optcatalogo.backgroundimage_printable
: optcatalogo.backgroundimage)
})`,
backgroundSize: 'contain',
'--width':
(optcatalogo.printable
? optcatalogo.widthpagPrintable
: optcatalogo.widthpag) + 'px',
}"
@selauthor="selauthor"
/>
<CProductCard
v-else-if="product.active || show_hide"
:id="product._id"
:complete="false"
:cosa="cosa"
/>
>
<div class="flex-container-book">
<q-infinite-scroll
v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
ref="myinfscroll"
:initial-index="0"
@load="onLoadScroll"
:offset="2000"
debounce="200"
class="q-pa-xs row items-start"
style="place-content: center"
>
<div
class="q-pa-xs"
v-for="(product, index) in arrLoaded"
:key="index"
>
<CContainerCatalogoCard
v-if="
product.active ||
(show_hide &&
productInfo.productTypes.includes(
shared_consts.PRODUCTTYPE.PRODUCT
))
"
:id="product._id"
:complete="false"
:cosa="cosa"
:optcatalogo="optcatalogo"
:options="{
show_short_descr: false,
show_price: false,
show_cat: false,
quante_col: 'c2',
in_3d: false,
}"
@selauthor="selauthor"
/>
<CProductCard
v-else-if="product.active || show_hide"
:id="product._id"
:complete="false"
:cosa="cosa"
/>
</div>
<template v-slot:loading>
<div class="text-center">
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
<div v-else class="cards-container">
<!-- Itera sulle pagine -->
<div
v-for="(page, pageIndex) in groupedPages()"
:key="pageIndex"
class="card-page"
:style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_paginaPrintable : optcatalogo.margine_pagina};`"
>
<!-- Itera sulle righe di ogni pagina -->
<div
v-for="(row, rowIndex) in page"
:key="`${pageIndex}-${rowIndex}`"
class="card-row"
:style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_rigaPrintable : optcatalogo.margine_riga};`"
>
<!-- Itera sui prodotti di ogni riga -->
<div
v-for="(product, colIndex) in row"
:key="`${pageIndex}-${rowIndex}-${colIndex}`"
class="flex-item-book image-container"
:style="
'place-content: center; ' +
('flex: 0 1 ' + optcatalogo.widthscheda + '; ')
"
>
<CContainerCatalogoCard
v-if="
product && product.active ||
(show_hide &&
productInfo.productTypes.includes(
shared_consts.PRODUCTTYPE.PRODUCT
))
"
:id="product._id"
:complete="false"
:cosa="cosa"
:optcatalogo="optcatalogo"
:options="{
show_short_descr: false,
show_price: false,
show_cat: false,
quante_col: 'c2',
in_3d: false,
}"
@selauthor="selauthor"
/>
<CProductCard
v-else-if="product && (product.active || show_hide)"
:id="product._id"
:complete="false"
:cosa="cosa"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-tab-panel>
<q-tab-panel name="sfondo">
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div>
Sfondo:
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage
}}
</div>
<q-img
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage
"
>
</q-img>
<div>
Sfondo Stampa:
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage_printable
}}
</div>
<q-img
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.backgroundimage_printable
"
>
</q-img>
</div>
</q-tab-panel>
<q-tab-panel name="opzioni">
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"></div>
</q-tab-panel>
</q-tab-panels>
<!--<div ref="pdfContent" class="pdf-content">-->
</q-page>
</template>