mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 03:05:55 +00:00
refactor: implement session checking utility, enhance device queries with session validation, and improve UI interactions for device management
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 6m36s
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 6m36s
This commit is contained in:
@ -1,25 +1,28 @@
|
||||
'use client'
|
||||
import { deviceCartAtom } from '@/lib/atoms'
|
||||
import type { Device } from '@prisma/client'
|
||||
import { useAtomValue, useSetAtom } from 'jotai'
|
||||
import React from 'react'
|
||||
"use client";
|
||||
import { deviceCartAtom } from "@/lib/atoms";
|
||||
import type { Device } from "@/lib/backend-types";
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import React from "react";
|
||||
|
||||
export default function AddDevicesToCartButton({ device }: { device: Device }) {
|
||||
const setDeviceCart = useSetAtom(deviceCartAtom)
|
||||
const devices = useAtomValue(deviceCartAtom)
|
||||
const setDeviceCart = useSetAtom(deviceCartAtom);
|
||||
const devices = useAtomValue(deviceCartAtom);
|
||||
|
||||
const isChecked = devices.some((d) => d.id === device.id);
|
||||
const isChecked = devices.some((d) => d.id === device.id);
|
||||
|
||||
return (
|
||||
<input
|
||||
type="checkbox"
|
||||
className='peer accent-[#f49d1b] size-4'
|
||||
checked={isChecked}
|
||||
onChange={() => setDeviceCart((prev) =>
|
||||
isChecked
|
||||
? prev.filter((d) => d.id !== device.id)
|
||||
: [...prev, device]
|
||||
)}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={device.blocked || device.is_active}
|
||||
className="peer accent-[#f49d1b] size-4"
|
||||
checked={isChecked}
|
||||
onChange={() =>
|
||||
setDeviceCart((prev) =>
|
||||
isChecked
|
||||
? prev.filter((d) => d.id !== device.id)
|
||||
: [...prev, device],
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
import { blockDevice } from "@/actions/omada-actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Device } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import type { Device } from "@prisma/client";
|
||||
import { OctagonX } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { type SubmitHandler, useForm } from "react-hook-form";
|
||||
@ -23,160 +23,159 @@ import { TextShimmer } from "./ui/text-shimmer";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
|
||||
const validationSchema = z.object({
|
||||
reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
|
||||
reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
|
||||
});
|
||||
|
||||
export default function BlockDeviceDialog({
|
||||
device,
|
||||
type,
|
||||
admin,
|
||||
device,
|
||||
type,
|
||||
admin,
|
||||
}: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof validationSchema>>({
|
||||
resolver: zodResolver(validationSchema),
|
||||
});
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof validationSchema>>({
|
||||
resolver: zodResolver(validationSchema),
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
|
||||
setDisabled(true);
|
||||
console.log(data);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: type,
|
||||
reason: data.reasonForBlocking,
|
||||
blockedBy: "ADMIN",
|
||||
// reason: data.reasonForBlocking,
|
||||
}),
|
||||
{
|
||||
loading: "Blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
setOpen((prev) => !prev);
|
||||
return "Blocked!";
|
||||
},
|
||||
error: (error) => {
|
||||
setDisabled(false);
|
||||
return error || "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
setDisabled(false);
|
||||
};
|
||||
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
|
||||
setDisabled(true);
|
||||
console.log(data);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: type,
|
||||
reason: data.reasonForBlocking,
|
||||
blockedBy: "ADMIN",
|
||||
// reason: data.reasonForBlocking,
|
||||
}),
|
||||
{
|
||||
loading: "Blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
setOpen((prev) => !prev);
|
||||
return "Blocked!";
|
||||
},
|
||||
error: (error) => {
|
||||
setDisabled(false);
|
||||
return error || "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
setDisabled(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{device.blocked ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: "unblock",
|
||||
reason: "",
|
||||
}),
|
||||
{
|
||||
loading: "unblockinig...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "Unblocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
return "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
|
||||
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
{!admin ? (
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: "block",
|
||||
reason: "",
|
||||
blockedBy: "PARENT",
|
||||
}),
|
||||
{
|
||||
loading: "blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "blocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
return "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
<OctagonX />
|
||||
{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
|
||||
</Button>
|
||||
) : (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={disabled} variant="destructive">
|
||||
<OctagonX />
|
||||
Block
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Please provide a reason for blocking this device.
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Label htmlFor="reason" className="text-right">
|
||||
Reason for blocking
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={10}
|
||||
{...register("reasonForBlocking")}
|
||||
id="reasonForBlocking"
|
||||
className={cn(
|
||||
"col-span-5",
|
||||
errors.reasonForBlocking && "ring-2 ring-red-500",
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm text-red-500">
|
||||
{errors.reasonForBlocking?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
disabled={disabled}
|
||||
type="submit"
|
||||
>
|
||||
Block
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{device.blocked ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: "unblock",
|
||||
reason: "",
|
||||
}),
|
||||
{
|
||||
loading: "unblockinig...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "Unblocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
return "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
{!admin ? (
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
macAddress: device.mac,
|
||||
type: "block",
|
||||
reason: "",
|
||||
blockedBy: "PARENT",
|
||||
}),
|
||||
{
|
||||
loading: "blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "blocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
return "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
<OctagonX />
|
||||
{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
|
||||
</Button>
|
||||
) : (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={disabled} variant="destructive">
|
||||
<OctagonX />
|
||||
Block
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Please provide a reason for blocking this device.
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Label htmlFor="reason" className="text-right">
|
||||
Reason for blocking
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={10}
|
||||
{...register("reasonForBlocking")}
|
||||
id="reasonForBlocking"
|
||||
className={cn(
|
||||
"col-span-5",
|
||||
errors.reasonForBlocking && "ring-2 ring-red-500",
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm text-red-500">
|
||||
{errors.reasonForBlocking?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
disabled={disabled}
|
||||
type="submit"
|
||||
>
|
||||
Block
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,9 +19,13 @@ export default function ClickableRow({
|
||||
<TableRow
|
||||
key={device.id}
|
||||
className={cn(
|
||||
parentalControl === false && "cursor-pointer hover:bg-muted",
|
||||
(parentalControl === false && device.blocked) || device.is_active
|
||||
? "cursor-not-allowed title-bg"
|
||||
: "cursor-pointer hover:bg-muted",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (device.blocked) return;
|
||||
if (device.is_active === true) return;
|
||||
if (parentalControl === true) return;
|
||||
setDeviceCart((prev) =>
|
||||
devices.some((d) => d.id === device.id)
|
||||
@ -33,7 +37,10 @@ export default function ClickableRow({
|
||||
<TableCell>
|
||||
<div className="flex flex-col items-start">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
className={cn(
|
||||
"hover:underline font-semibold",
|
||||
device.is_active ? "text-green-600" : "",
|
||||
)}
|
||||
href={`/devices/${device.id}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@ -49,7 +56,7 @@ export default function ClickableRow({
|
||||
})}
|
||||
</span>
|
||||
) : (
|
||||
<p>Inactive</p>
|
||||
<p className="text-muted-foreground">Device Inactive</p>
|
||||
)}
|
||||
|
||||
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||
|
||||
Reference in New Issue
Block a user