OH2-295 | Types / Operation CRUD (#605)

* feature:Operation types admin

* fix:Fix type selector malfunction

* remove unused import

src/components/accessories/admin/operations/operationForm/OperationForm.tsx

@@ -33,7 +33,7 @@ import {
   updateOperationReset,
 } from "../../../../../state/operations/actions";
 import AutocompleteField from "../../../autocompleteField/AutocompleteField";
-import { getOperationTypes } from "../../../../../state/operationTypes/actions";
+import { getOperationTypes } from "../../../../../state/types/operations";
 
 const OperationForm: FC<IOperationProps> = ({
   fields,
@@ -54,7 +54,7 @@ const OperationForm: FC<IOperationProps> = ({
   );
 
   const operationsTypeState = useSelector(
-    (state: IState) => state.operationTypes.getOperationTypes
+    (state: IState) => state.types.operations.getAll
   );
 
   const operationsTypeOptions = useMemo(

src/components/accessories/admin/operations/operationTable/OperationTable.tsx

@@ -33,7 +33,7 @@ export const OperationTable: FunctionComponent<IOwnProps> = ({
     { label: string; value: string }[]
   >(
     (state) =>
-      state.operationTypes.getOperationTypes.data?.map((item) => ({
+      state.types.operations.getAll.data?.map((item) => ({
         label: item.description,
         value: item.code,
       })) ?? []

src/components/accessories/admin/types/TypesAdmin.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import AutocompleteField from "../../autocompleteField/AutocompleteField";
 import "./styles.scss";
 import { Outlet, useLocation, useNavigate } from "react-router";
 import { PATHS } from "../../../../consts";
 import { useSelector } from "react-redux";
 import { IState } from "../../../../types";
 import { TypeMode } from "../../../../state/types/config";
+import SelectField from "../../selectField/SelectField";
 
 type TypeOption = {
   label: string;
-  routePath: string | null;
+  value: string;
 };
 
 const TypesAdmin = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
-  const defaultTypeOption: TypeOption = { label: "", routePath: null };
+  const defaultTypeOption: TypeOption = { label: "", value: "" };
   const [selectedOption, setSelectedOption] =
     useState<TypeOption>(defaultTypeOption);
   const mode = useSelector<IState, TypeMode>(
@@ -26,7 +26,8 @@ const TypesAdmin = () => {
 
   const typeOptions: TypeOption[] = [
     defaultTypeOption,
-    { label: t("types.vaccines"), routePath: "vaccines" },
+    { label: t("types.vaccines"), value: "vaccines" },
+    { label: t("types.operations"), value: "operations" },
   ];
 
   useEffect(() => {
@@ -36,8 +37,8 @@ const TypesAdmin = () => {
     ) {
       const typeFromUrl = typeOptions.find(
         (typeOption) =>
-          typeOption.routePath !== null &&
-          typeOption.routePath.includes(
+          typeOption.value !== null &&
+          typeOption.value.includes(
             location.pathname.substring((PATHS.admin_types_base + "/").length)
           )
       );
@@ -50,28 +51,23 @@ const TypesAdmin = () => {
     }
   }, [location]);
 
-  const handleTypeChange = (e: any, type: TypeOption | null) => {
-    if (type?.routePath) {
-      navigate(PATHS.admin_types_base + "/" + type.routePath);
+  const handleTypeChange = (value: string) => {
+    if (value?.length > 0) {
+      navigate(PATHS.admin_types_base + "/" + value);
     } else {
       navigate(PATHS.admin_types_base);
     }
   };
 
-  const renderOption = (option: TypeOption) => {
-    return <span>{option.label}</span>;
-  };
-
   return (
     <>
       {mode === "manage" && (
         <div className="selectTypeControl">
-          <AutocompleteField
+          <SelectField
             fieldName="selectedType"
-            fieldValue={selectedOption?.label}
+            fieldValue={selectedOption?.value}
             label={t("types.selectAType")}
             onChange={handleTypeChange}
-            renderOption={renderOption}
             options={typeOptions}
             errorText={""}
             isValid={false}

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

@@ -1 +1,2 @@
 export * from "./vaccines";
+export * from "./operations";

src/components/accessories/admin/types/components/operations/OperationTypes.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router";
+import {
+  deleteOperationType,
+  deleteOperationTypeReset,
+  getOperationTypes,
+} from "../../../../../../state/types/operations/actions";
+import { OperationTypeDTO } from "../../../../../../generated";
+import { PATHS } from "../../../../../../consts";
+import OperationTypesTable from "./operationTypesTable";
+import Button from "../../../../button/Button";
+import "./styles.scss";
+import { setTypeMode } from "../../../../../../state/types/config";
+
+const OperationTypes = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getOperationTypes());
+    dispatch(setTypeMode("manage"));
+
+    return () => {
+      dispatch(deleteOperationTypeReset());
+    };
+  }, [dispatch]);
+
+  const handleEdit = (row: OperationTypeDTO) => {
+    navigate(PATHS.admin_operations_types_edit.replace(":code", row.code!), {
+      state: row,
+    });
+  };
+
+  const handleDelete = (row: OperationTypeDTO) => {
+    dispatch(deleteOperationType(row.code ?? ""));
+  };
+
+  const { t } = useTranslation();
+  return (
+    <>
+      <h3>{t("operationTypes.title")}</h3>
+
+      <div className="operationTypes">
+        <OperationTypesTable
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          headerActions={
+            <Button
+              onClick={() => {
+                navigate("./new");
+              }}
+              type="button"
+              variant="contained"
+              color="primary"
+            >
+              {t("operationTypes.addOperationType")}
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+};
+
+export default OperationTypes;

src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Navigate, useLocation, useParams } from "react-router";
+import { OperationTypeDTO } from "../../../../../../../generated";
+import { IState } from "../../../../../../../types";
+import { ApiResponse } from "../../../../../../../state/types";
+import { updateOperationType } from "../../../../../../../state/types/operations/actions";
+import { PATHS } from "../../../../../../../consts";
+import { setTypeMode } from "../../../../../../../state/types/config";
+import "./styles.scss";
+import OperationTypeForm from "../operationTypesForm/OperationTypeForm";
+import { getInitialFields } from "../operationTypesForm/consts";
+
+export const EditOperationType = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const { state }: { state: OperationTypeDTO | undefined } = useLocation();
+  const { code } = useParams();
+  const update = useSelector<IState, ApiResponse<OperationTypeDTO>>(
+    (state) => state.types.operations.update
+  );
+
+  const handleSubmit = (code: string, value: OperationTypeDTO) => {
+    dispatch(updateOperationType(code, value));
+  };
+
+  useEffect(() => {
+    dispatch(setTypeMode("edit"));
+  });
+
+  if (state?.code !== code) {
+    return <Navigate to={PATHS.admin_operations_types} />;
+  }
+
+  return (
+    <div className="editOperationType">
+      <h3 className="title">{t("operationTypes.editOperationType")}</h3>
+      <OperationTypeForm
+        creationMode={false}
+        onSubmit={handleSubmit}
+        isLoading={!!update.isLoading}
+        resetButtonLabel={t("common.cancel")}
+        submitButtonLabel={t("operationTypes.updateOperationType")}
+        fields={getInitialFields(state)}
+      />
+    </div>
+  );
+};

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

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

src/components/accessories/admin/types/components/operations/editOperationType/styles.scss

@@ -0,0 +1,5 @@
+.editOperationType {
+  .title {
+    margin-bottom: 10px;
+  }
+}

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

@@ -0,0 +1,7 @@
+import OperationTypes from "./OperationTypes";
+
+export default OperationTypes;
+export * from "./editOperationType";
+export * from "./newOperationType";
+export * from "./operationTypesForm";
+export * from "./operationTypesTable";

src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { IState } from "../../../../../../../types";
+import { ApiResponse } from "../../../../../../../state/types";
+import { OperationTypeDTO } from "../../../../../../../generated";
+import { createOperationType } from "../../../../../../../state/types/operations/actions";
+import { setTypeMode } from "../../../../../../../state/types/config";
+import "./styles.scss";
+import OperationTypeForm from "../operationTypesForm/OperationTypeForm";
+import { getInitialFields } from "../operationTypesForm/consts";
+
+export const NewOperationType = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const create = useSelector<IState, ApiResponse<OperationTypeDTO>>(
+    (state) => state.types.operations.create
+  );
+
+  useEffect(() => {
+    dispatch(setTypeMode("edit"));
+  });
+
+  const handleSubmit = (code: string, value: OperationTypeDTO) => {
+    dispatch(createOperationType(value));
+  };
+
+  return (
+    <div className="newOperationType">
+      <h3 className="title">{t("operationTypes.addOperationType")}</h3>
+      <OperationTypeForm
+        creationMode
+        onSubmit={handleSubmit}
+        isLoading={!!create.isLoading}
+        resetButtonLabel={t("common.cancel")}
+        submitButtonLabel={t("operationTypes.saveOperationTypes")}
+        fields={getInitialFields(undefined)}
+      />
+    </div>
+  );
+};

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

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

src/components/accessories/admin/types/components/operations/newOperationType/styles.scss

@@ -0,0 +1,5 @@
+.newOperationType {
+  .title {
+    margin-bottom: 10px;
+  }
+}