100 lines
2.3 KiB
TypeScript
100 lines
2.3 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 { Button } from "~/components/ui/button";
|
|
import type { Flags } from "~/schemas/public/Flags";
|
|
export const FlagsTable = (props: {
|
|
data: Flags[];
|
|
setOpenEdit: (status: boolean) => void;
|
|
setEditData: (data: Flags | null) => void;
|
|
}) => {
|
|
const { data, setOpenEdit, setEditData } = props;
|
|
|
|
const tabledata = data.map((row) => {
|
|
return {
|
|
actions: "Azioni",
|
|
id: row.id,
|
|
value: row.value,
|
|
};
|
|
});
|
|
|
|
const columns_titles = {
|
|
actions: "Azioni",
|
|
id: "Codice",
|
|
value: "Valore",
|
|
};
|
|
type Column = (typeof tabledata)[number];
|
|
|
|
const columns: ColumnDef<Column>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={columns_titles.id} />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "value",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return data.value ? (
|
|
<span className="text-success">Vero</span>
|
|
) : (
|
|
<span>Falso</span>
|
|
);
|
|
},
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={columns_titles.value} />
|
|
),
|
|
},
|
|
|
|
{
|
|
accessorKey: "actions",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return (
|
|
<Button
|
|
aria-label="Modifica Flag"
|
|
onClick={() => {
|
|
setEditData({
|
|
id: data.id,
|
|
value: data.value,
|
|
});
|
|
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: "id",
|
|
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>
|
|
);
|
|
};
|