@openmrs/esm-fast-data-entry-app 1.0.1-pre.87 → 1.0.1-pre.93

package/src/add-group-modal/AddGroupModal.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import {
   ComposedModal,
   Button,
@@ -7,9 +13,8 @@ import {
   ModalBody,
   TextInput,
   FormLabel,
-  Loading,
 } from "@carbon/react";
-import { Add, TrashCan } from "@carbon/react/icons";
+import { TrashCan } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import { ExtensionSlot, showToast } from "@openmrs/esm-framework";
 import styles from "./styles.scss";
@@ -18,23 +23,49 @@ import { usePostCohort } from "../hooks";
 
 const MemExtension = React.memo(ExtensionSlot);
 
+const buildPatientDisplay = (patient) => {
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  let display = identifier ? identifier + " - " : "";
+  display += (givenName || "") + " " + (familyName || "");
+  return display.replace(/\s+/g, " ");
+};
+
 const PatientRow = ({ patient, removePatient }) => {
   const { t } = useTranslation();
+  const onClickHandler = useCallback(
+    () => removePatient(patient?.uuid),
+    [patient, removePatient]
+  );
+  const patientDisplay = useMemo(() => {
+    if (!patient) {
+      return "";
+    }
+
+    if (patient.display) {
+      return patient.display;
+    }
+
+    return buildPatientDisplay(patient);
+  }, [patient]);
+
   return (
-    <li key={patient.uuid} className={styles.patientRow}>
+    <li key={patient?.uuid} className={styles.patientRow}>
       <span>
         <Button
           kind="tertiary"
           size="sm"
           hasIconOnly
-          onClick={() => removePatient(patient.uuid)}
+          onClick={onClickHandler}
           renderIcon={TrashCan}
           tooltipAlignment="start"
           tooltipPosition="top"
           iconDescription={t("remove", "Remove")}
         />
       </span>
-      <span className={styles.patientName}>{patient?.display}</span>
+      <span className={styles.patientName}>{patientDisplay}</span>
     </li>
   );
 };
@@ -108,18 +139,21 @@ const NewGroupForm = (props) => {
   );
 };
 
-const AddGroupModal = () => {
+const AddGroupModal = ({
+  patients = undefined,
+  isCreate = undefined,
+  groupName = "",
+  cohortUuid = undefined,
+  isOpen,
+  handleCancel,
+  onPostSubmit,
+}) => {
   const { setGroup } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
   const [errors, setErrors] = useState({});
-  const [name, setName] = useState("");
-  const [patientList, setPatientList] = useState([]);
-  const { post, result, isPosting, error } = usePostCohort();
-
-  const handleCancel = () => {
-    setOpen(false);
-  };
+  const [name, setName] = useState(groupName);
+  const [patientList, setPatientList] = useState(patients || []);
+  const { post, result, error } = usePostCohort();
 
   const removePatient = useCallback(
     (patientUuid: string) =>
@@ -174,9 +208,13 @@ const AddGroupModal = () => {
   const handleSubmit = () => {
     if (validate()) {
       post({
+        uuid: cohortUuid,
         name: name,
         cohortMembers: patientList.map((p) => ({ patient: p.uuid })),
       });
+      if (onPostSubmit) {
+        onPostSubmit();
+      }
     }
   };
 
@@ -198,7 +236,7 @@ const AddGroupModal = () => {
         title: t("postError", "POST Error"),
         description:
           error.message ??
-          t("unknownPostError", "An unknown error occured while saving data"),
+          t("unknownPostError", "An unknown error occurred while saving data"),
       });
       if (error.fieldErrors) {
         setErrors(
@@ -215,43 +253,31 @@ const AddGroupModal = () => {
 
   return (
     <div className={styles.modal}>
-      <Button
-        onClick={() => setOpen(true)}
-        renderIcon={Add}
-        iconDescription="Add"
-      >
-        {t("createNewGroup", "Create New Group")}
-      </Button>
-      <ComposedModal open={open} onClose={() => setOpen(false)}>
-        <ModalHeader>{t("createNewGroup", "Create New Group")}</ModalHeader>
+      <ComposedModal open={isOpen} onClose={handleCancel}>
+        <ModalHeader>
+          {isCreate
+            ? t("createNewGroup", "Create New Group")
+            : t("editGroup", "Edit Group")}
+        </ModalHeader>
         <ModalBody>
-          {result ? (
-            <p>Group saved succesfully</p>
-          ) : isPosting ? (
-            <div className={styles.loading}>
-              <Loading withOverlay={false} />
-              <span>Saving new group...</span>
-            </div>
-          ) : (
-            <NewGroupForm
-              {...{
-                name,
-                setName,
-                patientList,
-                updatePatientList,
-                errors,
-                validate,
-                removePatient,
-              }}
-            />
-          )}
+          <NewGroupForm
+            {...{
+              name,
+              setName,
+              patientList,
+              updatePatientList,
+              errors,
+              validate,
+              removePatient,
+            }}
+          />
         </ModalBody>
         <ModalFooter>
-          <Button kind="secondary" onClick={handleCancel} disabled={isPosting}>
+          <Button kind="secondary" onClick={handleCancel}>
             {t("cancel", "Cancel")}
           </Button>
-          <Button kind="primary" onClick={handleSubmit} disabled={isPosting}>
-            {t("createGroup", "Create Group")}
+          <Button kind="primary" onClick={handleSubmit}>
+            {isCreate ? t("createGroup", "Create Group") : t("save", "Save")}
           </Button>
         </ModalFooter>
       </ComposedModal>

package/src/group-form-entry-workflow/SessionDetailsForm.tsx

@@ -6,11 +6,13 @@ import {
   DatePicker,
   DatePickerInput,
 } from "@carbon/react";
-import React from "react";
+import React, { useContext } from "react";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
 import { AttendanceTable } from "./attendance-table";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import useGetPatients from "../hooks/useGetPatients";
 
 const SessionDetailsForm = () => {
   const { t } = useTranslation();
@@ -20,101 +22,108 @@ const SessionDetailsForm = () => {
     control,
   } = useFormContext();
 
+  const { patientUuids } = useContext(GroupFormWorkflowContext);
+  const { patients, isLoading } = useGetPatients(patientUuids);
+
   return (
-    <div className={styles.formSection}>
-      <h4>{t("sessionDetails", "1. Session details")}</h4>
-      <div>
-        <p>
-          {t(
-            "allFieldsRequired",
-            "All fields are required unless marked optional"
-          )}
-        </p>
-      </div>
-      <Layer>
-        <Tile className={styles.formSectionTile}>
+    <div>
+      {!isLoading && (
+        <div className={styles.formSection}>
+          <h4>{t("sessionDetails", "1. Session details")}</h4>
+          <div>
+            <p>
+              {t(
+                "allFieldsRequired",
+                "All fields are required unless marked optional"
+              )}
+            </p>
+          </div>
           <Layer>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                rowGap: "1.5rem",
-              }}
-            >
-              <TextInput
-                id="text"
-                type="text"
-                labelText={t("sessionName", "Session Name")}
-                {...register("sessionName", { required: true })}
-                invalid={errors.sessionName}
-                invalidText={"This field is required"}
-              />
-              <TextInput
-                id="text"
-                type="text"
-                labelText={t("practitionerName", "Practitioner Name")}
-                {...register("practitionerName", { required: true })}
-                invalid={errors.practitionerName}
-                invalidText={"This field is required"}
-              />
-              <Controller
-                name="sessionDate"
-                control={control}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <DatePicker
-                    datePickerType="single"
-                    size="md"
-                    maxDate={new Date()}
-                    {...field}
-                  >
-                    <DatePickerInput
-                      id="session-date"
-                      labelText={t("sessionDate", "Session Date")}
-                      placeholder="mm/dd/yyyy"
-                      size="md"
-                      invalid={errors.sessionDate}
-                      invalidText={"This field is required"}
-                    />
-                  </DatePicker>
-                )}
-              />
-              <TextArea
-                id="text"
-                type="text"
-                labelText={t("sessionNotes", "Session Notes")}
-                {...register("sessionNotes", { required: true })}
-                invalid={errors.sessionNotes}
-                invalidText={"This field is required"}
-              />
-            </div>
+            <Tile className={styles.formSectionTile}>
+              <Layer>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "1.5rem",
+                  }}
+                >
+                  <TextInput
+                    id="text"
+                    type="text"
+                    labelText={t("sessionName", "Session Name")}
+                    {...register("sessionName", { required: true })}
+                    invalid={errors.sessionName}
+                    invalidText={"This field is required"}
+                  />
+                  <TextInput
+                    id="text"
+                    type="text"
+                    labelText={t("practitionerName", "Practitioner Name")}
+                    {...register("practitionerName", { required: true })}
+                    invalid={errors.practitionerName}
+                    invalidText={"This field is required"}
+                  />
+                  <Controller
+                    name="sessionDate"
+                    control={control}
+                    rules={{ required: true }}
+                    render={({ field }) => (
+                      <DatePicker
+                        datePickerType="single"
+                        size="md"
+                        maxDate={new Date()}
+                        {...field}
+                      >
+                        <DatePickerInput
+                          id="session-date"
+                          labelText={t("sessionDate", "Session Date")}
+                          placeholder="mm/dd/yyyy"
+                          size="md"
+                          invalid={errors.sessionDate}
+                          invalidText={"This field is required"}
+                        />
+                      </DatePicker>
+                    )}
+                  />
+                  <TextArea
+                    id="text"
+                    type="text"
+                    labelText={t("sessionNotes", "Session Notes")}
+                    {...register("sessionNotes", { required: true })}
+                    invalid={errors.sessionNotes}
+                    invalidText={"This field is required"}
+                  />
+                </div>
+              </Layer>
+            </Tile>
           </Layer>
-        </Tile>
-      </Layer>
-      <h4>{t("sessionParticipants", "2. Session participants")}</h4>
-      <div>
-        <p>
-          {t(
-            "markAbsentPatients",
-            "The patients in this group. Patients that are not present in the session should be marked as absent."
-          )}
-        </p>
-      </div>
-      <Layer>
-        <Tile className={styles.formSectionTile}>
+          <h4>{t("sessionParticipants", "2. Session participants")}</h4>
+          <div>
+            <p>
+              {t(
+                "markAbsentPatients",
+                "The patients in this group. Patients that are not present in the session should be marked as absent."
+              )}
+            </p>
+          </div>
           <Layer>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                rowGap: "1.5rem",
-              }}
-            >
-              <AttendanceTable />
-            </div>
+            <Tile className={styles.formSectionTile}>
+              <Layer>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "1.5rem",
+                  }}
+                >
+                  <AttendanceTable patients={patients} />
+                </div>
+              </Layer>
+            </Tile>
           </Layer>
-        </Tile>
-      </Layer>
+        </div>
+      )}
     </div>
   );
 };

package/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
+import { Edit } from "@carbon/react/icons";
 
 import {
   Checkbox,
@@ -9,13 +10,13 @@ import {
   TableHeader,
   TableBody,
   TableCell,
+  Button,
 } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
-import { useGetPatient } from "../../hooks";
+import AddGroupModal from "../../add-group-modal/AddGroupModal";
 
-const PatientRow = ({ patientUuid }) => {
-  const patient = useGetPatient(patientUuid);
+const PatientRow = ({ patient }) => {
   const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
     GroupFormWorkflowContext
   );
@@ -25,9 +26,9 @@ const PatientRow = ({ patientUuid }) => {
 
   const handleOnChange = (e, { checked }) => {
     if (checked) {
-      addPatientUuid(patientUuid);
+      addPatientUuid(patient.id);
     } else {
-      removePatientUuid(patientUuid);
+      removePatientUuid(patient.id);
     }
   };
 
@@ -57,8 +58,8 @@ const PatientRow = ({ patientUuid }) => {
       <TableCell>{identifier}</TableCell>
       <TableCell>
         <Checkbox
-          checked={patientUuids.includes(patientUuid)}
-          labelText={patientUuid}
+          checked={patientUuids.includes(patient.id)}
+          labelText={patient.id}
           hideLabel
           id={`${identifier}-attendance-checkbox`}
           onChange={handleOnChange}
@@ -68,37 +69,75 @@ const PatientRow = ({ patientUuid }) => {
   );
 };
 
-const AttendanceTable = () => {
+const AttendanceTable = ({ patients }) => {
   const { t } = useTranslation();
-  const { activeGroupUuid, activeGroupMembers } = useContext(
+  const { activeGroupUuid, activeGroupName, activeGroupMembers } = useContext(
     GroupFormWorkflowContext
   );
 
+  const [isOpen, setOpen] = useState(false);
+
   const headers = [
     t("name", "Name"),
     t("identifier", "Patient ID"),
     t("patientIsPresent", "Patient is present"),
   ];
 
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onPostSubmit = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const newArr = useMemo(() => {
+    return activeGroupMembers.map(function (value) {
+      const patient = patients.find((patient) => patient.id === value);
+      return { uuid: value, ...patient };
+    });
+  }, [activeGroupMembers, patients]);
+
   if (!activeGroupUuid) {
     return <div>{t("selectGroupFirst", "Please select a group first")}</div>;
   }
 
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          {headers.map((header, index) => (
-            <TableHeader key={index}>{header}</TableHeader>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {activeGroupMembers.map((patientUuid, index) => (
-          <PatientRow {...{ patientUuid }} key={index} />
-        ))}
-      </TableBody>
-    </Table>
+    <div>
+      <span style={{ flexGrow: 1 }} />
+      <Button kind="ghost" onClick={() => setOpen(true)}>
+        {t("editGroup", "Edit Group")}&nbsp;
+        <Edit size={20} />
+      </Button>
+      <AddGroupModal
+        {...{
+          cohortUuid: activeGroupUuid,
+          patients: newArr,
+          isCreate: false,
+          groupName: activeGroupName,
+          isOpen: isOpen,
+          handleCancel: handleCancel,
+          onPostSubmit: onPostSubmit,
+        }}
+      />
+      <Table>
+        <TableHead>
+          <TableRow>
+            {headers.map((header, index) => (
+              <TableHeader key={index}>{header}</TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {activeGroupMembers.map((patientUuid, index) => {
+            const patient = patients.find(
+              (patient) => patient.id === patientUuid
+            );
+            return <PatientRow patient={patient} key={index} />;
+          })}
+        </TableBody>
+      </Table>
+    </div>
   );
 };
 

package/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx

@@ -1,6 +1,6 @@
-import { Close } from "@carbon/react/icons";
+import { Close, Add } from "@carbon/react/icons";
 import { Button } from "@carbon/react";
-import React, { useContext } from "react";
+import React, { useCallback, useContext, useState } from "react";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
@@ -12,10 +12,23 @@ const GroupSearchHeader = () => {
   const { activeGroupUuid, setGroup, destroySession } = useContext(
     GroupFormWorkflowContext
   );
+  const [isOpen, setOpen] = useState(false);
   const handleSelectGroup = (group) => {
     setGroup(group);
   };
 
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onPostSubmit = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleOpenClick = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   if (activeGroupUuid) return null;
 
   return (
@@ -26,7 +39,21 @@ const GroupSearchHeader = () => {
       </span>
       <span className={styles.padded}>{t("or", "or")}</span>
       <span>
-        <AddGroupModal />
+        <Button
+          onClick={handleOpenClick}
+          renderIcon={Add}
+          iconDescription="Add"
+        >
+          {t("createNewGroup", "Create New Group")}
+        </Button>
+        <AddGroupModal
+          {...{
+            isCreate: true,
+            isOpen: isOpen,
+            handleCancel: handleCancel,
+            onPostSubmit: onPostSubmit,
+          }}
+        />
       </span>
       <span style={{ flexGrow: 1 }} />
       <span>

package/src/hooks/useGetPatients.ts

@@ -0,0 +1,34 @@
+import { fetchCurrentPatient } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+const useGetPatients = (patientUuids) => {
+  const [patients, setPatients] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!patientUuids || patientUuids.length === 0) {
+      setPatients([]);
+      setIsLoading(false);
+    } else {
+      getPatients(patientUuids);
+    }
+  }, [patientUuids]);
+
+  const getPatients = async (uuids) => {
+    try {
+      setIsLoading(true);
+      const results = await Promise.all(
+        uuids.map(async (uuid) => await fetchCurrentPatient(uuid))
+      );
+      setPatients(results);
+      setIsLoading(false);
+    } catch (error) {
+      console.error("Error fetching patients:", error);
+      setIsLoading(false);
+    }
+  };
+
+  return { patients, isLoading };
+};
+
+export default useGetPatients;

package/src/hooks/usePostEndpoint.ts

@@ -31,7 +31,13 @@ const usePostEndpoint = ({ endpointUrl }) => {
   const post = useCallback(
     async (data) => {
       setSubmissionInProgress(true);
-      return openmrsFetch(endpointUrl, {
+
+      let path = endpointUrl;
+      if (data.uuid) {
+        path += "/" + data.uuid;
+      }
+
+      return openmrsFetch(path, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

package/translations/en.json

@@ -14,6 +14,7 @@
   "createNewPatient": "Create new patient",
   "createNewSession": "Create New Session",
   "discard": "Discard",
+  "editGroup": "Edit Group",
   "error": "Error",
   "errorCopy": "Sorry, there was an error. You can try to reload this page, or contact the site administrator and quote the error code above.",
   "errorLoadingData": "Error Loading Data",
@@ -46,6 +47,7 @@
   "remove": "Remove",
   "resumeGroupSession": "Resume Group Session",
   "resumeSession": "Resume Session",
+  "save": "Save",
   "saveAndComplete": "Save & Complete",
   "saveExplanation": "Do you want to save the current form and exit the workflow?",
   "saveForm": "Save Form",
@@ -63,5 +65,5 @@
   "startGroupSession": "Start Group Session",
   "trySearchWithPatientUniqueID": "Try searching with the cohort's description",
   "unknown": "Unknown",
-  "unknownPostError": "An unknown error occured while saving data"
+  "unknownPostError": "An unknown error occurred while saving data"
 }