109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
import type { ColumnDef } from "@tanstack/react-table";
|
|
import { Cog } from "lucide-react";
|
|
import { DataTable } from "~/components/custom_ui/data-table";
|
|
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
|
|
import type { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
|
|
import { Etichetta } from "~/components/etichette";
|
|
import { Button } from "~/components/ui/button";
|
|
import type { Etichette } from "~/schemas/public/Etichette";
|
|
export const EtichetteTable = (props: {
|
|
data: Etichette[];
|
|
setOpenEdit: (status: boolean) => void;
|
|
setEditData: (data: Etichette | null) => void;
|
|
}) => {
|
|
const { data, setOpenEdit, setEditData } = props;
|
|
|
|
const tabledata = data.map((row) => {
|
|
return {
|
|
actions: "Azioni",
|
|
colore: row.color_hex,
|
|
id: row.id_etichetta,
|
|
title: row.title,
|
|
};
|
|
});
|
|
|
|
const columns_titles = {
|
|
actions: "Azioni",
|
|
etichetta: "Etichetta",
|
|
id: "Id",
|
|
};
|
|
type Column = (typeof tabledata)[number];
|
|
|
|
const columns: ColumnDef<Column>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={columns_titles.id} />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "title",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return (
|
|
<Etichetta
|
|
className="text-base"
|
|
color_hex={data.colore}
|
|
title={data.title}
|
|
/>
|
|
);
|
|
},
|
|
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader
|
|
column={column}
|
|
title={columns_titles.etichetta}
|
|
/>
|
|
),
|
|
},
|
|
|
|
{
|
|
accessorKey: "actions",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return (
|
|
<Button
|
|
aria-label="Modifica Etichetta"
|
|
onClick={() => {
|
|
setEditData({
|
|
color_hex: data.colore,
|
|
id_etichetta: data.id,
|
|
title: data.title,
|
|
});
|
|
setOpenEdit(true);
|
|
}}
|
|
variant="outline"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Cog /> Modifica
|
|
</div>
|
|
</Button>
|
|
);
|
|
},
|
|
enableHiding: false,
|
|
enableSorting: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={columns_titles.actions} />
|
|
),
|
|
},
|
|
];
|
|
|
|
const searchFiltro: SearchFiltro = {
|
|
columnName: "title",
|
|
placeholder: "Filtra codice...",
|
|
};
|
|
return (
|
|
<div className="mx-auto w-full px-2 py-10">
|
|
<DataTable
|
|
columns={columns}
|
|
columns_titles={columns_titles}
|
|
data={tabledata}
|
|
defaultSort={[{ desc: true, id: "id" }]}
|
|
pinnedFiltri={undefined}
|
|
searchColumn={searchFiltro}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|