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

package/src/error-state/error-state.scss

@@ -0,0 +1,50 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.errorMessage {
+  @include type.type-style('heading-compact-02');
+
+  margin-top: 2.25rem;
+  margin-bottom: layout.$spacing-03;
+}
+
+.errorCopy {
+  margin-bottom: layout.$spacing-03;
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid colors.$gray-20;
+}

package/src/header/header.component.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { Add, Calendar } from '@carbon/react/icons';
+import { formatDate, navigate } from '@openmrs/esm-framework';
+import Illustration from '../illo.component';
+import styles from './header.scss';
+
+const Header: React.FC = () => {
+  const { t } = useTranslation();
+  const newCohortUrl = window.getOpenmrsSpaBase() + 'home/patient-lists?new_cohort=true';
+
+  const handleShowNewListOverlay = () => {
+    // URL navigation is in place to know either to open the create list overlay or not
+    // The url /patient-list?new_cohort=true is being used in the "Add patient to list" widget
+    // in the patient chart. The button in the above mentioned widget "Create new list", navigates
+    // to /patient-list?new_cohort=true to open the overlay directly.
+    navigate({
+      to: newCohortUrl,
+    });
+  };
+
+  return (
+    <div className={styles.patientListHeader}>
+      <div className={styles.leftJustifiedItems}>
+        <Illustration />
+        <div className={styles.pageLabels}>
+          <p>{t('patientLists', 'Patient lists')}</p>
+          <p className={styles.pageName}>{t('home', 'Home')}</p>
+        </div>
+      </div>
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.date}>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+        <Button
+          className={styles.newListButton}
+          kind="ghost"
+          iconDescription="Add"
+          renderIcon={(props) => <Add {...props} size={16} />}
+          onClick={handleShowNewListOverlay}
+          size="sm">
+          {t('newList', 'New list')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

package/src/header/header.scss

@@ -0,0 +1,52 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../style.scss';
+
+.patientListHeader {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  display: flex;
+  flex-direction: column;
+  color: $text-02;
+  padding: 1rem 0;
+  justify-content: space-between;
+}
+
+.date {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+.pageName {
+  @include type.type-style('heading-04');
+}
+
+.pageLabels {
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.newListButton {
+  align-self: flex-end;
+  width: fit-content;
+}

package/src/illo.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Illustration: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>{t('emptyStateIllustration', 'Empty state illustration')}</title>
+      <g fill="none" fillRule="evenodd">
+        <path fill="#FFF" d="M0 0h92v94H0z" />
+        <path
+          d="M40 32c.84-.602 1.12-1.797 1-3 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 3.572 2.1 6.706 5 8-6.76 1.741-12 7.91-12 15v15h28V32h-4zM76 67V52c0-7.09-5.24-13.278-12-15 2.9-1.294 5.12-4.428 5-8 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 1.203.14 2.398 1 3h-4v35h28z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M32 75V60.312c0-7.402 5.24-13.59 12.3-15.216-3.2-1.39-5.42-4.523-5.42-8.166 0-4.935 4.08-8.93 9.12-8.93 5.04 0 9.12 3.995 9.12 8.93 0 3.642-2.22 6.776-5.42 8.166C58.76 46.741 64 52.91 64 60.313V75"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Illustration;

package/src/index.ts

@@ -0,0 +1,41 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from './createDashboardLink.component';
+import { dashboardMeta } from './dashboard.meta';
+import { setupOffline } from './offline';
+import rootComponent from './root.component';
+import listDetailsTableComponent from './list-details-table/list-details-table.component';
+import addPatientToPatientListMenuItemComponent from './add-patient-to-patient-list-menu-item.component';
+
+const moduleName = '@kenyaemr/esm-patient-list-management-app';
+
+const options = {
+  featureName: 'patient list',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  setupOffline();
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const root = getSyncLifecycle(rootComponent, options);
+
+export const addPatientToListModal = getAsyncLifecycle(() => import('./add-patient/add-patient.component'), {
+  featureName: 'patient-actions-modal',
+  moduleName,
+});
+
+export const addPatientToPatientListMenuItem = getSyncLifecycle(addPatientToPatientListMenuItemComponent, {
+  featureName: 'patient-actions-slot',
+  moduleName,
+});
+
+export const patientListDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+
+export const listDetailsTable = getSyncLifecycle(listDetailsTableComponent, {
+  featureName: 'patient-table',
+  moduleName,
+});

package/src/list-details/list-details.component.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem, Modal } from '@carbon/react';
+import { OverflowMenuVertical } from '@carbon/react/icons';
+import { navigate, formatDate, parseDate, showSnackbar, CustomOverflowMenu } from '@openmrs/esm-framework';
+import { deletePatientList } from '../api/api-remote';
+import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
+import CreateEditPatientList from '../create-edit-patient-list/create-edit-list.component';
+import ListDetailsTable from '../list-details-table/list-details-table.component';
+import styles from './list-details.scss';
+
+interface ListDetails {
+  name: string;
+  identifier: string;
+  sex: string;
+  startDate: string;
+  uuid: string;
+}
+
+const ListDetails = () => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const patientListUuid = params.patientListUuid;
+  const [currentPage, setPageCount] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(10);
+  const [searchString, setSearchString] = useState('');
+  const { listDetails, mutateListDetails } = usePatientListDetails(patientListUuid);
+  const { listMembers, isLoadingListMembers, mutateListMembers } = usePatientListMembers(
+    patientListUuid,
+    searchString,
+    (currentPage - 1) * currentPageSize,
+    currentPageSize,
+  );
+
+  const [showEditPatientListDetailOverlay, setEditPatientListDetailOverlay] = useState(false);
+  const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false);
+
+  const patients: Array<ListDetails> = useMemo(
+    () =>
+      listMembers
+        ? listMembers?.length
+          ? listMembers?.map((member) => ({
+              name: member?.patient?.person?.display,
+              identifier: member?.patient?.identifiers[0]?.identifier ?? null,
+              sex: member?.patient?.person?.gender,
+              startDate: member?.startDate ? formatDate(parseDate(member.startDate)) : null,
+              uuid: `${member?.patient?.uuid}`,
+              membershipUuid: member?.uuid,
+            }))
+          : []
+        : [],
+    [listMembers],
+  );
+
+  const headers = useMemo(
+    () => [
+      {
+        key: 'name',
+        header: t('name', 'Name'),
+        link: {
+          getUrl: (patient) =>
+            patient?.uuid ? `${window.spaBase}/patient/${patient?.uuid}/chart/` : window?.location?.href,
+        },
+      },
+      {
+        key: 'identifier',
+        header: t('identifier', 'Identifier'),
+      },
+      {
+        key: 'sex',
+        header: t('sex', 'Sex'),
+      },
+      {
+        key: 'startDate',
+        header: t('startDate', 'Start Date'),
+      },
+    ],
+    [t],
+  );
+
+  const handleDelete = useCallback(() => {
+    setShowDeleteConfirmationModal(true);
+  }, []);
+
+  const confirmDeletePatientList = useCallback(() => {
+    deletePatientList(patientListUuid)
+      .then(() => {
+        showSnackbar({
+          title: t('deleted', 'Deleted'),
+          subtitle: `${t('deletedPatientList', 'Deleted patient list')}: ${listDetails?.name}`,
+          kind: 'success',
+          isLowContrast: true,
+        });
+
+        navigate({ to: window.getOpenmrsSpaBase() + 'home/patient-lists' });
+      })
+      .catch((e) =>
+        showSnackbar({
+          title: t('errorDeletingList', 'Error deleting patient list'),
+          subtitle: e?.message,
+          kind: 'error',
+        }),
+      )
+      .finally(() => setShowDeleteConfirmationModal(false));
+  }, [patientListUuid, listDetails, t]);
+
+  return (
+    <main className={styles.container}>
+      <section className={styles.cohortHeader}>
+        <div data-testid="patientListHeader">
+          <h1 className={styles.productiveHeading03}>{listDetails?.name ?? '--'}</h1>
+          <h4 className={classNames(styles.bodyShort02, styles.marginTop)}>{listDetails?.description ?? '--'}</h4>
+          <div className={classNames(styles.text02, styles.bodyShort01, styles.marginTop)}>
+            {listDetails?.size} {t('patients', 'patients')} &middot;{' '}
+            <span className={styles.label01}>{t('createdOn', 'Created on')}:</span>{' '}
+            {listDetails?.startDate ? formatDate(parseDate(listDetails.startDate)) : null}
+          </div>
+        </div>
+        <div className={styles.overflowMenu}>
+          <CustomOverflowMenu
+            menuTitle={
+              <>
+                <span className={styles.actionsButtonText}>{t('actions', 'Actions')}</span>{' '}
+                <OverflowMenuVertical size={16} style={{ marginLeft: '0.5rem' }} />
+              </>
+            }>
+            <OverflowMenuItem
+              className={styles.menuItem}
+              itemText={t('editNameDescription', 'Edit name or description')}
+              onClick={() => setEditPatientListDetailOverlay(true)}
+            />
+            <OverflowMenuItem
+              className={styles.menuItem}
+              itemText={t('deletePatientList', 'Delete patient list')}
+              onClick={handleDelete}
+              isDelete
+            />
+          </CustomOverflowMenu>
+        </div>
+      </section>
+      <section>
+        <div className={styles.tableContainer}>
+          <ListDetailsTable
+            patients={patients}
+            columns={headers}
+            isLoading={isLoadingListMembers}
+            isFetching={!listMembers}
+            mutateListMembers={mutateListMembers}
+            mutateListDetails={mutateListDetails}
+            pagination={{
+              usePagination: listDetails?.size > currentPageSize,
+              currentPage,
+              onChange: ({ page, pageSize }) => {
+                setPageCount(page);
+                setCurrentPageSize(pageSize);
+              },
+              pageSize: 10,
+              totalItems: listDetails?.size,
+              pagesUnknown: true,
+              lastPage: patients?.length < currentPageSize || currentPage * currentPageSize === listDetails?.size,
+            }}
+          />
+        </div>
+        {showEditPatientListDetailOverlay && (
+          <CreateEditPatientList
+            close={() => setEditPatientListDetailOverlay(false)}
+            isEditing
+            patientListDetails={listDetails}
+            onSuccess={mutateListDetails}
+          />
+        )}
+        {showDeleteConfirmationModal && (
+          <Modal
+            open
+            danger
+            modalHeading={t('confirmDeletePatientList', 'Are you sure you want to delete this patient list?')}
+            primaryButtonText="Delete"
+            secondaryButtonText="Cancel"
+            onRequestClose={() => setShowDeleteConfirmationModal(false)}
+            onRequestSubmit={confirmDeletePatientList}
+            primaryButtonDisabled={false}>
+            {listDetails?.size > 0 ? (
+              <p>
+                {t('patientListMemberCount', 'This list has {{count}} patients', {
+                  count: listDetails.size,
+                })}
+                .
+              </p>
+            ) : (
+              <p>{t('emptyList', 'This list has no patients')}</p>
+            )}
+          </Modal>
+        )}
+      </section>
+    </main>
+  );
+};
+
+export default ListDetails;

package/src/list-details/list-details.scss

@@ -0,0 +1,47 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../style.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #ededed;
+}
+
+.cohortHeader {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid $ui-03;
+  padding: spacing.$spacing-04 spacing.$spacing-05;
+  padding-right: 0;
+  background-color: $ui-01;
+}
+
+.overflowMenu {
+  display: flex;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-04;
+}
+
+.marginTop {
+  margin-top: spacing.$spacing-03;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.actionsButtonText {
+  @include type.type-style('body-compact-01');
+  color: $interactive-01;
+}
+
+.tableContainer {
+  padding: 0 spacing.$spacing-05 spacing.$spacing-05;
+  height: calc(100vh - 11rem);
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/list-details/list-details.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
+import { deletePatientList } from '../api/api-remote';
+import { getByTextWithMarkup } from 'tools';
+import ListDetails from './list-details.component';
+
+const mockedUsePatientListDetails = usePatientListDetails as jest.Mock;
+const mockedUsePatientListMembers = usePatientListMembers as jest.Mock;
+const mockedDeletePatientList = deletePatientList as jest.Mock;
+
+jest.mock('../api/hooks', () => ({
+  usePatientListDetails: jest.fn(),
+  usePatientListMembers: jest.fn(),
+}));
+
+jest.mock('../api/api-remote');
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  showSnackbar: jest.fn(),
+  navigate: jest.fn(),
+  ExtensionSlot: jest.fn(),
+}));
+
+const mockedPatientListDetails = {
+  name: 'Test Patient List',
+  description: 'This is a test patient list',
+  size: 1,
+  startDate: '2023-08-14',
+};
+
+const mockedPatientListMembers = [
+  {
+    patient: {
+      person: {
+        display: 'John Doe',
+        gender: 'Male',
+      },
+      identifiers: [
+        {
+          identifier: '100GEJ',
+        },
+      ],
+      uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+    },
+    startDate: '2023-08-10',
+    uuid: 'ce7d26fa-e1b4-4e78-a1f5-3a7a5de9c0db',
+  },
+];
+
+describe('ListDetails', () => {
+  beforeEach(() => {
+    mockedUsePatientListDetails.mockReturnValue({
+      listDetails: mockedPatientListDetails,
+    });
+
+    mockedUsePatientListMembers.mockReturnValue({
+      listMembers: mockedPatientListMembers,
+    });
+
+    mockedDeletePatientList.mockResolvedValue({});
+  });
+
+  it('renders patient list details page', async () => {
+    render(<ListDetails />);
+
+    expect(screen.getByRole('heading', { name: /^test patient list$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /this is a test patient list/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /actions/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /back to lists page/i })).toBeInTheDocument();
+    expect(screen.getByText(/1 patient/)).toBeInTheDocument();
+    expect(getByTextWithMarkup('Created on: 14-Aug-2023')).toBeInTheDocument();
+    expect(screen.getByText(/edit name or description/i)).toBeInTheDocument();
+    expect(screen.getByText(/delete patient list/i)).toBeInTheDocument();
+  });
+
+  it('renders an empty state view if a list has no patients', async () => {
+    mockedUsePatientListMembers.mockReturnValue({
+      listMembers: [],
+    });
+
+    render(<ListDetails />);
+
+    expect(screen.getByTitle(/empty state illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/there are no patients in this list/i)).toBeInTheDocument();
+  });
+
+  it('opens overlay with a form when the "Edit name or description" button is clicked', () => {
+    render(<ListDetails />);
+
+    userEvent.click(screen.getByText('Actions'));
+    const editBtn = screen.getByText('Edit name or description');
+    userEvent.click(editBtn);
+  });
+
+  it('deletes patient list and navigates back to the list page', async () => {
+    render(<ListDetails />);
+
+    await userEvent.click(screen.getByText('Actions'));
+    await userEvent.click(screen.getByText(/delete patient list/i));
+
+    expect(screen.getByText(/Are you sure you want to delete this patient list/i)).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+
+    expect(screen.getByText('Delete').closest('button')).not.toHaveAttribute('disabled');
+
+    await userEvent.click(screen.getByText('Cancel'));
+  });
+});

package/src/list-details/patient-list-detail.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
+import { showToast } from '@openmrs/esm-framework';
+import { deletePatientList } from '../api/api-remote';
+import PatientListDetailComponent from './patient-list-detail.component';
+
+const mockedUsePatientListDetails = usePatientListDetails as jest.Mock;
+const mockedUsePatientListMembers = usePatientListMembers as jest.Mock;
+const mockedDeletePatientList = deletePatientList as jest.Mock;
+
+jest.mock('../api/hooks', () => ({
+  usePatientListDetails: jest.fn(),
+  usePatientListMembers: jest.fn(),
+}));
+
+jest.mock('../api/api-remote');
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  showToast: jest.fn(),
+  navigate: jest.fn(),
+  ExtensionSlot: jest.fn(),
+}));
+
+const mockedPatientListDetails = {
+  name: 'Test Patient List',
+  description: 'This is a test patient list',
+  size: 5,
+  startDate: '2023-08-14',
+};
+
+const mockedPatientListMembers = [
+  {
+    patient: {
+      person: {
+        display: 'John Doe',
+        gender: 'Male',
+      },
+      identifiers: [
+        {
+          identifier: '100GEJ',
+        },
+      ],
+      uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+    },
+    startDate: '2023-08-10',
+  },
+];
+
+describe('PatientListDetailComponent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUsePatientListDetails.mockReturnValue({
+      data: mockedPatientListDetails,
+    });
+
+    mockedUsePatientListMembers.mockReturnValue({
+      data: mockedPatientListMembers,
+    });
+
+    mockedDeletePatientList.mockResolvedValue({});
+  });
+
+  it('renders patient list details', async () => {
+    render(<PatientListDetailComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Patient List')).toBeInTheDocument();
+      expect(screen.getByText('This is a test patient list')).toBeInTheDocument();
+    });
+  });
+
+  it('displays patient list members', async () => {
+    render(<PatientListDetailComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.getByText('Male')).toBeInTheDocument();
+      expect(screen.getByText('100GEJ')).toBeInTheDocument();
+    });
+  });
+
+  it('opens edit overlay when "Edit Name/ Description" is clicked', () => {
+    render(<PatientListDetailComponent />);
+
+    userEvent.click(screen.getByText('Actions'));
+    const editBtn = screen.getByText('Edit Name/ Description');
+    userEvent.click(editBtn);
+  });
+
+  it('deletes patient list and navigates on successful delete', async () => {
+    render(<PatientListDetailComponent />);
+
+    await waitFor(() => {
+      userEvent.click(screen.getByText('Delete'));
+    });
+
+    await waitFor(() => {
+      expect(mockedDeletePatientList).toHaveBeenCalledTimes(1);
+      expect(showToast).toHaveBeenCalledTimes(1);
+    });
+  });
+});