- risolto problema spazi vuoti in cima alla app
- risolto problema sulle card di telegram, immagini non alte uguali e non si vedono bene...
This commit is contained in:
Surya Paolo
@@ -1,34 +1,70 @@
|
||||
.drag-handle {
|
||||
cursor: grab; /* Mostra la manina */
|
||||
}
|
||||
|
||||
.drag-handle:active {
|
||||
cursor: grabbing; /* Cambia la manina quando l'utente sta trascinando */
|
||||
}
|
||||
cursor: grab;
|
||||
/* Mostra la manina */
|
||||
}
|
||||
|
||||
.etichetta{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 1.15rem;
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
/* Cambia la manina quando l'utente sta trascinando */
|
||||
}
|
||||
|
||||
.etichetta {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.boxtitleval {
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.custom-flat-button {
|
||||
border: 1px solid #0078D4;
|
||||
/* Colore del bordo */
|
||||
background-color: transparent;
|
||||
/* Rendi il background trasparente */
|
||||
color: #0078D4;
|
||||
/* Colore dell'icona e del testo */
|
||||
}
|
||||
|
||||
.custom-flat-button:hover {
|
||||
background-color: rgba(0, 120, 212, 0.1);
|
||||
/* Aggiungi un colore di hover, se desideri */
|
||||
border-color: #005A8C;
|
||||
/* Colore del bordo al passaggio del mouse */
|
||||
}
|
||||
|
||||
|
||||
/* Stili per la vista responsiva */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.responsive-table {
|
||||
min-width: 800px;
|
||||
/* Imposta una larghezza minima per la tabella */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-left: 4px solid $primary;
|
||||
}
|
||||
|
||||
/* Breakpoint personalizzati se necessario */
|
||||
@media (max-width: 599px) {
|
||||
.table-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.boxtitleval{
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.lt-md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.custom-flat-button {
|
||||
border: 1px solid #0078D4; /* Colore del bordo */
|
||||
background-color: transparent; /* Rendi il background trasparente */
|
||||
color: #0078D4; /* Colore dell'icona e del testo */
|
||||
}
|
||||
|
||||
.custom-flat-button:hover {
|
||||
background-color: rgba(0, 120, 212, 0.1); /* Aggiungi un colore di hover, se desideri */
|
||||
border-color: #005A8C; /* Colore del bordo al passaggio del mouse */
|
||||
}
|
||||
|
||||
}
|
||||
@@ -24,7 +24,7 @@
|
||||
Lista filtrata con il termine "{{ searchText }}"
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-mb-md text-right">
|
||||
<div class="q-mb-md text-right full-width">
|
||||
<q-select
|
||||
v-model="selectedColumns"
|
||||
:options="allColumnsComputed"
|
||||
@@ -147,225 +147,393 @@
|
||||
</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) -->
|
||||
<!-- Vista Mobile: Cards -->
|
||||
<div class="lt-md q-pa-md">
|
||||
<draggable
|
||||
v-if="!loading"
|
||||
:model-value="internalProducts"
|
||||
tag="tbody"
|
||||
tag="div"
|
||||
handle=".drag-handle"
|
||||
item-key="_id"
|
||||
@end="onDragEnd"
|
||||
@update:modelValue="handleUpdate"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<tr
|
||||
<template #item="{ element, index }">
|
||||
<q-card
|
||||
:key="element._id"
|
||||
:class="{
|
||||
'bg-grey-3': internalProducts.indexOf(element) % 2 === 1,
|
||||
}"
|
||||
class="q-mb-md product-card"
|
||||
flat
|
||||
bordered
|
||||
>
|
||||
<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>
|
||||
<q-card-section class="row items-center q-pa-sm bg-grey-2">
|
||||
<div class="col">
|
||||
<div class="text-weight-bold">
|
||||
#{{ index + 1 }} - {{ getFieldValue(element, { name: 'title' }) || 'Prodotto' }}
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
v-else-if="field.name === 'drag' && isColumnVisible('drag')"
|
||||
class="drag-handle"
|
||||
>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-icon
|
||||
v-if="isColumnVisible('drag')"
|
||||
name="drag_handle"
|
||||
size="32px"
|
||||
size="24px"
|
||||
color="primary"
|
||||
class="drag-handle cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
<td v-else-if="field.name === 'edit' && isColumnVisible('edit')">
|
||||
<span
|
||||
v-if="!tools.isUtente()"
|
||||
class="justify-center"
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<!-- Immagine -->
|
||||
<div
|
||||
v-if="isColumnVisible('image')"
|
||||
class="col-12 col-sm-4 text-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
rounded
|
||||
outline
|
||||
size="sm"
|
||||
icon="edit"
|
||||
@click="modifyProduct(element)"
|
||||
<q-img
|
||||
:src="
|
||||
getImageByElement(element)
|
||||
? tools.getFullFileNameByImageFile(
|
||||
table,
|
||||
getImageByElement(element),
|
||||
element._id
|
||||
)
|
||||
: element.productInfo?.image_link
|
||||
"
|
||||
style="max-width: 150px; max-height: 150px"
|
||||
class="rounded-borders cursor-pointer q-mx-auto"
|
||||
@click="showProduct(element)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Dati Prodotto -->
|
||||
<div class="col-12 col-sm-8">
|
||||
<template v-for="field in allColumnsComputed" :key="field.name">
|
||||
<div
|
||||
v-if="
|
||||
isColumnVisible(field.name) &&
|
||||
!['pos', 'drag', 'image', 'edit', 'actions', 'addtocart', 'addtolist'].includes(field.name)
|
||||
"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<div class="text-caption text-grey-7">{{ field.label }}</div>
|
||||
<div
|
||||
:class="getFieldClass(element, field)"
|
||||
@click="getFieldClick(element, field)?.()"
|
||||
v-html="getFieldValue(element, field)"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<!-- Azioni Card -->
|
||||
<q-card-actions class="q-pa-sm">
|
||||
<q-btn
|
||||
v-if="!tools.isUtente() && isColumnVisible('edit')"
|
||||
flat
|
||||
dense
|
||||
icon="edit"
|
||||
label="Modifica"
|
||||
@click="modifyProduct(element)"
|
||||
color="primary"
|
||||
/>
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="isColumnVisible('addtocart')"
|
||||
dense
|
||||
icon-right="fas fa-cart-plus"
|
||||
color="positive"
|
||||
:label="
|
||||
t('products.addcart', {
|
||||
qta: ProductStore.qtaNextAdd(element.myorder, element),
|
||||
})
|
||||
"
|
||||
@click="addtoCart(element, true)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="isColumnVisible('addtocart') && ProductStore.enableSubQty(element.myorder)"
|
||||
dense
|
||||
icon-right="fas fa-cart-arrow-down"
|
||||
color="negative"
|
||||
:label="
|
||||
t('products.subcart', {
|
||||
qta: ProductStore.qtaNextSub(element.myorder, element),
|
||||
})
|
||||
"
|
||||
@click="addtoCart(element, false)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="isColumnVisible('addtolist') && isElementVisible('addtolist', element)"
|
||||
dense
|
||||
icon="fas fa-plus"
|
||||
color="primary"
|
||||
@click="addtolist(element)"
|
||||
/>
|
||||
<q-btn-dropdown
|
||||
v-if="isColumnVisible('actions', true)"
|
||||
dense
|
||||
flat
|
||||
icon="more_vert"
|
||||
color="primary"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-if="isVisibleEditBtn"
|
||||
clickable
|
||||
v-close-popup
|
||||
class="custom-flat-button"
|
||||
@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>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- Vista Desktop/Tablet: Tabella con Scroll Orizzontale -->
|
||||
<div class="gt-sm table-container">
|
||||
<table class="responsive-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>
|
||||
</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>
|
||||
</th>
|
||||
</template>
|
||||
</tr></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"
|
||||
>
|
||||
>
|
||||
</draggable>
|
||||
</table>
|
||||
<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"
|
||||
>{{
|
||||
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>
|
||||
</div>
|
||||
<CMyDialog
|
||||
v-model="showProd"
|
||||
|
||||
Reference in New Issue
Block a user