feat(notification): base notifcaiton sub and admin compelted
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m59s
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m59s
can now sub to a notification and user can remove them selfs plus an admin can remove,updates to add new emails are good as well
This commit is contained in:
316
frontend/src/routes/admin/notifications.tsx
Normal file
316
frontend/src/routes/admin/notifications.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { createColumnHelper } from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import { Trash } from "lucide-react";
|
||||
import { Suspense, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import type { Notifications } from "../../../types/notifications";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
import { Label } from "../../components/ui/label";
|
||||
import { Switch } from "../../components/ui/switch";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../../components/ui/tabs";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "../../components/ui/tooltip";
|
||||
import { authClient } from "../../lib/auth-client";
|
||||
import { notificationSubs } from "../../lib/queries/notificationSubs";
|
||||
import { notifications } from "../../lib/queries/notifications";
|
||||
import EditableCellInput from "../../lib/tableStuff/EditableCellInput";
|
||||
import LstTable from "../../lib/tableStuff/LstTable";
|
||||
import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
|
||||
import SkellyTable from "../../lib/tableStuff/SkellyTable";
|
||||
|
||||
const updateNotifications = async (
|
||||
id: string,
|
||||
data: Record<string, string | number | boolean | null>,
|
||||
) => {
|
||||
//console.log(id, data);
|
||||
try {
|
||||
const res = await axios.patch(
|
||||
`/lst/api/notification/${id}`,
|
||||
{ interval: data.interval },
|
||||
{
|
||||
withCredentials: true,
|
||||
},
|
||||
);
|
||||
toast.success(`Notification was just updated`);
|
||||
return res;
|
||||
} catch (err) {
|
||||
toast.error("Error in updating the settings");
|
||||
return err;
|
||||
}
|
||||
};
|
||||
|
||||
export const Route = createFileRoute("/admin/notifications")({
|
||||
beforeLoad: async ({ location }) => {
|
||||
const { data: session } = await authClient.getSession();
|
||||
const allowedRole = ["systemAdmin", "admin"];
|
||||
|
||||
if (!session?.user) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
search: {
|
||||
redirect: location.href,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!allowedRole.includes(session.user.role as string)) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
});
|
||||
}
|
||||
|
||||
return { user: session.user };
|
||||
},
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { data, refetch } = useSuspenseQuery(notifications());
|
||||
const { data: subs, refetch: subRefetch } = useSuspenseQuery(
|
||||
notificationSubs(),
|
||||
);
|
||||
const columnHelper = createColumnHelper<Notifications>();
|
||||
|
||||
const notificationMap = Object.fromEntries(data.map((n: any) => [n.id, n]));
|
||||
|
||||
const subData = subs.map((sub: any) => ({
|
||||
...sub,
|
||||
name: notificationMap[sub.notificationId].name || null,
|
||||
description: notificationMap[sub.notificationId].description || null,
|
||||
emails: sub.emails ? sub.emails.join(",") : null,
|
||||
}));
|
||||
|
||||
const updateNotification = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
field,
|
||||
value,
|
||||
}: {
|
||||
id: string;
|
||||
field: string;
|
||||
value: string | number | boolean | null;
|
||||
}) => updateNotifications(id, { [field]: value }),
|
||||
|
||||
onSuccess: () => {
|
||||
// refetch or update cache
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const removeNotification = async (ns: any) => {
|
||||
try {
|
||||
const res = await axios.delete(`/lst/api/notification/sub`, {
|
||||
withCredentials: true,
|
||||
data: {
|
||||
userId: ns.userId,
|
||||
notificationId: ns.notificationId,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`Subscription removed`);
|
||||
subRefetch();
|
||||
} else {
|
||||
console.info(res);
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch {
|
||||
toast.error(`There was an error removing subscription.`);
|
||||
}
|
||||
};
|
||||
|
||||
const column = [
|
||||
columnHelper.accessor("name", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Name" searchable={true} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("description", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Description" />
|
||||
),
|
||||
cell: (i) => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
{i.getValue()?.length > 25 ? (
|
||||
<span>{i.getValue().slice(0, 25)}...</span>
|
||||
) : (
|
||||
<span>{i.getValue()}</span>
|
||||
)}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{i.getValue()}</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("active", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Active" searchable={false} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => {
|
||||
// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
|
||||
const [activeToggle, setActiveToggle] = useState(i.getValue());
|
||||
|
||||
const onToggle = async (e: boolean) => {
|
||||
setActiveToggle(e);
|
||||
|
||||
try {
|
||||
const res = await axios.patch(
|
||||
`/lst/api/notification/${i.row.original.id}`,
|
||||
{
|
||||
active: !activeToggle,
|
||||
},
|
||||
{ withCredentials: true },
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(
|
||||
`${i.row.original.name} was set to ${activeToggle ? "Inactive" : "Active"}`,
|
||||
);
|
||||
refetch();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-48">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id={i.row.original.id}
|
||||
checked={activeToggle}
|
||||
onCheckedChange={(e) => onToggle(e)}
|
||||
//onBlur={field.handleBlur}
|
||||
/>
|
||||
<Label htmlFor={i.row.original.id}>
|
||||
{activeToggle ? "Active" : "Deactivated"}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("interval", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Interval" />
|
||||
),
|
||||
|
||||
filterFn: "includesString",
|
||||
cell: ({ row, getValue }) => {
|
||||
return (
|
||||
<EditableCellInput
|
||||
value={getValue()}
|
||||
id={row.original.id}
|
||||
field="interval"
|
||||
onSubmit={({ id, field, value }) => {
|
||||
updateNotification.mutate({ id, field, value });
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
const subsColumn = [
|
||||
columnHelper.accessor("name", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Name" searchable={true} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("description", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Description" />
|
||||
),
|
||||
cell: (i) => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
{i.getValue()?.length > 25 ? (
|
||||
<span>{i.getValue().slice(0, 25)}...</span>
|
||||
) : (
|
||||
<span>{i.getValue()}</span>
|
||||
)}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{i.getValue()}</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("emails", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Emails" searchable={true} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("remove", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Remove" searchable={false} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => {
|
||||
return (
|
||||
<Button
|
||||
size="icon"
|
||||
variant={"destructive"}
|
||||
onClick={() => removeNotification(i.row.original)}
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-semibold">Settings</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage you settings and related data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>System Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="notifications" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||||
<TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
|
||||
</TabsList>
|
||||
<Suspense fallback={<SkellyTable />}>
|
||||
<TabsContent value="notifications">
|
||||
<LstTable data={data} columns={column} />
|
||||
</TabsContent>
|
||||
<TabsContent value="subscriptions">
|
||||
<LstTable data={subData} columns={subsColumn} />
|
||||
</TabsContent>
|
||||
</Suspense>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user