Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: update AnnunciTable to enhance actions and filter functionality

Browse source
This commit is contained in:
Marco Pedone 2025-08-29 16:22:54 +02:00
parent 5755b00d7b
commit bc92368abc
1 changed files with 93 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
apps/infoalloggi/src/components/tables/annunci-tables.tsx
View file

@ -1,9 +1,12 @@
import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react";
import { Wrench } from "lucide-react";
import Link from "next/link";
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 type {
PinnedFiltro,
SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import { StatusBadge } from "~/pages/area-riservata/admin/edit-annuncio/[id]";
import type { Annunci } from "~/schemas/public/Annunci";
@ -17,78 +20,30 @@ export const AnnunciTable = ({
}) => {
const tabledata = data.map((row) => {
return {
id: row.id,
actions: "Azioni",
codice: row.codice,
titolo_it: row.titolo_it,
comune: row.comune,
tipo: row.tipo,
id: row.id,
locatore: row.locatore,
stato: row.stato,
actions: "Azioni",
tipo: row.tipo,
titolo_it: row.titolo_it,
};
});
const columns_titles = {
actions: "Azioni",
codice: "Codice",
titolo_it: "Titolo",
comune: "Comune",
tipo: "Tipo",
locatore: "Locatore",
stato: "Stato",
actions: "Azioni",
tipo: "Tipo",
titolo_it: "Titolo",
};
type Column = (typeof tabledata)[number];
const columns: ColumnDef<Column>[] = [
{
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.codice} />
),
accessorKey: "codice",
},
{
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={columns_titles.titolo_it}
/>
),
accessorKey: "titolo_it",
},
{
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.comune} />
),
accessorKey: "comune",
},
{
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.tipo} />
),
accessorKey: "tipo",
},
{
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={columns_titles.locatore}
/>
),
accessorKey: "locatore",
},
{
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.stato} />
),
cell: ({ row }) => {
return <StatusBadge status={row.original.stato} />;
},
accessorKey: "stato",
},
{
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.actions} />
),
accessorKey: "actions",
cell: ({ row }) => {
return (
<Link
@ -96,15 +51,66 @@ export const AnnunciTable = ({
href={`/area-riservata/admin/edit-annuncio/${row.original.id}`}
target="_blank"
>
<Button className="flex items-center gap-2 px-2" variant="ghost">
<Cog />
<Button
className="flex items-center gap-2 px-2"
size="sm"
variant="default"
>
<Wrench />
</Button>
</Link>
);
},
accessorKey: "actions",
enableHiding: false,
enableSorting: false,
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.actions} />
),
},
{
accessorKey: "codice",
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.codice} />
),
},
{
accessorKey: "stato",
cell: ({ row }) => {
return <StatusBadge status={row.original.stato} />;
},
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.stato} />
),
},
{
accessorKey: "titolo_it",
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={columns_titles.titolo_it}
/>
),
},
{
accessorKey: "comune",
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.comune} />
),
},
{
accessorKey: "tipo",
header: ({ column }) => (
<DataTableColumnHeader column={column} title={columns_titles.tipo} />
),
},
{
accessorKey: "locatore",
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={columns_titles.locatore}
/>
),
},
];
@ -112,15 +118,38 @@ export const AnnunciTable = ({
columnName: "codice",
placeholder: "Filtra codice...",
};
const pinnedFiltri: PinnedFiltro[] = [
{
columnName: "stato",
options: [
{ label: "Attivo", value: "Attivo" },
{
label: "Sospeso",
value: "Sospeso",
},
{
label: "Trattativa",
value: "Trattativa",
},
],
title: "Stato",
},
];
return (
<div className="mx-auto w-full px-2 py-5">
<DataTable
columns={columns}
data={tabledata}
pinnedFiltri={undefined}
searchColumn={searchFiltro}
columns_titles={columns_titles}
data={tabledata}
defaultFilterState={[
{
id: "stato",
value: ["Attivo"],
},
]}
defaultSort={[{ desc: true, id: "codice" }]}
pinnedFiltri={pinnedFiltri}
searchColumn={searchFiltro}
/>
</div>
);