Files
myprojplanet_vite/src/components/CCatalogoCard/CCatalogoCard.vue
2025-04-16 23:28:21 +02:00

702 lines
24 KiB
Vue
Executable File

<template>
<div
v-if="optcatalogo"
:class="{
' items-start q-gutter-sm': true,
}"
:style="
scheda.dimensioni?.pagina?.dimensioni?.size?.height
? ' height: ' +
tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.height) +
'px !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 && !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-page-sticky
v-if="complete && !optcatalogo.pdf"
position="bottom-right"
:offset="[18, 0]"
style="z-index: 1000"
>
<q-btn
fab
icon="fas fa-arrow-up"
class="semi-transparent"
color="primary"
v-close-popup
/>
</q-page-sticky>
<q-card-section>
<div
v-if="scheda.testo_right_attaccato || scheda.testo_right"
:class="[
'flex', // Classi comuni
'image-container',
{ 'shadow-2': options.in_3d && !optcatalogo.pdf }, // Classe condizionale
scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? '' : 'flex flex-row', // Layout flessibile
]"
:style="{
gap: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.gap) ?? '0.1rem',
width: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.width) ?? '100%',
height: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.height),
}"
>
<div>
<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) && {
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>
<div class="q-ma-sm">
<div
class="row absolute-top-left semi-transparent"
style="z-index: 10"
>
<q-btn-dropdown
push
glossy
no-caps
dense
color="primary"
icon="fas fa-pencil-alt"
v-if="
(tools.isManager() || tools.isEditor()) &&
!optcatalogo.generazionePDFInCorso &&
(editOn || options.show_edit_book)
"
>
<q-list>
<q-item
v-if="
(tools.isManager() || tools.isEditor()) &&
!optcatalogo.generazionePDFInCorso &&
(editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="modifOn = !modifOn"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-pencil-alt"
color="primary"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Modifica</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="refreshDataFromGM()"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-pencil-alt"
color="accent"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Carica da GM</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="refreshAllDataBookFromGM()"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-pencil-alt"
color="accent"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Riaggiorna Tutto il Libro da GM</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="
showQtaDisponibile = false;
visufromgm = true;
"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-eye"
color="orange"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Visualizza su GM</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="refreshFieldFromGM('Pagine')"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-eye"
color="orange"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Vedi Numero di Pagine (Da GM)</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
"
clickable
v-close-popup
@click="
showQtaDisponibile = true;
visufromgm = true;
"
>
<q-item-section avatar>
<q-avatar
icon="fas fa-eye"
color="orange"
text-color="white"
/>
</q-item-section>
<q-item-section>
<q-item-label>Visualizza su GM (Tutti i campi)</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
</div>
<!-- Testo sotto all'immagine -->
<CText
:rectext="scheda.testo_right_attaccato"
:myproduct="myproduct"
:optcatalogo="optcatalogo"
:scheda="scheda"
:idPage="idPage"
>
<div
v-if="scheda.testo_right_attaccato.font?.posiz_text !== costanti.POSIZ_TESTO.IN_BASSO"
:style="{
alignSelf:
scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? '' : 'center',
marginTop:
scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? 'auto' : '0',
}"
>
<CText
:rectext="scheda.testo_right"
:myproduct="myproduct"
:optcatalogo="optcatalogo"
:show_at_right="scheda.barcode?.show_at_right"
:scheda="scheda"
:idPage="idPage"
>
<div class="row no-wrap items-center">
<div v-if="scheda.barcode && scheda.barcode.show">
<CBarCode
:value="myproduct.productInfo.code"
:format="scheda.barcode.format"
:fontsizeprop="scheda.barcode.font?.size"
:gap="tools.adjustSize(optcatalogo, scheda.barcode.size?.gap)"
:width="parseInt(tools.adjustSize(optcatalogo, scheda.barcode.size?.width))"
:widthlines="tools.adjustSize(optcatalogo, scheda.barcode.widthlines)"
:height="tools.adjustSize(optcatalogo, scheda.barcode.size?.height)"
:show_at_right="scheda.barcode?.show_at_right"
>
</CBarCode>
</div>
<div v-if="scheda.etichette?.bestseller?.show && isProductBestseller()">
<q-img
src="/images/bestseller.png"
alt="Bestseller"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
<div v-else-if="scheda.etichette?.novita?.show && isProductNovita()">
<q-img
src="/images/novita.png"
alt="Novita"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
</div>
</CText>
</div>
</CText>
<div
v-if="scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO"
class="flexible-width"
:style="{
marginTop: 'auto',
}"
>
<CText
:rectext="scheda.testo_right"
:myproduct="myproduct"
:optcatalogo="optcatalogo"
:scheda="scheda"
:show_at_right="scheda.barcode?.show_at_right"
:idPage="idPage"
>
<div class="row no-wrap items-center">
<div v-if="scheda.barcode && scheda.barcode.show">
<CBarCode
:value="myproduct.productInfo.code"
:format="scheda.barcode.format"
:fontsizeprop="scheda.barcode.font?.size"
:gap="tools.adjustSize(optcatalogo, scheda.barcode.size?.gap)"
:width="parseInt(tools.adjustSize(optcatalogo, scheda.barcode.size?.width))"
:widthlines="tools.adjustSize(optcatalogo, scheda.barcode.widthlines)"
:height="tools.adjustSize(optcatalogo, scheda.barcode.size?.height)"
:show_at_right="scheda.barcode.show_at_right"
>
</CBarCode>
</div>
<div v-if="scheda.etichette?.bestseller?.show && isProductBestseller()">
<q-img
src="/images/bestseller.png"
alt="Bestseller"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
<div v-else-if="scheda.etichette?.novita?.show && isProductNovita()">
<q-img
src="/images/novita.png"
alt="Novita"
:width="40 * tools.getScale(optcatalogo) + 'px'"
:height="40 * tools.getScale(optcatalogo) + 'px'"
fit="contain"
></q-img>
</div>
</div>
</CText>
</div>
<div
v-if="optcatalogo.indebug"
:style="{
width: '100%',
}"
>
<div
:style="{
'--scalecatalog': tools.getScale(optcatalogo),
'line-height': scheda.testo_bottom.font?.line_height,
}"
v-html="getTesto_Debug"
></div>
</div>
<!-- Testo sotto al testo attaccato, allineato al fondo -->
<CText
v-else-if="scheda.testo_bottom && getTesto_Bottom"
:rectext="scheda.testo_bottom"
:scheda="scheda"
:myproduct="myproduct"
:optcatalogo="optcatalogo"
:idPage="idPage"
></CText>
<!--<div v-if="optcatalogo.indebug">testo: "{{ getTesto_Bottom }}"</div>-->
</div>
</q-card-section>
<q-separator
v-if="complete"
class="q-my-sm"
></q-separator>
<q-card-section v-if="complete && myproduct.productInfo.description">
<div class="title-descr text-blue row">Descrizione:</div>
<div class="row items-center">
<div class="text-title text-grey-9">
<span
class="text-grey-7"
v-html="myproduct.productInfo.description"
></span>
</div>
</div>
</q-card-section>
</div>
<q-dialog
v-if="myproduct"
v-model="openlistorders"
>
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title> {{ t('ecomm.listaord') }} - {{ 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">
<q-markup-table
wrap-cells
bordered
separator="horizontal"
class="listaev__table"
>
<thead>
<tr>
<th>Data</th>
<th>Persona</th>
<th>Stato</th>
<th>Quantita</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr
v-for="(ordcart, index) of listord"
:key="index"
class="listaev listaev__table"
>
<td class="text-center">
<div>
{{ func_tools.getDateTimeShortStr(ordcart.created_at) }}
</div>
</td>
<td class="text-center">
<strong>{{ tools.getNomeUtenteEUsernameByRecUser(ordcart.user) }}</strong>
</td>
<td class="text-center">
<strong>{{ shared_consts.getStatusStr(ordcart.status) }}</strong>
</td>
<td class="text-center">
<div
v-for="(singleord, index) in ordcart.items"
:key="index"
>
<span v-if="singleord.order.idProduct === myproduct._id && singleord.order.quantity > 0">
{{ singleord.order.quantity }}</span
>
<span v-if="singleord.order.idProduct === myproduct._id && singleord.order.quantitypreordered > 0">
{{ singleord.order.quantitypreordered }}</span
>
</div>
</td>
<td class="text-center">
{{ ordcart.note }}
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="text-center">
Totali:
<span class="totali">{{ sumval }}</span>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</q-markup-table>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-if="true && myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda"
v-model="apriSchedaPDF"
maximized
>
<q-card>
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ myproduct.productInfo.name }}
</q-toolbar-title>
<q-btn
flat
round
color="white"
label="CHIUDI"
icon="close"
v-close-popup
></q-btn>
</q-toolbar>
<q-card-section>
<iframe
:src="myproduct.productInfo.link_scheda"
frameborder="0"
width="100%"
height="100%"
></iframe>
</q-card-section>
</q-card>
<q-card-actions align="center">
<q-btn
color="primary"
label="Chiudi"
@click="apriSchedaPDF = false"
/>
</q-card-actions>
</q-dialog>
<q-dialog
v-if="false && myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda"
v-model="apriSchedaPDF"
fullscreen
>
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ myproduct.productInfo.name }}
</q-toolbar-title>
<q-btn
flat
round
color="white"
label="CHIUDI"
icon="close"
v-close-popup
></q-btn>
</q-toolbar>
<q-card-section>
<vue-pdf-app
:pdf="myproduct.productInfo.link_scheda"
style="height: 100vh"
></vue-pdf-app>
</q-card-section>
</q-dialog>
<q-dialog
v-model="isFullScreen"
position="top"
:maximized="true"
class="q-pt-none"
>
<div
v-if="isFullScreen"
class="fullscreen-container"
@touchmove.prevent
@click="toggleFullScreen"
>
<q-img
:src="
myproduct.productInfo.imagefile ? `` + myproduct.productInfo.imagefile : myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
:fit="tools.isMobile() ? 'fill' : 'contain'"
class="fullscreen-image"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
ref="fullscreenImage"
>
</q-img>
<br />
</div>
<div class="text-center">
<q-btn
class="q-ma-md"
@click="isFullScreen = false"
label="Chiudi"
rounded
color="primary"
icon="close"
></q-btn>
</div>
</q-dialog>
<q-dialog
v-if="myproduct && modifOn"
v-model="modifOn"
maximized
>
<CSchedaProdotto
v-model="myproduct"
@updateproductmodif="updateproductmodif"
>
</CSchedaProdotto>
updateFieldToGM
</q-dialog>
<q-dialog
v-if="visufromgm && myproduct"
v-model="visufromgm"
>
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title> Visu </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">
<CViewTable
:options="{
nameTable: 'T_Web_Articoli',
campispeciali: true,
numrec: 1,
where: 'T.IdArticolo =' + myproduct.productInfo.sku,
showQtaDisponibile,
outhtml: true,
}"
>
</CViewTable>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-if="updatefromgm && myproduct"
v-model="updatefromgm"
>
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title> Aggiorna da GM: </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">
<q-inner-loading
id="spinner"
:showing="loading"
>
<q-spinner-tail
color="primary"
size="4em"
>
</q-spinner-tail>
</q-inner-loading>
<br />
Valore: {{ field_updated_fromGM }}
<br />
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-if="updatetogm && myproduct"
v-model="updatetogm"
>
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title> Aggiorna su GM: </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">
<q-inner-loading
id="spinner"
:showing="loading"
>
<q-spinner-tail
color="primary"
size="4em"
>
</q-spinner-tail>
</q-inner-loading>
<br />
<br />
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts" src="./CCatalogoCard.ts"></script>
<style lang="scss" scoped>
@import './CCatalogoCard.scss';
</style>