OH2-276, OH2-277, OH2-278, OH2-279, OH2-280 | Implement admin[wards] …

…feature (#579)

* feature(OH2-276): Implement main menu + sidemenu navigation

* update: Update routes paths

* update: Apply requested/suggested changes

* update: Add hospital infos

* update: Update admin sidemenu responsiveness

* styles: Update admin sidebar styles

* styles: Update MenuItem styles

* feature: Add ward list

* styles: Update component styles

* feature: Add ward edit/new form

* feature: Implement  ward crud operations

* update: Update form field values formatting

* styles: Update admin content width and remove unused import

* update: Optimize import and sync permissionList fixtures

* update: Remove unnecessary file and update ward table elements per page to 20

src/components/accessories/admin/index.ts

@@ -0,0 +1 @@
+export * from "./wards";

src/components/accessories/admin/wards/Wards.module.scss

@@ -0,0 +1,8 @@
+.wards {
+  display: flex;
+  flex-direction: column;
+}
+.actions {
+  display: flex;
+  justify-content: end;
+}

src/components/accessories/admin/wards/Wards.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import classes from "./Wards.module.scss";
+import { useDispatch } from "react-redux";
+import { deleteWard, getWards } from "../../../../state/ward/actions";
+import { WardDTO } from "../../../../generated";
+import WardTable from "./wardTable";
+import Button from "../../button/Button";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { PATHS } from "../../../../consts";
+
+export const Wards = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    dispatch(getWards());
+  }, [dispatch]);
+
+  const handleEdit = (row: WardDTO) => {
+    navigate(PATHS.wards_edit.replace("#id", row.code!), { state: row });
+  };
+
+  const handleDelete = (row: WardDTO) => {
+    dispatch(deleteWard(row.code ?? ""));
+  };
+
+  return (
+    <div className={classes.wards}>
+      <div className={classes.actions}>
+        <Button
+          onClick={() => {
+            navigate("./new");
+          }}
+          type="button"
+          variant="contained"
+          color="primary"
+        >
+          {t("ward.addWard")}
+        </Button>
+      </div>
+      <WardTable onEdit={handleEdit} onDelete={handleDelete} />
+    </div>
+  );
+};

src/components/accessories/admin/wards/editWard/EditWard.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import WardForm from "../wardForm/WardForm";
+import React from "react";
+import { getInitialFields } from "../wardForm/consts";
+import { useDispatch, useSelector } from "react-redux";
+import { WardDTO } from "../../../../../generated";
+import { IApiResponse } from "../../../../../state/types";
+import { updateWard } from "../../../../../state/ward/actions";
+import { IState } from "../../../../../types";
+import { Navigate, useLocation, useParams } from "react-router";
+import { PATHS } from "../../../../../consts";
+
+export const EditWard = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const { state }: { state: WardDTO | undefined } = useLocation();
+  const { id } = useParams();
+  const update = useSelector<IState, IApiResponse<WardDTO>>(
+    (state) => state.wards.update
+  );
+
+  const handleSubmit = (value: WardDTO) => {
+    dispatch(updateWard(value));
+  };
+
+  if (state?.code !== id) {
+    return <Navigate to={PATHS.wards} />;
+  }
+
+  return (
+    <WardForm
+      creationMode={false}
+      onSubmit={handleSubmit}
+      isLoading={!!update.isLoading}
+      resetButtonLabel={t("common.reset")}
+      submitButtonLabel={t("ward.updateWard")}
+      fields={getInitialFields(state)}
+    />
+  );
+};

src/components/accessories/admin/wards/editWard/index.ts

@@ -0,0 +1 @@
+export * from "./EditWard";

src/components/accessories/admin/wards/index.ts

@@ -0,0 +1,4 @@
+export * from "./Wards";
+export * from "./newWard";
+export * from "./editWard";
+export * from "./wardForm";

src/components/accessories/admin/wards/newWard/NewWard.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import WardForm from "../wardForm/WardForm";
+import React from "react";
+import { getInitialFields } from "../wardForm/consts";
+import { useDispatch, useSelector } from "react-redux";
+import { WardDTO } from "../../../../../generated";
+import { createWard } from "../../../../../state/ward/actions";
+import { IState } from "../../../../../types";
+import { IApiResponse } from "../../../../../state/types";
+
+export const NewWard = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const create = useSelector<IState, IApiResponse<WardDTO>>(
+    (state) => state.wards.create
+  );
+
+  const handleSubmit = (value: WardDTO) => {
+    dispatch(createWard(value));
+  };
+
+  return (
+    <WardForm
+      creationMode
+      onSubmit={handleSubmit}
+      isLoading={!!create.isLoading}
+      resetButtonLabel={t("common.reset")}
+      submitButtonLabel={t("ward.saveWard")}
+      fields={getInitialFields(undefined)}
+    />
+  );
+};

src/components/accessories/admin/wards/newWard/index.ts

@@ -0,0 +1 @@
+export * from "./NewWard";