From e06aced6dd56c405d03b000ec9543aa22dafcc3f Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Mon, 1 Apr 2024 02:13:24 +0200
Subject: [PATCH] ChangeRole component to change role and a view for it

---
 frontend/src/Components/ChangeRole.tsx     | 37 +++++++++++
 frontend/src/Components/ChangeRoleView.tsx | 77 ++++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 frontend/src/Components/ChangeRole.tsx
 create mode 100644 frontend/src/Components/ChangeRoleView.tsx

diff --git a/frontend/src/Components/ChangeRole.tsx b/frontend/src/Components/ChangeRole.tsx
new file mode 100644
index 0000000..54b1468
--- /dev/null
+++ b/frontend/src/Components/ChangeRole.tsx
@@ -0,0 +1,37 @@
+import { APIResponse, api } from "../API/API";
+
+export interface ProjectRoleChange {
+  username: string;
+  role: "project_manager" | "member" | "";
+  projectname: string;
+}
+
+export default function ChangeRole(roleChangeInfo: ProjectRoleChange): void {
+  if (
+    roleChangeInfo.username === "" ||
+    roleChangeInfo.role === "" ||
+    roleChangeInfo.projectname === ""
+  ) {
+    // FOR DEBUG
+    // console.log(roleChangeInfo.role + ": Role");
+    // console.log(roleChangeInfo.projectname + ": P-Name");
+    // console.log(roleChangeInfo.username + ": U-name");
+    alert("You have to select a role");
+    return;
+  }
+  api
+    .changeUserRole(roleChangeInfo, localStorage.getItem("accessToken") ?? "")
+    .then((response: APIResponse<void>) => {
+      if (response.success) {
+        alert("Role changed successfully");
+        location.reload();
+      } else {
+        alert(response.message);
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      alert(error);
+      console.error("An error occurred during change:", error);
+    });
+}
diff --git a/frontend/src/Components/ChangeRoleView.tsx b/frontend/src/Components/ChangeRoleView.tsx
new file mode 100644
index 0000000..be8fcd4
--- /dev/null
+++ b/frontend/src/Components/ChangeRoleView.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import Button from "./Button";
+import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
+
+export default function ChangeRoles(props: {
+  projectName: string;
+  username: string;
+}): JSX.Element {
+  const [selectedRole, setSelectedRole] = useState<
+    "project_manager" | "member" | ""
+  >("");
+
+  const handleRoleChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    if (event.target.value === "member") {
+      setSelectedRole(event.target.value);
+    } else if (event.target.value === "project_manager") {
+      setSelectedRole(event.target.value);
+    }
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const roleChangeInfo: ProjectRoleChange = {
+      username: props.username,
+      projectname: props.projectName,
+      role: selectedRole,
+    };
+    ChangeRole(roleChangeInfo);
+  };
+
+  return (
+    <div>
+      <h1 className="font-bold text-[22px] mb-[15px]">Change role:</h1>
+      <form
+        className="border-2 border-black rounded-lg p-2"
+        onSubmit={handleSubmit}
+      >
+        <div className="self-start text-left font-medium">
+          <div className="hover:font-bold">
+            <label>
+              <input
+                type="radio"
+                value="project_manager"
+                checked={selectedRole === "project_manager"}
+                onChange={handleRoleChange}
+                className="ml-2 mr-2 mb-5"
+              />
+              Project manager
+            </label>
+          </div>
+          <div className="hover:font-bold">
+            <label>
+              <input
+                type="radio"
+                value="member"
+                checked={selectedRole === "member"}
+                onChange={handleRoleChange}
+                className="ml-2 mr-2"
+              />
+              Member
+            </label>
+          </div>
+        </div>
+
+        <Button
+          text="Change"
+          onClick={(): void => {
+            return;
+          }}
+          type="submit"
+        />
+      </form>
+    </div>
+  );
+}