Merge pull request #43 from CMP26Projects/assign-captain

Assign captain almost complete

client/src/components/assign-captain-page/AssignCaptainPage.jsx

@@ -0,0 +1,30 @@
+import PageTitle from "../common/PageTitle";
+import "./AssignCaptainPage.scss";
+import ChangeCaptainType from "./ChangeCaptainType";
+import AssignSector from "./AssignSector";
+import UnitAssignSector from "./UnitAssignSector";
+
+export default function AssignCaptainPage() {
+  return (
+    <div className="assign-captain-page container">
+      <PageTitle title="تعيين قائد" />
+      <div className="assign-captain-page__form__container">
+        <h4 className="assign-captain-page__form__title">تغيير رتبة قائد</h4>
+        <ChangeCaptainType />
+      </div>
+
+      <div className="assign-captain-page__form__container">
+        <h4 className="assign-captain-page__form__title">
+          تعيين قطاع لقائد عادي
+        </h4>
+        <AssignSector />
+      </div>
+      <div className="assign-captain-page__form__container">
+        <h4 className="assign-captain-page__form__title">
+          تعيين قطاعات لقائد وحدة
+        </h4>
+        <UnitAssignSector />
+      </div>
+    </div>
+  );
+}

client/src/components/assign-captain-page/AssignCaptainPage.scss

@@ -0,0 +1,22 @@
+.assign-captain-page
+{
+  direction: rtl;
+
+  &__form__container {
+    margin-block: 2rem;
+
+    h4 {
+      margin-bottom: 1rem;
+    }
+  }
+
+  form {
+    display: grid;
+    gap: 1rem;
+
+    .Button {
+      justify-self: center;
+      width: 50%;
+    }
+  }
+}

client/src/components/assign-captain-page/AssignSector.jsx

@@ -0,0 +1,132 @@
+import { toast } from "react-toastify";
+import { useGetCaptainsQuery } from "../../redux/slices/captainsApiSlice";
+import Button from "../common/Button";
+import CustomSelect from "../common/CustomSelect";
+import { useState } from "react";
+import {
+  useGetSectorsQuery,
+  useUpdateSectorRegularCaptainMutation,
+} from "../../redux/slices/sectorApiSlice";
+
+export default function AssignSector() {
+  const [chosenCaptainId, setChosenCaptainId] = useState("");
+  const [chosenSectorFullName, setChosenSectorFullName] = useState("");
+
+  const [assignRegularCaptain, { isLoading: isLoadingAssignRegularCaptain }] =
+    useUpdateSectorRegularCaptainMutation();
+
+  let {
+    data: captains,
+    isFetching: isFetchingCaptains,
+    isSuccess,
+  } = useGetCaptainsQuery();
+
+  let {
+    data: sectors,
+    isFetching: isFetchingSectors,
+    isSuccess: isSuccessSectors,
+  } = useGetSectorsQuery();
+
+  if (isSuccess) {
+    console.log({ captains: captains?.body });
+    captains = captains?.body;
+  }
+
+  if (isSuccessSectors) {
+    console.log({ sectors: sectors?.body });
+    sectors = sectors?.body;
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log({
+      captainId: chosenCaptainId,
+      baseName: chosenSectorFullName.split(" - ")[0],
+      suffixName: chosenSectorFullName.split(" - ")[1] || "",
+    });
+
+    try {
+      const res = await assignRegularCaptain({
+        captainId: chosenCaptainId,
+        baseName: chosenSectorFullName.split(" - ")[0],
+        suffixName: chosenSectorFullName.split(" - ")[1] || "",
+      }).unwrap();
+      console.log(res);
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while assigning the sector");
+
+      toast.success("تم تعيين القائد بنجاح");
+    } catch (err) {
+      toast.error("حدث خطأ أثناء تعيين القائد");
+      console.log(err);
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="assign-sector-to-captain">
+      <CustomSelect
+        name={"choose-sector"}
+        label={"أختر القطاع"}
+        data={
+          isFetchingSectors
+            ? [{ sectorId: "", fullName: "جاري التحميل" }]
+            : !sectors
+            ? [{ sectorId: "", fullName: "لا يوجد قطاعات" }]
+            : sectors?.map((sector) => ({
+                ...sector,
+                fullName: sector.baseName + " - " + sector.suffixName,
+              }))
+        }
+        displayMember={"fullName"}
+        valueMember={"fullName"}
+        selectedValue={chosenSectorFullName}
+        required={true}
+        onChange={(e) => {
+          setChosenSectorFullName(e.target.value);
+        }}
+      />
+      <CustomSelect
+        name={"choose-captain-for-sector"}
+        label={"أختر قائد"}
+        data={
+          isFetchingCaptains
+            ? [{ captainId: "", fullName: "جاري التحميل" }]
+            : !captains
+            ? [{ captainId: "", fullName: "لا يوجد قادة" }]
+            : captains
+                ?.filter((captain) => captain.type === "regular")
+                ?.map((captain) => ({
+                  ...captain,
+                  fullName:
+                    captain.firstName +
+                    " " +
+                    captain.middleName +
+                    " " +
+                    captain.lastName,
+                }))
+        }
+        displayMember={"fullName"}
+        valueMember={"captainId"}
+        selectedValue={chosenCaptainId}
+        required={true}
+        onChange={(e) => {
+          setChosenCaptainId(e.target.value);
+        }}
+      />
+      {isFetchingCaptains && (
+        <p
+          style={{
+            direction: "rtl",
+          }}
+        >
+          جاري التحميل
+        </p>
+      )}
+
+      <Button className="change-captain-role__btn Button--medium Button--regular">
+        إضافة
+      </Button>
+    </form>
+  );
+}

client/src/components/assign-captain-page/ChangeCaptainType.jsx

@@ -0,0 +1,117 @@
+import { toast } from "react-toastify";
+import {
+  useGetCaptainsQuery,
+  useUpdateCaptainTypeMutation,
+} from "../../redux/slices/captainsApiSlice";
+import Button from "../common/Button";
+import CustomSelect from "../common/CustomSelect";
+import { useState } from "react";
+
+export default function ChangeCaptainType() {
+  const [chosenCaptainId, setChosenCaptainId] = useState("");
+  const [type, setType] = useState("regular");
+
+  const [updateCaptainType, { isLoading: isLoadingUpdateCaptainType }] =
+    useUpdateCaptainTypeMutation();
+
+  let {
+    data: captains,
+    isFetching: isFetchingCaptains,
+    isSuccess,
+  } = useGetCaptainsQuery();
+
+  if (isSuccess) {
+    console.log(captains?.body);
+    captains = captains?.body;
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log({ captainId: chosenCaptainId, type });
+
+    try {
+      const res = await updateCaptainType({
+        captainId: chosenCaptainId,
+        type,
+      }).unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while updating the captain type");
+      toast.success("تم تعديل الرتبة بنجاح");
+    } catch (err) {
+      console.log(err);
+      toast.error("حدث خطأ أثناء تعديل الرتبة");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="change-captain-role">
+      <CustomSelect
+        name={"choose-captain"}
+        label={"أختار القائد"}
+        data={
+          isFetchingCaptains
+            ? [{ captainId: "", fullName: "جاري التحميل" }]
+            : !captains
+            ? [{ captainId: "", fullName: "لا يوجد قادة" }]
+            : captains?.map((captain) => ({
+                ...captain,
+                fullName:
+                  captain.firstName +
+                  " " +
+                  captain.middleName +
+                  " " +
+                  captain.lastName,
+              }))
+        }
+        displayMember={"fullName"}
+        valueMember={"captainId"}
+        selectedValue={chosenCaptainId}
+        required={true}
+        onChange={(e) => {
+          setChosenCaptainId(e.target.value);
+        }}
+      />
+      {isFetchingCaptains && (
+        <p
+          style={{
+            direction: "rtl",
+          }}
+        >
+          جاري التحميل
+        </p>
+      )}
+
+      <CustomSelect
+        name={"choose-type"}
+        label={"أختار الرتبة"}
+        data={[
+          { name: "قائد عادي", value: "regular" },
+          { name: "قائد وحدة", value: "unit" },
+          { name: "قائد عام او نائب قائد عام", value: "general" },
+        ]}
+        displayMember={"name"}
+        valueMember={"value"}
+        selectedValue={type}
+        required={true}
+        onChange={(e) => {
+          setType(e.target.value);
+        }}
+      />
+
+      {isLoadingUpdateCaptainType && (
+        <p
+          style={{
+            direction: "rtl",
+          }}
+        >
+          جاري التحميل
+        </p>
+      )}
+
+      <Button className="change-captain-role__btn Button--medium Button--primary-darker">
+        تعيين الرتبة
+      </Button>
+    </form>
+  );
+}