From 671040d22e735ba0ac01ac33dc820c6d1fcb0cd3 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 17:34:15 +0200
Subject: [PATCH] Create GroupCreationDialog component

---
 .../GroupCreationDialog.jsx                   | 69 +++++++++++++++++++
 .../components/GroupCreationDialog/index.js   |  1 +
 2 files changed, 70 insertions(+)
 create mode 100644 dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/GroupCreationDialog.jsx
 create mode 100644 dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/index.js

diff --git a/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/GroupCreationDialog.jsx b/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/GroupCreationDialog.jsx
new file mode 100644
index 0000000..fa642c8
--- /dev/null
+++ b/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/GroupCreationDialog.jsx
@@ -0,0 +1,69 @@
+import {Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField} from "@mui/material";
+import {putRequest} from "@/common/utils/RequestUtil.js";
+import {useContext, useState} from "react";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project";
+import {Description, Group} from "@mui/icons-material";
+
+export const GroupCreationDialog = ({open, onClose, fetchGroups}) => {
+    const {currentProject} = useContext(ProjectContext);
+
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+
+    const [creationError, setCreationError] = useState("");
+
+    const updateName = async (event) => {
+        setCreationError("");
+        setName(event.target.value);
+    }
+
+    const updateDescription = async (event) => {
+        setCreationError("");
+        setDescription(event.target.value);
+    }
+
+    const closeDialog = () => {
+        onClose();
+
+        setDescription("");
+        setCreationError("");
+    }
+
+    const createGroup = async () => {
+        try {
+            await putRequest(`/group/${currentProject.id}`, {name, description});
+            fetchGroups();
+
+            closeDialog();
+        } catch (e) {
+            setCreationError(e.message);
+        }
+    }
+
+    const onKeyUp = (event) => {
+        if (event.key === "Enter") createGroup();
+    }
+
+    return (
+        <Dialog open={open} onClose={closeDialog} onKeyUp={onKeyUp}>
+            <DialogTitle>Create group</DialogTitle>
+            <DialogContent sx={{maxWidth: 350}}>
+
+                {creationError && <Alert severity="error" sx={{mb: 1}}>{creationError}</Alert>}
+
+                <TextField variant="outlined" fullWidth placeholder="Name"
+                           label="Name" sx={{mt: 1}}
+                           value={name} onChange={updateName}
+                            InputProps={{startAdornment: <Group sx={{color: 'text.secondary', mr: 1}}/>}}/>
+
+                <TextField variant="outlined" fullWidth placeholder="Description" label="Description"
+                           sx={{mt: 1}} value={description} onChange={updateDescription}
+                             InputProps={{startAdornment: <Description sx={{color: 'text.secondary', mr: 1}}/>}}/>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={closeDialog}>Cancel</Button>
+                <Button onClick={createGroup} color="primary">Create</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/index.js b/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/index.js
new file mode 100644
index 0000000..2c7d817
--- /dev/null
+++ b/dashboard/src/states/Dashboard/pages/Groups/components/GroupCreationDialog/index.js
@@ -0,0 +1 @@
+export {GroupCreationDialog as default} from "./GroupCreationDialog.jsx";
\ No newline at end of file