test(auth): more permission testing

frontend/src/components/admin/supModules/SubModuleForm.tsx

@@ -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>
+        </>
+    );
+}