504 lines
15 KiB
Vue
Executable File
504 lines
15 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<!-- Selezione Colonne -->
|
|
<div class="row justify-center">
|
|
<div class="row justify-center q-mx-auto q-pt-sm text-italic">
|
|
{{ internalProducts?.length }} elementi nella lista
|
|
</div>
|
|
<div class="row justify-center q-mx-auto q-pt-sm">
|
|
<q-input
|
|
v-model="searchText"
|
|
dense
|
|
outlined
|
|
clearable
|
|
debounce="250"
|
|
placeholder="Cerca titolo se presente in lista"
|
|
class="col-12 col-md-6"
|
|
:style="{ 'min-width': '300px' }"
|
|
>
|
|
</q-input>
|
|
<div
|
|
v-if="searchText"
|
|
class="row justify-center q-mx-auto q-pa-sm text-caption text-red-7"
|
|
>
|
|
Lista filtrata con il termine "{{ searchText }}"
|
|
</div>
|
|
</div>
|
|
<div class="q-mb-md text-right">
|
|
<q-select
|
|
v-model="selectedColumns"
|
|
:options="allColumnsComputed"
|
|
label="Colonne da visualizzare"
|
|
multiple
|
|
filled
|
|
dense
|
|
class="float-right"
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
option-value="name"
|
|
option-label="label"
|
|
style="max-width: 200px"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="settings" />
|
|
</template>
|
|
</q-select>
|
|
<q-dialog v-model="showDialogExport">
|
|
<q-card style="min-width: 400px">
|
|
<q-card-section>
|
|
<div class="text-h6">Esporta {{ title }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
<q-markup-table
|
|
separator="cell"
|
|
flat
|
|
bordered
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="text-left"
|
|
style="width: 30px"
|
|
>
|
|
Sel
|
|
</th>
|
|
<th class="text-left">Colonna</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(col, idx) in allColumnsToExported"
|
|
:key="idx"
|
|
>
|
|
<td class="text-left">
|
|
<q-checkbox
|
|
v-model="selectedExportColumns"
|
|
:val="col.name"
|
|
/>
|
|
</td>
|
|
<td class="text-left">{{ col.label }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</q-markup-table>
|
|
</q-card-section>
|
|
<q-card-actions
|
|
align="right"
|
|
class="text-primary"
|
|
>
|
|
<q-btn
|
|
flat
|
|
label="Annulla"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
@click="exportToXLSAfterCSV(title, selectedExportColumns)"
|
|
color="primary"
|
|
icon="fas fa-file-excel"
|
|
label="Esporta in Excel"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
@click="exportToCSV(title, selectedExportColumns)"
|
|
color="primary"
|
|
icon="fas fa-file-csv"
|
|
label="Esporta in CSV"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="showDialogImport">
|
|
<q-card style="min-width: 800px">
|
|
<q-card-section>
|
|
<div class="text-h6">Importa su {{ title }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
<q-markup-table
|
|
separator="cell"
|
|
flat
|
|
bordered
|
|
>
|
|
<CImportListaTitoli @addArrayTitlesToList="addArrayTitlesToList"></CImportListaTitoli>
|
|
</q-markup-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-btn
|
|
color="positive"
|
|
icon="archive"
|
|
label="Esporta Lista"
|
|
flat
|
|
dense
|
|
@click="showDialogExport = true"
|
|
/>
|
|
<q-btn
|
|
v-if="tools.isLogged() && canadd && tools.isCollaboratore()"
|
|
color="accent"
|
|
icon="fas fa-file-import"
|
|
label="Importa da XLS"
|
|
flat
|
|
dense
|
|
@click="showDialogImport = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabella Prodotti -->
|
|
<table>
|
|
<!-- Intestazioni (Thead) -->
|
|
<thead>
|
|
<tr>
|
|
<template v-for="col in allColumnsComputed">
|
|
<th
|
|
v-if="isColumnVisible(col.name)"
|
|
:key="col.name"
|
|
@click="isSortable(col.name) ? sortTable(col.name) : ''"
|
|
:style="{
|
|
'background-color': sortAttribute === col.name ? 'yellow' : '',
|
|
}"
|
|
>
|
|
<span>{{ col.label }}</span>
|
|
<span v-if="isSortable(col.name)">
|
|
<q-icon
|
|
v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
|
|
:name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
|
|
size="36px"
|
|
class="q-ml-xs"
|
|
/>
|
|
<q-icon
|
|
v-else-if="optcatalogo.showListaArgomenti"
|
|
:name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
|
|
size="24px"
|
|
class="q-ml-xs"
|
|
/>
|
|
</span>
|
|
</th>
|
|
</template>
|
|
</tr>
|
|
</thead>
|
|
<!-- Corpo della Tabella (Tbody) -->
|
|
<draggable
|
|
v-if="!loading"
|
|
:model-value="internalProducts"
|
|
tag="tbody"
|
|
handle=".drag-handle"
|
|
item-key="_id"
|
|
@end="onDragEnd"
|
|
@update:modelValue="handleUpdate"
|
|
>
|
|
<template #item="{ element }">
|
|
<tr
|
|
:key="element._id"
|
|
:class="{
|
|
'bg-grey-3': internalProducts.indexOf(element) % 2 === 1,
|
|
}"
|
|
>
|
|
<template
|
|
v-for="field in allColumnsComputed"
|
|
:key="field.name"
|
|
>
|
|
<!-- Icona Drag Handle -->
|
|
<td v-if="field.name === 'pos' && isColumnVisible('pos')">
|
|
<div class="row justify-center">
|
|
<span class="q-ma-sm"
|
|
>{{
|
|
// put index in the first column
|
|
internalProducts.indexOf(element) + 1
|
|
}}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td
|
|
v-else-if="field.name === 'drag' && isColumnVisible('drag')"
|
|
class="drag-handle"
|
|
>
|
|
<q-icon
|
|
name="drag_handle"
|
|
size="32px"
|
|
color="primary"
|
|
/>
|
|
</td>
|
|
<td v-else-if="field.name === 'edit' && isColumnVisible('edit')">
|
|
<span
|
|
v-if="!tools.isUtente()"
|
|
class="justify-center"
|
|
>
|
|
<q-btn
|
|
flat
|
|
rounded
|
|
outline
|
|
size="sm"
|
|
icon="edit"
|
|
@click="modifyProduct(element)"
|
|
v-close-popup
|
|
class="custom-flat-button"
|
|
/>
|
|
</span>
|
|
</td>
|
|
<td v-else-if="field.name === 'addtocart' && isColumnVisible('addtocart')">
|
|
<q-btn
|
|
icon-right="fas fa-cart-plus"
|
|
color="positive"
|
|
rounded
|
|
dense
|
|
size="sm"
|
|
:label="
|
|
t('products.addcart', {
|
|
qta: ProductStore.qtaNextAdd(element.myorder, element),
|
|
})
|
|
"
|
|
@click="addtoCart(element, true)"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="ProductStore.enableSubQty(element.myorder)"
|
|
icon-right="fas fa-cart-arrow-down"
|
|
color="negative"
|
|
rounded
|
|
dense
|
|
size="sm"
|
|
:label="
|
|
t('products.subcart', {
|
|
qta: ProductStore.qtaNextSub(element.myorder, element),
|
|
})
|
|
"
|
|
@click="addtoCart(element, false)"
|
|
>
|
|
</q-btn>
|
|
</td>
|
|
<td
|
|
v-else-if="
|
|
field.name === 'addtolist' &&
|
|
isColumnVisible('addtolist') &&
|
|
isElementVisible('addtolist', element)
|
|
"
|
|
>
|
|
<q-btn
|
|
icon="fas fa-plus"
|
|
color="primary"
|
|
rounded
|
|
dense
|
|
size="sm"
|
|
@click="addtolist(element)"
|
|
>
|
|
</q-btn>
|
|
</td>
|
|
|
|
<!-- Immagine Piccola -->
|
|
<td v-else-if="field.name === 'image' && isColumnVisible('image')">
|
|
<q-img
|
|
:src="
|
|
getImageByElement(element)
|
|
? tools.getFullFileNameByImageFile(
|
|
table,
|
|
getImageByElement(element),
|
|
element._id
|
|
)
|
|
: element.productInfo?.image_link
|
|
"
|
|
style="width: 50px; height: 50px"
|
|
class="rounded-borders cursor-pointer"
|
|
@click="showProduct(element)"
|
|
/>
|
|
</td>
|
|
|
|
<td
|
|
v-else-if="isColumnVisible(field.name)"
|
|
:class="getFieldClass(element, field)"
|
|
:style="getFieldStyle(element, field)"
|
|
@click="getFieldClick(element, field)?.()"
|
|
>
|
|
<span v-html="getFieldValue(element, field)"></span>
|
|
</td>
|
|
<!-- Azioni -->
|
|
<td
|
|
v-else-if="field.name === 'actions' && isColumnVisible('actions', true)"
|
|
>
|
|
<q-btn-dropdown
|
|
label="Azioni"
|
|
color="primary"
|
|
flat
|
|
>
|
|
<q-list>
|
|
<q-item
|
|
v-if="isVisibleEditBtn"
|
|
clickable
|
|
v-close-popup
|
|
@click="modifyProduct(element)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="edit"
|
|
size="20px"
|
|
class="q-mr-xs"
|
|
/>
|
|
Scheda
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="removeProduct(element)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="delete"
|
|
size="20px"
|
|
class="q-mr-xs"
|
|
/>
|
|
Elimina
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</td>
|
|
</template>
|
|
</tr></template
|
|
>
|
|
>
|
|
</draggable>
|
|
</table>
|
|
</div>
|
|
<CMyDialog
|
|
v-model="showProd"
|
|
title="Prodotto"
|
|
class="q-ma-md"
|
|
>
|
|
<CSearchProduct
|
|
:idprodtoshow="selProd?._id"
|
|
nameLinkTemplate="SEARCH_Prima"
|
|
@updateproductmodif="updateproductmodif"
|
|
table="products"
|
|
>
|
|
</CSearchProduct>
|
|
</CMyDialog>
|
|
<q-dialog
|
|
v-if="selProd && modifTrafiletto"
|
|
v-model="modifTrafiletto"
|
|
maximized
|
|
>
|
|
<CModifTrafiletto
|
|
v-model="selProd"
|
|
titolo="Sinossi"
|
|
table="products"
|
|
mykey="productInfo"
|
|
mysubkey="descr_trafiletto_catalogo"
|
|
:canModify="true"
|
|
:type="costanti.FieldType.editor_nohtml"
|
|
@updateproductmodif="updateproductmodif"
|
|
@close="modifTrafiletto = false"
|
|
:maxlength="680"
|
|
>
|
|
</CModifTrafiletto>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-model="modifOn"
|
|
maximized
|
|
>
|
|
<q-spinner
|
|
v-if="loading"
|
|
color="primary"
|
|
size="3em"
|
|
:thickness="2"
|
|
/>
|
|
|
|
<div v-if="!!selProd && !!selProd.productInfo">
|
|
<CSchedaProdotto
|
|
v-model="selProd"
|
|
@updateproductmodif="updateproductmodif"
|
|
>
|
|
</CSchedaProdotto>
|
|
</div>
|
|
</q-dialog>
|
|
<q-dialog
|
|
v-if="visufromgm"
|
|
v-model="visufromgm"
|
|
@hide="visufromgm = false"
|
|
>
|
|
<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">
|
|
<q-spinner
|
|
v-if="loading"
|
|
color="primary"
|
|
size="3em"
|
|
:thickness="2"
|
|
/>
|
|
|
|
<div v-if="visufromgm && selProd">
|
|
<CViewTable
|
|
:options="{
|
|
nameTable: 'T_Web_Articoli',
|
|
campispeciali: true,
|
|
numrec: 1,
|
|
where:
|
|
'T.IdArticolo =' +
|
|
selProd.productInfo.sku +
|
|
' AND T.DataPubblicazione IS NOT NULL ORDER BY T.DataOra DESC;',
|
|
showQtaDisponibile,
|
|
outhtml: true,
|
|
}"
|
|
>
|
|
</CViewTable>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-dialog
|
|
v-if="updatefromgm && selProd"
|
|
v-model="updatefromgm"
|
|
@hide="updatefromgm = false"
|
|
>
|
|
<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>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CProductTable.ts"></script>
|
|
<style lang="scss" scoped>
|
|
@import './CProductTable.scss';
|
|
</style>
|