test(auth): more permission testing
This commit is contained in:
146
frontend/src/components/admin/modules/ModuleForm.tsx
Normal file
146
frontend/src/components/admin/modules/ModuleForm.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
import { useState } from "react";
|
||||
//import { z } from "zod";
|
||||
//import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
|
||||
// const FormSchema = z.object({
|
||||
// subModule: z.boolean(),
|
||||
// });
|
||||
export function ChangeModule({ module }: { module: any }) {
|
||||
const { token } = useSessionStore();
|
||||
const { refetch } = useQuery(getModules(token ?? ""));
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
active: module.active,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
try {
|
||||
const result = await axios.patch(
|
||||
`/api/server/modules/${module.module_id}`,
|
||||
{ active: value.active },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
setOpen(!open);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{module.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Set to active or deactivated.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Active
|
||||
</Label>
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
116
frontend/src/components/admin/modules/ModulePage.tsx
Normal file
116
frontend/src/components/admin/modules/ModulePage.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
import { ChangeModule } from "./ModuleForm";
|
||||
|
||||
export type Settings = {
|
||||
settings_id?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export default function ModulesPage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
const router = useRouter();
|
||||
|
||||
const adminModule = modules.filter((n) => n.name === "admin");
|
||||
const userLevel =
|
||||
user?.roles.filter((r) => r.module_id === adminModule[0].module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule[0].roles.includes(userLevel[0]?.role)) {
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getModules(token ?? "")
|
||||
);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading.....</div>;
|
||||
// }
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-fit">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Module In</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead>Active</TableHead>
|
||||
<TableHead>Edit</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((i: any) => (
|
||||
<TableRow key={i.submodule_id}>
|
||||
<TableCell className="font-medium">
|
||||
{i.name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.description}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.moduleName}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{JSON.stringify(i.roles)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.active ? "Yes" : "No"}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<ChangeModule module={i} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
145
frontend/src/components/admin/supModules/SubModuleForm.tsx
Normal file
145
frontend/src/components/admin/supModules/SubModuleForm.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
import { useState } from "react";
|
||||
//import { z } from "zod";
|
||||
//import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getSubModules } from "@/utils/querys/admin/subModules";
|
||||
|
||||
// const FormSchema = z.object({
|
||||
// subModule: z.boolean(),
|
||||
// });
|
||||
export function ChangeSubModule({ subModule }: { subModule: any }) {
|
||||
const { token } = useSessionStore();
|
||||
const { refetch } = useQuery(getSubModules(token ?? ""));
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
active: subModule.active,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
try {
|
||||
const result = await axios.patch(
|
||||
`/api/server/submodules/${subModule.submodule_id}`,
|
||||
{ active: value.active },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
setOpen(!open);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{subModule.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Set to active or deactivated.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Active
|
||||
</Label>
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
125
frontend/src/components/admin/supModules/SubModulePage.tsx
Normal file
125
frontend/src/components/admin/supModules/SubModulePage.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { ChangeSubModule } from "./SubModuleForm";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getSubModules } from "@/utils/querys/admin/subModules";
|
||||
|
||||
export type Settings = {
|
||||
settings_id?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export default function SubModulePage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
const router = useRouter();
|
||||
|
||||
const adminModule = modules.filter((n) => n.name === "admin");
|
||||
const userLevel =
|
||||
user?.roles.filter((r) => r.module_id === adminModule[0].module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule[0].roles.includes(userLevel[0]?.role)) {
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getSubModules(token ?? "")
|
||||
);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading.....</div>;
|
||||
// }
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-fit">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Module In</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead>Active</TableHead>
|
||||
<TableHead>Edit</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((i: any) => (
|
||||
<TableRow key={i.submodule_id}>
|
||||
<TableCell className="font-medium">
|
||||
{i.name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.description}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.moduleName}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{JSON.stringify(i.roles)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.active ? "Yes" : "No"}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<ChangeSubModule subModule={i} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import ModuleForm from "./ModuleForm";
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { getUserRoles } from "@/utils/querys/admin/userRoles";
|
||||
//import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
|
||||
export default function ModuleAccess(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
// const { data: userRoles } = useQuery(getUserRoles());
|
||||
const {
|
||||
data: modules,
|
||||
isError,
|
||||
isLoading,
|
||||
} = useQuery(getModules(token ?? ""));
|
||||
|
||||
if (isError) return <div>Error gettings Roles</div>;
|
||||
if (isLoading) return <div>Loading modules</div>;
|
||||
return (
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{modules?.map((m: any) => {
|
||||
return (
|
||||
<ModuleForm
|
||||
key={m.module_id}
|
||||
i={m}
|
||||
username={data.user.username}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
frontend/src/components/admin/user/components/ModuleForm.tsx
Normal file
119
frontend/src/components/admin/user/components/ModuleForm.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { getUserRoles } from "@/utils/querys/admin/userRoles";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ModuleForm(props: any) {
|
||||
const { refetch } = useQuery(getUserRoles());
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const form = useForm({
|
||||
defaultValues: { role: props.i.role },
|
||||
onSubmit: async ({ value }) => {
|
||||
const data = {
|
||||
username: props.username,
|
||||
module: props.i.name,
|
||||
role: value.role,
|
||||
};
|
||||
console.log(data);
|
||||
try {
|
||||
const res = await axios.post("/api/auth/setuseraccess", data, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
form.reset();
|
||||
} else {
|
||||
res.data.message;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="m-2 p-1">
|
||||
<LstCard>
|
||||
<p className="text-center">Module: {props.i.name}</p>
|
||||
|
||||
<p className="p-1">Current role: </p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Select role
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Roles</SelectLabel>
|
||||
<SelectItem value="viewer">
|
||||
Viewer
|
||||
</SelectItem>
|
||||
<SelectItem value="technician">
|
||||
Technician
|
||||
</SelectItem>
|
||||
<SelectItem value="supervisor">
|
||||
Supervisor
|
||||
</SelectItem>
|
||||
<SelectItem value="manager">
|
||||
Manager
|
||||
</SelectItem>
|
||||
<SelectItem value="tester">
|
||||
Tester
|
||||
</SelectItem>
|
||||
<SelectItem value="admin">
|
||||
Admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" onClick={form.handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
|
||||
import SubModuleForm from "./SubmoduleForm";
|
||||
//import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
|
||||
export default function UserSubRoles(data: any) {
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
return (
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{subModules?.map((m: any) => {
|
||||
const hasRole: any = userRoles.filter(
|
||||
(r: any) =>
|
||||
r.user_id.includes(data.user.user_id) &&
|
||||
r.module_id === m.module_id
|
||||
);
|
||||
return (
|
||||
<div key={m.module_id}>
|
||||
<SubModuleForm
|
||||
i={m}
|
||||
hasRole={hasRole}
|
||||
user={data.user}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
|
||||
export default function SubModuleForm(props: any) {
|
||||
const form = useForm({
|
||||
defaultValues: { role: "" },
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="m-2 p-1">
|
||||
<LstCard>
|
||||
<p className="text-center">
|
||||
Module: {props.i.moduleName}, <br />
|
||||
SubModule: {props.i.name}
|
||||
</p>
|
||||
|
||||
<p className="p-1">
|
||||
Current role:{" "}
|
||||
{props.hasRole[0]?.role
|
||||
? props.hasRole[0].role
|
||||
: "not assigned"}
|
||||
</p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Select role
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Roles</SelectLabel>
|
||||
<SelectItem value="viewer">
|
||||
Viewer
|
||||
</SelectItem>
|
||||
<SelectItem value="technician">
|
||||
Technician
|
||||
</SelectItem>
|
||||
<SelectItem value="supervisor">
|
||||
Supervisor
|
||||
</SelectItem>
|
||||
<SelectItem value="manager">
|
||||
Manager
|
||||
</SelectItem>
|
||||
<SelectItem value="tester">
|
||||
Tester
|
||||
</SelectItem>
|
||||
<SelectItem value="admin">
|
||||
Admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -20,7 +20,7 @@ import { useForm } from "@tanstack/react-form";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import UserRoles from "./UserRoles";
|
||||
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
|
||||
export default function UserCard(data: any) {
|
||||
@@ -270,16 +270,11 @@ export default function UserCard(data: any) {
|
||||
/>
|
||||
</form>
|
||||
</LstCard>
|
||||
<div>
|
||||
<div className="mt-4">
|
||||
<Button onClick={form.handleSubmit}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>User Module / Role Access</CardHeader>
|
||||
<UserRoles user={data.user} />
|
||||
</LstCard>
|
||||
</div>
|
||||
<div className="flex flex-col"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
//import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
|
||||
export default function UserRoles(user: any) {
|
||||
const { modules } = useModuleStore();
|
||||
console.log(user);
|
||||
return (
|
||||
<div>
|
||||
{modules?.map((m: any) => {
|
||||
console.log(m);
|
||||
return <Label>{m.name}</Label>;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
AlignJustify,
|
||||
Atom,
|
||||
Logs,
|
||||
Minus,
|
||||
@@ -25,76 +26,120 @@ import {
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "../../ui/collapsible";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Servers",
|
||||
url: "/servers",
|
||||
icon: Server,
|
||||
isActive: false,
|
||||
},
|
||||
];
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "Admin",
|
||||
url: "#",
|
||||
icon: ShieldCheck,
|
||||
items: [
|
||||
{
|
||||
title: "Settings",
|
||||
url: "/settings",
|
||||
icon: Settings,
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: "Modules",
|
||||
url: "/modules",
|
||||
icon: Settings,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "Swagger",
|
||||
url: "#",
|
||||
icon: Webhook,
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
url: "#",
|
||||
icon: Logs,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
url: "/users",
|
||||
icon: Users,
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: "UCD",
|
||||
url: "https://ucd.alpla.net:8443/",
|
||||
icon: Atom,
|
||||
isActive: false,
|
||||
newWindow: true,
|
||||
},
|
||||
{
|
||||
title: "Lst Api",
|
||||
url: "/api/docs",
|
||||
icon: Webhook,
|
||||
isActive: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
const iconMap: any = {
|
||||
ShieldCheck: ShieldCheck,
|
||||
AlignJustify: AlignJustify,
|
||||
Settings: Settings,
|
||||
Atom: Atom,
|
||||
Logs: Logs,
|
||||
Users: Users,
|
||||
Webhook: Webhook,
|
||||
Server: Server,
|
||||
};
|
||||
|
||||
export function AdminSideBar() {
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
const items = subModules.filter((m) => m.moduleName === "admin");
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Admin section</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item: any, index) => {
|
||||
const Icon = iconMap[item.icon] || AlignJustify;
|
||||
// drop down menu setup
|
||||
return (
|
||||
<SidebarMenu key={item.name}>
|
||||
{item.link === "#" ? (
|
||||
<Collapsible
|
||||
key={item.name}
|
||||
defaultOpen={index === 1}
|
||||
className="group/collapsible"
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<Icon />
|
||||
{item.name}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.subSubModule?.length > 0 ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subSubModule.map(
|
||||
(i: any) => {
|
||||
const SubIcon =
|
||||
iconMap[
|
||||
i.icon
|
||||
] ||
|
||||
AlignJustify;
|
||||
return (
|
||||
<SidebarMenuSubItem
|
||||
key={i.name}
|
||||
>
|
||||
{i.isActive && (
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href={
|
||||
i.link
|
||||
}
|
||||
target={
|
||||
i.newWindow
|
||||
? "_blank"
|
||||
: "_self"
|
||||
}
|
||||
>
|
||||
<SubIcon />
|
||||
<span>
|
||||
{
|
||||
i.name
|
||||
}
|
||||
</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
)}
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<SidebarMenu>
|
||||
{items.map((item) => {
|
||||
if (item.link === "#") return;
|
||||
return (
|
||||
<SidebarMenuItem key={item.name}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.link}>
|
||||
<Icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
)}
|
||||
</SidebarMenu>
|
||||
);
|
||||
})}
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
/* <SidebarMenu>
|
||||
{data.navMain.map((item, index) => (
|
||||
<Collapsible
|
||||
key={item.title}
|
||||
@@ -156,8 +201,5 @@ export function AdminSideBar() {
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
</SidebarMenu> */
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
//import { Cylinder, Package, Truck } from "lucide-react";
|
||||
import { Cylinder, Package, Truck } from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
@@ -10,67 +10,12 @@ import {
|
||||
import { hasPageAccess } from "@/utils/userAccess";
|
||||
import { User } from "@/types/users";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
// this will need to be moved to a links section the db to make it more easy to remove and add
|
||||
// const items = [
|
||||
// {
|
||||
// title: "Silo Adjustments",
|
||||
// url: "#",
|
||||
// icon: Cylinder,
|
||||
// role: ["admin", "systemAdmin"],
|
||||
// module: "logistics",
|
||||
// active: true,
|
||||
// },
|
||||
// {
|
||||
// name: "Bulk orders",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Truck,
|
||||
// role: ["systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Forecast",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Truck,
|
||||
// role: ["systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Ocme cycle counts",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: false,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Material Helper",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "/materialHelper/consumption",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Ocme Cyclecount",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "/cyclecount",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// ];
|
||||
|
||||
const iconMap: any = {
|
||||
Package: Package,
|
||||
Truck: Truck,
|
||||
Cylinder: Cylinder,
|
||||
};
|
||||
|
||||
export function LogisticsSideBar({
|
||||
user,
|
||||
@@ -82,13 +27,14 @@ export function LogisticsSideBar({
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
const items = subModules.filter((m) => m.moduleName === "logistics");
|
||||
//console.log(items);
|
||||
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Logistics</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => {
|
||||
const Icon = iconMap[item.icon];
|
||||
return (
|
||||
<SidebarMenuItem key={item.submodule_id}>
|
||||
<>
|
||||
@@ -100,6 +46,7 @@ export function LogisticsSideBar({
|
||||
item.active && (
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.link}>
|
||||
<Icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
|
||||
Reference in New Issue
Block a user