surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- aggiornamento lista catalogo, ordinamento tabelle

Browse Source
This commit is contained in:
Surya Paolo
2025-05-08 11:06:01 +02:00
parent 82e10ef6cf
commit ef36cd5e11
5 changed files with 165 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/CProductTable/CProductTable.ts
View File

@@ -106,6 +106,19 @@ export default defineComponent({
selectedColumns.value = savedColumns;
}
const savedSortAttribute = tools.getCookie("sortAttr");
if (savedSortAttribute) {
if (isColumnVisible(savedSortAttribute)) {
sortAttribute.value = savedSortAttribute;
const savedSortDir = tools.getCookie("sortDir");
if (savedSortDir) {
sortDirection.value = savedSortDir;
}
}
}
loading.value = false
}
@@ -119,11 +132,12 @@ export default defineComponent({
// Colonne della tabella
const allColumns = [
{ name: "pos", label: "Ind", field: "pos", align: "left", style: "width: 50px" },
{ name: "drag", label: "Ord", field: "", align: "left", style: "width: 50px", edit: true, noexp: true },
{ name: "validato", label: "Val", field: "validato", align: "left", style: "" },
{ name: "image", label: "Foto", field: "image", align: "center", noexp: true },
{ name: "name", label: "Titolo del Libro", field: "name", align: "left" },
{ name: "pos", label: "Ind", field: "pos", align: "left", style: "width: 50px", notsortable: true },
{ name: "drag", label: "Ord", field: "", align: "left", style: "width: 50px", edit: true, noexp: true, notsortable: true },
{ name: "validato", label: "Val", field: "validato", align: "left", style: "", },
{ name: "image", label: "Foto", field: "image", align: "center", noexp: true, notsortable: true },
{ name: "name", label: "Titolo", field: "name", align: "left" },
{ name: "sottotitolo", label: "Sottotitolo", field: "sottotitolo", align: "left" },
{ name: "authors", label: "Autore", field: "authors", align: "left" },
{ name: "isbn", label: "ISBN", field: "isbn", align: "left" },
{ name: "trafiletto", label: "Sinossi", field: "trafiletto", align: "left" },
@@ -150,7 +164,7 @@ export default defineComponent({
{ name: "totFat", label: "Fat 5A", field: "totFat", align: "right", visu: costanti.VISUCAMPI.PER_EDITORE },
{ name: "ult_ord", label: "Ult. Ordine", field: "ult_ord", align: "left", visu: costanti.VISUCAMPI.PER_EDITORE },
{ name: "quantity", label: "Magazz.", field: "quantity", align: "right", visu: costanti.VISUCAMPI.PER_EDITORE },
{ name: "actions", label: "Azioni", field: "", align: "center", visu: costanti.VISUCAMPI.PER_EDITORE, noexp: true },
{ name: "actions", label: "Azioni", field: "", align: "center", visu: costanti.VISUCAMPI.PER_EDITORE, noexp: true, notsortable: true },
];
function getFieldValue(element: any, field: any): any {
@@ -167,6 +181,9 @@ export default defineComponent({
case 'name':
return element.productInfo?.name;
case 'sottotitolo':
return element.productInfo?.sottotitolo;
case 'authors':
return formatAuthors(element.productInfo?.authors);
@@ -240,7 +257,10 @@ export default defineComponent({
return tools.getstrDate(element.productInfo?.dataUltimoOrdine);
case 'quantity':
return element.arrvariazioni?.[0]?.quantita;
if (tools.isUtente())
return tools.getDescrQuantitàByQuantity(element.arrvariazioni?.[0]?.quantita);
else
return element.arrvariazioni?.[0]?.quantita;
default:
return null;
@@ -351,12 +371,13 @@ export default defineComponent({
}
}
let cookieValue: [] | null = null;
let keyvalue = 'selColCat_2'
if (tools.isUtente())
keyvalue += '_utente'
try {
cookieValue = tools.getCookie("selColCat_2");
cookieValue = tools.getCookie(keyvalue);
// Se il cookie esiste e contiene una stringa JSON valida
cookieValue = cookieValue ? cookieValue : [];
} catch (error) {
@@ -364,8 +385,19 @@ export default defineComponent({
cookieValue = []; // In caso di errore, inizializza come array vuoto
}
const selectedColumns = ref(cookieValue.length > 0 ? cookieValue : ["pos", "drag", "validato", "image", "name", "authors", "isbn", "catprods", "stato", "date_pub", "pagine", "trafiletto", "fatLast1Y", "quantity", "actions"]);
const selectedColumns_Editori = ref(cookieValue.length > 0 ? cookieValue : ["pos", "drag", "validato", "image", "name", "authors", "isbn", "catprods", "stato", "date_pub", "pagine", "trafiletto", "fatLast1Y", "quantity", "actions"]);
const selectedColumns_Utenti = ref(cookieValue.length > 0 ? cookieValue : ["pos", "image", "name", "authors", "isbn", "catprods", "stato", "date_pub", "pagine", "trafiletto", "quantity"]);
const selectedColumns = computed({
get: () => tools.isUtente() ? selectedColumns_Utenti.value : selectedColumns_Editori.value,
set: (value) => {
if (tools.isUtente()) {
selectedColumns_Utenti.value = value;
} else {
selectedColumns_Editori.value = value;
}
}
});
// 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
const isColumnVisible = (column, real?: boolean) => {
@@ -402,6 +434,15 @@ export default defineComponent({
saveSelectedColumns();
});
watch(() => sortAttribute.value, (newVal) => {
tools.setCookie("sortAttr", newVal);
});
watch(() => sortDirection.value, (newVal) => {
tools.setCookie("sortDir", newVal);
});
// Funzione chiamata alla fine del drag-and-drop
const onDragEnd = () => {
// console.log("Nuovo ordine:", internalProducts.value);
@@ -504,6 +545,11 @@ export default defineComponent({
if (aVal instanceof Date && bVal instanceof Date) {
return sortDirection.value === 1 ? aVal.getTime() - bVal.getTime() : bVal.getTime() - aVal.getTime();
}
if (typeof aVal === 'string' && typeof bVal === 'string' && aVal.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/) && bVal.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)) {
const aDate = new Date(aVal.split('/').reverse().join('-'));
const bDate = new Date(bVal.split('/').reverse().join('-'));
return sortDirection.value === 1 ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime();
}
if (typeof aVal === 'number' && typeof bVal === 'number') {
return sortDirection.value === 1 ? aVal - bVal : bVal - aVal;
}
@@ -529,13 +575,13 @@ export default defineComponent({
case 'stato':
return () => {
// esempio: mostra dettagli dello stato
console.log('Stato prodotto:', element.productInfo?.idStatoProdotto);
// console.log('Stato prodotto:', element.productInfo?.idStatoProdotto);
};
case 'quantity':
return () => {
// esempio: mostra log disponibilità
console.log('Quantità disponibile:', element.arrvariazioni?.[0]?.quantita);
// console.log('Quantità disponibile:', element.arrvariazioni?.[0]?.quantita);
};
default:
@@ -574,6 +620,9 @@ export default defineComponent({
}
function isSortable(field: string) : boolean {
return allColumns && !allColumns.find((col) => col.name === field)?.notsortable;
}
onMounted(mounted)
@@ -615,6 +664,7 @@ export default defineComponent({
getFieldClick,
handleUpdate,
exportToCSV,
isSortable,
}
}
})

98
src/components/CProductTable/CProductTable.vue
View File

@@ -1,39 +1,40 @@
<template>
<div>
<!-- Selezione Colonne -->
<div class="q-mb-md">
<q-select
v-model="selectedColumns"
:options="allColumns"
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-btn
class="q-ml-md float-right"
flat
outline
color="primary"
icon="archive"
label="Esporta Lista"
@click="exportToCSV"
/>
</div>
<div class="row justify-center q-mx-auto q-pt-sm text-italic">
{{ internalProducts?.length }} elementi nella lista
<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="q-mb-md text-right">
<q-select
v-model="selectedColumns"
:options="allColumns"
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-btn
class="q-ml-md float-right"
flat
outline
color="primary"
icon="archive"
label="Esporta Lista"
@click="exportToCSV"
/>
</div>
</div>
<!-- Tabella Prodotti -->
@@ -45,21 +46,24 @@
<th
v-if="isColumnVisible(col.name)"
:key="col.name"
@click="sortTable(col.name)"
@click="isSortable(col.name) ? sortTable(col.name) : ''"
:style="{ 'background-color': sortAttribute === col.name ? 'yellow' : '' }"
>
{{ col.label }}
<q-icon
v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
:name="sortDirection === 1 ? 'arrow_drop_up' : 'arrow_drop_down'"
size="16px"
class="q-ml-xs"
/>
<q-icon
v-else-if="optcatalogo.showListaArgomenti"
name="arrow_drop_up"
size="16px"
class="q-ml-xs"
/>
<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>