Files
salvato.newfreeplanet/src/components/CProductCard/CProductCard.vue

924 lines
30 KiB
Vue
Executable File

<template>
<div class="row items-start q-gutter-sm">
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
<q-card
:class="{
'my-card-big': complete,
'my-card-prod': !complete,
'my-card-selected':
myorder && myorder.quantity + myorder.quantitypreordered > 0,
}"
v-if="!!myproduct && endload && !!myproduct.productInfo"
bordered
>
<q-toggle
v-if="tools.isManager()"
v-model="editOn"
class="absolute-top-right"
color="green"
icon="fas fa-pencil-alt"
dense
>
</q-toggle>
<div v-if="!myproduct.active">
<span class="text-bold text-white bg-red text-h6">{{
t('ecomm.not_active')
}}</span>
</div>
<q-card-section horizontal class="image-section">
<div class="image-container">
<q-img
:src="`` + myproduct.productInfo.img"
:alt="myproduct.productInfo.name"
class="cursor-pointer img-pic"
@click="
complete
? toggleFullScreen
: naviga(`/product/` + myproduct._id + '/' + cosa)
"
></q-img>
<q-btn
color="primary"
round
icon="fas fa-eye"
class="absolute semi-transparent"
size="md"
@click="toggleFullScreen"
style="bottom: -10px; right: 0px; transform: translateY(-50%)"
/>
</div>
<!--<q-btn
v-if="!complete"
fab
color="primary"
icon="fas fa-info"
class="absolute semi-transparent"
style="top: 0; right: -15px; transform: translateY(-66%)"
:to="`/product/` + myproduct._id + '/' + cosa"
/>
-->
<q-list>
<q-item>
<q-item-section avatar>
<q-icon
color="moneygreen"
name="fas fa-euro-sign"
class="icone_prod"
/>
</q-item-section>
<q-item-section>
<q-item-label>
<span class="prod_price" v-if="!!myproduct.price">{{
myproduct.price ? myproduct.price.toFixed(2) : 0
}}</span>
<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>
<q-item>
<q-item-section avatar v-if="myproduct.productInfo.weight">
<q-icon name="fas fa-balance-scale" class="icone_prod" />
</q-item-section>
<q-item-section v-if="myproduct.productInfo.weight">
<q-item-label>
<span
class="text-black q-ml-xs text-h8"
v-if="myproduct.productInfo.unit"
>
{{
tools.getWeightByUnit(
myproduct.productInfo.unit,
true,
myproduct.productInfo.weight
)
}}
{{
tools.getUnitsMeasure(
myproduct.productInfo.unit,
true,
myproduct.productInfo.weight
)
}}</span
>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
cosa === shared_consts.PROD.BOTTEGA ||
(cosa === shared_consts.PROD.GAS &&
products.getQtyAvailable(myproduct) > 0)
"
:clickable="tools.isManager()"
@click="
tools.isManager() &&
myproduct.QuantitaOrdinateInAttesa &&
myproduct.QuantitaOrdinateInAttesa > 0
? visuListDisponibili()
: null
"
>
<q-item-section avatar>
<q-icon color="green" name="fas fa-store" class="icone_prod" />
</q-item-section>
<q-item-section>
<q-item-label class="subtit_prod">
{{ t('ecomm.available') }}
</q-item-label>
<q-item-label>
<span v-if="!editOn" class="prod_disp">
{{ products.getQtyAvailable(myproduct) }}
</span>
<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"
>
</CMyValueDb>
<div class="prod_qtywarn">
<div
v-if="
tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
"
>
{{
t('ecomm.qta_in_attesa', {
qty: myproduct.QuantitaOrdinateInAttesa,
})
}}
</div>
</div>
</q-item-label>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-section avatar>
<q-icon
name="fas fa-store"
style="padding-right: 16px !important"
/>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
<q-item-label>
<span v-if="!editOn" class="text-black q-ml-xs text-h8">
{{ myproduct.stockBloccatiQty }}</span
>
</q-item-label>
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('products.stockBloccatiQty')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="stockBloccatiQty"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</q-item-section>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-card-section class="card_titolo_prod">
<div class="column items-center centeritems">
<div class="text-h7 boldhigh titolo_prod">
{{ myproduct.productInfo.name }}
</div>
<div class="product_code">
&nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
</div>
</div>
</q-card-section>
<q-card-section v-if="complete && myproduct.productInfo.description">
<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>
<q-card-section v-if="complete && myproduct.productInfo.ingredienti">
<div class="text-blue text-title row">
<q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
{{ t('products.ingredienti') }}
</div>
<div class="row items-center">
<div class="text-title text-grey-9">
<span
class="text-grey-7"
v-html="myproduct.productInfo.ingredienti"
></span>
</div>
</div>
</q-card-section>
<q-card-section
v-if="complete && myproduct.productInfo.valori_nutrizionali"
>
<div class="text-blue text-title row">
<q-icon size="sm" name="fas fa-info" class="q-mr-sm" />
{{ t('products.valori_nutrizionali') }}
</div>
<div class="row items-center">
<div class="text-title text-grey-9">
<span
class="text-grey-7"
v-html="myproduct.productInfo.valori_nutrizionali"
></span>
</div>
</div>
</q-card-section>
<q-card-section v-if="complete || getnumstore() > 1">
<div class="text-blue text-title row items-center q-mr-md centeritems">
<q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
{{ t('products.ritiro_presso') }}:
</div>
<div
class="text-green-6 text-title row items-center q-my-sm centeritems"
>
<div v-if="getnumstore() > 1">
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
outlined
v-model="storeSelected"
:options="getStorehouses()"
:label="t('products.magazzino') + `:`"
emit-value
map-options
>
</q-select>
</div>
<div v-else>
<span class="text-title text-center">{{
getSingleStorehouse()
}}</span>
</div>
</div>
</q-card-section>
<q-card-section
v-if="complete && myproduct.producer && myproduct.producer.city"
>
<div>
<div class="text-grey text-title row items-center q-mt-sm">
<q-icon name="map" class="q-mr-xs" />
{{ t('products.origine') }}:
<span class="text-blue q-ml-xs text-h8">
{{ myproduct.producer.city }} ({{
myproduct.producer.region
}})</span
>
</div>
</div>
<div
v-if="complete && myproduct.producer && myproduct.producer.name"
class="text-grey text-title row items-center"
>
<q-icon name="place" class="q-mr-xs" />
{{ t('products.producer') }}:
<span class="text-black q-ml-xs text-h8">
{{ myproduct.producer.name }}</span
>
</div>
</q-card-section>
<q-card-section v-if="myproduct.note" class="q-pa-none">
<q-item>
<q-item-section avatar>
<q-icon color="black" name="fas fa-book" />
</q-item-section>
<q-item-section>
<q-item-label class="">
<CMyValueDb
title=""
:editOn="editOn"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="note"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.string"
>
</CMyValueDb>
</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-card-section v-if="isOrdGas()">
<q-item
v-if="
myproduct.bookableAvailableQty > 0 ||
myproduct.maxbookableGASQty > 0
"
:clickable="tools.isManager()"
@click="
tools.isManager() &&
myproduct.QuantitaPrenotateInAttesa &&
myproduct.QuantitaPrenotateInAttesa > 0
? visuListBookable()
: null
"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-edit" />
</q-item-section>
<q-item-section>
<q-item-label class="subtit_prod">
{{ t('ecomm.preorders') }}
</q-item-label>
<q-item-label>
<span v-if="!editOn" class="prod_preorder">
{{ myproduct.bookableAvailableQty }}
</span>
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('products.maxbookableGASQty')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="maxbookableGASQty"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<div class="prod_qtywarn">
<div
v-if="
tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
"
>
{{
t('ecomm.qta_prenotate_in_attesa', {
qty: myproduct.QuantitaPrenotateInAttesa,
})
}}
</div>
</div>
</q-item-label>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataBookableAvailable(myproduct) > 0
"
>
<q-item-section avatar>
<q-icon
name="fas fa-store"
style="padding-right: 16px !important"
/>
</q-item-section>
<q-item-section>
<q-item-label class="subtit_prod">
{{ t('ecomm.bloccati') }}:
</q-item-label>
<q-item-label>
<span v-if="!editOn" class="text-black q-ml-xs text-h8">
{{ myproduct.bookableGASBloccatiQty }}</span
>
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('products.bookableGASBloccatiQty')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="bookableGASBloccatiQty"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<CMyValueDb
:editOn="editOn"
:title="t('products.bookedGASQtyConfirmed')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="bookedGASQtyConfirmed"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</q-item-label>
</q-item-section>
</q-item-section>
</q-item>
<q-item v-if="myproduct.gasordine && myproduct.gasordine.active && myproduct.idGasordine">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-shipping-fast" />
</q-item-section>
<q-item-section>
<q-item-label class="subtit_prod">
{{ t('products.gasordine') }}
</q-item-label>
<q-item-label>
<span class="text-title text-center">{{
myproduct.gasordine.name
}}</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
tools.isManager() && products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-section>
<q-item-section avatar>
<q-icon
name="fas fa-store"
style="padding-right: 16px !important"
/>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
<q-item-label>
<span class="text-black q-ml-xs text-h8">
{{ products.getQtyBloccataAvailable(myproduct) }}</span
>
</q-item-label>
</q-item-section>
</q-item-section>
</q-item>
<q-item v-if="isOrdGas() && myproduct.qtyToReachForGas > 0">
<q-item-section avatar>
<q-icon
v-if="getpercqtaraggiunta() < 1"
color="orange"
name="fas fa-lightbulb"
/>
<q-icon v-else color="green" name="fas fa-check" />
</q-item-section>
<q-item-section>
<q-item-label class="subtit_prod text-blue text-bold">
<span v-if="getpercqtaraggiunta() >= 1">{{
t('ecomm.offerta_gas_raggiunta', {
qta: myproduct.qtyToReachForGas,
unit: tools.getUnitsMeasure(
myproduct.productInfo.unit,
true,
myproduct.productInfo.weight
),
})
}}</span>
<span v-else>{{
t('ecomm.offerta_gas', {
qta: myproduct.qtyToReachForGas,
unit: tools.getUnitsMeasure(
myproduct.productInfo.unit,
true,
myproduct.productInfo.weight
),
})
}}</span>
</q-item-label>
<div class="row">
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('ecomm.bookedGASQtyOrdered')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="bookedGASQtyOrdered"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<CMyValueDb
v-if="editOn"
:editOn="editOn"
:title="t('ecomm.qtyToReachForGas')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="qtyToReachForGas"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
<q-item-label>
<span class="prod_disp">
{{
t('ecomm.bookedGASQtyOrdered_str', {
qta: myproduct.bookedGASQtyOrdered,
qtatot: myproduct.qtyToReachForGas,
})
}}
<q-linear-progress size="10px" :value="getpercqtaraggiunta()" />
</span>
<div class="prod_qtywarn">
<div
v-if="
tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
"
>
{{
t('ecomm.qta_in_attesa', {
qty: myproduct.QuantitaOrdinateInAttesa,
})
}}
</div>
</div>
</q-item-label>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-section avatar>
<q-icon
name="fas fa-store"
style="padding-right: 16px !important"
/>
</q-item-section>
<q-item-section
v-if="
tools.isManager() &&
products.getQtyBloccataAvailable(myproduct) > 0
"
>
<q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
<q-item-label>
<span class="text-black q-ml-xs text-h8">
{{ products.getQtyBloccataAvailable(myproduct) }}</span
>
</q-item-label>
</q-item-section>
</q-item-section>
</q-item>
<q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (myproduct.gasordine.dataora_chiusura_ordini || editOn)">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-hourglass-half" />
</q-item-section>
<q-item-section>
<q-item-label class="countdown_scadenza">
<span v-if="timerLabelScadenza">{{ timerLabelScadenza }}</span>
<span v-else-if="isOrdineChiuso()">{{
t('ecomm.ordine_scaduto')
}}</span>
<CMyValueDb
:editOn="editOn"
:title="t('gas.dataora_chiusura_ordini')"
table="gasordines"
:id="myproduct.gasordine._id"
:rec="myproduct.gasordine"
mykey="dataora_chiusura_ordini"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.date"
:justifycenter="false"
>
</CMyValueDb>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (labelDataArrivoMerce || editOn)">
<q-item-section avatar>
<q-icon color="red" name="fas fa-shipping-fast" />
</q-item-section>
<q-item-section class="subtit_prod">
<q-item-label class="countdown_scadenza">
<CMyValueDb
:editOn="editOn"
:title="t('gas.data_arrivo_merce')"
table="gasordines"
:id="myproduct.gasordine._id"
:rec="myproduct.gasordine"
mykey="data_arrivo_merce"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.date"
:justifycenter="false"
>
</CMyValueDb>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (labelDataRitiro || editOn)">
<q-item-section avatar>
<q-icon color="green" name="fas fa-people-carry" />
</q-item-section>
<q-item-section>
<q-item-label class="countdown_scadenza">
<CMyValueDb
:editOn="editOn"
:title="t('gas.dataora_ritiro')"
table="gasordines"
:id="myproduct.gasordine._id"
:rec="myproduct.gasordine"
mykey="dataora_ritiro"
:justifycenter="false"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.onlydate"
>
</CMyValueDb>
</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row justify-evenly">
<q-btn
icon="fas fa-cart-arrow-down"
:color="
checkifCartDisable() || !products.enableSubQty(myorder)
? 'grey'
: 'negative'
"
:disable="checkifCartDisable() || !products.enableSubQty(myorder)"
rounded
size="md"
:label="
t('products.subcart', {
qta: products.qtaNextSub(myorder, myproduct),
})
"
@click="addtoCart(false)"
>
</q-btn>
<q-field outlined dense class="q-mx-xs">
<template v-slot:control>
<div class="no-outline label-qta text-center" tabindex="0">
{{ myorder.quantity + myorder.quantitypreordered }}
</div>
</template>
</q-field>
<q-btn
icon-right="fas fa-cart-plus"
:color="
checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
? 'grey'
: 'positive'
"
:disable="
checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
"
rounded
size="md"
:label="
t('products.addcart', {
qta: products.qtaNextAdd(myorder, myproduct),
})
"
@click="addtoCart(true)"
>
</q-btn>
<q-btn
v-if="myorder.quantity + myorder.quantitypreordered > 0"
rounded
icon="fas fa-shopping-cart"
color="primary"
:label="t('ecomm.btn_cassa')"
class="q-mb-xs q-mt-md"
to="/checkout"
></q-btn>
</div>
</q-card-section>
<div v-if="editOn">
<div v-if="!isOrdGas()" class="row">
<CMyValueDb
:editOn="editOn"
:title="t('products.bookedQtyOrdered')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="bookedQtyOrdered"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
<CMyValueDb
:editOn="editOn"
:title="t('products.bookedQtyConfirmed')"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="bookedQtyConfirmed"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.number"
>
</CMyValueDb>
</div>
<q-separator> </q-separator>
<div class="text-center">
<q-btn
rounded
icon="fas fa-sync-alt"
color="primary"
:label="t('ecomm.ricarica')"
@click="ricarica()"
></q-btn>
</div>
</div>
<div v-if="editOn">{{ t('ecomm.active') }}:</div>
<CMyValueDb
title=""
v-if="editOn"
:editOn="editOn"
table="products"
:id="myproduct._id"
:rec="myproduct"
mykey="active"
debounce="1000"
:save="updateproductmodif()"
:type="costanti.FieldType.boolean"
>
</CMyValueDb>
</q-card>
<q-dialog 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>
<th>Data</th>
<th>Persona</th>
<th>Stato</th>
<th>Quantita</th>
<th>Note</th>
</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-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.img"
:alt="myproduct.productInfo.name"
:fit="tools.isMobile() ? 'fill' : 'none'"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
ref="fullscreenImage"
/>
<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="./CProductCard.ts">
</script>
<style lang="scss" scoped>
@import './CProductCard.scss';
</style>