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:
10
README.md
10
README.md
@@ -7,7 +7,7 @@
|
|||||||
Quick summary of current rewrite/migration goal.
|
Quick summary of current rewrite/migration goal.
|
||||||
|
|
||||||
- **Phase:** Backend rewrite
|
- **Phase:** Backend rewrite
|
||||||
- **Last updated:** 2026-04-05
|
- **Last updated:** 2026-04-06
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -16,9 +16,9 @@ Quick summary of current rewrite/migration goal.
|
|||||||
| Feature | Description | Status |
|
| Feature | Description | Status |
|
||||||
|----------|--------------|--------|
|
|----------|--------------|--------|
|
||||||
| User Authentication | ~~Login~~, ~~Signup~~, API Key | 🟨 In Progress |
|
| User Authentication | ~~Login~~, ~~Signup~~, API Key | 🟨 In Progress |
|
||||||
| User Profile | Edit profile, upload avatar | 🟨 In Progress |
|
| User Profile | ~~Edit profile~~, upload avatar | 🟨 In Progress |
|
||||||
| User Admin | Edit user, create user, remove user, alplaprod user integration | ⏳ Not Started |
|
| User Admin | Edit user, create user, remove user, alplaprod user integration | ⏳ Not Started |
|
||||||
| Notifications | Subscribe, ~~Create~~, Update, Remove, Manual Trigger | 🟨 In Progress |
|
| Notifications | ~~Subscribe~~, ~~Create~~, ~~Update~~, ~~~~Remove~~, Manual Trigger | 🟨 In Progress |
|
||||||
| Datamart | Create, Update, Run, Deactivate | 🔧 In Progress |
|
| Datamart | Create, Update, Run, Deactivate | 🔧 In Progress |
|
||||||
| Frontend | Analytics and charts | ⏳ Not Started |
|
| Frontend | Analytics and charts | ⏳ Not Started |
|
||||||
| Docs | Instructions and trouble shooting | ⏳ Not Started |
|
| Docs | Instructions and trouble shooting | ⏳ Not Started |
|
||||||
@@ -44,7 +44,7 @@ _Status legend:_
|
|||||||
How to run the current version of the app.
|
How to run the current version of the app.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://github.com/youruser/yourrepo.git
|
git clone https://git.tuffraid.net/cowch/lst_v3.git
|
||||||
cd yourrepo
|
cd lst_v3
|
||||||
npm install
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
@@ -34,8 +34,11 @@ r.delete("/", async (req, res: Response) => {
|
|||||||
.delete(notificationSub)
|
.delete(notificationSub)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
//eq(notificationSub.userId, hasPermissions ? validated.userId : req?.user?.id ?? ""), // allows the admin to delete this
|
eq(
|
||||||
eq(notificationSub.userId, req?.user?.id ?? ""),
|
notificationSub.userId,
|
||||||
|
hasPermissions ? validated.userId : (req?.user?.id ?? ""),
|
||||||
|
), // allows the admin to delete this
|
||||||
|
//eq(notificationSub.userId, req?.user?.id ?? ""),
|
||||||
eq(notificationSub.notificationId, validated.notificationId),
|
eq(notificationSub.notificationId, validated.notificationId),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ r.get("/", async (req, res: Response) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (userId !== "") {
|
if (userId) {
|
||||||
hasPermissions.success = false;
|
hasPermissions.success = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Link } from "@tanstack/react-router";
|
import { Link } from "@tanstack/react-router";
|
||||||
import { Logs } from "lucide-react";
|
import { Bell, Logs, Settings } from "lucide-react";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
SidebarGroup,
|
SidebarGroup,
|
||||||
@@ -24,10 +24,18 @@ import {
|
|||||||
export default function AdminSidebar({ session }: any) {
|
export default function AdminSidebar({ session }: any) {
|
||||||
const { setOpen } = useSidebar();
|
const { setOpen } = useSidebar();
|
||||||
const items = [
|
const items = [
|
||||||
|
{
|
||||||
|
title: "Notifications",
|
||||||
|
url: "/admin/notifications",
|
||||||
|
icon: Bell,
|
||||||
|
role: ["systemAdmin", "admin"],
|
||||||
|
module: "admin",
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Settings",
|
title: "Settings",
|
||||||
url: "/admin/settings",
|
url: "/admin/settings",
|
||||||
icon: Logs,
|
icon: Settings,
|
||||||
role: ["systemAdmin"],
|
role: ["systemAdmin"],
|
||||||
module: "admin",
|
module: "admin",
|
||||||
active: true,
|
active: true,
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
|
|||||||
import { Route as AboutRouteImport } from './routes/about'
|
import { Route as AboutRouteImport } from './routes/about'
|
||||||
import { Route as IndexRouteImport } from './routes/index'
|
import { Route as IndexRouteImport } from './routes/index'
|
||||||
import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
|
import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
|
||||||
|
import { Route as AdminNotificationsRouteImport } from './routes/admin/notifications'
|
||||||
import { Route as AdminLogsRouteImport } from './routes/admin/logs'
|
import { Route as AdminLogsRouteImport } from './routes/admin/logs'
|
||||||
import { Route as authLoginRouteImport } from './routes/(auth)/login'
|
import { Route as authLoginRouteImport } from './routes/(auth)/login'
|
||||||
import { Route as authUserSignupRouteImport } from './routes/(auth)/user.signup'
|
import { Route as authUserSignupRouteImport } from './routes/(auth)/user.signup'
|
||||||
@@ -33,6 +34,11 @@ const AdminSettingsRoute = AdminSettingsRouteImport.update({
|
|||||||
path: '/admin/settings',
|
path: '/admin/settings',
|
||||||
getParentRoute: () => rootRouteImport,
|
getParentRoute: () => rootRouteImport,
|
||||||
} as any)
|
} as any)
|
||||||
|
const AdminNotificationsRoute = AdminNotificationsRouteImport.update({
|
||||||
|
id: '/admin/notifications',
|
||||||
|
path: '/admin/notifications',
|
||||||
|
getParentRoute: () => rootRouteImport,
|
||||||
|
} as any)
|
||||||
const AdminLogsRoute = AdminLogsRouteImport.update({
|
const AdminLogsRoute = AdminLogsRouteImport.update({
|
||||||
id: '/admin/logs',
|
id: '/admin/logs',
|
||||||
path: '/admin/logs',
|
path: '/admin/logs',
|
||||||
@@ -64,6 +70,7 @@ export interface FileRoutesByFullPath {
|
|||||||
'/about': typeof AboutRoute
|
'/about': typeof AboutRoute
|
||||||
'/login': typeof authLoginRoute
|
'/login': typeof authLoginRoute
|
||||||
'/admin/logs': typeof AdminLogsRoute
|
'/admin/logs': typeof AdminLogsRoute
|
||||||
|
'/admin/notifications': typeof AdminNotificationsRoute
|
||||||
'/admin/settings': typeof AdminSettingsRoute
|
'/admin/settings': typeof AdminSettingsRoute
|
||||||
'/user/profile': typeof authUserProfileRoute
|
'/user/profile': typeof authUserProfileRoute
|
||||||
'/user/resetpassword': typeof authUserResetpasswordRoute
|
'/user/resetpassword': typeof authUserResetpasswordRoute
|
||||||
@@ -74,6 +81,7 @@ export interface FileRoutesByTo {
|
|||||||
'/about': typeof AboutRoute
|
'/about': typeof AboutRoute
|
||||||
'/login': typeof authLoginRoute
|
'/login': typeof authLoginRoute
|
||||||
'/admin/logs': typeof AdminLogsRoute
|
'/admin/logs': typeof AdminLogsRoute
|
||||||
|
'/admin/notifications': typeof AdminNotificationsRoute
|
||||||
'/admin/settings': typeof AdminSettingsRoute
|
'/admin/settings': typeof AdminSettingsRoute
|
||||||
'/user/profile': typeof authUserProfileRoute
|
'/user/profile': typeof authUserProfileRoute
|
||||||
'/user/resetpassword': typeof authUserResetpasswordRoute
|
'/user/resetpassword': typeof authUserResetpasswordRoute
|
||||||
@@ -85,6 +93,7 @@ export interface FileRoutesById {
|
|||||||
'/about': typeof AboutRoute
|
'/about': typeof AboutRoute
|
||||||
'/(auth)/login': typeof authLoginRoute
|
'/(auth)/login': typeof authLoginRoute
|
||||||
'/admin/logs': typeof AdminLogsRoute
|
'/admin/logs': typeof AdminLogsRoute
|
||||||
|
'/admin/notifications': typeof AdminNotificationsRoute
|
||||||
'/admin/settings': typeof AdminSettingsRoute
|
'/admin/settings': typeof AdminSettingsRoute
|
||||||
'/(auth)/user/profile': typeof authUserProfileRoute
|
'/(auth)/user/profile': typeof authUserProfileRoute
|
||||||
'/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
|
'/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
|
||||||
@@ -97,6 +106,7 @@ export interface FileRouteTypes {
|
|||||||
| '/about'
|
| '/about'
|
||||||
| '/login'
|
| '/login'
|
||||||
| '/admin/logs'
|
| '/admin/logs'
|
||||||
|
| '/admin/notifications'
|
||||||
| '/admin/settings'
|
| '/admin/settings'
|
||||||
| '/user/profile'
|
| '/user/profile'
|
||||||
| '/user/resetpassword'
|
| '/user/resetpassword'
|
||||||
@@ -107,6 +117,7 @@ export interface FileRouteTypes {
|
|||||||
| '/about'
|
| '/about'
|
||||||
| '/login'
|
| '/login'
|
||||||
| '/admin/logs'
|
| '/admin/logs'
|
||||||
|
| '/admin/notifications'
|
||||||
| '/admin/settings'
|
| '/admin/settings'
|
||||||
| '/user/profile'
|
| '/user/profile'
|
||||||
| '/user/resetpassword'
|
| '/user/resetpassword'
|
||||||
@@ -117,6 +128,7 @@ export interface FileRouteTypes {
|
|||||||
| '/about'
|
| '/about'
|
||||||
| '/(auth)/login'
|
| '/(auth)/login'
|
||||||
| '/admin/logs'
|
| '/admin/logs'
|
||||||
|
| '/admin/notifications'
|
||||||
| '/admin/settings'
|
| '/admin/settings'
|
||||||
| '/(auth)/user/profile'
|
| '/(auth)/user/profile'
|
||||||
| '/(auth)/user/resetpassword'
|
| '/(auth)/user/resetpassword'
|
||||||
@@ -128,6 +140,7 @@ export interface RootRouteChildren {
|
|||||||
AboutRoute: typeof AboutRoute
|
AboutRoute: typeof AboutRoute
|
||||||
authLoginRoute: typeof authLoginRoute
|
authLoginRoute: typeof authLoginRoute
|
||||||
AdminLogsRoute: typeof AdminLogsRoute
|
AdminLogsRoute: typeof AdminLogsRoute
|
||||||
|
AdminNotificationsRoute: typeof AdminNotificationsRoute
|
||||||
AdminSettingsRoute: typeof AdminSettingsRoute
|
AdminSettingsRoute: typeof AdminSettingsRoute
|
||||||
authUserProfileRoute: typeof authUserProfileRoute
|
authUserProfileRoute: typeof authUserProfileRoute
|
||||||
authUserResetpasswordRoute: typeof authUserResetpasswordRoute
|
authUserResetpasswordRoute: typeof authUserResetpasswordRoute
|
||||||
@@ -157,6 +170,13 @@ declare module '@tanstack/react-router' {
|
|||||||
preLoaderRoute: typeof AdminSettingsRouteImport
|
preLoaderRoute: typeof AdminSettingsRouteImport
|
||||||
parentRoute: typeof rootRouteImport
|
parentRoute: typeof rootRouteImport
|
||||||
}
|
}
|
||||||
|
'/admin/notifications': {
|
||||||
|
id: '/admin/notifications'
|
||||||
|
path: '/admin/notifications'
|
||||||
|
fullPath: '/admin/notifications'
|
||||||
|
preLoaderRoute: typeof AdminNotificationsRouteImport
|
||||||
|
parentRoute: typeof rootRouteImport
|
||||||
|
}
|
||||||
'/admin/logs': {
|
'/admin/logs': {
|
||||||
id: '/admin/logs'
|
id: '/admin/logs'
|
||||||
path: '/admin/logs'
|
path: '/admin/logs'
|
||||||
@@ -200,6 +220,7 @@ const rootRouteChildren: RootRouteChildren = {
|
|||||||
AboutRoute: AboutRoute,
|
AboutRoute: AboutRoute,
|
||||||
authLoginRoute: authLoginRoute,
|
authLoginRoute: authLoginRoute,
|
||||||
AdminLogsRoute: AdminLogsRoute,
|
AdminLogsRoute: AdminLogsRoute,
|
||||||
|
AdminNotificationsRoute: AdminNotificationsRoute,
|
||||||
AdminSettingsRoute: AdminSettingsRoute,
|
AdminSettingsRoute: AdminSettingsRoute,
|
||||||
authUserProfileRoute: authUserProfileRoute,
|
authUserProfileRoute: authUserProfileRoute,
|
||||||
authUserResetpasswordRoute: authUserResetpasswordRoute,
|
authUserResetpasswordRoute: authUserResetpasswordRoute,
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import { notifications } from "../../../lib/queries/notifications";
|
|||||||
|
|
||||||
export default function NotificationsSubCard({ user }: any) {
|
export default function NotificationsSubCard({ user }: any) {
|
||||||
const { data } = useSuspenseQuery(notifications());
|
const { data } = useSuspenseQuery(notifications());
|
||||||
const { data: ns, refetch } = useSuspenseQuery(notificationSubs(user.id));
|
const { refetch } = useSuspenseQuery(notificationSubs(user.id));
|
||||||
const form = useAppForm({
|
const form = useAppForm({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
notificationId: "",
|
notificationId: "",
|
||||||
@@ -32,8 +32,11 @@ export default function NotificationsSubCard({ user }: any) {
|
|||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (res.status === 200) {
|
||||||
|
toast.success("Notification Subbed");
|
||||||
refetch();
|
refetch();
|
||||||
form.reset();
|
form.reset();
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { createColumnHelper } from "@tanstack/react-table";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { Trash } from "lucide-react";
|
import { Trash } from "lucide-react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import type { Notifications } from "../../../../types/notifications";
|
||||||
import { Button } from "../../../components/ui/button";
|
import { Button } from "../../../components/ui/button";
|
||||||
import { Card, CardContent, CardHeader } from "../../../components/ui/card";
|
import { Card, CardContent, CardHeader } from "../../../components/ui/card";
|
||||||
import {
|
import {
|
||||||
@@ -15,14 +16,6 @@ import { notifications } from "../../../lib/queries/notifications";
|
|||||||
import LstTable from "../../../lib/tableStuff/LstTable";
|
import LstTable from "../../../lib/tableStuff/LstTable";
|
||||||
import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
|
import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
|
||||||
|
|
||||||
type Notifications = {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
emails: string;
|
|
||||||
description: string;
|
|
||||||
remove: unknown;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function NotificationsTable({ userId }: any) {
|
export default function NotificationsTable({ userId }: any) {
|
||||||
const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
|
const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
|
||||||
const { data: note } = useSuspenseQuery(notifications());
|
const { data: note } = useSuspenseQuery(notifications());
|
||||||
@@ -101,6 +94,7 @@ export default function NotificationsTable({ userId }: any) {
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
|
variant={"destructive"}
|
||||||
onClick={() => removeNotification(i.row.original)}
|
onClick={() => removeNotification(i.row.original)}
|
||||||
>
|
>
|
||||||
<Trash />
|
<Trash />
|
||||||
|
|||||||
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
frontend/types/notifications.ts
Normal file
10
frontend/types/notifications.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export type Notifications = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
emails: string;
|
||||||
|
description: string;
|
||||||
|
remove?: unknown;
|
||||||
|
active?: boolean;
|
||||||
|
interval: number;
|
||||||
|
options: unknown[];
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user