From 69d406720980d55b5bface33a47d89b24d413a40 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Mon, 18 Mar 2024 14:40:20 +0100
Subject: [PATCH] Added new component for viewing weeklyreport

---
 frontend/src/Components/ViewWeeklyReport.tsx | 243 +++++++++++++++++++
 1 file changed, 243 insertions(+)
 create mode 100644 frontend/src/Components/ViewWeeklyReport.tsx

diff --git a/frontend/src/Components/ViewWeeklyReport.tsx b/frontend/src/Components/ViewWeeklyReport.tsx
new file mode 100644
index 0000000..d6d4692
--- /dev/null
+++ b/frontend/src/Components/ViewWeeklyReport.tsx
@@ -0,0 +1,243 @@
+import { useState, useEffect } from "react";
+import { NewWeeklyReport } from "../Types/goTypes";
+import { api } from "../API/API";
+import { useNavigate } from "react-router-dom";
+import Button from "./Button";
+
+export default function GetWeeklyReport(): JSX.Element {
+  const [projectName, setProjectName] = useState("");
+  const [week, setWeek] = useState(0);
+  const [developmentTime, setDevelopmentTime] = useState(0);
+  const [meetingTime, setMeetingTime] = useState(0);
+  const [adminTime, setAdminTime] = useState(0);
+  const [ownWorkTime, setOwnWorkTime] = useState(0);
+  const [studyTime, setStudyTime] = useState(0);
+  const [testingTime, setTestingTime] = useState(0);
+
+  const token = localStorage.getItem("accessToken") ?? "";
+
+  useEffect(() => {
+    const fetchWeeklyReport = async (): Promise<void> => {
+      const response = await api.getWeeklyReport(
+        "username",
+        projectName,
+        "week",
+        token,
+      );
+
+      if (response.success) {
+        const report: NewWeeklyReport = response.data ?? {
+          projectName: "",
+          week: 0,
+          developmentTime: 0,
+          meetingTime: 0,
+          adminTime: 0,
+          ownWorkTime: 0,
+          studyTime: 0,
+          testingTime: 0,
+        };
+        setProjectName(report.projectName);
+        setWeek(report.week);
+        setDevelopmentTime(report.developmentTime);
+        setMeetingTime(report.meetingTime);
+        setAdminTime(report.adminTime);
+        setOwnWorkTime(report.ownWorkTime);
+        setStudyTime(report.studyTime);
+        setTestingTime(report.testingTime);
+      } else {
+        console.error("Failed to fetch weekly report:", response.message);
+      }
+    };
+
+    fetchWeeklyReport();
+  }, []);
+
+  const handleNewWeeklyReport = async (): Promise<void> => {
+    const newWeeklyReport: NewWeeklyReport = {
+      projectName,
+      week,
+      developmentTime,
+      meetingTime,
+      adminTime,
+      ownWorkTime,
+      studyTime,
+      testingTime,
+    };
+
+    await api.submitWeeklyReport(newWeeklyReport, token);
+  };
+
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
+        <form
+          onSubmit={(e) => {
+            if (week === 0) {
+              alert("Please enter a week number");
+              e.preventDefault();
+              return;
+            }
+            e.preventDefault();
+            void handleNewWeeklyReport();
+            navigate("/project");
+          }}
+        >
+          <div className="flex flex-col items-center">
+            <input
+              className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
+              type="week"
+              placeholder="Week"
+              onChange={(e) => {
+                const weekNumber = parseInt(e.target.value.split("-W")[1]);
+                setWeek(weekNumber);
+              }}
+              onKeyDown={(event) => {
+                event.preventDefault();
+              }}
+              onPaste={(event) => {
+                event.preventDefault();
+              }}
+            />
+            <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
+              <thead>
+                <tr>
+                  <th className="w-1/2 py-2 border-b-2 border-black">
+                    Activity
+                  </th>
+                  <th className="w-1/2 py-2 border-b-2 border-black">
+                    Total Time (min)
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-black">
+                <tr className="h-[10vh]">
+                  <td>Development</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={developmentTime}
+                      onChange={(e) => {
+                        setDevelopmentTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Meeting</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={meetingTime}
+                      onChange={(e) => {
+                        setMeetingTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Administration</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={adminTime}
+                      onChange={(e) => {
+                        setAdminTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Own Work</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={ownWorkTime}
+                      onChange={(e) => {
+                        setOwnWorkTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Studies</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={studyTime}
+                      onChange={(e) => {
+                        setStudyTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Testing</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={testingTime}
+                      onChange={(e) => {
+                        setTestingTime(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <Button
+              text="Submit"
+              onClick={(): void => {
+                return;
+              }}
+              type="submit"
+            />
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}