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

- Cataloghi: qualita di stampa e margini

Browse Source
This commit is contained in:
Surya Paolo
2024-11-22 20:23:37 +01:00
parent 5cd9bd40f6
commit 6a6c15b62c
24 changed files with 1031 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CBorders/CBorders.ts
View File

@@ -21,6 +21,11 @@ export default defineComponent({
type: String,
required: true,
},
addstr: {
type: String,
required: false,
default: 'px'
},
disable: {
type: Boolean,
required: false,

8
src/components/CBorders/CBorders.vue
View File

@@ -17,7 +17,7 @@
:min="10"
:max="1000"
color="green"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueTop"
></CMySlider>
<CMySlider
@@ -26,7 +26,7 @@
:min="10"
:max="1000"
color="red"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueBottom"
></CMySlider>
<CMySlider
@@ -35,7 +35,7 @@
:min="10"
:max="1000"
color="orange"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueLeft"
></CMySlider>
<CMySlider
@@ -44,7 +44,7 @@
:min="10"
:max="1000"
color="fuchsia"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueRight"
></CMySlider>
</div>

67
src/components/CCatalogoCard/CCatalogoCard.vue
View File

@@ -4,7 +4,11 @@
' items-start q-gutter-sm': true,
}"
:style="
scheda.height ? ' height: ' + scheda.height + 'px !important; ' : ''
scheda.height
? ' height: ' +
tools.adjustSize(optcatalogo, scheda.height) +
'px !important; '
: ''
"
>
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
@@ -54,9 +58,13 @@
]"
:style="{
justifyContent: 'center',
alignItems: 'flex-start',
alignItems: 'center',
gap: '0.5rem',
width: scheda.dimensioni?.scheda_prodotto?.size.width ?? '100%',
width:
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.scheda_prodotto?.size.width
) ?? '100%',
}"
>
<q-img
@@ -81,10 +89,15 @@
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '50%'
: '45%',
...(scheda.dimensioni?.immagine_prodotto?.size?.width && {
...(tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.width
) && {
width:
scheda.dimensioni?.immagine_prodotto.size?.width +
' !important',
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto.size?.width
) + ' !important',
}),
display: 'block',
}"
@@ -121,9 +134,18 @@
}"
>
<div
v-if="scheda.testo_right"
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_right)"
v-if="scheda.testo_right && scheda.testo_right"
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'line-height': scheda.line_height,
}"
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_right
)
"
></div>
<div v-if="scheda.barcode && scheda.barcode.show">
@@ -131,11 +153,19 @@
:value="myproduct.productInfo.code"
:format="scheda.barcode.format"
:fontsize="scheda.barcode.font?.size"
:width="parseInt(scheda.barcode.size.width)"
:height="parseInt(scheda.barcode.size.height)"
:text="`ISBN: ${myproduct.productInfo.code}`"
:width="
parseInt(
tools.adjustSize(optcatalogo, scheda.barcode.size?.width)
)
"
:height="
parseInt(
tools.adjustSize(optcatalogo, scheda.barcode.size?.height)
)
"
>
</CBarCode>
<!--:text="`ISBN: ${myproduct.productInfo.code}`"-->
</div>
</div>
<div
@@ -147,8 +177,17 @@
}"
>
<div
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_bottom)"
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'line-height': scheda.line_height,
}"
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_bottom
)
"
></div>
</div>
</div>

0
src/components/CMyDimensioni/CMyDimensioni.scss Executable file
View File

96
src/components/CMyDimensioni/CMyDimensioni.ts Executable file
View File

@@ -0,0 +1,96 @@
import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
import { IColGridTable, IDimensioni, IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CMyDimensioni',
emits: ['update:modelValue'],
components: { CMySize, CBorders, CMyFieldRec },
props: {
modelValue: {
type: Object as PropType<IDimensioni>,
required: true,
},
label: {
type: String,
required: false,
default: ''
},
path: {
type: String,
required: false,
default: ''
},
show_imgsfondo: {
type: Boolean,
required: false,
default: false,
},
disable: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const internalModel = reactive({ ...props.modelValue })
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => [props.modelValue], (newModel: any) => {
Object.assign(internalModel, newModel);
// console.log('Internal Model updated:', newModel);
}, { immediate: true });
function modifSize(value: any) {
emit('update:modelValue', { ...internalModel, size: value });
}
function modifMargini(value: any) {
emit('update:modelValue', { ...internalModel, margini: value });
}
function modifPadding(value: any) {
emit('update:modelValue', { ...internalModel, padding: value });
}
function saveFielDim(rec: any, newval: any, col: IColGridTable) {
// console.log('saveFielDim', rec, 'newval', newval, 'col', col)
if (col.fieldtype === costanti.FieldType.image) {
if (!rec[col.name]) {
rec[col.name] = {}
}
rec[col.name] = newval.imagefile
console.log('rec[col.name]', rec[col.name])
// rec[col.name].imagefile = newval.imagefile
}
}
return {
t,
tools,
shared_consts,
internalModel,
modifSize,
modifMargini,
modifPadding,
saveFielDim,
costanti,
}
}
})

70
src/components/CMyDimensioni/CMyDimensioni.vue Executable file
View File

@@ -0,0 +1,70 @@
<template>
<div style="width: 380px">
<q-banner
rounded
dense
class="bg-blue-1 text-red"
color="primary q-title"
style="text-align: center"
>
{{ label }}
</q-banner>
<div v-if="internalModel" class="sfondo_margine row">
<CMySize
label="Pagina:"
v-model="internalModel.size"
@update:model-value="modifSize"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="internalModel.margini"
@update:model-value="modifMargini"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="internalModel.padding"
@update:model-value="modifPadding"
></CBorders>
<div v-if="show_imgsfondo">
{{ internalModel.imgsfondo?.imagefile }}<br />
<q-select
v-model="internalModel.imgsfondo.fit"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Immagine Sfondo:"
table="imgs"
:rec="internalModel.imgsfondo"
field="imagefile"
:path="path"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFielDim"
>
</CMyFieldRec>
</div>
</div>
</div>
</template>
<script lang="ts" src="./CMyDimensioni.ts">
</script>
<style lang="scss" scoped>
@import './CMyDimensioni.scss';
</style>

1
src/components/CMyDimensioni/index.ts Executable file
View File

@@ -0,0 +1 @@
export {default as CMyDimensioni} from './CMyDimensioni.vue'

130
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -25,6 +25,7 @@ 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 MixinMetaTags from '@/mixins/mixin-metatags'
import MixinBase from '@/mixins/mixin-base'
@@ -41,7 +42,7 @@ export default defineComponent({
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
CMySize, CBorders,
CMySize, CBorders, CMyDimensioni,
},
emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage'],
props: {
@@ -268,10 +269,16 @@ export default defineComponent({
if (myel.value.catalogo && myel.value.catalogo?.arrSchede) {
for (const recscheda of myel.value.catalogo?.arrSchede) {
if (recscheda.scheda && (!recscheda.scheda?.testo_bottom)) {
recscheda.scheda.testo_bottom = {contenuto: '', maxlength: 100}
recscheda.scheda.testo_bottom = { contenuto: '', maxlength: 100 }
}
if (recscheda.scheda && (!recscheda.scheda?.testo_right)) {
recscheda.scheda.testo_right = {contenuto: ''}
if (recscheda.scheda && !recscheda.scheda.testo_bottom!.font) {
recscheda.scheda.testo_bottom!.font = { name: '', size: ''}
}
if (recscheda.scheda && (!recscheda.scheda?.testo_right || !recscheda.scheda?.testo_right.font) ) {
recscheda.scheda.testo_right = { contenuto: '', font: { name: '', size: ''} }
}
if (recscheda.scheda && (!recscheda.scheda?.dimensioni.pagina.imgsfondo)) {
recscheda.scheda.dimensioni.pagina = tools.resetRecIDimensioni(recscheda.scheda?.dimensioni.pagina)
}
if (recscheda.scheda && (!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
recscheda.scheda.barcode = {
@@ -279,11 +286,11 @@ export default defineComponent({
format: '',
size: {
width: '2',
height: '100',
height: '33',
},
font: {
name: '',
size: 16,
size: '11',
}
}
}
@@ -291,34 +298,33 @@ export default defineComponent({
}
}
if (myel.value.catalogo && !myel.value.catalogo.imgsfondo_def) {
myel.value.catalogo.imgsfondo_def = {
imagefile: '',
fit: '',
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: {
size: {
width: '',
height: '',
},
margini: {
left: '',
top: '',
right: '',
bottom: '',
},
padding: {
left: '',
top: '',
right: '',
bottom: '',
},
}
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)
}
}
@@ -346,66 +352,68 @@ export default defineComponent({
}
})
let defaultDimensioniPag = {
size: {
let defaultDimensioniPag = tools.resetRecIDimensioni(null)
defaultDimensioniPag.size = {
width: '800px',
height: '600px',
},
margini: {
}
defaultDimensioniPag.margini = {
top: '12px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
}
defaultDimensioniPag.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
}
let defaultDimensioniRiga = {
size: {
let defaultDimensioniRiga = tools.resetRecIDimensioni(null)
defaultDimensioniRiga.size = {
width: '800px',
height: '300px',
},
margini: {
}
defaultDimensioniRiga.margini = {
top: '40px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
}
defaultDimensioniRiga.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
}
let defaultSchedaProdotto = tools.resetRecIDimensioni(null)
defaultSchedaProdotto.size = {
width: '360px',
height: '230px',
}
defaultSchedaProdotto.margini = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
defaultSchedaProdotto.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
let dimensioni: IElementiScheda = {
pagina: defaultDimensioniPag,
riga: defaultDimensioniRiga,
scheda_prodotto: {
size: {
width: '360px',
height: '230px',
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
},
scheda_prodotto: defaultSchedaProdotto,
immagine_prodotto: {
size: {
width: '150px',

354
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -1433,66 +1433,17 @@
icon="fas fa-play-circle"
>
<div
v-if="myel.catalogo.dimensioni_def"
v-if="myel.catalogo.dimensioni_def.pagina"
class="sfondo_margine row"
>
<CMySize
label="Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.size"
<CMyDimensioni
v-model="myel.catalogo.dimensioni_def.pagina"
:path="costanti.DIR_CATALOGO"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.margini"
@update:model-value="modifElem"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.padding"
@update:model-value="modifElem"
></CBorders>
></CMyDimensioni>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
icon="fas fa-play-circle"
>
Immagine Sfondo di default:
{{ myel.catalogo.imgsfondo_def?.imagefile }}<br />
<q-select
v-model="myel.catalogo.imgsfondo_def.fit"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Immagine Sfondo di default:"
table="catalogo"
:rec="myel.catalogo"
field="imgsfondo_def"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
@@ -1721,76 +1672,27 @@
label="Pagina"
icon="fas fa-play-circle"
>
<div class="sfondo_margine row">
<CMySize
label="Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.size"
<CMyDimensioni
v-model="recscheda.scheda.dimensioni.pagina"
:path="costanti.DIR_SCHEDA"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.margini"
@update:model-value="modifElem"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.padding"
@update:model-value="modifElem"
></CBorders>
</div>
></CMyDimensioni>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
label="Righe"
icon="fas fa-play-circle"
>
Nome File Web: {{ recscheda.scheda.bgimg }}<br />
<CMyFieldRec
title="Per Web:"
table="myschedas"
:rec="recscheda.scheda"
field="bgimg"
<CMyDimensioni
v-model="recscheda.scheda.dimensioni.riga"
:path="costanti.DIR_SCHEDA"
:show_imgsfondo="false"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<q-select
v-model="recscheda.scheda.bgSize"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
{{ recscheda.scheda.dimensioni.imgsfondo }}
<CMyFieldRec
title="Sfondo:"
table="imgs"
:rec="recscheda.scheda.dimensioni"
field="imgsfondo"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
></CMyDimensioni>
</q-expansion-item>
<q-expansion-item
@@ -1800,6 +1702,13 @@
label="Schede"
icon="fas fa-play-circle"
>
<q-toggle
v-model="recscheda.scheda.show_separatore"
color="primary"
label="Separatore righe"
@update:model-value="modifElem"
>
</q-toggle>
<div class="row">
<CMySlider
label="Schede per Riga"
@@ -1869,8 +1778,8 @@
<CMySlider
label="Line Height:"
v-model="recscheda.scheda.line_height"
:min="70"
:max="200"
:min="0.5"
:max="2"
color="blue"
@update:model-value="modifElem"
></CMySlider>
@@ -1880,6 +1789,21 @@
{descrizione_estesa} {prezzo}
</div>
<q-select
v-model="recscheda.scheda.testo_right.font.size"
:options="fontSizeOptions"
label="Font Size Titolo"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Testo a Destra:"
table="text"
@@ -1893,6 +1817,22 @@
@update_col="update_col"
>
</CMyFieldRec>
<q-select
v-model="recscheda.scheda.testo_bottom.font.size"
:options="fontSizeOptions"
label="Dimensione Titolo"
options-dense
dense
emit-value
map-options
style="width: 150px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Testo in Basso :"
table="text"
@@ -1972,52 +1912,16 @@
label="Prima Pagina"
icon="fas fa-play-circle"
>
Prima Pagina: {{ myel.catalogo.first_page_img }}<br />
Prima Pagina: <br />
<div class="row">
<CMySlider
label="Altezza:"
v-model="myel.catalogo.first_page_height"
:min="0"
:max="1200"
color="red"
<CMyDimensioni
:path="costanti.DIR_CATALOGO"
v-model="myel.catalogo.first_page"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza:"
v-model="myel.catalogo.first_page_width"
:min="0"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
></CMyDimensioni>
</div>
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="first_page_img"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<CMyFieldRec
title="Testo pagina:"
table="catalogo"
:rec="myel.catalogo"
field="first_page_html"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.html"
@save="saveFieldElem"
@update_col="update_col"
>
</CMyFieldRec>
<br />
</q-expansion-item>
@@ -2028,53 +1932,12 @@
label="Ultima Pagina"
icon="fas fa-play-circle"
>
Immagine: {{ myel.catalogo.last_page_img }}<br />
<div class="row">
<CMySlider
label="Altezza:"
v-model="myel.catalogo.last_page_height"
:min="0"
:max="1200"
color="red"
<CMyDimensioni
:path="costanti.DIR_CATALOGO"
v-model="myel.catalogo.last_page"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza:"
v-model="myel.catalogo.last_page_width"
:min="0"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
</div>
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="last_page_img"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<CMyFieldRec
title="Testo pagina:"
table="catalogo"
:rec="myel.catalogo"
field="last_page_html"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.html"
@save="saveFieldElem"
@update_col="update_col"
>
</CMyFieldRec>
<br />
></CMyDimensioni>
</q-expansion-item>
<div v-if="enableEdit">
<q-expansion-item
@@ -2094,6 +1957,87 @@
@update:model-value="modifElem"
>
</q-toggle>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.format"
:options="tools.SelectListFormatPDF"
@update:model-value="modifElem"
dense
label="Formato:"
emit-value
map-options
>
</q-select>
<div v-if="myel.catalogo.areadistampa.format.length > 1">Ratio: {{myel.catalogo.areadistampa.format[0] / myel.catalogo.areadistampa.format[1]}}</div>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.scale"
:options="tools.SelectListScalePDF"
@update:model-value="modifElem"
dense
label="Scale:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.scalecanvas"
:options="tools.SelectListQualityPDF"
@update:model-value="modifElem"
dense
label="Qualità:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 150px"
outlined
v-model="myel.catalogo.areadistampa.orientation"
:options="tools.SelectListOrientamentoPDF"
@update:model-value="modifElem"
dense
label="Orientamento:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 150px"
outlined
v-model="myel.catalogo.areadistampa.unit"
:options="tools.SelectListUnitPDF"
@update:model-value="modifElem"
dense
label="Unità:"
emit-value
map-options
>
</q-select>
<q-toggle
v-model="myel.catalogo.areadistampa.compress"
color="positive"
icon="fas fa-file-pdf"
label="Comprimi"
@update:model-value="modifElem"
>
</q-toggle>
<CBorders
label="Margini di Stampa (mm):"
v-model="myel.catalogo.areadistampa.margini"
@update:model-value="modifElem"
addstr=""
></CBorders>
</div>
</q-expansion-item>
</div>

1
src/components/CMyFieldRec/CMyFieldRec.ts
View File

@@ -263,6 +263,7 @@ export default defineComponent({
getclass,
myrec,
update_col,
getValue,
}
},
})

40
src/components/CMySize/CMySize.ts
View File

@@ -4,6 +4,8 @@ import { IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { tools } from '@store/Modules/tools'
import { CMySlider } from '@src/components/CMySlider'
import { shared_consts } from '@/common/shared_vuejs'
@@ -40,19 +42,50 @@ export default defineComponent({
const $q = useQuasar()
const { t } = useI18n()
const ratio = ref(<number>0)
const keepRatio = ref(false)
const internalModel = reactive({ ...props.modelValue })
function modifValueWidth(value: any) {
function modifValueWidth(value: any, changeratio: boolean = true) {
emit('update:modelValue', { ...internalModel, width: value });
if (keepRatio.value && changeratio) {
let ris = tools.getValueAndSuffix(value)
let myheight = ris.value * ( 1 / ratio.value)
modifValueHeight(myheight + ris.suffix, false)
}
}
function modifValueHeight(value: any) {
function modifValueHeight(value: any, changeratio: boolean = true) {
emit('update:modelValue', { ...internalModel, height: value });
if (keepRatio.value && changeratio) {
let ris = tools.getValueAndSuffix(value)
let mywidth = ris.value * (ratio.value)
modifValueWidth(mywidth+ ris.suffix, false)
}
}
function modifValueRatio(value: any) {
// modifValueWidth(0)
}
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => props.modelValue, (newModel: any) => {
Object.assign(internalModel, newModel);
if (internalModel.height && internalModel.width) {
const heightValue = parseFloat(internalModel.height) || 1;
if (heightValue === 0) {
ratio.value = parseFloat(internalModel.width) / 1; // Usa 1 come fallback
} else {
ratio.value = parseFloat(internalModel.width) / heightValue;
}
}
}, { immediate: true });
return {
@@ -60,7 +93,10 @@ export default defineComponent({
shared_consts,
modifValueWidth,
modifValueHeight,
modifValueRatio,
internalModel,
ratio,
keepRatio,
}
}
})

18
src/components/CMySize/CMySize.vue
View File

@@ -11,6 +11,24 @@
</q-banner>
<div v-if="internalModel" class="column">
<q-toggle
v-model="keepRatio"
push
label="Mantieni le proporzioni"
rounded
glossy
toggle-color="primary"
></q-toggle>
<CMySlider
label="Ratio"
v-model="ratio"
:min="0.3"
:max="1.8"
color="green"
:disable="!keepRatio"
@update:model-value="modifValueRatio"
></CMySlider>
<CMySlider
label="Width:"
v-model="internalModel.width"

5
src/components/CMySlider/CMySlider.ts
View File

@@ -62,9 +62,14 @@ export default defineComponent({
return 10
} else if (mioval >= 100) {
return 5
} else {
if (props.max < 5) {
return (props.max - props.min) / 100
} else {
return 1
}
}
}
function incrementValue() {

3
src/css/app.scss
View File

@@ -2472,7 +2472,7 @@ body.body--dark {
display: flex;
flex-direction: row; /* Allineamento orizzontale */
flex-wrap: wrap;
gap: 10px; /* Spaziatura tra gli elementi */
gap: 0px; /* Spaziatura tra gli elementi */
justify-content: space-evenly;
}
@@ -2495,6 +2495,7 @@ body.body--dark {
.card-row {
display: flex;
justify-content: center;
flex-direction: column !important;
}
.cards-container {

27
src/model/GlobalStore.ts
View File

@@ -690,7 +690,7 @@ export interface ISize {
}
export interface IFont {
name?: string
size?: number
size?: string
}
export interface IBorder {
@@ -717,6 +717,17 @@ export interface IDimensioni {
margini?: IBorder
padding?: IBorder
imgsfondo?: IImg
text_html?: IText
}
export interface IAreaDiStampa {
margini?: IBorder
unit: string
format: number[]
orientation: string
compress: boolean
scale: number
scalecanvas: number
}
export interface IElementiPagina {
@@ -726,6 +737,7 @@ export interface IElementiPagina {
export interface IText {
contenuto?: string
maxlength?: number
font?: IFont
}
export interface IElementiScheda {
@@ -743,6 +755,7 @@ export interface IMyScheda {
line_height?: number
numschede_perRiga?: number
numschede_perCol?: number
show_separatore: boolean
testo_right?: IText
testo_bottom?: IText
posiz_text?: number
@@ -779,16 +792,10 @@ export interface ICatalogo {
pdf_filename?: string
printable?: boolean
first_page_img?: string
first_page_html?: string
first_page_height?: number
first_page_width?: number
last_page_img?: string
last_page_html?: string
last_page_height?: number
last_page_width?: number
first_page?: IDimensioni
last_page?: IDimensioni
areadistampa?: IAreaDiStampa
imgsfondo_def?: IImg
dimensioni_def?: IElementiPagina
arrSchede?: ISchedaSingola[]

2
src/statics/lang/it.js
View File

@@ -1208,6 +1208,8 @@ const msg_it = {
date_updated: 'Ult. Aggiornamento',
},
mypages: {
duplica_newname: 'Inserisci il nome della Nuova Pagina (senza spazi)',
duplica_conferma: 'Duplicare {path} creando {newpath}',
attivita: 'Attività',
find_people: 'Cerca Persone',
find_group: 'Cerca Gruppo',

6
src/store/Modules/costanti.ts
View File

@@ -34,12 +34,6 @@ export const costanti = {
'Printable',
'numschede_perCol',
'numschede_perRiga',
'first_page_img',
'first_page_html',
'first_page_height',
'last_page_img?',
'last_page_html',
'last_page_height',
'text',
],

14
src/store/Modules/fieldsTable.ts
View File

@@ -163,7 +163,7 @@ export const colIText = [
AddCol({ name: 'maxlength', label_trans: 'catalogo.maxlength', fieldtype: costanti.FieldType.number }),
]
export const colmyIImg = [
AddCol({ name: 'filename', label_trans: 'iimg.filename', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'imagefile', label_trans: 'iimg.imagefile', fieldtype: costanti.FieldType.image }),
AddCol({ name: 'fit', label_trans: 'iimg.fit', fieldtype: costanti.FieldType.string }),
]
@@ -202,14 +202,6 @@ export const colmyelCatalogo = [
AddCol({ name: 'optcatalogo.', label_trans: 'catalogo.optcatalogo.', 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: 'first_page_img', label_trans: 'catalogo.first_page_img', fieldtype: costanti.FieldType.image }),
AddCol({ name: 'last_page_img', label_trans: 'catalogo.last_page_img', fieldtype: costanti.FieldType.image }),
AddCol({ name: 'first_page_html', label_trans: 'catalogo.first_page_html', fieldtype: costanti.FieldType.html }),
AddCol({ name: 'first_page_height', label_trans: 'catalogo.first_page_height', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'last_page_height', label_trans: 'catalogo.last_page_html', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'last_page_html', label_trans: 'catalogo.last_page_html', fieldtype: costanti.FieldType.html }),
AddCol({ name: 'imgsfondo_def', label_trans: 'catalogo.imgsfondo_def', fieldtype: costanti.FieldType.image }),
]
@@ -4224,8 +4216,8 @@ export const fieldsTable = {
value: 'imgs',
label: 'Immagini',
columns: colmyIImg,
colkey: 'filename',
collabel: 'filename',
colkey: 'imagefile',
collabel: 'imagefile',
},
{
value: 'listcards',

163
src/store/Modules/tools.ts
View File

@@ -15,6 +15,13 @@ import {
Privacy,
TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard, ILabelValue, ILabelValueStr, IAnim, ILang, IGroupShort, IPagination, IFavorite, IBookmark,
IMovQuery,
IDimensioni,
ISize,
IBorder,
IImg,
IText,
IAreaDiStampa,
ICatalogo,
} from '@model'
import MixinBase from '@/mixins/mixin-base'
@@ -48,6 +55,7 @@ import { Router } from 'vue-router'
import { AxiosResponse, default as Axios } from 'axios'
import { PayloadMessageTypes } from '@/common'
import { useNotifStore } from '@store/NotifStore'
import { isDimensionToken } from 'html2canvas/dist/types/css/syntax/parser'
export interface INotify {
color?: string
@@ -343,6 +351,34 @@ export const tools = {
},
],
SelectListFormatPDF: [
{ label: 'a4 (mm)', value: [210, 297] },
{ label: '22,60 x 31,26 (in mm)', value: [226.0, 312.6] },
],
SelectListScalePDF: [
{ label: 'Normale (100 DPI)', value: 1 },
{ label: 'Medio (200 PDI)', value: 2 },
{ label: 'Alto (300 PDI)', value: 3 },
],
SelectListQualityPDF: [
{ label: 'Bassa (1 scale)', value: 1 },
{ label: 'Normale (2 scale)', value: 2 },
{ label: 'Media (3 scale)', value: 3 },
{ label: 'Elevata (4 scale)', value: 4 },
],
SelectListOrientamentoPDF: [
{ label: 'Verticale', value: 'portrait' },
{ label: 'orizzontale', value: 'landscape' }
],
SelectListUnitPDF: [
{ label: 'Millimetri (mm)', value: 'mm' },
{ label: 'Centimetri (cm)', value: 'cm' },
{ label: 'Pollici (in)', value: 'in' },
{ label: 'Pixel (px)', value: 'px' },
],
SelectListColors: [
{ label: '[Nessuno]', value: '' },
@@ -7949,6 +7985,8 @@ export const tools = {
ris = 'pages/' + path
} else if (table === 'productInfos') {
ris = path
} else if (table === 'imgs') {
ris = path
} else {
ris = table
}
@@ -9145,6 +9183,131 @@ export const tools = {
return encodeURIComponent(str); // Codifica la stringa per URL
},
resetISize(rec: ISize | null) {
if (!rec) {
rec = {
width: '',
height: ''
}
}
return rec
},
resetIBorder(rec: IBorder | null) {
if (!rec) {
rec = {}
rec.top = ''
rec.bottom = ''
rec.left = ''
rec.right = ''
}
return rec
},
resetIImg(rec: IImg | null) {
if (!rec) {
rec = {}
rec.imagefile = ''
rec.fit = ''
}
return rec
},
resetIText(rec: IText | null) {
if (!rec) {
rec = {}
rec.contenuto = ''
rec.maxlength = 0
}
return rec
},
resetRecIDimensioni(rec: IDimensioni | null) {
let myrec: IDimensioni = {}
if (!rec) {
myrec = {
size: {},
margini: {},
padding: {},
imgsfondo: {},
text_html: {},
}
} else {
myrec = rec
}
myrec.size = this.resetISize(myrec.size!)
myrec.margini = this.resetIBorder(myrec.margini!)
myrec.padding = this.resetIBorder(myrec.padding!)
myrec.imgsfondo = this.resetIImg(myrec.imgsfondo!)
myrec.text_html = this.resetIText(myrec.text_html!)
return myrec
},
resetRecIAreaDiStampa(rec: IAreaDiStampa | null) {
let myrec: IAreaDiStampa = {}
if (!rec) {
myrec = {
margini: {},
unit: 'mm',
compress: false,
orientation: 'portrait',
format: [210, 297],
scale: 1,
scalecanvas: 2,
}
} else {
myrec = rec
}
myrec.margini = this.resetIBorder(myrec.margini!)
return myrec
},
adjustSize(optcatalogo: ICatalogo, mysize: any) {
if (!mysize) {
return '';
}
// Estrae l'unità di misura
const unit = mysize.replace(/[\d.]/g, ''); // Ottiene il suffisso (es. 'px')
const numericalValue = parseFloat(mysize) || 0; // Converti la parte numerica in float
let size = numericalValue; // Inizializza size con il valore numerico
if (optcatalogo.printable && optcatalogo.areadistampa?.scale && optcatalogo.areadistampa?.scale > 0) {
size = size * optcatalogo.areadistampa?.scale; // Applicare la scala se necessaria
}
let strfinale = `${size}${unit}`
// console.log('mysize', mysize, ' => ', strfinale)
return strfinale; // Restituisce il valore con il suffisso
},
getValueAndSuffix(myvalue: any): {value: number, suffix: string} {
if (!myvalue) {
return {value: 0, suffix: ''};
}
// Estrae l'unità di misura
const unit = myvalue.replace(/[\d.]/g, ''); // Ottiene il suffisso (es. 'px')
const numericalValue = parseFloat(myvalue) || 0; // Converti la parte numerica in float
return { value: numericalValue, suffix: unit}; // Restituisce il valore con il suffisso
},
// FINE !

6
src/store/Products.ts
View File

@@ -1,4 +1,4 @@
import { IBaseOrder, ICart, IOrder, IOrderCart, IProduct, IProductsState, IProductInfo, ICatProd, IUserShort, IGasordine, IAuthor, ISubCatProd, IText } from 'model'
import { IBaseOrder, ICart, IOrder, IOrderCart, IProduct, IProductsState, IProductInfo, ICatProd, IUserShort, IGasordine, IAuthor, ISubCatProd, IText, ICatalogo } from 'model'
import { Api } from '@api'
import { serv_constants } from '@src/store/Modules/serv_constants'
@@ -1267,7 +1267,7 @@ export const useProducts = defineStore('Products', {
return authorString
},
replaceKeyWordsByProduct(myproduct: IProduct, testo: IText) {
replaceKeyWordsByProduct(optcatalogo: ICatalogo, myproduct: IProduct, testo: IText) {
if (!myproduct || !testo.contenuto) {
return testo.contenuto;
}
@@ -1292,6 +1292,7 @@ export const useProducts = defineStore('Products', {
const formato = myproduct.arrvariazioni ? myproduct.arrvariazioni[0].formato : ''
const pagine = myproduct.arrvariazioni ? myproduct.arrvariazioni[0].pagine : ''
const scale = optcatalogo.printable ? optcatalogo.areadistampa?.scale : 1
// Crea una mappa di sostituzioni
const replacements = {
'{autore}': autori || '',
@@ -1302,6 +1303,7 @@ export const useProducts = defineStore('Products', {
'{misure}': misure || '',
'{formato}': formato || '',
'{prezzo}': prezzo || '',
'{scale}': scale || '',
'{prezzo_scontato}': prezzo_scontato || '',
};

20
src/store/globalStore.ts
View File

@@ -1200,7 +1200,17 @@ export const useGlobalStore = defineStore('GlobalStore', {
async duplicatePage(path: string, $q: any, t: any) {
const userStore = useUserStore()
return Api.SendReq('/duppage', 'POST', { path })
let newpath = prompt(t('mypages.duplica_newname'))
$q.dialog({
message: t('mypages.duplica_conferma', { path, newpath }),
ok: { label: t('dialog.yes'), push: true },
cancel: { label: t('dialog.cancel') },
title: t('db.domanda')
}).onOk(() => {
return Api.SendReq('/duppage', 'POST', { path, newpath })
.then((res) => {
if (res) {
tools.showPositiveNotif($q, t('mypages.duplicateok'))
@@ -1215,6 +1225,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
userStore.setErrorCatch(error)
return null
})
})
},
async loadPageTest() {
@@ -2240,11 +2252,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
Editore: [],
pdf: false,
dimensioni_def: {
pagina: {
size: { width: '', height: '' },
margini: {left: '', top: '', right: '', bottom: ''},
padding: {left: '', top: '', right: '', bottom: ''},
},
pagina: tools.resetRecIDimensioni(null)
},
}
}

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

@@ -1,5 +1,9 @@
$heightBtn: 100%;
body {
line-height: 1.2 !important;
}
.card .product-image {
height: 300px;
}
@@ -64,10 +68,3 @@ $heightBtn: 100%;
flex-basis: 100%;
height: 0;
}
.first_page{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 30px;
padding-right: 30px;
}

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

@@ -16,7 +16,6 @@ import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
import { CSelectUserActive } from '@src/components/CSelectUserActive'
import { ICatalogo, IFilterCatalogo, IMyScheda, IProdView, IProduct, ISchedaSingola, ISearchList } from 'model'
import html2canvas from 'html2canvas'
// import { VueHtmlToPaper } from 'vue-html-to-paper'
import html2pdf from 'html2pdf.js'
@@ -114,12 +113,10 @@ export default defineComponent({
watch(() => cat.value, (newval, oldval) => {
if (cat.value) {
if (loadpage.value)
tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
filter.value.author = '' // disattivo il filtro autore
resetSearch()
}
calcArrProducts()
})
@@ -639,27 +636,64 @@ export default defineComponent({
try {
let defaultMargin = 0.1
if (props.optcatalogo.printable) {
defaultMargin = 0
} else {
defaultMargin = 0
}
const unit = props.optcatalogo.areadistampa!.unit
let myformat = { ...props.optcatalogo.areadistampa!.format }
let scale = props.optcatalogo.areadistampa!.scale
let scalecanvas = props.optcatalogo.areadistampa!.scalecanvas
if (tools.isObject(myformat) && scale > 0) {
} else {
myformat = [210, 297]
}
const formatwidth = (myformat[0] * scale)
const formatheight = (myformat[1] * scale)
let myfile = (props.optcatalogo.pdf_filename ?? 'catalogo_completo')
myfile += '_' + formatwidth + '_' + formatheight + '_' + unit + '_scale_' + scale
myfile += '.pdf'
const element = document.getElementById('pdf-content')
const opt = {
margin: [0.1, 0.1, 0.1, 0.1],
filename: (props.optcatalogo.pdf_filename ?? 'catalogo_completo') + '.pdf',
margin: [
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.left) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.top) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.bottom) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.right) || defaultMargin) : defaultMargin
],
filename: myfile,
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
scale: scalecanvas,
useCORS: true,
letterRendering: true,
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
compress: true
unit: unit,
format: [formatwidth, formatheight],
orientation: props.optcatalogo.areadistampa!.orientation,
compress: props.optcatalogo.areadistampa!.compress,
},
}
console.log('opt di stampa', opt)
// a4: [595.28, 841.89]
await html2pdf().set(opt).from(element).save()
$q.loading.hide()
@@ -679,10 +713,12 @@ export default defineComponent({
}
}
function groupedPages(scheda: IMyScheda) {
if (scheda) {
const schedePerRiga = scheda.numschede_perRiga || 1
const schedePerCol = scheda.numschede_perCol || 1
function groupedPages(recscheda: ISchedaSingola) {
let numschedeattuali = 0
if (recscheda.scheda) {
const schedePerRiga = recscheda.scheda.numschede_perRiga || 1
const schedePerCol = recscheda.scheda.numschede_perCol || 1
const schedePerPagina = schedePerRiga * schedePerCol
let indiceprodotto = 0
@@ -707,7 +743,13 @@ export default defineComponent({
page.push(row)
}
numschedeattuali++
pages.push(page)
if (recscheda.numSchede! > 0) {
if (numschedeattuali >= recscheda.numSchede!)
return pages
}
}
return pages
@@ -725,15 +767,15 @@ export default defineComponent({
}
function generateStylePageScheda(optcatalogo: ICatalogo, scheda: IMyScheda) {
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 marginTop = scheda.dimensioni?.pagina?.margini?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.top) ?? '')
const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.bottom) ?? '')
const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.left) ?? '')
const marginRight = scheda.dimensioni?.pagina?.margini?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.right): (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.right) ?? '')
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 paddingTop = scheda.dimensioni?.pagina?.padding?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.top) ?? '')
const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.bottom) ?? '')
const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.left) ?? '')
const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.right) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.right) ?? '')
// Esiste un immagine di sfondo specifica della singola pagina ?
let fileimg = scheda.dimensioni?.pagina?.imgsfondo?.imagefile
@@ -744,15 +786,15 @@ export default defineComponent({
if (!fileimg) {
// Esiste un immagine di sfondo uguali per tutte le pagine ?
fileimg = optcatalogo.imgsfondo_def?.imagefile
backgroundSize = optcatalogo.imgsfondo_def?.fit
fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
}
let backgroundImage = fileimg ?? ''
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 ?? '')
let width = scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
let height = scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
return {
marginBottom,
@@ -773,27 +815,64 @@ export default defineComponent({
}
function getWidthPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
return scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
return scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, 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 ?? '')
return scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
}
function getStyleRowSeparator(recscheda: ISchedaSingola) {
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
return {
paddingLeft: `${paddingLeft}`,
paddingRight: `${paddingRight}`,
};
}
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 width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.size?.width) ?? '';
const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.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 marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.top) ?? '0px';
const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.bottom) ?? '0px';
const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.left) ?? '0px';
const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.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';
const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.top) ?? '0px';
const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.bottom) ?? '0px';
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.right) ?? '0px';
return {
placeContent,
flex: `0 1 ${width} !important;`,
margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
...(width ? { width: `${width} !important;` } : {}),
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
};
}
function getStyleSchedaProdotto(recscheda: ISchedaSingola) {
const placeContent = 'center';
const width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width) ?? '100px';
const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height);
const marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top) ?? '0px';
const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom) ?? '0px';
const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left) ?? '0px';
const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right) ?? '0px';
const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top) ?? '0px';
const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom) ?? '0px';
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
return {
placeContent,
@@ -849,8 +928,10 @@ export default defineComponent({
generateStylePageScheda,
generateStyleCatalogo,
getStyleRow,
getStyleSchedaProdotto,
getWidthPagina,
getHeightPagina,
getStyleRowSeparator,
}
}
})

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

@@ -18,7 +18,7 @@
:label="`Crea PDF ${optcatalogo.pdf_filename}`"
@click="generatePDF"
></q-btn>
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div class="row justify-center q-mx-auto bg-blue-1">
<div class="text-center">
<q-spinner
v-if="!loadpage"
@@ -49,7 +49,7 @@
<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"
class="row justify-center q-mx-auto bg-blue-1"
>
<div v-for="(reccat, index) in getCatProds()" :key="index">
<span
@@ -207,29 +207,35 @@
:class="{ 'fixed-width': true }"
>
<div
v-if="optcatalogo.first_page_img"
v-if="
optcatalogo.first_page &&
optcatalogo.first_page.text_html.contenuto
"
:style="{
backgroundImage: `url(${
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
(optcatalogo.printable
? optcatalogo.first_page_img
: optcatalogo.first_page_img)
optcatalogo.first_page.imgsfondo.imagefile
})`,
backgroundSize: `${
optcatalogo.printable
? scheda.bgSize_printable
: scheda.bgSize
}`,
height: optcatalogo.first_page_height + 'px',
width: optcatalogo.first_page_width + 'px',
backgroundSize: `${optcatalogo.first_page.imgsfondo.fit}`,
backgroundRepeat: 'no-repeat',
height:
tools.adjustSize(
optcatalogo,
optcatalogo.first_page.size.height
) + 'px',
width:
tools.adjustSize(
optcatalogo,
optcatalogo.first_page.size.width
) + 'px',
}"
>
<div
class="first_page"
v-html="optcatalogo.first_page_html"
v-html="optcatalogo.first_page.text_html.contenuto"
></div>
\ </div>
\
</div>
<div :style="generateStyleCatalogo(optcatalogo)">
<div class="flex-container-book">
<q-infinite-scroll
@@ -241,11 +247,10 @@
@load="onLoadScroll"
:offset="2000"
debounce="200"
class="q-pa-xs row items-start"
class="row items-start"
style="place-content: center"
>
<div
class="q-pa-xs"
v-for="(product, index) in arrLoaded"
:key="index"
>
@@ -294,11 +299,19 @@
<div v-if="recscheda && recscheda.scheda">
<!-- Itera sulle pagine -->
<div
v-for="(page, pageIndex) in groupedPages(
recscheda.scheda
)"
v-for="(page, pageIndex) in groupedPages(recscheda)"
:key="pageIndex"
:class="{ 'fixed-width': getWidthPagina(optcatalogo, recscheda.scheda), 'fixed-height': getHeightPagina(optcatalogo, recscheda.scheda), 'card-page': true }"
:class="{
'fixed-width': getWidthPagina(
optcatalogo,
recscheda.scheda
),
'fixed-height': getHeightPagina(
optcatalogo,
recscheda.scheda
),
'card-page': true,
}"
:style="
generateStylePageScheda(
optcatalogo,
@@ -310,22 +323,21 @@
<div
v-for="(row, rowIndex) in page"
:key="`${pageIndex}-${rowIndex}`"
class="column"
>
<div
class="card-row"
:style="
'margin-bottom: ' +
(scheda?.dimensioni?.riga?.bottom ?? '0px') +
';'
"
:style="getStyleRow(recscheda)"
>
<!-- Itera sui prodotti di ogni riga -->
<div class="row justify-center">
<div
v-for="(indprod, colIndex) in row"
:key="`${pageIndex}-${rowIndex}-${colIndex}`"
class="flex-item-book image-container"
:style="getStyleRow(recscheda)"
class="flex-item-book"
:style="getStyleSchedaProdotto(recscheda)"
>
<!--pag: {{pageIndex}} - riga: {{rowIndex}} - col: {{colIndex}} - -->
<CContainerCatalogoCard
v-if="
getProdBySchedaRigaCol(
@@ -390,36 +402,55 @@
:cosa="cosa"
/>
</div>
<!-- Prodotti singoli -->
</div>
<!-- Separatore -->
<div
v-if="recscheda.scheda?.show_separatore && rowIndex !== page.length - 1"
class="text-center"
:style="getStyleRow(recscheda)"
>
<q-separator inset :size="tools.adjustSize(optcatalogo, '1px')"></q-separator>
</div>
</div>
<!-- Card Row -->
</div>
<!-- Righe (row) -->
</div>
<!-- Pagine -->
</div>
</div>
</div>
</div>
</div>
<div
v-if="optcatalogo.last_page_img"
v-if="
optcatalogo.last_page &&
optcatalogo.last_page.text_html.contenuto
"
:style="{
backgroundImage: `url(${
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
(optcatalogo.printable
? optcatalogo.last_page_img
: optcatalogo.last_page_img)
optcatalogo.last_page.imgsfondo.imagefile
})`,
backgroundSize: `${
optcatalogo.printable
? scheda.bgSize_printable
: scheda.bgSize
}`,
height: optcatalogo.last_page_height + 'px',
width: optcatalogo.last_page_width + 'px',
backgroundSize: `${optcatalogo.last_page.imgsfondo.fit}`,
backgroundRepeat: 'no-repeat',
height:
tools.adjustSize(
optcatalogo,
optcatalogo.last_page.size.height
) + 'px',
width:
tools.adjustSize(
optcatalogo,
optcatalogo.last_page.size.width
) + 'px',
}"
>
<div
class="last_page"
v-html="optcatalogo.last_page_html"
></div>
<div v-html="optcatalogo.last_page.text_html.contenuto"></div>
</div>
</div>
</div>
@@ -427,35 +458,35 @@
</div>
</q-tab-panel>
<q-tab-panel name="sfondo">
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div class="row justify-center q-mx-auto bg-blue-1">
<div>
Sfondo:
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.imgsfondo_def?.imagefile
optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
}}
</div>
<q-img
v-if="optcatalogo.imgsfondo_def?.imagefile"
v-if="optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile"
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.imgsfondo_def?.imagefile
optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
"
>
</q-img>
</div>
</q-tab-panel>
<q-tab-panel name="pagine">
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
<div class="row justify-center q-mx-auto bg-blue-1">
<div>
Prima Pagina:
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.first_page_img
optcatalogo.first_page.imgsfondo.imagefile
}}
</div>
@@ -463,7 +494,7 @@
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.first_page_img
optcatalogo.first_page.imgsfondo.imagefile
"
>
</q-img>
@@ -472,7 +503,7 @@
{{
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.last_page_img
optcatalogo.last_page.imgsfondo.imagefile
}}
</div>
@@ -480,7 +511,7 @@
:src="
costanti.DIR_UPLOAD +
costanti.DIR_CATALOGO +
optcatalogo.last_page_img
optcatalogo.last_page.imgsfondo.imagefile
"
>
</q-img>
@@ -498,6 +529,6 @@
<script lang="ts" src="./catalogo.ts">
</script>
<style lang="scss" scoped>
<style lang="scss">
@import './catalogo.scss';
</style>