- Continuazione del Catalogo
This commit is contained in:
Surya Paolo
@@ -1,38 +1,66 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-btn v-if="optcatalogo.pdf" label="Crea PDF" @click="generatePDF"></q-btn>
|
||||
<!--<div ref="pdfContent" class="pdf-content">-->
|
||||
|
||||
<div class="text-center">
|
||||
<q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
|
||||
</div>
|
||||
<div v-if="loadpage" class="panel">
|
||||
<div class="container">
|
||||
<q-tabs v-model="tabvisu" dense class="bg-indigo text-white">
|
||||
<q-tab name="categorie" icon="fas fa-folder-open" label="Categorie">
|
||||
<q-badge v-if="cat" color="red" floating>1</q-badge>
|
||||
</q-tab>
|
||||
<q-tab name="autori" icon="fas fa-user" label="Autori">
|
||||
<q-badge v-if="filter.author" color="red" floating>1</q-badge>
|
||||
</q-tab>
|
||||
<q-tab name="ricerca" icon="fas fa-search" label="Cerca">
|
||||
<q-badge v-if="getSearchText()" color="red" floating>1</q-badge>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<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">
|
||||
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||||
<span
|
||||
:class="{
|
||||
category: true,
|
||||
category_sel: cat === reccat.value,
|
||||
}"
|
||||
@click="cat = reccat.value"
|
||||
>{{ reccat.label }}
|
||||
</span>
|
||||
|
|
||||
<!--<q-btn
|
||||
<q-tabs
|
||||
v-if="optcatalogo.pdf"
|
||||
v-model="tabcatalogo"
|
||||
dense
|
||||
class="bg-green text-white"
|
||||
>
|
||||
<q-tab name="visu" icon="fas fa-eye" label="Visualizza"> </q-tab>
|
||||
<q-tab name="sfondo" icon="fas fa-image" label="Sfondo"> </q-tab>
|
||||
<q-tab name="opzioni" icon="fas fa-save" label="Opzioni"> </q-tab>
|
||||
</q-tabs>
|
||||
<q-tab-panels v-model="tabcatalogo" animated class="">
|
||||
<q-tab-panel name="visu">
|
||||
<q-btn
|
||||
v-if="optcatalogo.pdf"
|
||||
label="Crea PDF"
|
||||
@click="generatePDF"
|
||||
></q-btn>
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
|
||||
<div class="text-center">
|
||||
<q-spinner
|
||||
v-if="!loadpage"
|
||||
color="primary"
|
||||
size="3em"
|
||||
:thickness="2"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="loadpage" class="panel">
|
||||
<div class="container">
|
||||
<q-tabs v-model="tabvisu" dense class="bg-indigo text-white">
|
||||
<q-tab
|
||||
name="categorie"
|
||||
icon="fas fa-folder-open"
|
||||
label="Categorie"
|
||||
>
|
||||
<q-badge v-if="cat" color="red" floating>1</q-badge>
|
||||
</q-tab>
|
||||
<q-tab name="autori" icon="fas fa-user" label="Autori">
|
||||
<q-badge v-if="filter.author" color="red" floating>1</q-badge>
|
||||
</q-tab>
|
||||
<q-tab name="ricerca" icon="fas fa-search" label="Cerca">
|
||||
<q-badge v-if="getSearchText()" color="red" floating
|
||||
>1</q-badge
|
||||
>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<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"
|
||||
>
|
||||
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||||
<span
|
||||
:class="{
|
||||
category: true,
|
||||
category_sel: cat === reccat.value,
|
||||
}"
|
||||
@click="cat = reccat.value"
|
||||
>{{ reccat.label }}
|
||||
</span>
|
||||
|
|
||||
<!--<q-btn
|
||||
:push="cat === reccat.value"
|
||||
dense
|
||||
:size="tools.isMobile() ? '0.70rem' : '1rem'"
|
||||
@@ -44,37 +72,37 @@
|
||||
@click="cat = reccat.value"
|
||||
>
|
||||
</q-btn>-->
|
||||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="autori">
|
||||
<q-toolbar>
|
||||
<q-select
|
||||
class="full-width"
|
||||
v-model="filter.author"
|
||||
:options="optauthors"
|
||||
label="Autore"
|
||||
placeholder="Tutti"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
stack-label
|
||||
use-chips
|
||||
filled
|
||||
rounded
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter.author !== ''"
|
||||
class="cursor-pointer"
|
||||
name="clear"
|
||||
@click.stop.prevent="filter.author = ''"
|
||||
/> </template
|
||||
></q-select>
|
||||
<!--<q-select
|
||||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="autori">
|
||||
<q-toolbar>
|
||||
<q-select
|
||||
class="full-width"
|
||||
v-model="filter.author"
|
||||
:options="optauthors"
|
||||
label="Autore"
|
||||
placeholder="Tutti"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
stack-label
|
||||
use-chips
|
||||
filled
|
||||
rounded
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter.author !== ''"
|
||||
class="cursor-pointer"
|
||||
name="clear"
|
||||
@click.stop.prevent="filter.author = ''"
|
||||
/> </template
|
||||
></q-select>
|
||||
<!--<q-select
|
||||
v-model="filter.publisher"
|
||||
:options="publishers"
|
||||
label="Editore"
|
||||
@@ -95,176 +123,270 @@
|
||||
placeholder="Tutte"
|
||||
dense
|
||||
/>-->
|
||||
</q-toolbar>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="ricerca">
|
||||
<div class="col" v-for="(item, index) in searchList" :key="index">
|
||||
<CMySelect
|
||||
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
|
||||
v-if="
|
||||
item.type === costanti.FieldType.select ||
|
||||
item.type === costanti.FieldType.select_by_server
|
||||
"
|
||||
:label="
|
||||
item.value && item.value._id > 0
|
||||
? undefined
|
||||
: labelcombo(item)
|
||||
"
|
||||
v-model:value="item.value"
|
||||
:addall="item.addall"
|
||||
:addnone="item.addnone"
|
||||
:addlast="true"
|
||||
:tablesel="
|
||||
item.type === costanti.FieldType.select_by_server
|
||||
? item.tablesel
|
||||
: ''
|
||||
"
|
||||
:pickup="item.type === costanti.FieldType.select_by_server"
|
||||
:label-color="$q.dark.isActive ? 'white' : 'black'"
|
||||
myclass="comboselector"
|
||||
color="primary"
|
||||
:dense="true"
|
||||
:icon_alternative="item.icon"
|
||||
:optval="fieldsTable.getKeyByTable(item.table)"
|
||||
:optlab="fieldsTable.getLabelByTable(item.table)"
|
||||
:options="valoriopt(item, false)"
|
||||
:filter="item.filter"
|
||||
:filter_extra="item.filter_extra"
|
||||
style="font-size: 0.8rem !important"
|
||||
:useinput="
|
||||
item.useinput &&
|
||||
item.type !== costanti.FieldType.select_by_server
|
||||
"
|
||||
>
|
||||
</CMySelect>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-toolbar>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="ricerca">
|
||||
<div
|
||||
class="col"
|
||||
v-for="(item, index) in searchList"
|
||||
:key="index"
|
||||
>
|
||||
<CMySelect
|
||||
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
|
||||
v-if="
|
||||
item.type === costanti.FieldType.select ||
|
||||
item.type === costanti.FieldType.select_by_server
|
||||
"
|
||||
:label="
|
||||
item.value && item.value._id > 0
|
||||
? undefined
|
||||
: labelcombo(item)
|
||||
"
|
||||
v-model:value="item.value"
|
||||
:addall="item.addall"
|
||||
:addnone="item.addnone"
|
||||
:addlast="true"
|
||||
:tablesel="
|
||||
item.type === costanti.FieldType.select_by_server
|
||||
? item.tablesel
|
||||
: ''
|
||||
"
|
||||
:pickup="
|
||||
item.type === costanti.FieldType.select_by_server
|
||||
"
|
||||
:label-color="$q.dark.isActive ? 'white' : 'black'"
|
||||
myclass="comboselector"
|
||||
color="primary"
|
||||
:dense="true"
|
||||
:icon_alternative="item.icon"
|
||||
:optval="fieldsTable.getKeyByTable(item.table)"
|
||||
:optlab="fieldsTable.getLabelByTable(item.table)"
|
||||
:options="valoriopt(item, false)"
|
||||
:filter="item.filter"
|
||||
:filter_extra="item.filter_extra"
|
||||
style="font-size: 0.8rem !important"
|
||||
:useinput="
|
||||
item.useinput &&
|
||||
item.type !== costanti.FieldType.select_by_server
|
||||
"
|
||||
>
|
||||
</CMySelect>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
<div class="row justify-center q-mx-auto">
|
||||
<q-select
|
||||
v-model="filter.sort"
|
||||
dense
|
||||
:options="costanti.ORDINAMENTO_CATALOGHI"
|
||||
label="Ordinamento"
|
||||
placeholder=""
|
||||
emit-value
|
||||
map-options
|
||||
filled
|
||||
rounded
|
||||
></q-select>
|
||||
</div>
|
||||
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
<span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: arrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="row justify-around" v-if="tools.isManager() && false">
|
||||
<q-toggle
|
||||
v-model="show_hide"
|
||||
push
|
||||
label="Mostra Nascosti"
|
||||
rounded
|
||||
glossy
|
||||
toggle-color="primary"
|
||||
></q-toggle>
|
||||
</div>
|
||||
|
||||
<div class="row justify-around">
|
||||
<div>
|
||||
<q-infinite-scroll
|
||||
v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
|
||||
ref="myinfscroll"
|
||||
:initial-index="0"
|
||||
@load="onLoadScroll"
|
||||
:offset="2000"
|
||||
debounce="200"
|
||||
class="q-pa-xs row items-start"
|
||||
style="place-content: center"
|
||||
>
|
||||
<div
|
||||
class="q-pa-xs"
|
||||
v-for="(product, index) in arrLoaded"
|
||||
:key="index"
|
||||
>
|
||||
<CContainerCatalogoCard
|
||||
v-if="
|
||||
product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productTypes.includes(
|
||||
shared_consts.PRODUCTTYPE.PRODUCT
|
||||
))
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
:optcatalogo="optcatalogo"
|
||||
:options="{
|
||||
show_short_descr: false,
|
||||
show_price: false,
|
||||
show_cat: false,
|
||||
quante_col: 'c2',
|
||||
in_3d: false,
|
||||
}"
|
||||
@selauthor="selauthor"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product.active || show_hide"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
<div class="row justify-center q-mx-auto">
|
||||
<q-select
|
||||
v-model="filter.sort"
|
||||
dense
|
||||
:options="costanti.ORDINAMENTO_CATALOGHI"
|
||||
label="Ordinamento"
|
||||
placeholder=""
|
||||
emit-value
|
||||
map-options
|
||||
filled
|
||||
rounded
|
||||
></q-select>
|
||||
</div>
|
||||
<template v-slot:loading>
|
||||
<div class="text-center">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
<div
|
||||
v-else
|
||||
id="pdf-content"
|
||||
class="q-pa-xs row items-start"
|
||||
style="place-content: center"
|
||||
v-for="(product, index) in arrProducts"
|
||||
:key="index"
|
||||
>
|
||||
<CContainerCatalogoCard
|
||||
v-if="
|
||||
product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productTypes.includes(
|
||||
shared_consts.PRODUCTTYPE.PRODUCT
|
||||
))
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
:optcatalogo="optcatalogo"
|
||||
:options="{
|
||||
show_short_descr: false,
|
||||
show_price: false,
|
||||
show_cat: false,
|
||||
quante_col: 'c2',
|
||||
in_3d: false,
|
||||
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
<span
|
||||
v-show="productStore.getNumProdTot() !== arrProducts.length"
|
||||
>{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: arrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="row justify-around" v-if="tools.isManager() && false">
|
||||
<q-toggle
|
||||
v-if="!optcatalogo.pdf"
|
||||
v-model="show_hide"
|
||||
push
|
||||
label="Mostra Nascosti"
|
||||
rounded
|
||||
glossy
|
||||
toggle-color="primary"
|
||||
></q-toggle>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="pdf-content"
|
||||
ref="pdfContent"
|
||||
:class="{ 'fixed-width': true }"
|
||||
:style="{
|
||||
backgroundImage: `url(${
|
||||
costanti.DIR_UPLOAD +
|
||||
costanti.DIR_CATALOGO +
|
||||
(optcatalogo.printable
|
||||
? optcatalogo.backgroundimage_printable
|
||||
: optcatalogo.backgroundimage)
|
||||
})`,
|
||||
backgroundSize: 'contain',
|
||||
'--width':
|
||||
(optcatalogo.printable
|
||||
? optcatalogo.widthpagPrintable
|
||||
: optcatalogo.widthpag) + 'px',
|
||||
}"
|
||||
@selauthor="selauthor"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product.active || show_hide"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
>
|
||||
<div class="flex-container-book">
|
||||
<q-infinite-scroll
|
||||
v-if="!optcatalogo.pdf && arrLoaded && arrLoaded.length > 0"
|
||||
ref="myinfscroll"
|
||||
:initial-index="0"
|
||||
@load="onLoadScroll"
|
||||
:offset="2000"
|
||||
debounce="200"
|
||||
class="q-pa-xs row items-start"
|
||||
style="place-content: center"
|
||||
>
|
||||
<div
|
||||
class="q-pa-xs"
|
||||
v-for="(product, index) in arrLoaded"
|
||||
:key="index"
|
||||
>
|
||||
<CContainerCatalogoCard
|
||||
v-if="
|
||||
product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productTypes.includes(
|
||||
shared_consts.PRODUCTTYPE.PRODUCT
|
||||
))
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
:optcatalogo="optcatalogo"
|
||||
:options="{
|
||||
show_short_descr: false,
|
||||
show_price: false,
|
||||
show_cat: false,
|
||||
quante_col: 'c2',
|
||||
in_3d: false,
|
||||
}"
|
||||
@selauthor="selauthor"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product.active || show_hide"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
</div>
|
||||
<template v-slot:loading>
|
||||
<div class="text-center">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
<div v-else class="cards-container">
|
||||
<!-- Itera sulle pagine -->
|
||||
<div
|
||||
v-for="(page, pageIndex) in groupedPages()"
|
||||
:key="pageIndex"
|
||||
class="card-page"
|
||||
:style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_paginaPrintable : optcatalogo.margine_pagina};`"
|
||||
>
|
||||
<!-- Itera sulle righe di ogni pagina -->
|
||||
<div
|
||||
v-for="(row, rowIndex) in page"
|
||||
:key="`${pageIndex}-${rowIndex}`"
|
||||
class="card-row"
|
||||
:style="`margin-bottom: ${optcatalogo.printable ? optcatalogo.margine_rigaPrintable : optcatalogo.margine_riga};`"
|
||||
>
|
||||
<!-- Itera sui prodotti di ogni riga -->
|
||||
<div
|
||||
v-for="(product, colIndex) in row"
|
||||
:key="`${pageIndex}-${rowIndex}-${colIndex}`"
|
||||
class="flex-item-book image-container"
|
||||
:style="
|
||||
'place-content: center; ' +
|
||||
('flex: 0 1 ' + optcatalogo.widthscheda + '; ')
|
||||
"
|
||||
>
|
||||
<CContainerCatalogoCard
|
||||
v-if="
|
||||
product && product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productTypes.includes(
|
||||
shared_consts.PRODUCTTYPE.PRODUCT
|
||||
))
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
:optcatalogo="optcatalogo"
|
||||
:options="{
|
||||
show_short_descr: false,
|
||||
show_price: false,
|
||||
show_cat: false,
|
||||
quante_col: 'c2',
|
||||
in_3d: false,
|
||||
}"
|
||||
@selauthor="selauthor"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product && (product.active || show_hide)"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="sfondo">
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
|
||||
<div>
|
||||
Sfondo:
|
||||
{{
|
||||
costanti.DIR_UPLOAD +
|
||||
costanti.DIR_CATALOGO +
|
||||
optcatalogo.backgroundimage
|
||||
}}
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
:src="
|
||||
costanti.DIR_UPLOAD +
|
||||
costanti.DIR_CATALOGO +
|
||||
optcatalogo.backgroundimage
|
||||
"
|
||||
>
|
||||
</q-img>
|
||||
<div>
|
||||
Sfondo Stampa:
|
||||
{{
|
||||
costanti.DIR_UPLOAD +
|
||||
costanti.DIR_CATALOGO +
|
||||
optcatalogo.backgroundimage_printable
|
||||
}}
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
:src="
|
||||
costanti.DIR_UPLOAD +
|
||||
costanti.DIR_CATALOGO +
|
||||
optcatalogo.backgroundimage_printable
|
||||
"
|
||||
>
|
||||
</q-img>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="opzioni">
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1"></div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
<!--<div ref="pdfContent" class="pdf-content">-->
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user