@kenyaemr/esm-patient-list-management-app 7.0.2-pre.65

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"patient-lists-dashboard-link","component":"patientListDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"patient-lists","slot":"patient-lists-dashboard-slot","title":"Patient lists"}},{"component":"root","name":"patient-lists-dashboard","slot":"patient-lists-dashboard-slot"},{"name":"list-details-table","component":"listDetailsTable"},{"name":"add-patient-to-patient-list-modal","component":"addPatientToListModal"},{"name":"add-patient-to-patient-list-button","slot":"patient-actions-slot","component":"addPatientToPatientListMenuItem"}],"version":"7.0.2-pre.65"}

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@kenyaemr/esm-patient-list-management-app",
+  "version": "7.0.2-pre.65",
+  "description": "Microfrontend for managing patient lists in O3",
+  "browser": "dist/kenyaemr-esm-patient-list-management-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "dexie": "^3.0.3",
+    "fuzzy": "^0.1.3",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "7.0.1"
+}

package/src/add-patient/add-patient.component.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import useSWR from 'swr';
+import { Button, Checkbox, Pagination, Search, CheckboxSkeleton } from '@carbon/react';
+import {
+  getDynamicOfflineDataEntries,
+  putDynamicOfflineData,
+  syncDynamicOfflineData,
+  showSnackbar,
+  toOmrsIsoString,
+  usePagination,
+  navigate,
+  useConfig,
+} from '@openmrs/esm-framework';
+import { addPatientToList, getAllPatientLists, getPatientListIdsForPatient } from '../api/api-remote';
+import { type ConfigSchema } from '../config-schema';
+import styles from './add-patient.scss';
+
+interface AddPatientProps {
+  closeModal: () => void;
+  patientUuid: string;
+}
+
+interface AddablePatientListViewModel {
+  addPatient(): Promise<void>;
+  displayName: string;
+  checked?: boolean;
+  id: string;
+}
+
+const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState('');
+  const [selected, setSelected] = useState<Array<string>>([]);
+  const { data, isLoading } = useAddablePatientLists(patientUuid);
+
+  const handleCreateNewList = () => {
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'home/patient-lists?new_cohort=true',
+    });
+
+    closeModal();
+  };
+
+  const handleSelectionChanged = useCallback((patientListId: string, listSelected: boolean) => {
+    if (listSelected) {
+      setSelected((prev) => [...prev, patientListId]);
+    } else {
+      setSelected((prev) => prev.filter((x) => x !== patientListId));
+    }
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    for (const selectedId of selected) {
+      const patientList = data.find((list) => list.id === selectedId);
+      if (!patientList) {
+        continue;
+      }
+
+      patientList
+        .addPatient()
+        .then(() =>
+          showSnackbar({
+            title: t('successfullyAdded', 'Successfully added'),
+            kind: 'success',
+            isLowContrast: true,
+            subtitle: `${t('successAddPatientToList', 'Patient added to list')}: ${patientList.displayName}`,
+          }),
+        )
+        .catch(() =>
+          showSnackbar({
+            title: t('error', 'Error'),
+            kind: 'error',
+            subtitle: `${t('errorAddPatientToList', 'Patient not added to list')}: ${patientList.displayName}`,
+          }),
+        );
+    }
+
+    closeModal();
+  }, [data, selected, closeModal, t]);
+
+  const searchResults = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    if (searchValue?.trim().length > 0) {
+      const search = searchValue.toLowerCase();
+      return data.filter((patientList) => patientList.displayName.toLowerCase().includes(search));
+    }
+
+    return data;
+  }, [searchValue, data]);
+
+  const { results, goTo, currentPage, paginated } = usePagination(searchResults, 5);
+
+  useEffect(() => {
+    if (currentPage !== 1) {
+      goTo(1);
+    }
+  }, [searchValue]);
+
+  return (
+    <div className={styles.modalContent}>
+      <div className={styles.modalHeader}>
+        <h1 className={styles.productiveHeading03}>{t('addPatientToList', 'Add patient to list')}</h1>
+        <h3 className={styles.bodyLong01} style={{ margin: '1rem 0' }}>
+          {t('searchForAListToAddThisPatientTo', 'Search for a list to add this patient to.')}
+        </h3>
+      </div>
+      <div style={{ marginBottom: '0.875rem' }}>
+        <Search
+          style={{ backgroundColor: 'white', borderBottom: '1px solid #e0e0e0' }}
+          labelText={t('searchForList', 'Search for a list')}
+          placeholder="Filter list"
+          onChange={({ target }) => {
+            setSearchValue(target.value);
+          }}
+          value={searchValue}
+        />
+      </div>
+      <div className={styles.patientListList}>
+        <fieldset className="cds--fieldset">
+          <p className="cds--label">{t('patientLists', 'Patient lists')}</p>
+          {!isLoading && results ? (
+            results.length > 0 ? (
+              results.map((patientList) => (
+                <div key={patientList.id} className={styles.checkbox}>
+                  <Checkbox
+                    key={patientList.id}
+                    onChange={(e) => handleSelectionChanged(patientList.id, e.target.checked)}
+                    checked={patientList.checked || selected.includes(patientList.id)}
+                    disabled={patientList.checked}
+                    labelText={patientList.displayName}
+                    id={patientList.id}
+                  />
+                </div>
+              ))
+            ) : (
+              <p className={styles.bodyLong01}>{t('noPatientListFound', 'No patient list found')}</p>
+            )
+          ) : (
+            <>
+              <div className={styles.checkbox}>
+                <CheckboxSkeleton />
+              </div>
+              <div className={styles.checkbox}>
+                <CheckboxSkeleton />
+              </div>
+              <div className={styles.checkbox}>
+                <CheckboxSkeleton />
+              </div>
+              <div className={styles.checkbox}>
+                <CheckboxSkeleton />
+              </div>
+              <div className={styles.checkbox}>
+                <CheckboxSkeleton />
+              </div>
+            </>
+          )}
+        </fieldset>
+      </div>
+      {paginated && (
+        <div className={styles.paginationContainer}>
+          <span className={classNames(styles.itemsCountDisplay, styles.bodyLong01)}>
+            {results.length * currentPage} / {searchResults.length} {t('items', 'items')}
+          </span>
+          <Pagination
+            className={styles.pagination}
+            forwardText=""
+            backwardText=""
+            page={currentPage}
+            pageSize={5}
+            pageSizes={[5]}
+            totalItems={searchResults.length}
+            onChange={({ page }) => goTo(page)}
+          />
+        </div>
+      )}
+      <div className={styles.buttonSet}>
+        <Button kind="ghost" size="xl" onClick={handleCreateNewList}>
+          {t('createNewPatientList', 'Create new patient list')}
+        </Button>
+        <div>
+          <Button kind="secondary" size="xl" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button onClick={handleSubmit} size="xl">
+            {t('addToList', 'Add to list')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// This entire modal is a little bit special since it not only displays the "real" patient lists (i.e. data from
+// the cohorts/backend), but also a fake patient list which doesn't really exist in the backend:
+// The offline patient list.
+// When a patient is added to the offline list, that patient should become available offline, i.e.
+// a dynamic offline data entry must be created.
+// This is why the following abstracts away the differences between the real and the fake patient lists.
+// The component doesn't really care about which is which - the only thing that matters is that the
+// data can be fetched and that there is an "add patient" function.
+
+export function useAddablePatientLists(patientUuid: string) {
+  const { t } = useTranslation();
+  const config = useConfig() as ConfigSchema;
+  return useSWR(['addablePatientLists', patientUuid], async () => {
+    // Using Promise.allSettled instead of Promise.all here because some distros might not have the
+    // cohort module installed, leading to the real patient list call failing.
+    // In that case we still want to show fake lists and *not* error out here.
+    const [fakeLists, realLists] = await Promise.allSettled([
+      findFakePatientListsWithoutPatient(patientUuid, t),
+      findRealPatientListsWithoutPatient(patientUuid, config.myListCohortTypeUUID, config.systemListCohortTypeUUID),
+    ]);
+
+    return [
+      ...(fakeLists.status === 'fulfilled' ? fakeLists.value : []),
+      ...(realLists.status === 'fulfilled' ? realLists.value : []),
+    ];
+  });
+}
+
+async function findRealPatientListsWithoutPatient(
+  patientUuid: string,
+  myListCohortUUID,
+  systemListCohortType,
+): Promise<Array<AddablePatientListViewModel>> {
+  const [allLists, listsIdsOfThisPatient] = await Promise.all([
+    getAllPatientLists({}, myListCohortUUID, systemListCohortType),
+    getPatientListIdsForPatient(patientUuid),
+  ]);
+
+  return allLists.map((list) => ({
+    id: list.id,
+    displayName: list.display,
+    checked: listsIdsOfThisPatient.includes(list.id),
+    async addPatient() {
+      await addPatientToList({
+        cohort: list.id,
+        patient: patientUuid,
+        startDate: toOmrsIsoString(new Date()),
+      });
+    },
+  }));
+}
+
+async function findFakePatientListsWithoutPatient(
+  patientUuid: string,
+  t: TFunction,
+): Promise<Array<AddablePatientListViewModel>> {
+  const offlinePatients = await getDynamicOfflineDataEntries('patient');
+  const isPatientOnOfflineList = offlinePatients.some((x) => x.identifier === patientUuid);
+  return isPatientOnOfflineList
+    ? []
+    : [
+        {
+          id: 'fake-offline-patient-list',
+          displayName: t('offlinePatients', 'Offline patients'),
+          async addPatient() {
+            await putDynamicOfflineData('patient', patientUuid);
+            await syncDynamicOfflineData('patient', patientUuid);
+          },
+        },
+      ];
+}
+
+export default AddPatient;

package/src/add-patient/add-patient.scss

@@ -0,0 +1,51 @@
+@import '../style.scss';
+
+.modalContent {
+  width: 100%;
+  background-color: #f4f4f4;
+}
+
+.modalHeader {
+  margin: 1rem;
+}
+
+.patientListList {
+  padding: 0 1rem;
+}
+
+.checkbox {
+  padding-bottom: 0.875rem;
+}
+
+.pagination {
+  width: 100%;
+  overflow: hidden;
+}
+
+.paginationContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.itemsCountDisplay {
+  position: absolute;
+  top: 0;
+  left: 1rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  color: #525252;
+}
+
+.pagination > div:first-child {
+  visibility: hidden;
+  width: 0;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}

package/src/add-patient-to-patient-list-menu-item.component.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+
+function closeOverflowMenu() {
+  document.body.dispatchEvent(
+    new MouseEvent('mousedown', {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+}
+
+interface AddPastVisitOverflowMenuItemProps {
+  patientUuid: string;
+}
+
+const AddPatientToPatientListMenuItem: React.FC<AddPastVisitOverflowMenuItemProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const openModal = useCallback(() => {
+    const dispose = showModal('add-patient-to-patient-list-modal', {
+      closeModal: () => dispose(),
+      patientUuid,
+    });
+    closeOverflowMenu();
+  }, [patientUuid]);
+
+  return (
+    <>
+      <li className="cds--overflow-menu-options__option">
+        <button
+          className="cds--overflow-menu-options__btn"
+          role="menuitem"
+          title={t('openPatientList', 'Add to list')}
+          data-floating-menu-primary-focus
+          onClick={openModal}
+          style={{
+            maxWidth: '100vw',
+          }}>
+          <span className="cds--overflow-menu-options__option-content">{t('openPatientList', 'Add to list')}</span>
+        </button>
+      </li>
+    </>
+  );
+};
+
+export default AddPatientToPatientListMenuItem;

package/src/add-patient-to-patient-list-menu-item.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { showModal } from '@openmrs/esm-framework';
+import AddPatientToPatientListMenuItem from './add-patient-to-patient-list-menu-item.component';
+
+const mockedShowModal = showModal as jest.Mock;
+
+jest.mock('@openmrs/esm-framework');
+
+const patientUuid = '6baa7963-68ea-497e-b258-6fb82382bd07';
+
+describe('AddPatientToPatientListMenuItem', () => {
+  it('renders the button with the correct title', () => {
+    render(<AddPatientToPatientListMenuItem patientUuid={patientUuid} />);
+    const button = screen.getByRole('menuitem');
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Add to list');
+    expect(button).toHaveAttribute('title', 'Add to list');
+  });
+
+  it('should open the modal on button click', async () => {
+    const user = userEvent.setup();
+
+    render(<AddPatientToPatientListMenuItem patientUuid={patientUuid} />);
+    const button = screen.getByRole('menuitem');
+
+    await user.click(button);
+
+    expect(mockedShowModal).toHaveBeenCalledWith('add-patient-to-patient-list-modal', expect.any(Object));
+  });
+});

package/src/api/api-remote.ts

@@ -0,0 +1,211 @@
+import { type LoggedInUser, openmrsFetch, refetchCurrentUser, restBaseUrl, fhirBaseUrl } from '@openmrs/esm-framework';
+import {
+  type AddPatientData,
+  type CohortResponse,
+  type NewCohortData,
+  type NewCohortDataPayload,
+  type OpenmrsCohort,
+  type OpenmrsCohortMember,
+  type OpenmrsCohortRef,
+  type PatientListFilter,
+  type PatientListMember,
+  PatientListType,
+  type PatientListUpdate,
+} from './types';
+
+export const cohortUrl = `${restBaseUrl}/cohortm`;
+
+async function postData(url: string, data = {}, ac = new AbortController()) {
+  const response = await openmrsFetch(url, {
+    signal: ac.signal,
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+
+  return response.data;
+}
+
+async function deleteData(url: string, data = {}, ac = new AbortController()) {
+  const response = await openmrsFetch(url, {
+    signal: ac.signal,
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+
+  return response.data;
+}
+
+export async function getAllPatientLists(
+  filter: PatientListFilter = {},
+  myListCohortTypeUUID,
+  systemListCohortTypeUUID,
+  ac = new AbortController(),
+) {
+  const custom = 'custom:(uuid,name,description,display,size,attributes,cohortType)';
+  const query: Array<[string, string]> = [['v', custom]];
+
+  if (filter.name !== undefined && filter.name !== '') {
+    query.push(['q', filter.name]);
+  }
+
+  if (filter.isStarred !== undefined) {
+    // TODO: correct this; it definitely is "attributes", but then we'd get back a 500 right now.
+    query.push(['attribute', `starred:${filter.isStarred}`]);
+  }
+
+  if (filter.type === PatientListType.USER) {
+    query.push(['cohortType', myListCohortTypeUUID]);
+  } else if (filter.type === PatientListType.SYSTEM) {
+    query.push(['cohortType', systemListCohortTypeUUID]);
+  }
+
+  const params = query.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+  const {
+    data: { results, error },
+  } = await openmrsFetch<CohortResponse<OpenmrsCohort>>(`${cohortUrl}/cohort?${params}`, {
+    signal: ac.signal,
+  });
+
+  if (error) {
+    throw error;
+  }
+
+  return results.map((cohort) => ({
+    id: cohort.uuid,
+    display: cohort.name,
+    description: cohort.description,
+    type: cohort.cohortType?.display,
+    size: cohort.size,
+    isStarred: false, // TODO
+  }));
+}
+
+export function starPatientList(userUuid: string, userProperties: LoggedInUser['userProperties']) {
+  return openmrsFetch(`${restBaseUrl}/user/${userUuid}`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: {
+      userProperties,
+    },
+  }).then(() => {
+    refetchCurrentUser();
+  });
+}
+
+export function updatePatientList(id: string, update: PatientListUpdate) {
+  // TODO: Support updating a full patient list, i.e. including the `isStarred` value.
+  // Basically implement the (missing) functionality which was previously declared as "TODO" here:
+  // https://github.com/openmrs/openmrs-esm-patient-management/blob/25ec687afd37c383a0dbd4d8be8b8e09c8c53129/packages/esm-patient-list-management-app/src/api/api.ts#L89
+  return Promise.resolve();
+}
+
+export async function getPatientListMembers(cohortUuid: string, ac = new AbortController()) {
+  const {
+    data: { results, error },
+  } = await openmrsFetch<CohortResponse<OpenmrsCohortMember>>(
+    `${cohortUrl}/cohortmember?cohort=${cohortUuid}&v=default`,
+    {
+      signal: ac.signal,
+    },
+  );
+
+  if (error) {
+    throw error;
+  }
+
+  const currentDate = new Date();
+  const searchQuery = results.map((p) => p.patient.uuid).join(',');
+
+  const result = await openmrsFetch(`${fhirBaseUrl}/Patient/_search?_id=${searchQuery}`, {
+    method: 'POST',
+    signal: ac.signal,
+  });
+
+  const patients: Array<PatientListMember> = result.data.entry.map((e) => e.resource);
+  const validPatients = patients.filter((patient) => {
+    if (!patient.endDate) {
+      return true;
+    }
+
+    const endDate = new Date(patient.endDate);
+    return endDate >= currentDate;
+  });
+
+  return validPatients;
+}
+
+export async function getPatientListIdsForPatient(patientUuid: string, ac = new AbortController()) {
+  const {
+    data: { results, error },
+  } = await openmrsFetch<CohortResponse<OpenmrsCohortRef>>(
+    `${cohortUrl}/cohortmember?patient=${patientUuid}&v=default`,
+    {
+      signal: ac.signal,
+    },
+  );
+
+  if (error) {
+    throw error;
+  }
+
+  return results.map((ref) => ref.cohort.uuid);
+}
+
+export async function addPatientToList(data: AddPatientData) {
+  return postData(`${cohortUrl}/cohortmember`, data);
+}
+
+export async function removePatientFromList(cohortMembershipUuid: string) {
+  return postData(`${cohortUrl}/cohortmember/${cohortMembershipUuid}`, {
+    endDate: new Date(),
+  });
+}
+
+export async function createPatientList(cohort: NewCohortDataPayload, ac = new AbortController()) {
+  return postData(
+    `${cohortUrl}/cohort/`,
+    {
+      ...cohort,
+      startDate: new Date(),
+      groupCohort: false,
+      definitionHandlerClassname: 'org.openmrs.module.cohort.definition.handler.DefaultCohortDefinitionHandler',
+    },
+    ac,
+  );
+}
+
+export async function editPatientList(cohortUuid: string, cohort: NewCohortData, ac = new AbortController()) {
+  return postData(`${cohortUrl}/cohort/${cohortUuid}`, cohort, ac);
+}
+
+export async function deletePatientList(cohortUuid: string, ac = new AbortController()) {
+  return deleteData(
+    `${cohortUrl}/cohort/${cohortUuid}`,
+    {
+      voidReason: '',
+    },
+    ac,
+  );
+}
+
+export async function getPatientListName(patientListUuid: string) {
+  const abortController = new AbortController();
+
+  try {
+    const url = `${cohortUrl}/cohort/${patientListUuid}?`;
+    const { data } = await openmrsFetch<OpenmrsCohort>(url, {
+      signal: abortController.signal,
+    });
+    return data?.name;
+  } catch (error) {
+    console.error('Error resolving patient list name: ', error);
+  }
+}