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

- generato lista libri, con possibilità di cambiare l'ordinamento dei libri o di cancellare libri.

Browse Source
This commit is contained in:
Surya Paolo
2025-04-01 18:36:45 +02:00
parent 61c1dc3d0d
commit 79d1c5fe1d
15 changed files with 507 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,13 +5,21 @@ import { tools } from '@tools'
import { useGlobalStore } from '@src/store/globalStore'
import { CSearchProduct } from '@src/components/CSearchProduct'
import { CMyDialog } from '@src/components/CMyDialog'
import { costanti } from '@costanti'
import { IAuthor, ICatProd } from "app/src/model";
import type {
IProduct
} from '@src/model';
export default defineComponent({
name: "CProductTable",
components: {
draggable,
draggable, CSearchProduct, CMyDialog,
},
props: {
lista_prodotti: {
@@ -26,6 +34,9 @@ export default defineComponent({
const globalStore = useGlobalStore()
const showProd = ref(false)
const selProd = ref(<IProduct>{})
async function mounted() {
}
@@ -40,20 +51,28 @@ export default defineComponent({
// Colonne della tabella
const allColumns = [
{ name: "drag", label: "", field: "", align: "left", style: "width: 50px" },
{ name: "image", label: "Immagine", field: "image", align: "center" },
{ name: "title", label: "Titolo", field: "title", align: "left" },
{ name: "author", label: "Autore", field: "author", align: "left" },
{ name: "topic", label: "Argomento", field: "topic", align: "left" },
{ name: "drag", label: "Ordinamento", field: "", align: "left", style: "width: 50px" },
{ name: "image", label: "Copertina", field: "image", align: "center" },
{ name: "name", label: "Titolo", field: "name", align: "left" },
{ name: "authors", label: "Autore", field: "authors", align: "left" },
{ name: "catprods", label: "Argomento", field: "catprods", align: "left" },
{ name: "quantity", label: "Disponibilità", field: "quantity", align: "left" },
{ name: "isbn", label: "ISBN", field: "isbn", align: "left" },
{ name: "actions", label: "Azioni", field: "", align: "center" },
];
const selectedColumns = ref(
tools.getCookie("selColCat")
? JSON.parse(tools.getCookie("selColCat"))
: ["drag", "image", "name", "authors", "catprods", "isbn", "actions"] // Valori di default
)
let cookieValue: string | null = null;
try {
cookieValue = tools.getCookie("selColCat");
// Se il cookie esiste e contiene una stringa JSON valida
cookieValue = cookieValue ? cookieValue : [];
} catch (error) {
console.error("Errore durante la lettura del cookie 'selColCat'", error);
cookieValue = []; // In caso di errore, inizializza come array vuoto
}
const selectedColumns = ref(cookieValue.length > 0 ? cookieValue : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"]);
// 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
const isColumnVisible = (column) => {
@@ -96,7 +115,7 @@ export default defineComponent({
function formatCatProds(catprods: ICatProd[] | undefined | null): string {
if (!catprods || !Array.isArray(catprods)) {
return "";
return "";
}
// Estrai il nome e il cognome di ogni autore e uniscili con ', '
@@ -110,10 +129,16 @@ export default defineComponent({
onMounted(() => {
const savedColumns = tools.getCookie("selColCat");
if (savedColumns) {
selectedColumns.value = JSON.parse(savedColumns);
selectedColumns.value = savedColumns;
}
});
function showProduct(element: any) {
selProd.value = element
showProd.value = true
}
return {
allColumns,
selectedColumns,
@@ -126,6 +151,9 @@ export default defineComponent({
globalStore,
costanti,
onDragEnd,
showProduct,
showProd,
selProd,
}
},
})

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

@@ -9,6 +9,8 @@
multiple
emit-value
map-options
option-value="name"
option-label="label"
filled
style="max-width: 400px"
/>
@@ -19,13 +21,14 @@
<!-- Intestazioni (Thead) -->
<thead>
<tr>
<th v-if="isColumnVisible('drag')">Drag</th>
<th v-if="isColumnVisible('image')">Immagine</th>
<th v-if="isColumnVisible('name')">Nome</th>
<th v-if="isColumnVisible('authors')">Autore</th>
<th v-if="isColumnVisible('catprods')">Argomento</th>
<th v-if="isColumnVisible('isbn')">ISBN</th>
<th v-if="isColumnVisible('actions')">Azioni</th>
<template v-for="col in allColumns">
<th
v-if="isColumnVisible(col.name)"
:key="col.name"
>
{{ col.label }}
</th>
</template>
</tr>
</thead>
<!-- Corpo della Tabella (Tbody) -->
@@ -39,8 +42,15 @@
<template #item="{ element }">
<tr :key="element._id">
<!-- Icona Drag Handle -->
<td v-if="isColumnVisible('drag')" class="drag-handle">
<q-icon name="drag_handle" size="32px" color="primary" />
<td
v-if="isColumnVisible('drag')"
class="drag-handle"
>
<q-icon
name="drag_handle"
size="32px"
color="primary"
/>
</td>
<!-- Immagine Piccola -->
@@ -52,7 +62,8 @@
: element.productInfo?.image_link
"
style="width: 50px; height: 50px"
class="rounded-borders"
class="rounded-borders cursor-pointer"
@click="showProduct(element)"
/>
</td>
@@ -65,14 +76,25 @@
<!-- Argomento -->
<td v-if="isColumnVisible('catprods')">{{ formatCatProds(element.productInfo?.catprods) }}</td>
<!-- Quantità -->
<td v-if="isColumnVisible('quantity')">{{ element.arrvariazioni[0].quantita }}</td>
<!-- ISBN -->
<td v-if="isColumnVisible('isbn')">{{ element.isbn }}</td>
<!-- Azioni -->
<td v-if="isColumnVisible('actions')">
<q-btn-dropdown label="Azioni" color="primary" flat>
<q-btn-dropdown
label="Azioni"
color="primary"
flat
>
<q-list>
<q-item clickable v-close-popup @click="removeProduct(element)">
<q-item
clickable
v-close-popup
@click="removeProduct(element)"
>
<q-item-section>
<q-item-label>Elimina</q-item-label>
</q-item-section>
@@ -85,9 +107,15 @@
</draggable>
</table>
</div>
<CMyDialog
v-model="showProd"
title="Prodotto"
class="q-ma-md"
>
<CSearchProduct v-if="selProd" :idprodtoshow="selProd._id" nameLinkTemplate="SEARCH_Prima"> </CSearchProduct>
</CMyDialog>
</template>
<script lang="ts" src="./CProductTable.ts"></script>
<style lang="scss" scoped>
@import './CProductTable.scss';