Insert sector page

client/src/components/common/UserActions.jsx

@@ -36,7 +36,6 @@ export default function UserActions() {
           تعيين قائد لقطاع
         </Button>
         <Button
-          disabled
           linkTo={ActionRoutes["Add Sector"]}
           className="Button--medium Button--regular"
         >

client/src/components/common/nav.jsx

@@ -54,7 +54,7 @@ export default function Nav() {
     <nav className="Nav">
       <div className="container">
         <div className="Nav__logo">
-          <Link to="/">
+          <Link to={show ? "/dashboard" : "/"}>
             <img src={logo} alt="logo" />
             <h2 className="logo-text">كشافة</h2>
           </Link>

client/src/components/insert-sector/InsertSector.jsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import Button from "../common/Button";
+import PageTitle from "../common/PageTitle";
+import TextInput from "../common/Inputs";
+import "./InsertSector.scss";
+import { useInsertSectorMutation } from "../../redux/slices/sectorApiSlice";
+import { toast } from "react-toastify";
+import { useGetCaptainsQuery } from "../../redux/slices/captainsApiSlice";
+import CustomSelect from "../common/CustomSelect";
+
+export default function InsertSector() {
+  const [sectorBaseName, setSectorBaseName] = useState("");
+  const [sectorSuffixName, setSectorSuffixName] = useState("");
+  const [unitSectorLeader, setUnitSectorLeader] = useState("");
+
+  const [insertSector, { isLoading: isLoadingInsertSector }] =
+    useInsertSectorMutation();
+
+  let unitCaptains = [];
+
+  const { data, isFetching } = useGetCaptainsQuery();
+
+  if (data && !isFetching) {
+    unitCaptains = data.body.filter((captain) => captain.type === "unit");
+    if (unitCaptains.length === 0) {
+      unitCaptains = [{ captainId: "", firstName: "لا يوجد قادة" }];
+    }
+  }
+
+  useEffect(() => {
+    if (unitCaptains.length === 1) {
+      setUnitSectorLeader(unitCaptains[0].captainId);
+    }
+  }, [unitCaptains]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const newSector = {
+      baseName: sectorBaseName,
+      suffixName: sectorSuffixName,
+      unitCaptainId: unitSectorLeader,
+    };
+    console.log(newSector);
+
+    // Try To Insert New Sector
+    try {
+      const res = await insertSector(newSector).unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while inserting the sector");
+      toast.success("تم إنشاء القطاع بنجاح");
+    } catch (err) {
+      toast.error("حدث خطأ أثناء إنشاء القطاع");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <div className="insert-sector container">
+      <PageTitle title="إنشاء قطاع جديد" />
+
+      <form onSubmit={handleSubmit} className="insert-sector__from">
+        <div className="insert-sector__form__container">
+          <TextInput
+            label="اسم القطاع"
+            type="text"
+            name="sectorBaseName"
+            value={sectorBaseName}
+            onChange={(e) => setSectorBaseName(e.target.value)}
+            placeholder="اسم القطاع"
+            required
+          />
+          <TextInput
+            label="رقم القطاع"
+            type="text"
+            name="sectorSuffixName"
+            value={sectorSuffixName}
+            onChange={(e) => setSectorSuffixName(e.target.value)}
+            placeholder="مثل: أ, ب, ج"
+            required
+          />
+          <CustomSelect
+            data={unitCaptains}
+            label="قائد القطاع"
+            name="unitSectorLeader"
+            selectedValue={unitSectorLeader}
+            onChange={(e) => {
+              setUnitSectorLeader(e.target.value);
+            }}
+            required
+            displayMember="firstName"
+            valueMember="captainId"
+          />
+          {isFetching && (
+            <p
+              style={{
+                direction: "rtl",
+              }}
+            >
+              جاري التحميل
+            </p>
+          )}
+        </div>
+        <Button className="insert-sector__btn Button--medium Button--primary-darker">
+          إنشاء
+        </Button>
+        {isLoadingInsertSector && (
+          <p
+            style={{
+              direction: "rtl",
+            }}
+          >
+            جاري الإنشاء
+          </p>
+        )}
+      </form>
+    </div>
+  );
+}

client/src/components/insert-sector/InsertSector.scss

@@ -0,0 +1,19 @@
+.insert-sector {
+  display: flex;
+  flex-direction: column;
+
+  &__from {
+    margin-block: 1rem;
+  }
+  &__form__container {
+    display: grid;
+    gap: 1rem;
+    margin-block: 1rem;
+  }
+  &__btn {
+    margin-block: 2rem;
+    width: 50%;
+    display: block;
+    margin-inline: auto;
+  }
+}

client/src/redux/slices/captainsApiSlice.js

@@ -10,7 +10,13 @@ export const captainsApi = apiSlice.injectEndpoints({
         method: "GET",
       }),
     }),
+    GetUnitCaptains: builder.query({
+      query: () => ({
+        url: `${CAPTAINS_URL}/`,
+        method: "GET",
+      }),
+    }),
   }),
 });
 
-export const { useGetCaptainsQuery } = captainsApi;
+export const { useGetCaptainsQuery, useGetUnitCaptainsQuery } = captainsApi;

client/src/redux/slices/sectorApiSlice.js

@@ -0,0 +1,29 @@
+import { apiSlice } from "./apiSlice";
+
+const SECTOR_URL = "/api/sector";
+
+export const captainsApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    InsertSector: builder.mutation({
+      query: (sector) => ({
+        url: `${SECTOR_URL}/`,
+        method: "POST",
+        body: sector,
+      }),
+    }),
+    UpdateSectorUnitCaptain: builder.mutation({
+      query: (sector) => ({
+        url: `${SECTOR_URL}/:baseName/:suffixName`,
+        method: "PATCH",
+        body: sector,
+        params: {
+          baseName: sector.baseName,
+          suffixName: sector.suffixName,
+        },
+      }),
+    }),
+  }),
+});
+
+export const { useInsertSectorMutation, useUpdateSectorUnitCaptainMutation } =
+  captainsApi;

client/src/routes.jsx

@@ -21,6 +21,7 @@ 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";
+import InsertSector from "./components/insert-sector/InsertSector";
 
 function Routes() {
   return (
@@ -34,6 +35,7 @@ function Routes() {
           <Route exact path="/profile" element={<CaptainProfile />} />
           <Route exact path="/start-new-term" element={<InsertTermPage />} />
           <Route exact path="/edit-term" element={<UpdateTermPage />} />
+          <Route exact path="/add-sector" element={<InsertSector />} />
         </Route>
 
         {/* Testing Routes */}