OH2-390 | Operation - edit: implement context

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

@@ -1,4 +1,5 @@
 import { useFormik } from "formik";
+import { OperationDTOOpeForEnum } from "generated";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
 import React, {
@@ -63,6 +64,15 @@ const OperationForm: FC<IOperationProps> = ({
     [operationsTypeState.data]
   );
 
+  const operationContextOptions = () => {
+    return Object.values(OperationDTOOpeForEnum).map((type) => {
+      return {
+        label: t(`operation.contextOptions.${type}`),
+        value: type,
+      };
+    });
+  };
+
   const errorMessage = useMemo(
     () =>
       (creationMode
@@ -150,19 +160,6 @@ const OperationForm: FC<IOperationProps> = ({
     <div className="operationForm">
       <form className="operationForm__form" onSubmit={formik.handleSubmit}>
         <div className="row start-sm center-xs">
-          <div className="operationForm__item fullWidth">
-            <AutocompleteField
-              fieldName="type"
-              fieldValue={formik.values.type}
-              label={t("operation.type")}
-              isValid={isValid("type")}
-              errorText={getErrorText("type")}
-              onBlur={onBlurCallback("type")}
-              options={operationsTypeOptions}
-              loading={operationsTypeState.status === "LOADING"}
-              disabled={isLoading}
-            />
-          </div>
           <div className="operationForm__item halfWidth">
             <TextField
               field={formik.getFieldProps("code")}
@@ -176,6 +173,22 @@ const OperationForm: FC<IOperationProps> = ({
             />
           </div>
           <div className="operationForm__item halfWidth">
+            <AutocompleteField
+              fieldName="type"
+              fieldValue={formik.values.type}
+              label={t("operation.type")}
+              isValid={isValid("type")}
+              errorText={getErrorText("type")}
+              onBlur={onBlurCallback("type")}
+              options={operationsTypeOptions}
+              loading={operationsTypeState.status === "LOADING"}
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+
+        <div className="row start-sm center-xs">
+          <div className="operationForm__item thirdWidth">
             <TextField
               field={formik.getFieldProps("description")}
               theme="regular"
@@ -187,10 +200,20 @@ const OperationForm: FC<IOperationProps> = ({
               disabled={isLoading}
             />
           </div>
-        </div>
-
-        <div className="row start-sm center-xs">
-          <div className="operationForm__item">
+          <div className="operationForm__item thirdWidth">
+            <AutocompleteField
+              fieldName="opeFor"
+              fieldValue={formik.values.opeFor}
+              label={t("operation.opeFor")}
+              isValid={isValid("opeFor")}
+              errorText={getErrorText("opeFor")}
+              onBlur={onBlurCallback("opeFor")}
+              options={operationContextOptions()}
+              loading={operationsTypeState.status === "LOADING"}
+              disabled={isLoading}
+            />
+          </div>
+          <div className="operationForm__item thirdWith">
             <CheckboxField
               fieldName={"major"}
               checked={formik.values.major === "1"}

src/components/accessories/admin/operations/operationForm/consts.ts

@@ -1,13 +1,17 @@
-import { TFields } from "../../../../../libraries/formDataHandling/types";
 import { OperationFormFieldName } from ".";
-import { OperationDTO } from "../../../../../generated";
+import { OperationDTO, OperationDTOOpeForEnum } from "../../../../../generated";
+import { TFields } from "../../../../../libraries/formDataHandling/types";
 
 export const getInitialFields: (
   operation: OperationDTO | undefined
 ) => TFields<OperationFormFieldName> = (operation) => ({
   code: { type: "text", value: operation?.code ?? "" },
   description: { type: "text", value: operation?.description ?? "" },
   type: { type: "text", value: operation?.type?.code ?? "" },
+  opeFor: {
+    type: "text",
+    value: operation?.opeFor ?? OperationDTOOpeForEnum.OpdAdmission,
+  },
   major: {
     type: "number",
     value: `${operation?.major ?? 1}`,

src/components/accessories/admin/operations/operationForm/styles.scss

@@ -17,7 +17,7 @@
 
   .operationForm__item {
     margin: 7px 0px;
-    padding: 0px 15px;
+    padding: 0px 7px;
     width: 50%;
     @include susy-media($narrow) {
       padding: 0px 10px;
@@ -50,7 +50,7 @@
       }
     }
     &.thirdWidth {
-      width: 33%;
+      width: 33.33%;
       @include susy-media($smartphone) {
         width: 100%;
       }

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

@@ -10,4 +10,9 @@ export interface IOperationProps {
   isLoading: boolean;
 }
 
-export type OperationFormFieldName = "code" | "description" | "type" | "major";
+export type OperationFormFieldName =
+  | "code"
+  | "description"
+  | "type"
+  | "major"
+  | "opeFor";

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

@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import React, { FunctionComponent, ReactNode, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import checkIcon from "../../../../../assets/check-icon.png";
-import { OperationDTO } from "../../../../../generated";
+import { OperationDTO, OperationDTOOpeForEnum } from "../../../../../generated";
 import { scrollToElement } from "../../../../../libraries/uiUtils/scrollToElement";
 import { deleteOperationReset } from "../../../../../state/operations";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
@@ -35,15 +35,26 @@ export const OperationTable: FunctionComponent<IOwnProps> = ({
       })) ?? []
   );
 
-  const header = ["code", "type", "description", "class"];
+  const operationContextOptions = () => {
+    return Object.values(OperationDTOOpeForEnum).map((type) => {
+      return {
+        label: t(`operation.contextOptions.${type}`),
+        value: type,
+      };
+    });
+  };
+
+  const header = ["code", "type", "description", "class", "opeFor"];
 
   const label = {
     code: t("operation.code"),
     type: t("operation.type"),
     description: t("operation.description"),
     class: t("operation.class"),
+    opeFor: t("operation.opeFor"),
   };
-  const order = ["code", "type", "description", "class"];
+
+  const order = ["code", "type", "description", "class", "opeFor"];
   const filters: TFilterField[] = [
     { key: "description", label: t("operation.description"), type: "text" },
     {
@@ -61,6 +72,12 @@ export const OperationTable: FunctionComponent<IOwnProps> = ({
         { label: t("operation.classes.major"), value: "1" },
       ],
     },
+    {
+      key: "opeFor",
+      label: t("operation.opeFor"),
+      type: "select",
+      options: operationContextOptions(),
+    },
   ];
 
   const { data, status, error } = useAppSelector(
@@ -89,6 +106,7 @@ export const OperationTable: FunctionComponent<IOwnProps> = ({
         code: item.code ?? "",
         type: item.type?.description ?? "",
         description: item.description ?? "",
+        opeFor: t(`operation.contextOptions.${item.opeFor}`),
         class:
           item.major === 0
             ? t("operation.classes.minor")

src/components/accessories/autocompleteField/styles.scss

@@ -18,7 +18,7 @@
   }
 
   .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] {
-    padding: 10px !important;
+    padding: 12px !important;
   }
 }
 

src/generated/models/OperationDTO.ts

@@ -37,6 +37,12 @@ export interface OperationDTO {
      * @memberof OperationDTO
      */
     type: OperationTypeDTO;
+    /**
+     * The operation context
+     * @type {string}
+     * @memberof OperationDTO
+     */
+    opeFor: OperationDTOOpeForEnum;
     /**
      * The operation major
      * @type {number}
@@ -50,3 +56,14 @@ export interface OperationDTO {
      */
     lock?: number;
 }
+
+/**
+ * @export
+ * @enum {string}
+ */
+export enum OperationDTOOpeForEnum {
+    OpdAdmission = 'opd_admission',
+    Admission = 'admission',
+    Opd = 'opd'
+}
+