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

package/dist/openmrs-esm-fast-data-entry-app.js.buildmanifest.json

@@ -89,7 +89,7 @@
         "132.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "40bb1c715e131d6c01b0",
+      "hash": "0cc4d3100aace33b5e13",
       "childrenByOrder": {}
     },
     {
@@ -97,9 +97,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 118386,
+      "size": 135684,
       "sizes": {
-        "javascript": 118386
+        "javascript": 135684
       },
       "names": [],
       "idHints": [],
@@ -108,10 +108,10 @@
         "main"
       ],
       "files": [
-        "168.js"
+        "153.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "ac8a8e711522f166ca67",
+      "hash": "8aabfac7cc2b193a4cc0",
       "childrenByOrder": {}
     },
     {
@@ -137,7 +137,7 @@
         "main.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "4d1672badf0a60407f63",
+      "hash": "0445de82093ec647b280",
       "childrenByOrder": {}
     },
     {
@@ -275,7 +275,7 @@
         "327.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "99f1fbe84b07ca271277",
+      "hash": "c9ed3e3407a512dc9bfd",
       "childrenByOrder": {}
     },
     {
@@ -299,31 +299,6 @@
       "hash": "89ec6a0bec2a70e391a3",
       "childrenByOrder": {}
     },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 262576,
-      "sizes": {
-        "javascript": 262576
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-fast-data-entry-app",
-        "main"
-      ],
-      "files": [
-        "403.js"
-      ],
-      "auxiliaryFiles": [],
-      "hash": "fe3e72da71c970ea281a",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": true,
@@ -355,9 +330,9 @@
       "entry": false,
       "recorded": false,
       "reason": "split chunk (cache group: defaultVendors)",
-      "size": 52269,
+      "size": 254320,
       "sizes": {
-        "javascript": 52269
+        "javascript": 254320
       },
       "names": [],
       "idHints": [
@@ -368,10 +343,10 @@
         "main"
       ],
       "files": [
-        "553.js"
+        "571.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "aaf7c553fc74f87c94a5",
+      "hash": "72f70e2a11cfde796bdd",
       "childrenByOrder": {}
     },
     {
@@ -379,9 +354,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 2653,
+      "size": 2693,
       "sizes": {
-        "javascript": 2653
+        "javascript": 2693
       },
       "names": [],
       "idHints": [],
@@ -393,7 +368,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "6765217c3a3f27a18a03",
+      "hash": "d6170165d0b5cf47dea0",
       "childrenByOrder": {}
     },
     {
@@ -427,9 +402,9 @@
       "entry": false,
       "recorded": false,
       "reason": "split chunk (cache group: default)",
-      "size": 57293,
+      "size": 57424,
       "sizes": {
-        "javascript": 57251,
+        "javascript": 57382,
         "consume-shared": 42
       },
       "names": [],
@@ -442,7 +417,32 @@
         "617.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "a33453b3a1e5e07901b4",
+      "hash": "4135e212a76cc74d6fee",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 58881,
+      "sizes": {
+        "javascript": 58881
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-fast-data-entry-app",
+        "main"
+      ],
+      "files": [
+        "656.js"
+      ],
+      "auxiliaryFiles": [],
+      "hash": "6834b8d0c2e4e07071de",
       "childrenByOrder": {}
     },
     {
@@ -467,7 +467,7 @@
         "658.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "6e977757a62e76cac252",
+      "hash": "2906b87fd1f33d88432d",
       "childrenByOrder": {}
     },
     {
@@ -555,7 +555,7 @@
         "804.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "8178ba7ddf3eecea471b",
+      "hash": "60473f47b765dc6b2615",
       "childrenByOrder": {}
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-fast-data-entry-app",
-  "version": "1.0.1-pre.85",
+  "version": "1.0.1-pre.93",
   "license": "MPL-2.0",
   "description": "An OpenMRS 3.x microfrontend",
   "browser": "dist/openmrs-esm-fast-data-entry-app.js",
@@ -91,7 +91,7 @@
     "i18next": "^21.10.0",
     "i18next-parser": "^6.6.0",
     "react-hook-form": "^7.34.2",
-    "swr": "1.1.2"
+    "swr": "^2.1.3"
   },
   "stableVersion": "1.0.0"
 }

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>
   );
 };