@openmrs/esm-fast-data-entry-app 1.0.0-pre.59 → 1.0.0

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

@@ -0,0 +1,154 @@
+import { Layer, Tile, TextInput, TextArea, DatePicker, DatePickerInput } from '@carbon/react';
+import React, { useContext } from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+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';
+import ConfigurableQuestionsSection from './configurable-questions/ConfigurableQuestionsSection';
+import useSpecificQuestions from '../hooks/useForm';
+
+interface ParamTypes {
+  formUuid?: string;
+}
+
+const SessionDetailsForm = () => {
+  const { specificQuestions } = useConfig();
+  const { formUuid } = useParams() as ParamTypes;
+  const { questions } = useSpecificQuestions(formUuid, specificQuestions);
+
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  const { activeGroupMembers } = useContext(GroupFormWorkflowContext);
+  const { patients, isLoading } = useGetPatients(activeGroupMembers);
+
+  return (
+    <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>
+            <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={t('requiredField', 'This field is required')}
+                  />
+                  <TextInput
+                    id="text"
+                    type="text"
+                    labelText={t('practitionerName', 'Practitioner Name')}
+                    {...register('practitionerName', { required: true })}
+                    invalid={errors.practitionerName}
+                    invalidText={t('requiredField', '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={t('requiredField', 'This field is required')}
+                        />
+                      </DatePicker>
+                    )}
+                  />
+                  <TextArea
+                    id="text"
+                    type="text"
+                    labelText={t('sessionNotes', 'Session Notes')}
+                    {...register('sessionNotes', { required: true })}
+                    invalid={errors.sessionNotes}
+                    invalidText={t('requiredField', '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 patients={patients} />
+                </div>
+              </Layer>
+            </Tile>
+          </Layer>
+          {questions?.length > 0 ? (
+            <>
+              <h4>{t('sessionSpecificDetails', '3. Specific details')}</h4>
+              <div>
+                <p>
+                  {t(
+                    'sessionSpecificDetailsDescription',
+                    'They will be mapped to form responses for all patients as pre-filled data.',
+                  )}
+                </p>
+              </div>
+              <Layer>
+                <Tile className={styles.formSectionTile}>
+                  <Layer>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        rowGap: '1.5rem',
+                      }}
+                    >
+                      <ConfigurableQuestionsSection register={register} specificQuestions={questions} />
+                    </div>
+                  </Layer>
+                </Tile>
+              </Layer>
+            </>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SessionDetailsForm;

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

@@ -0,0 +1,99 @@
+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,130 @@
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { Edit } from '@carbon/react/icons';
+
+import {
+  Checkbox,
+  SkeletonText,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Button,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import GroupFormWorkflowContext from '../../context/GroupFormWorkflowContext';
+import AddGroupModal from '../../add-group-modal/AddGroupModal';
+
+const PatientRow = ({ patient }) => {
+  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(patient.id);
+    } else {
+      removePatientUuid(patient.id);
+    }
+  };
+
+  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(patient.id)}
+          labelText={patient.id}
+          hideLabel
+          id={`${identifier}-attendance-checkbox`}
+          onChange={handleOnChange}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const AttendanceTable = ({ patients }) => {
+  const { t } = useTranslation();
+  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 onPostCancel = 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 (
+    <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,
+          onPostCancel: onPostCancel,
+          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>
+  );
+};
+
+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/configurable-questions/ConfigurableQuestionsSection.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextInput, Select, SelectItem } from '@carbon/react';
+import { type FieldValues, type UseFormRegister } from 'react-hook-form';
+import { type SpecificQuestion } from '../../types';
+
+interface ConfigurableQuestionsSectionProps {
+  specificQuestions: Array<SpecificQuestion>;
+  register?: UseFormRegister<FieldValues>;
+}
+
+const ConfigurableQuestionsSection: React.FC<ConfigurableQuestionsSectionProps> = ({ register, specificQuestions }) => {
+  return (
+    <>
+      {specificQuestions?.map((specificQuestion) => (
+        <div key={specificQuestion.question.id}>
+          {specificQuestion?.answers?.length > 0 ? (
+            <Select
+              {...register(specificQuestion.question.id, { required: false })}
+              id={specificQuestion.question.id}
+              labelText={specificQuestion.question.display}
+            >
+              <SelectItem value="" text="" />
+              {specificQuestion.answers.map((answer) => (
+                <SelectItem key={answer.value} value={answer.value} text={answer.display} />
+              ))}
+            </Select>
+          ) : (
+            <TextInput
+              id={specificQuestion.question.id}
+              {...register(specificQuestion.question.id, { required: false })}
+              type="text"
+              labelText={specificQuestion.question.display}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default ConfigurableQuestionsSection;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import GroupDisplayHeader from './GroupDisplayHeader';
+
+describe('PatientBanner', () => {
+  it('renders placeholder information when no data is present', () => {
+    render(<GroupDisplayHeader />);
+  });
+});

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

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { Button } from '@carbon/react';
+import { Events, Close } from '@carbon/react/icons';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import GroupFormWorkflowContext from '../../context/GroupFormWorkflowContext';
+
+const GroupDisplayHeader = () => {
+  const { activeGroupName, activeGroupUuid, patientUuids, activeSessionMeta, unsetGroup, destroySession } =
+    useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+
+  if (!activeGroupUuid) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.groupAvatar} role="img">
+        <Events size={48} />
+      </div>
+      <div className={styles.groupInfoContent}>
+        <div className={styles.groupInfoRow}>
+          <span className={styles.groupName}>{activeGroupName}</span>
+        </div>
+        <div className={styles.groupInfoRow}>
+          <span>
+            {patientUuids.length} {t('members', 'members')}
+          </span>
+        </div>
+      </div>
+      {activeSessionMeta?.sessionNotes && (
+        <div className={styles.groupMeataContent}>
+          <div className={`${styles.groupInfoRow} ${styles.sessionNotesLabel}`}>
+            {t('sessionNotes', 'Session Notes')}
+          </div>
+          <div className={styles.groupInfoRow}>{activeSessionMeta.sessionNotes}</div>
+        </div>
+      )}
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Button kind="ghost" onClick={() => unsetGroup()}>
+          {t('changeGroup', 'Choose a different group')} <Close size={20} />
+        </Button>
+      </span>
+      <span>
+        <Button kind="ghost" onClick={() => destroySession()}>
+          {t('cancel', 'Cancel')} <Close size={20} />
+        </Button>
+      </span>
+    </div>
+  );
+};
+
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-display-header/index.ts

@@ -0,0 +1,3 @@
+import GroupDisplayHeader from './GroupDisplayHeader';
+
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-display-header/styles.scss

@@ -0,0 +1,60 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: layout.$spacing-11;
+  display: flex;
+  align-items: center;
+  background-color: colors.$white-0;
+  border-top: 0.0125rem solid colors.$gray-20;
+  border-bottom: 0.0125rem solid colors.$gray-20;
+  padding: 0 layout.$spacing-05;
+}
+
+.photoPlaceholder {
+  height: layout.$spacing-09;
+  width: layout.$spacing-09;
+}
+
+.groupAvatar {
+  width: layout.$spacing-09;
+  height: layout.$spacing-09;
+  margin: layout.$spacing-03 layout.$spacing-05 layout.$spacing-03 0;
+  border-radius: 1px;
+}
+
+.groupName {
+  @include type.type-style('heading-03');
+  font-weight: 600;
+}
+
+.groupInfoContent {
+  margin-left: layout.$spacing-05;
+  margin-right: layout.$spacing-10;
+}
+
+.groupInfoRow {
+  display: flex;
+  align-items: center;
+  & > button {
+    min-height: layout.$spacing-07;
+  }
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  column-gap: 0.8rem;
+
+}
+.sessionNotesLabel {
+  @include type.type-style('label-01');
+  margin-bottom: layout.$spacing-01
+}
+
+.groupEditBtn {
+  color: colors.$gray-100;
+  margin: layout.$spacing-03;
+}
+
+.groupMetaContent {
+  flex-grow: 1;
+}

package/src/group-form-entry-workflow/group-search/CompactGroupResults.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useReducer, useRef } from 'react';
+import { SkeletonIcon, SkeletonText } from '@carbon/react';
+import { Events } from '@carbon/react/icons';
+import styles from './compact-group-result.scss';
+import { useTranslation } from 'react-i18next';
+import useKeyPress from '../../hooks/useKeyPress';
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'arrowUp':
+      return { selectedIndex: Math.max(state.selectedIndex - 1, 0) };
+    case 'arrowDown':
+      return {
+        selectedIndex: Math.min(state.selectedIndex + 1, action.listLength - 1),
+      };
+    case 'select':
+      return { selectedIndex: action.payload };
+    default:
+      return state;
+  }
+};
+
+const scrollingOptions = {
+  behavior: 'smooth',
+  block: 'nearest',
+};
+
+const ResultItem = ({ index, selectGroupAction, group, dispatch, state, totalGroups, lastRef }) => {
+  const ref = useRef(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (state.selectedIndex === totalGroups - 1) {
+      lastRef.current.scrollIntoView(scrollingOptions);
+    } else if (state.selectedIndex === index) {
+      ref.current.scrollIntoView(scrollingOptions);
+    }
+  }, [state, index, totalGroups, lastRef]);
+
+  return (
+    <div
+      onClick={() => {
+        dispatch({ type: 'select', payload: index });
+        selectGroupAction(group);
+      }}
+      className={`${styles.patientSearchResult} ${index === state.selectedIndex && styles.patientSearchResultSelected}`}
+      role="button"
+      aria-pressed={index === state.selectedIndex}
+      tabIndex={0}
+      ref={ref}
+    >
+      <div className={styles.patientAvatar} role="img">
+        <Events size={24} />
+      </div>
+      <div>
+        <h2 className={styles.patientName}>{group.name}</h2>
+        <p className={styles.demographics}>
+          {group.cohortMembers?.length ?? 0} {t('members', 'members')}
+          <span className={styles.middot}>&middot;</span> {group.description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const CompactGroupResults = ({ groups, selectGroupAction, lastRef }) => {
+  const arrowUpPressed = useKeyPress('ArrowUp');
+  const arrowDownPressed = useKeyPress('ArrowDown');
+  const enterPressed = useKeyPress('Enter');
+
+  const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
+
+  useEffect(() => {
+    if (arrowUpPressed) {
+      dispatch({ type: 'arrowUp' });
+    }
+  }, [arrowUpPressed]);
+
+  useEffect(() => {
+    if (arrowDownPressed) {
+      dispatch({ type: 'arrowDown', listLength: groups.length });
+    }
+  }, [arrowDownPressed, groups.length]);
+
+  useEffect(() => {
+    if (enterPressed && groups.length) {
+      selectGroupAction(groups[state.selectedIndex]);
+    }
+  }, [enterPressed, selectGroupAction, groups, state.selectedIndex]);
+
+  return (
+    <>
+      {groups.map((group, index) => (
+        <ResultItem
+          key={index}
+          totalGroups={groups.length}
+          {...{ lastRef, index, selectGroupAction, group, dispatch, state }}
+        />
+      ))}
+    </>
+  );
+};
+
+export const SearchResultSkeleton = () => {
+  return (
+    <div className={styles.patientSearchResult}>
+      <div className={styles.patientAvatar} role="img">
+        <SkeletonIcon
+          style={{
+            height: '3rem',
+            width: '3rem',
+          }}
+        />
+      </div>
+      <div>
+        <h2 className={styles.patientName}>
+          <SkeletonText />
+        </h2>
+        <span className={styles.demographics}>
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span> <SkeletonIcon />{' '}
+          <span className={styles.middot}>&middot;</span> <SkeletonIcon />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default CompactGroupResults;