@openmrs/esm-fast-data-entry-app 1.0.1-pre.17 → 1.0.1-pre.21

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

@@ -0,0 +1,122 @@
+import {
+  Layer,
+  Tile,
+  TextInput,
+  TextArea,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import React from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import { AttendanceTable } from "./attendance-table";
+
+const SessionDetailsForm = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  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}>
+          <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>
+      <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}>
+          <Layer>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                rowGap: "1.5rem",
+              }}
+            >
+              <AttendanceTable />
+            </div>
+          </Layer>
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+export default SessionDetailsForm;

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

@@ -0,0 +1,107 @@
+import { Button } from "@carbon/react";
+import React, { useContext, useEffect, useState } from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import CancelModal from "../CancelModal";
+import SessionDetailsForm from "./SessionDetailsForm";
+
+const NewGroupWorkflowButtons = () => {
+  const { t } = useTranslation();
+  const context = useContext(GroupFormWorkflowContext);
+  const { workflowState, patientUuids } = context;
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button kind="secondary" type="submit" disabled={!patientUuids.length}>
+          {t("createNewSession", "Create New Session")}
+        </Button>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            setCancelModalOpen(true);
+          }}
+        >
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal
+        open={cancelModalOpen}
+        setOpen={setCancelModalOpen}
+        context={context}
+      />
+    </>
+  );
+};
+
+const GroupIdField = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    setValue,
+  } = useFormContext();
+  const { activeGroupUuid } = useContext(GroupFormWorkflowContext);
+
+  useEffect(() => {
+    if (activeGroupUuid) setValue("groupUuid", activeGroupUuid);
+  }, [activeGroupUuid, setValue]);
+
+  return (
+    <>
+      <input
+        hidden
+        {...register("groupUuid", {
+          value: activeGroupUuid,
+          required: t("chooseGroupError", "Please choose a group."),
+        })}
+      />
+      {errors.groupUuid && !activeGroupUuid && (
+        <div className={styles.formError}>
+          {errors.groupUuid.message as string}
+        </div>
+      )}
+    </>
+  );
+};
+
+const SessionMetaWorkspace = () => {
+  const { t } = useTranslation();
+  const { setSessionMeta, workflowState } = useContext(
+    GroupFormWorkflowContext
+  );
+  const methods = useForm();
+
+  const onSubmit = (data) => {
+    const { sessionDate, ...rest } = data;
+    setSessionMeta({ ...rest, sessionDate: sessionDate[0] });
+  };
+
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <div className={styles.workspace}>
+          <div className={styles.formMainContent}>
+            <div className={styles.formContainer}>
+              <SessionDetailsForm />
+            </div>
+            <div className={styles.rightPanel}>
+              <h4>{t("newGroupSession", "New Group Session")}</h4>
+              <GroupIdField />
+              <hr style={{ width: "100%" }} />
+              <NewGroupWorkflowButtons />
+            </div>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default SessionMetaWorkspace;

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

@@ -0,0 +1,105 @@
+import React, { useContext } from "react";
+
+import {
+  Checkbox,
+  SkeletonText,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import { useGetPatient } from "../../hooks";
+
+const PatientRow = ({ patientUuid }) => {
+  const patient = useGetPatient(patientUuid);
+  const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
+    GroupFormWorkflowContext
+  );
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  const handleOnChange = (e, { checked }) => {
+    if (checked) {
+      addPatientUuid(patientUuid);
+    } else {
+      removePatientUuid(patientUuid);
+    }
+  };
+
+  if (!patient) {
+    return (
+      <TableRow>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <Checkbox diabled />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        {patient.display ||
+          patient.displayName ||
+          [givenName, familyName].join(" ")}
+      </TableCell>
+      <TableCell>{identifier}</TableCell>
+      <TableCell>
+        <Checkbox
+          checked={patientUuids.includes(patientUuid)}
+          labelText={patientUuid}
+          hideLabel
+          id={`${identifier}-attendance-checkbox`}
+          onChange={handleOnChange}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const AttendanceTable = () => {
+  const { t } = useTranslation();
+  const { activeGroupUuid, activeGroupMembers } = useContext(
+    GroupFormWorkflowContext
+  );
+
+  const headers = [
+    t("name", "Name"),
+    t("identifier", "Patient ID"),
+    t("patientIsPresent", "Patient is present"),
+  ];
+
+  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>
+  );
+};
+
+export default AttendanceTable;

package/src/group-form-entry-workflow/attendance-table/index.ts

@@ -0,0 +1 @@
+export { default as AttendanceTable } from "./AttendanceTable";

package/src/group-form-entry-workflow/group-display-header/GroupDisplayHeader.tsx

@@ -4,7 +4,6 @@ import { Events, Close } from "@carbon/react/icons";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
-import { navigate } from "@openmrs/esm-framework";
 
 const GroupDisplayHeader = () => {
   const {
@@ -53,14 +52,7 @@ const GroupDisplayHeader = () => {
         </Button>
       </span>
       <span>
-        <Button
-          kind="ghost"
-          onClick={() => {
-            destroySession();
-            // eslint-disable-next-line
-            navigate({ to: "${openmrsSpaBase}/forms" });
-          }}
-        >
+        <Button kind="ghost" onClick={() => destroySession()}>
           {t("cancel", "Cancel")} <Close size={20} />
         </Button>
       </span>

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

@@ -6,7 +6,6 @@ import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import CompactGroupSearch from "../group-search/CompactGroupSearch";
 import AddGroupModal from "../../add-group-modal/AddGroupModal";
-import { navigate } from "@openmrs/esm-framework";
 
 const GroupSearchHeader = () => {
   const { t } = useTranslation();
@@ -35,8 +34,6 @@ const GroupSearchHeader = () => {
           kind="ghost"
           onClick={() => {
             destroySession();
-            // eslint-disable-next-line
-            navigate({ to: "${openmrsSpaBase}/forms" });
           }}
         >
           {t("cancel", "Cancel")} <Close size={20} />

package/src/hooks/useGetSystemSetting.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+const useGetSystemSetting = (settingId) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onResult = useCallback((result) => {
+    setIsSubmitting(false);
+    setError(false);
+    setResult(result);
+  }, []);
+
+  const onError = useCallback((error) => {
+    setIsSubmitting(false);
+    setResult(null);
+    setError(error);
+  }, []);
+
+  const getSetting = useCallback(() => {
+    openmrsFetch(`/ws/rest/v1/systemsetting?q=${settingId}&v=default`)
+      .then(onResult)
+      .catch(onError);
+  }, [onError, onResult, settingId]);
+
+  useEffect(() => {
+    getSetting();
+  }, [getSetting]);
+
+  return {
+    result,
+    error,
+    isSubmitting,
+  };
+};
+
+export default useGetSystemSetting;

package/src/hooks/useStartVisit.ts

@@ -0,0 +1,83 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  showNotification,
+  showToast,
+  openmrsFetch,
+} from "@openmrs/esm-framework";
+
+const useStartVisit = ({
+  showSuccessNotification = true,
+  showErrorNotification = true,
+}) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [success, setSuccess] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onSave = useCallback(
+    (result) => {
+      setIsSubmitting(false);
+      setError(false);
+      setSuccess(result);
+      if (showSuccessNotification) {
+        showToast({
+          critical: true,
+          kind: "success",
+          description: t(
+            "visitStartedSuccessfully",
+            `${result?.data?.visitType?.display} started successfully`
+          ),
+          title: t("visitStarted", "Visit started"),
+        });
+      }
+    },
+    [t, showSuccessNotification]
+  );
+
+  const onError = useCallback(
+    (error) => {
+      setIsSubmitting(false);
+      setSuccess(false);
+      setError(error);
+      if (showErrorNotification) {
+        showNotification({
+          title: t("startVisitError", "Error starting visit"),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      }
+    },
+    [t, showErrorNotification]
+  );
+
+  const saveVisit = useCallback(
+    (data) => {
+      const payload = {
+        patient: data.patientUuid,
+        startDatetime: data.startDatetime,
+        stopDatetime: data.stopDatetime,
+        visitType: data.visitType,
+        // location: selectedLocation,
+      };
+      openmrsFetch("/ws/rest/v1/visit", {
+        method: "POST",
+        body: payload,
+        headers: { "Content-Type": "application/json" },
+      })
+        .then(onSave)
+        .catch(onError);
+    },
+    [onError, onSave]
+  );
+
+  return {
+    saveVisit,
+    success,
+    error,
+    isSubmitting,
+  };
+};
+
+export default useStartVisit;

package/translations/en.json

@@ -23,7 +23,11 @@
   "goToForm": "Go To Form",
   "group": "Group",
   "groupNameError": "Please enter a group name.",
+  "identifier": "Identifier",
+  "markAbsentPatients":
+            "The patients in this group. Patients that are not present in the session should be marked as absent.",
   "members": "members",
+  "name": "Name",
   "newGroupName": "New Group Name",
   "nextPatient": "Next Patient",
   "noFormsFound": "No Forms To Show",
@@ -34,6 +38,7 @@
   "or": "or",
   "orLabelName": "OR label name",
   "patientsInGroup": "Patients in group",
+  "patientIsPreent": "Patient is present",
   "postError": "POST Error",
   "practitionerName": "Practitioner Name",
   "remove": "Remove",
@@ -45,7 +50,8 @@
   "searchResultsText": "search result(s)",
   "selectPatientFirst": "Please select a patient first",
   "sessionDate": "Session Date",
-  "sessionDetails": "Session details",
+  "sessionDetails": "1. Session details",
+  "sessionParticipants": "2. Session participants",
   "sessionName": "Session Name",
   "sessionNotes": "Session Notes",
   "startGroupSession": "Start Group Session",