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

package/src/lists-dashboard/lists-dashboard.component.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo, useState } from 'react';
+import classnames from 'classnames';
+import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Tab, Tabs, TabList } from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+import { type PatientListFilter, PatientListType } from '../api/types';
+import { useAllPatientLists } from '../api/hooks';
+import CreateEditPatientList from '../create-edit-patient-list/create-edit-list.component';
+import Header from '../header/header.component';
+import ListsTable from '../lists-table/lists-table.component';
+import styles from './lists-dashboard.scss';
+
+const TabIndices = {
+  STARRED_LISTS: 0,
+  SYSTEM_LISTS: 1,
+  MY_LISTS: 2,
+  ALL_LISTS: 3,
+} as const;
+
+function usePatientListFilterForCurrentTab(selectedTab: number) {
+  const { t } = useTranslation();
+
+  return useMemo<PatientListFilter>(() => {
+    switch (selectedTab) {
+      case TabIndices.STARRED_LISTS:
+        return { isStarred: true, label: t('starred', 'starred') };
+      case TabIndices.SYSTEM_LISTS:
+        return { type: PatientListType.SYSTEM, label: t('systemDefined', 'system-defined') };
+      case TabIndices.MY_LISTS:
+        return { type: PatientListType.USER, label: t('userDefined', 'user-defined') };
+      case TabIndices.ALL_LISTS:
+      default:
+        return { label: '' };
+    }
+  }, [selectedTab, t]);
+}
+
+const ListsDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(TabIndices.STARRED_LISTS);
+  const patientListFilter = usePatientListFilterForCurrentTab(selectedTab);
+  const { patientLists, isLoading, error, mutate } = useAllPatientLists(patientListFilter);
+  const { search } = useLocation();
+
+  const isCreatingPatientList =
+    Object.fromEntries(
+      search
+        .slice(1)
+        .split('&')
+        ?.map((searchParam) => searchParam?.split('=')),
+    )['new_cohort'] === 'true';
+
+  const handleHideNewListOverlay = () => {
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'home/patient-lists',
+    });
+  };
+
+  const tableHeaders = [
+    { id: 1, key: 'display', header: t('listName', 'List name') },
+    { id: 2, key: 'type', header: t('listType', 'List type') },
+    { id: 3, key: 'size', header: t('noOfPatients', 'No. of patients') },
+    { id: 4, key: 'isStarred', header: '' },
+  ];
+
+  return (
+    <main className={classnames('omrs-main-content', styles.dashboardContainer)}>
+      <section className={styles.dashboard}>
+        <Header />
+        <Tabs
+          className={styles.tabs}
+          onChange={({ selectedIndex }) => {
+            setSelectedTab(selectedIndex);
+          }}
+          selectedIndex={selectedTab}
+          tabContentClassName={styles.hiddenTabsContent}>
+          <TabList className={styles.tablist} aria-label="List tabs" contained>
+            <Tab className={styles.tab}>{t('starredLists', 'Starred lists')}</Tab>
+            <Tab className={styles.tab}>{t('systemLists', 'System lists')}</Tab>
+            <Tab className={styles.tab}>{t('myLists', 'My lists')}</Tab>
+            <Tab className={styles.tab}>{t('allLists', 'All lists')}</Tab>
+          </TabList>
+        </Tabs>
+        <div className={styles.listsTableContainer}>
+          <ListsTable
+            error={error}
+            headers={tableHeaders}
+            isLoading={isLoading}
+            key={patientListFilter.label}
+            listType={patientListFilter.label}
+            patientLists={patientLists}
+            refetch={mutate}
+          />
+        </div>
+      </section>
+      <section>
+        {isCreatingPatientList && <CreateEditPatientList close={handleHideNewListOverlay} onSuccess={() => mutate()} />}
+      </section>
+    </main>
+  );
+};
+
+export default ListsDashboard;

package/src/lists-dashboard/lists-dashboard.scss

@@ -0,0 +1,110 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../style.scss';
+
+.container {
+  margin: 1rem 0;
+}
+
+.dashboardContainer {
+  display: flex;
+  background-color: $ui-02;
+}
+
+.dashboard {
+  height: 100%;
+  width: 100%;
+  background-color: $ui-02;
+  height: calc(100vh - 3rem);
+}
+
+.tabs {
+  grid-column: 'span 2';
+}
+
+.tablist {
+  padding: 0 spacing.$spacing-05;
+}
+
+.tab {
+  min-width: 8.875rem;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.listsTableContainer {
+  padding: spacing.$spacing-05;
+  background-color: $ui-01;
+  height: calc(100vh - 12rem);
+}
+
+.tableBody {
+  background-color: $ui-01;
+}
+
+.tableCell,
+.interactiveText01 {
+  color: $interactive-01;
+}
+
+.desktopRow,
+.desktopHeader {
+  height: spacing.$spacing-07 !important;
+}
+
+.tabletRow,
+.tabletHeader {
+  height: spacing.$spacing-09 !important;
+}
+
+// Search Overlay
+.searchOverlay {
+  z-index: 1;
+  grid-row: 2 / 4;
+  grid-column: 1 / 2;
+  background-color: $ui-04;
+  opacity: 0.7;
+}
+
+.patientListResultsContainer {
+  z-index: 1;
+  grid-row: 2 / 4;
+  grid-column: 1 / 2;
+  background-color: $ui-01;
+  padding: spacing.$spacing-05;
+}
+
+// Results Overlay
+
+.resultCount {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  border-bottom: solid 1px #e0e0e0;
+  padding: spacing.$spacing-04 0;
+}
+
+.patientListResultsTableContainer {
+  margin: spacing.$spacing-03;
+}
+
+.starButton {
+  :global(.cds--popover) {
+    display: none;
+  }
+  :global(.cds--btn--ghost:not([disabled])) svg {
+    fill: $interactive-01;
+  }
+}

package/src/lists-dashboard/lists-dashboard.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useLocation } from 'react-router-dom';
+import { openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import { mockSession } from '__mocks__';
+import ListsDashboard from './lists-dashboard.component';
+
+const mockedUseLocation = jest.mocked(useLocation);
+const mockedUseSession = jest.mocked(useSession);
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+}));
+
+describe('ListsDashboard', () => {
+  beforeEach(() => {
+    mockedUseLocation.mockReturnValue({
+      pathname: '/',
+      search: '',
+      hash: '',
+      state: null,
+      key: 'default',
+    });
+
+    mockedUseSession.mockReturnValue(mockSession.data);
+
+    mockedOpenmrsFetch.mockResolvedValue({
+      data: {
+        results: [
+          {
+            uuid: 'ffff37ca-872f-4ede-9a19-bb6692c5ff98',
+            name: 'Test List',
+            description: 'Test List',
+            display: 'Test List',
+            size: 1,
+            attributes: [],
+            cohortType: {
+              name: 'My List',
+              description: 'A user-generated patient list',
+              uuid: 'e71857cb-33af-4f2c-86ab-7223bcfa37ad',
+              display: 'My List',
+              links: [
+                {
+                  rel: 'self',
+                  uri: `http://dev3.openmrs.org/openmrs/${restBaseUrl}/cohortm/cohorttype/e71857cb-33af-4f2c-86ab-7223bcfa37ad`,
+                  resourceAlias: 'cohorttype',
+                },
+                {
+                  rel: 'full',
+                  uri: `http://dev3.openmrs.org/openmrs/${restBaseUrl}/cohortm/cohorttype/e71857cb-33af-4f2c-86ab-7223bcfa37ad?v=full`,
+                  resourceAlias: 'cohorttype',
+                },
+              ],
+              resourceVersion: '1.8',
+            },
+          },
+          {
+            uuid: '94ee4943-8dcc-409a-86d5-8ab6631a511c',
+            name: '2.13.0',
+            description: 'Testing',
+            display: '2.13.0',
+            size: 0,
+            attributes: [],
+            cohortType: {
+              name: 'My List',
+              description: 'A user-generated patient list',
+              uuid: 'e71857cb-33af-4f2c-86ab-7223bcfa37ad',
+              display: 'My List',
+              links: [
+                {
+                  rel: 'self',
+                  uri: `http://dev3.openmrs.org/openmrs/${restBaseUrl}/cohortm/cohorttype/e71857cb-33af-4f2c-86ab-7223bcfa37ad`,
+                  resourceAlias: 'cohorttype',
+                },
+                {
+                  rel: 'full',
+                  uri: `http://dev3.openmrs.org/openmrs/${restBaseUrl}/cohortm/cohorttype/e71857cb-33af-4f2c-86ab-7223bcfa37ad?v=full`,
+                  resourceAlias: 'cohorttype',
+                },
+              ],
+              resourceVersion: '1.8',
+            },
+          },
+        ],
+      },
+    });
+  });
+
+  it('renders the patient list page UI correctly', async () => {
+    const user = userEvent.setup();
+    render(<ListsDashboard />);
+
+    await screen.findByRole('button', { name: /new list/i });
+    expect(screen.getByRole('tablist', { name: /list tabs/i })).toBeInTheDocument();
+
+    const tabs = ['Starred lists', 'System lists', 'My lists', 'All lists'];
+
+    tabs.forEach((tab) => {
+      expect(screen.getByRole('tab', { name: tab })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('tab', { name: /starred lists/i })).toHaveAttribute('aria-selected', 'true');
+
+    await user.click(screen.getByRole('tab', { name: 'All lists' }));
+    await screen.findByRole('searchbox');
+    expect(screen.getByRole('table')).toBeInTheDocument();
+
+    const columnHeaders = [/List name/, /List type/, /No. of patients/];
+
+    columnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+  });
+
+  it('clicking a tab switches the page content to the selected tab', async () => {
+    const user = userEvent.setup();
+
+    render(<ListsDashboard />);
+
+    const systemListsTab = screen.getByRole('tab', { name: /system lists/i });
+    expect(systemListsTab).toHaveAttribute('aria-selected', 'false');
+
+    await user.click(systemListsTab);
+
+    expect(systemListsTab).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/lists-table/custom-pagination.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Pagination } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { usePaginationInfo } from './use-pagination-info.component';
+import styles from './custom-pagination.scss';
+
+interface CustomPaginationProps {
+  currentItems: number;
+  totalItems: number;
+  pageNumber: number;
+  pageSize: number;
+  onPageNumberChange?: ({ page }: { page: number }) => void;
+}
+
+export const CustomPagination: React.FC<CustomPaginationProps> = ({
+  totalItems,
+  pageSize,
+  onPageNumberChange,
+  pageNumber,
+  currentItems,
+}) => {
+  const { itemsDisplayed, pageSizes } = usePaginationInfo(pageSize, totalItems, pageNumber, currentItems);
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <>
+      {totalItems > 0 && (
+        <div className={isTablet ? styles.tablet : styles.desktop}>
+          <div>{itemsDisplayed}</div>
+          <Pagination
+            className={styles.pagination}
+            page={pageNumber}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            totalItems={totalItems}
+            onChange={onPageNumberChange}
+            size={isTablet ? 'lg' : 'sm'}
+          />
+        </div>
+      )}
+    </>
+  );
+};

package/src/lists-table/custom-pagination.scss

@@ -0,0 +1,67 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.desktop,
+.tablet {
+  @include type.type-style('body-compact-01');
+  display: flex;
+  justify-content: space-between;
+  color: colors.$gray-70;
+  background-color: colors.$white-0;
+  padding-left: 1rem;
+  align-items: center;
+  border: 1px solid colors.$gray-20;
+  border-top: none;
+}
+
+.desktop :global(.cds--pagination) {
+  min-height: 0rem;
+  height: 2rem;
+  width: auto;
+  border: none;
+
+  & :global(.cds--select-input),
+  :global(.cds--btn),
+  :global(.cds--pagination__right) {
+    min-height: 0rem;
+    height: 2rem;
+  }
+}
+
+.tablet :global(.cds--pagination) {
+  min-height: 0rem;
+  height: 3rem;
+  width: auto;
+  border: none;
+
+  & :global(.cds--select-input),
+  :global(.cds--btn),
+  :global(.cds--pagination__right) {
+    min-height: 0rem;
+    height: 3rem;
+  }
+}
+
+.configurableLink {
+  text-decoration: none;
+  @extend .bodyShort01;
+  padding: 0 layout.$spacing-03;
+}
+
+.pagination {
+  @include type.type-style('body-compact-01');
+  background-color: colors.$white-0;
+  color: colors.$gray-70;
+  display: flex;
+}
+
+div.pagination {
+  & > :global(.cds--pagination__left) {
+    display: none;
+  }
+}