Create GroupPermissionDialog component

dashboard/src/states/Dashboard/pages/Groups/components/GroupPermissionDialog/GroupPermissionDialog.jsx

@@ -0,0 +1,92 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Stack,
+    Switch,
+    Typography
+} from "@mui/material";
+import {getRequest, patchRequest} from "@/common/utils/RequestUtil.js";
+import {useContext, useEffect, useState} from "react";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project";
+import {AdminPanelSettings} from "@mui/icons-material";
+
+export const GroupPermissionDialog = ({group, onClose, fetchGroups}) => {
+    const {currentProject} = useContext(ProjectContext);
+
+    const [permissions, setPermissions] = useState([]);
+    const [selectedPermissions, setSelectedPermissions] = useState([]);
+
+    const closeDialog = () => {
+        onClose();
+
+        setSelectedPermissions([]);
+    }
+
+    const updateGroupPermissions = async () => {
+        try {
+            await patchRequest(`/group/${currentProject.id}/${group.name}`, {permissions: selectedPermissions});
+            fetchGroups();
+
+            closeDialog();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    const updateLocal = (permission) => {
+        setSelectedPermissions(prev => {
+            if (prev.includes(permission)) {
+                return prev.filter(p => p !== permission);
+            } else {
+                return [...prev, permission];
+            }
+        });
+    }
+
+    useEffect(() => {
+        if (!group) return;
+
+        setSelectedPermissions(group.permissions);
+    }, [group]);
+
+    useEffect(() => {
+        const fetchPermissions = async () => {
+            try {
+                const data = await getRequest(`/permission/${currentProject.id}/list`);
+
+                if (!data) return;
+
+                setPermissions(data);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        fetchPermissions();
+    }, []);
+
+    return (
+        <Dialog open={group !== null} onClose={closeDialog}>
+            <DialogTitle>Update permissions</DialogTitle>
+            <DialogContent sx={{maxWidth: 350, maxHeight: 500, overflowY: 'auto'}}>
+                {permissions.map(({permission}, index) => (
+                    <Stack key={index} direction="row" gap={1} alignItems="center" justifyContent="space-between"
+                           sx={{borderBottom: 1, borderColor: 'divider', py: 1}}>
+                        <Stack direction="row" gap={1} alignItems="center">
+                            <AdminPanelSettings sx={{color: 'text.secondary'}}/>
+                            <Typography variant="h6">{permission}</Typography>
+                        </Stack>
+                        <Switch checked={selectedPermissions.includes(permission)} onChange={() => updateLocal(permission)}/>
+                    </Stack>
+                ))}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={closeDialog}>Cancel</Button>
+                <Button onClick={updateGroupPermissions} color="primary">Update</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}

dashboard/src/states/Dashboard/pages/Groups/components/GroupPermissionDialog/index.js

@@ -0,0 +1 @@
+export {GroupPermissionDialog as default} from "./GroupPermissionDialog.jsx";