Files
myprojplanet_vite/src/components/CCatalogoCard/CCatalogoCard copy.off
Surya Paolo 7619ce5b51 - Cataloghi
- Import ed Export Pagine
- ObjectID sostituita con ObjectId
2024-12-17 17:56:03 +01:00

601 lines
20 KiB
Plaintext
Executable File

<template>
<div
:class="{
' 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 && !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() && !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"
: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
: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="
myproduct.productInfo.imagefile
? tools.getFullFileNameByImageFile(
'productInfos',
myproduct.productInfo.imagefile
)
: myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
:class="{
'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
class="absolute transparent"
style="left: 90%; top: -18px; transform: translateX(-50%)"
>
<q-btn
v-if="!optcatalogo.pdf"
color="blue-6"
class="semi-transparent"
round
icon="search"
@click.stop="toggleFullScreen"
size="sm"
/>
</div>
</q-img>
<div v-if="false" class="scheda-book">
<div>
<span class="book-title" :data-col="options.quante_col">
<span
v-if="!complete"
class="cursor-pointer"
@click="click_opendetail()"
>{{ myproduct.productInfo.name }}
</span>
<span v-else>{{ myproduct.productInfo.name }} </span>
</span>
</div>
<div
v-if="myproduct.productInfo.authors"
class="book-author"
:data-col="options.quante_col"
>
di
<span
v-for="(author, index) in myproduct.productInfo.authors"
:key="author._id"
>
<span v-if="index > 0">, </span>
<span
class="author cursor-pointer text-primary"
@click="
click_author(author._id, author.name + ' ' + author.surname)
"
>{{ author.name }} {{ author.surname }}</span
>
</span>
</div>
<div
v-if="myproduct.productInfo.catprods && options.show_cat"
class="book-category"
>
<div
v-for="catprod in myproduct.productInfo.catprods"
:key="catprod._id"
>
<q-chip
dense
color="primary"
text-color="white"
icon="category"
>
{{ catprod.name }}
</q-chip>
</div>
</div>
<div
v-if="
options.show_short_descr && myproduct.productInfo.short_descr
"
class="book-short-descr"
>
{{
tools.firstchars(myproduct.productInfo.short_descr, 200, true)
}}
</div>
<div
v-if="myproduct.productInfo.numpages && complete"
class="book-pages"
>
Pagine: {{ myproduct.productInfo.numpages }}
</div>
<div v-if="myproduct.productInfo.publisher" class="book-pages">
{{ myproduct.productInfo.publisher.name }}
</div>
<div
v-if="myproduct.productInfo.date_pub && complete"
class="book-data-pub"
>
Data Pubblicazione:
{{ tools.getstrDate(myproduct.productInfo.date_pub) }}
</div>
<q-separator class="q-my-sm"></q-separator>
<div v-if="options.show_price">
<div
:class="{
'row items-center q-pa-nome block-variazione': true,
'block-variazione-selected': indvariazSel == index,
}"
v-for="(variazione, index) of myproduct.arrvariazioni"
:key="index"
@click="setvariazioneSelected(index)"
>
<div
v-if="checkIfVariazioneDaVisu(variazione)"
class="flex justify-between items-center q-mx-sm"
>
<q-badge
class="q-badge--large"
:color="
tools.getRecByVersioneProd(variazione.versione).color
"
>
<q-icon
v-if="variazione.versione > 0"
:name="tools.getIconByVersione(variazione.versione)"
color="white"
></q-icon
>&nbsp;
{{ tools.getRecByVersioneProd(variazione.versione).label }}
</q-badge>
<div v-if="variazione.formato && false">
formato: {{ variazione.formato }}
</div>
<div v-if="variazione.tipologia && false">
tipologia: {{ variazione.tipologia }}
</div>
<div v-if="variazione.status && false">
status: {{ variazione.status }}
</div>
<div v-if="variazione.preOrderDate">
preOrderDate: {{ variazione.preOrderDate }}
</div>
</div>
<q-item-section>
<q-item-label>
<CPrice
:sale_price="variazione.sale_price"
:price="variazione.price"
></CPrice>
<span v-if="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</q-item-label>
<q-item-label
v-if="
myproduct.scontisticas &&
myproduct.scontisticas.length > 0
"
>
<div
class="prod_sconti"
v-for="(sconti, index) of myproduct.scontisticas"
:key="index"
>
{{ sconti.description }}
</div>
</q-item-label>
</q-item-section>
<q-item-section side v-if="!!variazione.quantita">
<q-icon
v-if="variazione.quantita > 10"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-check"
/>
<q-icon
v-else-if="
variazione.quantita > 3 && variazione.quantita <= 10
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="
variazione.quantita > 0 && variazione.quantita <= 3
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="variazione.quantita === 0"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-times"
/>
</q-item-section>
</div>
<div
v-for="(variazione, index) of myproduct.arrvariazioni"
:key="index"
>
<div
v-show="
indvariazSel == index && checkIfVariazioneDaVisu(variazione)
"
>
<div
v-show="tools.disponibStr(variazione.quantita)"
class="row justify-center q-mt-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm"
>{{ $t('ecomm.disponibilita') }}:&nbsp;</span
>
<q-chip
size="md"
dense
text-color="white"
:color="tools.colordisponib(variazione.quantita)"
>{{ tools.disponibStr(variazione.quantita) }}</q-chip
>
</div>
<div
class="row justify-center vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.price') }}:</span>
<CPrice
:sale_price="variazione.sale_price"
:price="variazione.price"
bold="true"
></CPrice>
<span v-show="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</div>
<div
v-show="!!variazione.formato"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.formato') }}:</span>
<q-badge
v-show="variazione.versione > 0"
:color="
tools.getRecByVersioneProd(variazione.versione).color
"
>{{ variazione.formato }}</q-badge
>
</div>
<div
v-show="!!variazione.edizione"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.edizione') }}:</span>
{{ variazione.edizione }}
</div>
<div
v-show="!!myproduct.isbn"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.isbn') }}:</span>
{{ myproduct.isbn }}
</div>
<div
v-show="!!myproduct.productInfo.publisher"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.editore') }}:</span>
<q-badge
:color="
tools.getRecByVersioneProd(variazione.versione).color
"
>{{ myproduct.productInfo.publisher.name }}</q-badge
>
</div>
<div class="row justify-center q-mt-sm">
<q-btn
v-if="variazione.addtocart_link && true"
:href="variazione.addtocart_link"
target="_blank"
color="primary"
icon="fas fa-cart-plus"
class="q-mr-sm"
no-caps
:label="$t('products.addtocart_ext')"
></q-btn>
<q-btn
v-if="myproduct.productInfo.checkout_link && true"
:href="myproduct.productInfo.checkout_link"
target="_blank"
class="q-ml-sm"
color="white"
icon="fas fa-shopping-cart"
outline
text-color="black"
no-caps
:label="$t('ecomm.carrello')"
></q-btn>
</div>
</div>
</div>
</div>
</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="bottom">
<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>
</div>
</template>
<script lang="ts" src="./CCatalogoCard.ts">
</script>
<style lang="scss" scoped>
@import './CCatalogoCard.scss';
</style>