CMP26Projects · akramhany · Dec 26, 2023 · Dec 26, 2023 · Dec 26, 2023 · Dec 26, 2023
diff --git a/client/src/components/common/TermInfoSection.jsx b/client/src/components/common/TermInfoSection.jsx
@@ -67,8 +67,10 @@ export default function TermInfoSection() {
         }}
         className="row"
       >
-        <Button className="Button--danger">إلغاء الاسبوع</Button>
-        <Button className="Button--dark">تعديل الفترة</Button>
+        <Button disabled className="Button--danger">إلغاء الاسبوع</Button>
+        <Button linkTo="/edit-term" className="Button--dark">
+          تعديل الفترة
+        </Button>
       </div>
     </div>
   );

diff --git a/client/src/components/common/UserActions.jsx b/client/src/components/common/UserActions.jsx
@@ -72,21 +72,21 @@ export default function UserActions() {
         </Button>
         <Button
           disabled
-          linkTo={ActionRoutes["Sessions"]}
+          linkTo={ActionRoutes["Edit Scout"]}
           className="Button--medium Button--regular"
         >
           تعديل كشاف
         </Button>
         <Button
           disabled
-          linkTo={ActionRoutes["Sessions"]}
+          linkTo={ActionRoutes["Reports and Councils"]}
           className="Button--medium Button--regular"
         >
           التقارير والمجالس
         </Button>
         <Button
           disabled
-          linkTo={ActionRoutes["Sessions"]}
+          linkTo={ActionRoutes["Activities"]}
           className="Button--medium Button--regular"
         >
           الأنشطة
@@ -99,8 +99,7 @@ export default function UserActions() {
           المواضيع
         </Button>
         <Button
-          disabled
-          linkTo={ActionRoutes["Sessions"]}
+          linkTo={ActionRoutes["Start New Term"]}
           className="Button--medium span-2-cols Button--success"
         >
           بدء فترة جديدة

diff --git a/client/src/components/insert-term/InsertTermPage.jsx b/client/src/components/insert-term/InsertTermPage.jsx
@@ -0,0 +1,119 @@
+import { useState } from "react";
+import PageTitle from "../common/PageTitle";
+import TextInput from "../common/Inputs";
+import Button from "../common/Button";
+import CustomCheckbox from "../common/CustomCheckbox";
+import "./InsertTermPage.scss";
+import { useInsertTermMutation } from "../../redux/slices/termApiSlice";
+import { toast } from "react-toastify";
+
+export default function InsertTermPage() {
+  const [termName, setTermName] = useState("");
+  const [termStartDate, setTermStartDate] = useState("");
+  const [termEndDate, setTermEndDate] = useState("");
+  const [understandCheckbox, setUnderstandCheckbox] = useState(false);
+
+  const [insertTerm, { isLoading }] = useInsertTermMutation();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // TODO: send request with this info to the server
+    console.log({
+      termName,
+      startDate: termStartDate,
+      endDate: termEndDate,
+      understandCheckbox,
+    });
+    try {
+      const res = await insertTerm({
+        termName,
+        startDate: termStartDate,
+        endDate: termEndDate,
+      }).unwrap();
+      console.log(res);
+      if (res.status === 400 || res.status === 500 )
+        throw new Error("Something went wrong while inserting the term");
+      toast.success("تم إنشاء الفترة بنجاح");
+    } catch (err) {
+      console.log(err);
+      toast.error("حدث خطأ أثناء إنشاء الفترة");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <div className="insert-term container">
+      <PageTitle title="إنشاء فترة " />
+      <form className="insert-term__form" onSubmit={handleSubmit}>
+        <TextInput
+          label="اسم الفترة الجديدة"
+          type="text"
+          name="termName"
+          value={termName}
+          onChange={(e) => setTermName(e.target.value)}
+          placeholder="اسم الفترة"
+          required
+        />
+        <TextInput
+          label="تاريخ بداية الفترة"
+          type="date"
+          name="termStartDate"
+          value={termStartDate}
+          onChange={(e) => setTermStartDate(e.target.value)}
+          placeholder="تاريخ بداية الفترة"
+          required
+        />
+        <TextInput
+          label="تاريخ نهاية الفترة"
+          type="date"
+          name="termEndDate"
+          value={termEndDate}
+          onChange={(e) => setTermEndDate(e.target.value)}
+          placeholder="تاريخ نهاية الفترة"
+          required
+        />
+        <p className="insert-term__note">
+          **إنشاء فترة هو إجراء لا رجعة به يجب مراعاة انه بعد إنشاء الفترة
+          ستتحول كل الصفحات الاخرى الى احدث فترة تم إنشاءها
+        </p>
+        <CustomCheckbox
+          labels={["لقد فهمت"]}
+          values={["understand"]}
+          checkedValues={understandCheckbox ? ["understand"] : []}
+          onChange={(e) => setUnderstandCheckbox(e.target.checked)}
+          name="understand"
+          required
+        />
+        <Button
+          className="insert-term__btn Button--medium Button--primary-darker"
+          type="submit"
+        >
+          إنشاء الفترة
+        </Button>
+      </form>
+      {isLoading && (
+        <p
+          style={{
+            textAlign: "center",
+          }}
+        >
+          جاري إنشاء الفترة
+        </p>
+      )}
+      <div className="actions-row">
+        <Button
+          className="insert-term__btn Button--medium Button--danger"
+          disabled
+        >
+          الذهاب للترقيات
+        </Button>
+        <Button
+          className="insert-term__btn Button--medium Button--dark"
+          disabled
+        >
+          العودة للإجراءت
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/insert-term/InsertTermPage.scss b/client/src/components/insert-term/InsertTermPage.scss
@@ -0,0 +1,28 @@
+.insert-term {
+  &__form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-block: 1rem;
+    direction: rtl;
+
+    .input:nth-child(1),
+    .insert-term__note,
+    .insert-term__btn {
+      grid-column: 1 / 3;
+    }
+
+    .insert-term__note {
+      direction: rtl;
+      font-size: 13px;
+      color: var(--grey-400);
+    }
+  }
+
+  .actions-row {
+    direction: rtl;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+}
diff --git a/client/src/components/update-term-page/UpdateTermPage.jsx b/client/src/components/update-term-page/UpdateTermPage.jsx
@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import PageTitle from "../common/PageTitle";
+import TextInput from "../common/Inputs";
+import Button from "../common/Button";
+import CustomCheckbox from "../common/CustomCheckbox";
+import "../insert-term/InsertTermPage.scss";
+import {
+  useUpdateTermMutation,
+  useGetCurTermQuery,
+} from "../../redux/slices/termApiSlice";
+import { toast } from "react-toastify";
+
+export default function UpdateTermPage() {
+  const [termName, setTermName] = useState("");
+  const [termStartDate, setTermStartDate] = useState("");
+  const [termEndDate, setTermEndDate] = useState("");
+  const [understandCheckbox, setUnderstandCheckbox] = useState(false);
+
+  const [updateTerm, { isLoading }] = useUpdateTermMutation();
+
+  const { data, isFetching: isFetchingTerm } = useGetCurTermQuery();
+
+  useEffect(() => {
+    if (data && data.body) {
+      setTermName(data.body.termName);
+      let date = new Date(data.body.startDate).toISOString().split("T")[0];
+      setTermStartDate(date);
+      date = new Date(data.body.endDate).toISOString().split("T")[0];
+      setTermEndDate(date);
+    }
+  }, [data]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // TODO: send request with this info to the server
+    console.log({
+      termName,
+      startDate: termStartDate,
+      endDate: termEndDate,
+      understandCheckbox,
+    });
+    try {
+      const res = updateTerm({
+        termName,
+        startDate: termStartDate,
+        endDate: termEndDate,
+      }).unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while updating the term");
+      toast.success("تم تعديل الفترة بنجاح");
+    } catch (err) {
+      console.log(err);
+      toast.error("حدث خطأ أثناء تعديل الفترة");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <div className="insert-term container">
+      <PageTitle title="تعديل الفترة" />
+      {isFetchingTerm && (
+        <p
+          style={{
+            textAlign: "center",
+          }}
+        >
+          جاري تحميل الفترة
+        </p>
+      )}
+      <form className="insert-term__form" onSubmit={handleSubmit}>
+        <TextInput
+          label="اسم الفترة"
+          type="text"
+          name="termName"
+          value={termName}
+          onChange={(e) => setTermName(e.target.value)}
+          placeholder="اسم الفترة"
+          required
+        />
+        <TextInput
+          label="تاريخ بداية الفترة"
+          type="date"
+          name="termStartDate"
+          value={termStartDate}
+          onChange={(e) => setTermStartDate(e.target.value)}
+          placeholder="تاريخ بداية الفترة"
+          required
+        />
+        <TextInput
+          label="تاريخ نهاية الفترة"
+          type="date"
+          name="termEndDate"
+          value={termEndDate}
+          onChange={(e) => setTermEndDate(e.target.value)}
+          placeholder="تاريخ نهاية الفترة"
+          required
+        />
+        <p className="insert-term__note">
+          **إنشاء فترة هو إجراء لا رجعة به يجب مراعاة انه بعد إنشاء الفترة
+          ستتحول كل الصفحات الاخرى الى احدث فترة تم إنشاءها
+        </p>
+        <CustomCheckbox
+          labels={["لقد فهمت"]}
+          values={["understand"]}
+          checkedValues={understandCheckbox ? ["understand"] : []}
+          onChange={(e) => setUnderstandCheckbox(e.target.checked)}
+          name="understand"
+          required
+        />
+        <Button
+          className="insert-term__btn Button--medium Button--primary-darker"
+          type="submit"
+        >
+          تعديل الفترة
+        </Button>
+      </form>
+      {isLoading && (
+        <p
+          style={{
+            textAlign: "center",
+          }}
+        >
+          جاري تعديل الفترة
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/redux/slices/termApiSlice.js b/client/src/redux/slices/termApiSlice.js
@@ -22,11 +22,27 @@ export const termApi = apiSlice.injectEndpoints({
         method: "GET",
       }),
     }),
+    InsertTerm: builder.mutation({
+      query: (term) => ({
+        url: `${TERM_URL}/`,
+        method: "POST",
+        body: term,
+      }),
+    }),
+    UpdateTerm: builder.mutation({
+      query: (term) => ({
+        url: `${TERM_URL}/`,
+        method: "PATCH",
+        body: term,
+      }),
+    }),
   }),
 });
 
 export const {
   useGetCurTermQuery,
   useGetCurWeekQuery,
   useGetRemainingWeeksQuery,
+  useInsertTermMutation,
+  useUpdateTermMutation,
 } = termApi;
diff --git a/client/src/routes.jsx b/client/src/routes.jsx
@@ -19,6 +19,8 @@ import TestTypo from "./components/testing/testTypo";
 import TestLayout from "./components/testing/testLayout";
 import Dashboard from "./components/dashboard/Dashboard";
 import CaptainProfile from "./components/captain-profile/CaptainProfile";
+import InsertTermPage from "./components/insert-term/InsertTermPage";
+import UpdateTermPage from "./components/update-term-page/UpdateTermPage";
 
 function Routes() {
   return (
@@ -30,6 +32,8 @@ function Routes() {
           <Route exact path="/logIn" element={<LogIn />} />
           <Route exact path="/dashboard" element={<Dashboard />} />
           <Route exact path="/profile" element={<CaptainProfile />} />
+          <Route exact path="/start-new-term" element={<InsertTermPage />} />
+          <Route exact path="/edit-term" element={<UpdateTermPage />} />
         </Route>
 
         {/* Testing Routes */}