OH2-303 | Implement operation create, update and delete operations (#594

)

* feature(OH2-303): Implement operation create, update and delete operations

* refactor: Rename admin operation paths

* fix: Fix operation delete i18n labels and refactor delete status

---------

Co-authored-by: SteveGT96 <[email protected]>

src/components/accessories/admin/operations/Operations.tsx

@@ -1,31 +1,54 @@
 import React, { useEffect } from "react";
 import classes from "./Operations.module.scss";
 import { useDispatch } from "react-redux";
+import {
+  deleteOperation,
+  getOperations,
+} from "../../../../state/operations/actions";
 import { OperationDTO } from "../../../../generated";
 import OperationTable from "./operationTable";
-import { getOperations } from "../../../../state/operations/actions";
-import { getOperationTypes } from "../../../../state/operationTypes/actions";
+import Button from "../../button/Button";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { PATHS } from "../../../../consts";
 
 export const Operations = () => {
+  const navigate = useNavigate();
   const dispatch = useDispatch();
+  const { t } = useTranslation();
 
   useEffect(() => {
     dispatch(getOperations());
-    dispatch(getOperationTypes());
   }, [dispatch]);
 
   const handleEdit = (row: OperationDTO) => {
-    // TODO
+    navigate(PATHS.admin_operations_edit.replace("#id", row.code!), {
+      state: row,
+    });
   };
 
   const handleDelete = (row: OperationDTO) => {
-    // TODO
+    dispatch(deleteOperation(row.code ?? ""));
   };
 
   return (
     <div className={classes.operations}>
-      <div className={classes.actions}></div>
-      <OperationTable onEdit={handleEdit} onDelete={handleDelete} />
+      <OperationTable
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        headerActions={
+          <Button
+            onClick={() => {
+              navigate(PATHS.admin_operations_new);
+            }}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            {t("operation.addOperation")}
+          </Button>
+        }
+      />
     </div>
   );
 };

src/components/accessories/admin/operations/editOperation/EditOperation.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import OperationForm from "../operationForm/OperationForm";
+import React from "react";
+import { getInitialFields } from "../operationForm/consts";
+import { useDispatch, useSelector } from "react-redux";
+import { OperationDTO } from "../../../../../generated";
+import { ApiResponse } from "../../../../../state/types";
+import { updateOperation } from "../../../../../state/operations/actions";
+import { IState } from "../../../../../types";
+import { Navigate, useLocation, useParams } from "react-router";
+import { PATHS } from "../../../../../consts";
+
+export const EditOperation = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const { state }: { state: OperationDTO | undefined } = useLocation();
+  const { id } = useParams();
+  const update = useSelector<IState, ApiResponse<OperationDTO>>(
+    (state) => state.operations.update
+  );
+
+  const handleSubmit = (value: OperationDTO) => {
+    dispatch(updateOperation({ code: id ?? "", operationDTO: value }));
+  };
+
+  if (state?.code !== id) {
+    return <Navigate to={PATHS.admin_operations} />;
+  }
+
+  return (
+    <OperationForm
+      creationMode={false}
+      onSubmit={handleSubmit}
+      isLoading={!!update.isLoading}
+      resetButtonLabel={t("common.cancel")}
+      submitButtonLabel={t("operation.updateOperation")}
+      fields={getInitialFields(state)}
+    />
+  );
+};

src/components/accessories/admin/operations/editOperation/index.ts

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

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

@@ -1 +1,3 @@
 export * from "./Operations";
+export * from "./newOperation";
+export * from "./editOperation";

src/components/accessories/admin/operations/newOperation/NewOperation.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import OperationForm from "../operationForm/OperationForm";
+import React from "react";
+import { getInitialFields } from "../operationForm/consts";
+import { useDispatch, useSelector } from "react-redux";
+import { OperationDTO } from "../../../../../generated";
+import { createOperation } from "../../../../../state/operations/actions";
+import { IState } from "../../../../../types";
+import { ApiResponse } from "../../../../../state/types";
+
+export const NewOperation = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const create = useSelector<IState, ApiResponse<OperationDTO>>(
+    (state) => state.operations.create
+  );
+
+  const handleSubmit = (value: OperationDTO) => {
+    dispatch(createOperation(value));
+  };
+
+  return (
+    <OperationForm
+      creationMode
+      onSubmit={handleSubmit}
+      isLoading={!!create.isLoading}
+      resetButtonLabel={t("common.cancel")}
+      submitButtonLabel={t("operation.saveOperation")}
+      fields={getInitialFields(undefined)}
+    />
+  );
+};

src/components/accessories/admin/operations/newOperation/index.ts

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