OH2-216 | Add current admission component and remove it from admission table

src/components/accessories/admission/PatientAdmission.tsx

@@ -6,7 +6,7 @@ import { scrollToElement } from "../../../libraries/uiUtils/scrollToElement";
 import { useDispatch, useSelector } from "react-redux";
 import { IState } from "../../../types";
 import { AdmissionTransitionState } from "./types";
-import { AdmissionDTO, OpdDTO } from "../../../generated";
+import { AdmissionDTO, OpdDTO, PatientDTOStatusEnum } from "../../../generated";
 import InfoBox from "../infoBox/InfoBox";
 import ConfirmationDialog from "../confirmationDialog/ConfirmationDialog";
 import checkIcon from "../../../assets/check-icon.png";
@@ -23,6 +23,7 @@ import PatientAdmissionTable from "./admissionTable/AdmissionTable";
 import { isEmpty } from "lodash";
 import { usePermission } from "../../../libraries/permissionUtils/usePermission";
 import { getLastOpd } from "../../../state/opds/actions";
+import { CurrentAdmission } from "../currentAdmission/CurrentAdmission";
 
 const PatientAdmission: FC = () => {
   const { t } = useTranslation();
@@ -31,6 +32,7 @@ const PatientAdmission: FC = () => {
   const infoBoxRef = useRef<HTMLDivElement>(null);
   const [shouldResetForm, setShouldResetForm] = useState(false);
   const [creationMode, setCreationMode] = useState(true);
+  const [isEditingCurrent, setIsEditingCurrent] = useState(false);
   const [showForm, setShowForm] = useState(false);
   const [admissionToEdit, setAdmissionToEdit] =
     useState<AdmissionDTO | undefined>();
@@ -188,11 +190,16 @@ const PatientAdmission: FC = () => {
     scrollToElement(null);
   };
 
+  const onCurrentAdmissionChange = (value: boolean) => {
+    setIsEditingCurrent(value);
+  };
+
   return (
     <div className="patientAdmission">
-      {!showForm && (
+      {patient?.status === PatientDTOStatusEnum.I && (
         <InfoBox type="info" message={t("admission.patientalreadyadmitted")} />
       )}
+      {!open && <CurrentAdmission onEditChange={onCurrentAdmissionChange} />}
       {open && (
         <AdmissionForm
           fields={fields}
@@ -224,7 +231,10 @@ const PatientAdmission: FC = () => {
       />
 
       <ConfirmationDialog
-        isOpen={createStatus === "SUCCESS" || updateStatus === "SUCCESS"}
+        isOpen={
+          (createStatus === "SUCCESS" || updateStatus === "SUCCESS") &&
+          !isEditingCurrent
+        }
         title={creationMode ? t("admission.created") : t("admission.updated")}
         icon={checkIcon}
         info={

src/components/accessories/admission/admissionForm/AdmissionForm.tsx

@@ -170,6 +170,7 @@ const AdmissionForm: FC<AdmissionProps> = ({
       formattedValues.admType = admissionTypes?.find(
         (item) => item.code === formattedValues.admType
       );
+      formattedValues.type = formattedValues.admType?.code;
       formattedValues.ward = wards?.find(
         (item) => item.code === formattedValues.ward
       );

src/components/accessories/admission/admissionTable/AdmissionTable.tsx

@@ -45,7 +45,9 @@ const PatientAdmissionTable: FunctionComponent<IOwnProps> = ({
 
   const data = useSelector<IState, AdmissionDTO[]>((state) =>
     state.admissions.getPatientAdmissions.data
-      ? state.admissions.getPatientAdmissions.data
+      ? state.admissions.getPatientAdmissions.data.filter(
+          (e) => state.admissions.currentAdmissionByPatientId.data?.id !== e.id
+        )
       : []
   );
 

src/components/accessories/currentAdmission/CurrentAdmission.tsx

@@ -0,0 +1,73 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { AdmissionDTO, OpdDTO, PatientDTO } from "../../../generated";
+import { updateAdmission } from "../../../state/admissions/actions";
+import { IState } from "../../../types";
+import { useFields } from "../admission/useFields";
+import { CurrentAdmissionData } from "./currentAdmissionData/CurrentAdmissionData";
+import { CurrentAdmissionForm } from "./currentAdmissionForm/CurrentAdmissionForm";
+import "./styles.scss";
+import { IOwnProps } from "./types";
+
+export const CurrentAdmission: FunctionComponent<IOwnProps> = ({
+  onEditChange,
+}) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const [editionMode, setEditionMode] = useState(false);
+  const currentAdmission = useSelector(
+    (state: IState) => state.admissions.currentAdmissionByPatientId.data
+  );
+  const lastOpd = useSelector<IState, OpdDTO | undefined>(
+    (state) => state.opds.lastOpd.data
+  );
+
+  const handleEdit = () => {
+    setEditionMode(true);
+  };
+
+  const handleDiscard = () => {
+    setEditionMode(false);
+  };
+
+  const fields = useFields(currentAdmission, lastOpd?.disease);
+
+  const onSubmit = (adm: AdmissionDTO) => {
+    let admissionToSave: AdmissionDTO = {
+      ...currentAdmission,
+      deleted: "N",
+      type: adm.type,
+      admitted: adm.admitted,
+      fhu: adm.fhu,
+      admDate: adm.admDate,
+      admType: adm.admType,
+      diseaseIn: adm.diseaseIn,
+      note: adm.note,
+      ward: adm.ward,
+    };
+    dispatch(updateAdmission(admissionToSave));
+  };
+
+  useEffect(() => {
+    onEditChange(editionMode);
+  }, [editionMode]);
+
+  return (
+    <div className="currentAdmission">
+      {currentAdmission && !editionMode && (
+        <CurrentAdmissionData
+          onEdit={handleEdit}
+          admission={currentAdmission}
+        />
+      )}
+      {currentAdmission && editionMode && (
+        <CurrentAdmissionForm
+          fields={fields}
+          onSubmit={onSubmit}
+          onDiscard={handleDiscard}
+        />
+      )}
+    </div>
+  );
+};

src/components/accessories/currentAdmission/currentAdmissionData/CurrentAdmissionData.tsx

@@ -0,0 +1,75 @@
+import { IconButton } from "@material-ui/core";
+import { Edit } from "@material-ui/icons";
+import React, { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { AdmissionDTO, PatientDTO } from "../../../../generated";
+import { parseDate } from "../../../../libraries/formDataHandling/functions";
+import { IState } from "../../../../types";
+import Button from "../../button/Button";
+import TextField from "../../textField/TextField";
+import "../styles.scss";
+import AutocompleteField from "../../autocompleteField/AutocompleteField";
+import DateField from "../../dateField/DateField";
+import isEmpty from "lodash.isempty";
+import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+
+interface IOwnProps {
+  onEdit: () => void;
+  admission: AdmissionDTO;
+}
+
+export const CurrentAdmissionData: FunctionComponent<IOwnProps> = ({
+  onEdit,
+  admission,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="currentAdmissionData">
+      <div className="currentAdmission_leading">
+        <IconButton onClick={onEdit}>
+          <Edit />
+        </IconButton>
+      </div>
+      <div className="currentAdmissionData__content">
+        {!isEmpty(admission?.ward?.description) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.ward")}</span>
+            <p className="item_content">{admission?.ward?.description}</p>
+          </div>
+        )}
+        {!isEmpty(admission?.fhu) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.fhu")}</span>
+            <p className="item_content">{admission?.fhu}</p>
+          </div>
+        )}
+        {!isEmpty(admission?.admDate) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.admDate")}</span>
+            <p className="item_content">{renderDate(admission?.admDate)}</p>
+          </div>
+        )}
+        {!isEmpty(admission?.admType?.description) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.admType")}</span>
+            <p className="item_content">{admission?.admType?.description}</p>
+          </div>
+        )}
+        {!isEmpty(admission?.diseaseIn?.description) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.diseaseIn")}</span>
+            <p className="item_content">{admission?.diseaseIn?.description}</p>
+          </div>
+        )}
+        {!isEmpty(admission?.note) && (
+          <div className="fullWidth currentAdmissionData__item">
+            <span className="item_label">{t("admission.note")}</span>
+            <p className="item_content">{admission?.note}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};