feat: make notifications sortable
This commit is contained in:
Nicolas Meienberger
parent
27ea2caebc
commit
a558b46b0e
1 changed files with 112 additions and 41 deletions
|
|
@ -1,6 +1,18 @@
|
|||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getSortedRowModel,
|
||||
type ColumnDef,
|
||||
type ColumnFiltersState,
|
||||
type SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Bell, Plus, RotateCcw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { DataTableSortHeader } from "~/client/components/data-table-sort-header";
|
||||
import { EmptyState } from "~/client/components/empty-state";
|
||||
import { StatusDot } from "~/client/components/status-dot";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
|
|
@ -8,20 +20,47 @@ import { Card } from "~/client/components/ui/card";
|
|||
import { Input } from "~/client/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
|
||||
import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { cn } from "~/client/lib/utils";
|
||||
|
||||
export function NotificationsPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
type NotificationRow = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: "email" | "slack" | "discord" | "gotify" | "ntfy" | "pushover" | "telegram" | "custom" | "generic";
|
||||
enabled: boolean;
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("");
|
||||
setTypeFilter("");
|
||||
setStatusFilter("");
|
||||
};
|
||||
const notificationColumns: ColumnDef<NotificationRow>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => <DataTableSortHeader column={column} title="Name" sortDirection={column.getIsSorted()} />,
|
||||
cell: ({ row }) => row.original.name,
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: ({ column }) => <DataTableSortHeader column={column} title="Type" sortDirection={column.getIsSorted()} />,
|
||||
cell: ({ row }) => row.original.type,
|
||||
filterFn: (row, id, value) => row.getValue(id) === value,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => (row.enabled ? "enabled" : "disabled"),
|
||||
id: "status",
|
||||
header: ({ column }) => (
|
||||
<DataTableSortHeader column={column} title="Status" sortDirection={column.getIsSorted()} center />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<StatusDot
|
||||
variant={row.original.enabled ? "success" : "neutral"}
|
||||
label={row.original.enabled ? "Enabled" : "Disabled"}
|
||||
/>
|
||||
),
|
||||
filterFn: (row, id, value) => row.getValue(id) === value,
|
||||
},
|
||||
];
|
||||
|
||||
export function NotificationsPage() {
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -29,15 +68,24 @@ export function NotificationsPage() {
|
|||
...listNotificationDestinationsOptions(),
|
||||
});
|
||||
|
||||
const filteredNotifications = data.filter((notification) => {
|
||||
const matchesSearch = notification.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesType = !typeFilter || notification.type === typeFilter;
|
||||
const matchesStatus = !statusFilter || (statusFilter === "enabled" ? notification.enabled : !notification.enabled);
|
||||
return matchesSearch && matchesType && matchesStatus;
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns: notificationColumns,
|
||||
state: { columnFilters, sorting },
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
onSortingChange: setSorting,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
});
|
||||
|
||||
const rows = table.getRowModel().rows;
|
||||
const hasFilters = columnFilters.length > 0;
|
||||
|
||||
const clearFilters = () => table.resetColumnFilters();
|
||||
|
||||
const hasNoNotifications = data.length === 0;
|
||||
const hasNoFilteredNotifications = filteredNotifications.length === 0 && !hasNoNotifications;
|
||||
const hasNoFilteredNotifications = rows.length === 0 && !hasNoNotifications;
|
||||
|
||||
if (hasNoNotifications) {
|
||||
return (
|
||||
|
|
@ -55,6 +103,10 @@ export function NotificationsPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const search = (table.getColumn("name")?.getFilterValue() as string) ?? "";
|
||||
const type = (table.getColumn("type")?.getFilterValue() as string) ?? "";
|
||||
const status = (table.getColumn("status")?.getFilterValue() as string) ?? "";
|
||||
|
||||
return (
|
||||
<Card className="p-0 gap-0">
|
||||
<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-2 md:justify-between p-4 bg-card-header py-4">
|
||||
|
|
@ -62,10 +114,10 @@ export function NotificationsPage() {
|
|||
<Input
|
||||
className="w-full lg:w-45 min-w-45"
|
||||
placeholder="Search…"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
value={search}
|
||||
onChange={(e) => table.getColumn("name")?.setFilterValue(e.target.value)}
|
||||
/>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<Select value={type} onValueChange={(value) => table.getColumn("type")?.setFilterValue(value)}>
|
||||
<SelectTrigger className="w-full lg:w-45 min-w-45">
|
||||
<SelectValue placeholder="All types" />
|
||||
</SelectTrigger>
|
||||
|
|
@ -80,7 +132,7 @@ export function NotificationsPage() {
|
|||
<SelectItem value="custom">Custom</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<Select value={status} onValueChange={(value) => table.getColumn("status")?.setFilterValue(value)}>
|
||||
<SelectTrigger className="w-full lg:w-45 min-w-45">
|
||||
<SelectValue placeholder="All status" />
|
||||
</SelectTrigger>
|
||||
|
|
@ -89,7 +141,7 @@ export function NotificationsPage() {
|
|||
<SelectItem value="disabled">Disabled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{(searchQuery || typeFilter || statusFilter) && (
|
||||
{hasFilters && (
|
||||
<Button onClick={clearFilters} className="w-full lg:w-auto mt-2 lg:mt-0 lg:ml-2">
|
||||
<RotateCcw className="h-4 w-4 mr-2" />
|
||||
Clear filters
|
||||
|
|
@ -104,11 +156,22 @@ export function NotificationsPage() {
|
|||
<div className="overflow-x-auto">
|
||||
<Table className="border-t">
|
||||
<TableHeader className="bg-card-header">
|
||||
<TableRow>
|
||||
<TableHead className="w-25 uppercase">Name</TableHead>
|
||||
<TableHead className="uppercase text-left">Type</TableHead>
|
||||
<TableHead className="uppercase text-center">Status</TableHead>
|
||||
</TableRow>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className={cn("uppercase", {
|
||||
"w-25": header.column.id === "name",
|
||||
"text-left": header.column.id === "type",
|
||||
"text-center": header.column.id === "status",
|
||||
})}
|
||||
>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow className={cn({ hidden: !hasNoFilteredNotifications })}>
|
||||
|
|
@ -122,30 +185,38 @@ export function NotificationsPage() {
|
|||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{filteredNotifications.map((notification) => (
|
||||
{rows.map((row) => (
|
||||
<TableRow
|
||||
key={notification.id}
|
||||
key={row.original.id}
|
||||
className="hover:bg-accent/50 hover:cursor-pointer h-12"
|
||||
onClick={() => navigate({ to: `/notifications/${notification.id}` })}
|
||||
onClick={() => navigate({ to: `/notifications/${row.original.id}` })}
|
||||
>
|
||||
<TableCell className="font-medium text-strong-accent">{notification.name}</TableCell>
|
||||
<TableCell className="capitalize text-muted-foreground">{notification.type}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<StatusDot
|
||||
variant={notification.enabled ? "success" : "neutral"}
|
||||
label={notification.enabled ? "Enabled" : "Disabled"}
|
||||
/>
|
||||
</TableCell>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={cn({
|
||||
"font-medium text-strong-accent": cell.column.id === "name",
|
||||
"capitalize text-muted-foreground": cell.column.id === "type",
|
||||
"text-center": cell.column.id === "status",
|
||||
})}
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-end border-t">
|
||||
<span>
|
||||
<span className="text-strong-accent">{filteredNotifications.length}</span> destination
|
||||
{filteredNotifications.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
{hasNoFilteredNotifications ? (
|
||||
"No destinations match filters."
|
||||
) : (
|
||||
<span>
|
||||
<span className="text-strong-accent">{rows.length}</span> destination
|
||||
{rows.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue