cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(auth): added module and submodule access to the user

Browse Source
This commit is contained in:
Blake Matthes
2025-04-09 17:47:02 -05:00
parent ded074a1ce
commit efc630f5f8
10 changed files with 181 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/admin/user/UserPage.tsx
View File

@@ -1,9 +1,3 @@
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { getUsers } from "@/utils/querys/admin/users";
import { useQuery } from "@tanstack/react-query";
import UserCard from "./components/UserCard";
@@ -22,22 +16,13 @@ export default function UserPage() {
return (
<div className="m-2 w-dvw">
<Accordion type="single" collapsible>
{data.map((u: any) => {
return (
<AccordionItem key={u.user_id} value={u.user_id}>
<AccordionTrigger>
<span>{u.username}</span>
</AccordionTrigger>
<AccordionContent>
<div>
<UserCard user={u} />
</div>
</AccordionContent>
</AccordionItem>
);
})}
</Accordion>
{data.map((u: any) => {
return (
<div>
<UserCard user={u} />
</div>
);
})}
</div>
);
}

12
frontend/src/components/admin/user/components/ModuleAccess.tsx
View File

@@ -19,11 +19,13 @@ export default function ModuleAccess(data: any) {
<div className="flex flex-row flex-wrap">
{modules?.map((m: any) => {
return (
<ModuleForm
key={m.module_id}
i={m}
username={data.user.username}
/>
<div key={m.module_id}>
<ModuleForm
module={m}
user={data.user}
refetch={data.refetch}
/>
</div>
);
})}
</div>

146
frontend/src/components/admin/user/components/ModuleForm.tsx
View File

@@ -1,4 +1,3 @@
import { LstCard } from "@/components/extendedUI/LstCard";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
@@ -10,21 +9,26 @@ import {
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 role =
props.user?.moduleRoles?.filter(
(m: any) => m.module_id === props.module.module_id
)[0]?.role ?? " ";
const form = useForm({
defaultValues: { role: props.i.role },
defaultValues: {
role: role,
},
onSubmit: async ({ value }) => {
const data = {
username: props.username,
module: props.i.name,
const data: any = {
username: props.user.username,
module: props.module.name,
role: value.role,
};
console.log(data);
@@ -37,7 +41,7 @@ export default function ModuleForm(props: any) {
if (res.data.success) {
toast.success(res.data.message);
refetch();
props.refetch();
form.reset();
} else {
res.data.message;
@@ -49,71 +53,67 @@ export default function ModuleForm(props: any) {
});
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();
<div className="">
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
}}
className="flex flex-row"
>
<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}>
Module: {props.module.name}
</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.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 className="mt-4">
<Button type="submit" onClick={form.handleSubmit}>
Save
</Button>
</div>
</form>
</div>
);
}

15
frontend/src/components/admin/user/components/UserCard.tsx
View File

@@ -22,13 +22,12 @@ import axios from "axios";
import { toast } from "sonner";
import { CardHeader } from "@/components/ui/card";
import ModuleAccess from "./ModuleAccess";
export default function UserCard(data: any) {
const token = localStorage.getItem("auth_token");
const { refetch } = useQuery(getUsers());
//console.log(modules);
//console.log(data.user);
//console.log(userRoles);
const form = useForm({
...userFormOptions(data.user),
@@ -268,13 +267,17 @@ export default function UserCard(data: any) {
);
}}
/>
<div className="mt-4 ml-4">
<Button onClick={form.handleSubmit}>Save</Button>
</div>
</form>
</LstCard>
<div className="mt-4">
<Button onClick={form.handleSubmit}>Save</Button>
</div>
</div>
<div className="flex flex-col"></div>
<div>
<LstCard>
<ModuleAccess user={data.user} refetch={refetch} />
</LstCard>
</div>
</div>
);
}