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