- Cataloghi: parte finale... prima bozza 9 dic

This commit is contained in:
Surya Paolo
2024-12-09 12:32:19 +01:00
parent 5c20e75b6a
commit 29c59588c7
33 changed files with 1009 additions and 397 deletions

View File

@@ -362,9 +362,26 @@
z-index: 2; /* Posiziona l'immagine principale sopra l'ombra */
}
$grigiochiaro: rgb(180, 180, 180);
$grigioscuro: rgb(120, 120, 120);
.border-box {
border-left: 1px solid lightgray;
border-top: 1px solid lightgray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid $grigiochiaro;
border-top: 1px solid $grigiochiaro;
border-right: 1px solid $grigioscuro;
border-bottom: 1px solid $grigioscuro;
}
.etichetta{
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
font-size: 1.15rem;
}
.boxtitleval{
padding: 10px;
vertical-align: middle;
}

View File

@@ -9,11 +9,16 @@ import { CCardState } from '../CCardState'
import { CCopyBtn } from '../CCopyBtn'
import { CMyValueDb } from '../CMyValueDb'
import { CPrice } from '../CPrice'
import { CLabel } from '@src/components/CLabel'
import { CBarCode } from '../CBarCode'
import { func_tools, toolsext } from '@store/Modules/toolsext'
import { IBaseOrder, ICatalogo, IGasordine, IMyScheda, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
import {
IBaseOrder, ICatalogo, IGasordine, IMyScheda, IOrder, IOrderCart,
IProduct, IVariazione
} from '@src/model'
import { tools } from '@store/Modules/tools'
import { useProducts } from '@store/Products'
@@ -29,7 +34,7 @@ import 'vue3-pdf-app/dist/icons/main.css'
export default defineComponent({
name: 'CCatalogoCard',
emits: ['selauthor', 'opendetail'],
emits: ['selauthor', 'opendetail', 'update:modelValue'],
props: {
product: {
type: Object as PropType<IProduct | null>,
@@ -56,19 +61,9 @@ export default defineComponent({
required: false,
default: () => { }
},
optcatalogo: {
modelValue: {
type: Object as PropType<ICatalogo>,
required: false,
default: () => ({
//++AddCATALOGO_FIELDS
productTypes: [0],
excludeproductTypes: [],
formato: [],
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
required: true,
},
scheda: {
type: Object as PropType<IMyScheda>,
@@ -78,7 +73,7 @@ export default defineComponent({
}),
},
},
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice, CBarCode },
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice, CBarCode, CLabel },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
@@ -100,6 +95,25 @@ export default defineComponent({
const apriSchedaPDF = ref(false)
// Crea una copia locale reattiva di modelValue
const optcatalogo = ref<ICatalogo>({ ...props.modelValue });
// Watcher per sincronizzare le modifiche di modelValue
watch(() => props.modelValue, (newVal) => {
optcatalogo.value = { ...newVal };
// updateCatalogoPadre()
}, { deep: true });
function updateCatalogoPadre() {
emit('update:modelValue', optcatalogo.value);
}
// Metodo per aggiornare il valore del catalogo
const updateCatalogo = (updatedCatalogo: ICatalogo) => {
optcatalogo.value = updatedCatalogo; // Aggiorna la copia locale
updateCatalogoPadre()
};
let myorder = reactive(<IOrder>{
idapp: process.env.APP_ID,
quantity: 0,
@@ -112,6 +126,8 @@ export default defineComponent({
const storeSelected = ref('')
const arrordersCart = ref(<IOrderCart[]>[])
const modifOn = ref(false)
const modifProd = ref(false)
const timerInterval = ref(<any>null)
const timerLabelScadenza = ref('')
@@ -128,6 +144,29 @@ export default defineComponent({
const startY = ref(0)
const scale = ref(1)
const getTesto_Right = computed(() => {
return products.replaceKeyWordsByProduct(
optcatalogo.value,
myproduct.value!,
props.scheda!.testo_right!
)
})
const getTesto_Debug = computed(() => {
return products.replaceKeyWordsByProduct(
optcatalogo.value,
myproduct.value!,
{ contenuto: '{debug}', maxlength: 10000 },
)
})
const getTesto_Bottom = computed(() => {
return products.replaceKeyWordsByProduct(
optcatalogo.value,
myproduct.value!,
props.scheda!.testo_bottom!
)
})
watch(() => editOn.value, (to: any, from: any) => {
if (!editOn.value)
@@ -231,7 +270,7 @@ export default defineComponent({
if (carica) {
myproduct.value = null;
myproduct.value = await products.getProductById(props.id)
updateproductmodif()
}
// products.updateQuantityAvailable(myproduct.value._id)
@@ -250,7 +289,7 @@ export default defineComponent({
}
async function updateproductmodif() {
console.log('updateproductmodif')
try {
myproduct.value = await products.getProductById(props.id)
@@ -512,11 +551,11 @@ export default defineComponent({
}
function click_opendetail(id: any, autore: any) {
if (!props.optcatalogo.pdf)
if (!optcatalogo.value.pdf)
emit('opendetail')
}
function escludiArticolo(variazione: IVariazione) {
let hasExcludeProductTypes = !props.optcatalogo.excludeproductTypes || (props.optcatalogo.excludeproductTypes && (props.optcatalogo.excludeproductTypes.includes(variazione.versione!)))
let hasExcludeProductTypes = !optcatalogo.value.excludeproductTypes || (optcatalogo.value.excludeproductTypes && (optcatalogo.value.excludeproductTypes.includes(variazione.versione!)))
return hasExcludeProductTypes
}
@@ -550,6 +589,13 @@ export default defineComponent({
}
function getScale() {
if (optcatalogo.value.printable)
return optcatalogo.value.areadistampa!.scale_printable
else
return optcatalogo.value.areadistampa!.scale
}
onMounted(mounted)
onBeforeUnmount(beforeDestroy)
@@ -608,6 +654,14 @@ export default defineComponent({
checkIfVariazioneDaVisu,
isProductNovita,
isProductBestseller,
modifOn,
modifProd,
getTesto_Right,
getTesto_Bottom,
getTesto_Debug,
getScale,
updateCatalogo,
optcatalogo,
}
}
})

View File

@@ -1,5 +1,6 @@
<template>
<div
v-if="optcatalogo"
:class="{
' items-start q-gutter-sm': true,
}"
@@ -23,15 +24,6 @@
colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
}"
>
<q-toggle
v-if="tools.isManager() && !optcatalogo.pdf"
v-model="editOn"
class="absolute-top-right"
color="green"
icon="fas fa-pencil-alt"
dense
>
</q-toggle>
<q-page-sticky
v-if="complete && !optcatalogo.pdf"
position="bottom-right"
@@ -49,29 +41,8 @@
<q-card-section>
<!-- per immagine di ombra -->
<div v-if="false" class="shadow-image-wrapper">
<q-img
src="images/ombra.png"
:style="{
position: 'absolute',
justifyContent: 'center',
width:
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size.width,
10
) ?? '100%',
height: tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size.height,
10
),
zIndex: 1,
}"
>
</q-img>
</div>
<div
v-if="scheda.testo_right && scheda.testo_right?.font"
:class="[
'flex', // Classi comuni
'image-container',
@@ -104,69 +75,70 @@
),
}"
>
<a :href="myproduct.productInfo.link_macro" target="_blank">
<q-img
v-if="myproduct.productInfo"
:src="
myproduct.productInfo.imagefile
? tools.getFullFileNameByImageFile(
'productInfos',
myproduct.productInfo.imagefile
)
: myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
:fit="scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'"
:class="{
'book-image-fixed': complete,
'cursor-pointer': !complete,
'shadow-4': !optcatalogo.pdf,
'border-box': optcatalogo.pdf,
}"
:style="{
zIndex: 2,
width:
scheda.testo_right.font?.posiz_text ===
costanti.POSIZ_TESTO.IN_BASSO
? scheda.testo_right.font?.perc_text ?? '50%'
: '45%',
...(tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.width
) && {
<div style="position: relative; display: inline-block">
<a :href="myproduct.productInfo.link_macro" target="_blank">
<q-img
v-if="myproduct.productInfo"
:src="
myproduct.productInfo.imagefile
? tools.getFullFileNameByImageFile(
'productInfos',
myproduct.productInfo.imagefile
)
: myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
:fit="
scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'
"
:class="{
'book-image-fixed': complete,
'cursor-pointer': !complete,
'shadow-4': !optcatalogo.pdf,
'border-box': optcatalogo.pdf,
}"
:style="{
zIndex: 2,
width:
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto.size?.width
) + ' !important',
}),
height: scheda.dimensioni?.immagine_prodotto?.size?.height
? tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.height
)
: undefined,
display: 'block',
}"
@click="click_opendetail()"
/>
</a>
<span v-if="false && !optcatalogo.generazionePDFInCorso && editOn" class="prod_disp">
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('products.stockQty')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="stockQty"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
scheda.testo_right.font?.posiz_text ===
costanti.POSIZ_TESTO.IN_BASSO
? scheda.testo_right.font?.perc_text ?? '50%'
: '45%',
...(tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.width
) && {
width:
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto.size?.width
) + ' !important',
}),
height: scheda.dimensioni?.immagine_prodotto?.size?.height
? tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.height
)
: undefined,
display: 'block',
}"
@click="click_opendetail()"
/>
</a>
<q-btn
v-if="
tools.isManager() &&
!optcatalogo.generazionePDFInCorso &&
globalStore.editOn
"
icon="fas fa-pencil-alt"
color="primary"
@click.stop="modifOn = !modifOn"
dense
style="position: absolute; top: 0px; left: 0px; z-index: 3"
>
</CMyValueDb>
</span>
</q-btn>
</div>
<!-- Testo associato all'immagine -->
<div
:style="{
@@ -185,7 +157,7 @@
<div
v-if="scheda.testo_right && scheda.testo_right"
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'--scalecatalog': tools.getScale(optcatalogo),
'line-height': scheda.testo_right.font?.line_height,
height: '100%',
display: 'flex',
@@ -193,13 +165,7 @@
}"
>
<div
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_right
)
"
v-html="getTesto_Right"
style="
display: flex;
flex-direction: column;
@@ -207,7 +173,7 @@
height: 100%;
"
></div>
<div class="row justify-center">
<div class="row">
<div v-if="scheda.barcode && scheda.barcode.show">
<CBarCode
:value="myproduct.productInfo.code"
@@ -234,8 +200,8 @@
<q-img
src="images/bestseller.png"
alt="Bestseller"
:width="(40 * optcatalogo.areadistampa.scale) + 'px'"
:height="(40 * optcatalogo.areadistampa.scale) + 'px'"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
@@ -247,8 +213,8 @@
<q-img
src="images/novita.png"
alt="Novita"
:width="(40 * optcatalogo.areadistampa.scale) + 'px'"
:height="(40 * optcatalogo.areadistampa.scale) + 'px'"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
@@ -256,23 +222,31 @@
</div>
</div>
<div
v-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
v-if="optcatalogo.indebug"
:style="{
width: '100%',
}"
>
<div
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'--scalecatalog': tools.getScale(optcatalogo),
'line-height': scheda.testo_bottom.font?.line_height,
}"
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_bottom
)
"
v-html="getTesto_Debug"
></div>
</div>
<div
v-else-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
:style="{
width: '100%',
}"
>
<div
:style="{
'--scalecatalog': tools.getScale(optcatalogo),
'line-height': scheda.testo_bottom.font?.line_height,
}"
v-html="getTesto_Bottom"
></div>
</div>
</div>
@@ -485,6 +459,264 @@
></q-btn>
</div>
</q-dialog>
<q-dialog v-if="myproduct && modifOn" v-model="modifOn">
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
Modifica a {{ myproduct.productInfo.name }}</q-toolbar-title
>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="q-pa-xs inset-shadow">
<div class="column">
<div class="etichetta">Titolo:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="name"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
<div class="etichetta">SottoTitolo:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="sottotitolo"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
<div class="etichetta">Descrizione Estesa:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.descrizione_estesa')"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="descrizione_completa_macro"
:maxlength="
scheda.testo_bottom.maxlength
? scheda.testo_bottom.maxlength
: 10000
"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
<div class="row q-ma-xm q-pa-xs">
<div class="boxtitleval">
<div class="etichetta">Pagine:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.pagine')"
table="arrvariazioni"
:id="myproduct._id"
:rec="myproduct"
mykey="pagine"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
<div class="boxtitleval">
<div class="etichetta">Misure:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.misure')"
table="arrvariazioni"
:id="myproduct._id"
:rec="myproduct"
mykey="misure"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
</div>
<div class="boxtitleval">
<div class="etichetta">Pubblicazione:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.date_pub')"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="date_publishing"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.date"
>
</CMyValueDb>
</div>
<div class="boxtitleval">
<div class="etichetta">Formato:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.formato')"
table="arrvariazioni"
:id="myproduct._id"
:rec="myproduct"
mykey="formato"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
</div>
</div>
<div class="row">
<div class="boxtitleval">
<div class="etichetta">Prezzo:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.prezzo')"
table="arrvariazioni"
:id="myproduct._id"
:rec="myproduct"
mykey="price"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
<div class="boxtitleval">
<div class="etichetta">Prezzo Scontato:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.prezzo_scontato')"
table="arrvariazioni"
:id="myproduct._id"
:rec="myproduct"
mykey="sale_price"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
</div>
<div class="row">
<div class="boxtitleval">
<div class="etichetta">Descrizione breve macro:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.descrizione_breve_macro')"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="descrizione_breve_macro"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
</div>
<div class="boxtitleval">
<div class="etichetta">Link a gruppomacro.com:</div>
<CMyValueDb
:editOn="modifOn"
:title="t('catalogo.link_macro')"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="link_macro"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
</div>
</div>
<div class="row bg-blue-4">
<div class="etichetta">Venduti:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="totaleVenduti"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<div class="etichetta">Venduti Ultimo Mese:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="venditeLastM"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<div class="etichetta">Venduti Ultimi 6 Mesi:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="venditeLast6M"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<CLabel :value="myproduct.indiceRanking" label="N° in Classifica:" />
<div class="etichetta">3 Mesi:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="rank3M"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<div class="etichetta">6 Mesi:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="rank6M"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<div class="etichetta">1 Anno:</div>
<CMyValueDb
:editOn="modifOn"
table="productinfos"
:id="myproduct.productInfo._id"
:rec="myproduct.productInfo"
mykey="rank1Y"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>