Fixup

openmrs · Oct 27, 2023 · 584b0ae · 584b0ae
1 parent 3e61990
commit 584b0ae
Show file tree

Hide file tree

Showing 23 changed files with 444 additions and 279 deletions.
diff --git a/e2e/pages/patient-lists-page.ts b/e2e/pages/patient-lists-page.ts
@@ -21,7 +21,7 @@ export class PatientListsPage {
 
   async editPatientList(listName: string, description: string) {
     await this.page.getByRole('button', { name: 'Actions' }).click();
-    await this.page.getByRole('menuitem', { name: 'Edit Name or Description' }).click();
+    await this.page.getByRole('menuitem', { name: 'Edit name or description' }).click();
     await this.page.getByLabel('List name').fill(listName);
     await this.page.getByLabel('Describe the purpose of this list in a few words').fill(description);
     await this.page.getByRole('button', { name: 'Edit list' }).click();

diff --git a/e2e/specs/patient-list.spec.ts b/e2e/specs/patient-list.spec.ts
@@ -86,7 +86,6 @@ test('Manage patients in a list', async ({ api, page }) => {
     await removePatientFromCohort(api, createdCohortMember.uuid);
     await patientListPage.goto(cohort.uuid);
     await expect(patientListPage.patientListHeader()).toHaveText(/0 patients/);
-    await expect(patientListPage.patientsTable()).not.toHaveText(new RegExp(patient.person.display));
     createdCohortMember = null;
   });
 });

diff --git a/packages/esm-appointments-app/translations/es.json b/packages/esm-appointments-app/translations/es.json
@@ -36,6 +36,7 @@
   "cancel": "Cancelar",
   "cancelAppointment": "Cancelar cita",
   "cancelled": "Cancelada",
+  "cancelledSuccessfully": "It has been cancelled successfully",
   "checkedIn": "Checked in",
   "checkedOut": "Completada",
   "checkFilters": "Compruebe los filtros anteriores",

diff --git a/packages/esm-patient-list-app/src/add-patient/add-patient.component.tsx b/packages/esm-patient-list-app/src/add-patient/add-patient.component.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import useSWR from 'swr';
 import {
   getDynamicOfflineDataEntries,
@@ -11,11 +12,10 @@ import {
   navigate,
   useConfig,
 } from '@openmrs/esm-framework';
-import { Button, Checkbox, Pagination, Search, SkeletonText, CheckboxSkeleton } from '@carbon/react';
+import { Button, Checkbox, Pagination, Search, CheckboxSkeleton } from '@carbon/react';
 import { addPatientToList, getAllPatientLists, getPatientListIdsForPatient } from '../api/api-remote';
-import { TFunction } from 'i18next';
-import styles from './add-patient.scss';
 import { ConfigSchema } from '../config-schema';
+import styles from './add-patient.scss';
 
 interface AddPatientProps {
   closeModal: () => void;

diff --git a/packages/esm-patient-list-app/src/api/hooks.ts b/packages/esm-patient-list-app/src/api/hooks.ts
@@ -1,3 +1,9 @@
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, FetchResponse, useConfig } from '@openmrs/esm-framework';
+import { cohortUrl, getAllPatientLists, getPatientListIdsForPatient, getPatientListMembers } from './api-remote';
+import { ConfigSchema } from '../config-schema';
 import {
   CohortResponse,
   CohortType,
@@ -6,12 +12,6 @@ import {
   PatientListFilter,
   PatientListType,
 } from './types';
-import { openmrsFetch, FetchResponse, useConfig } from '@openmrs/esm-framework';
-import useSWR from 'swr';
-import useSWRInfinite from 'swr/infinite';
-import { cohortUrl, getAllPatientLists, getPatientListIdsForPatient, getPatientListMembers } from './api-remote';
-import { ConfigSchema } from '../config-schema';
-import { useEffect, useState } from 'react';
 
 interface PatientListResponse {
   results: CohortResponse<OpenmrsCohort>;
@@ -120,10 +120,10 @@ export function usePatientListDetails(patientListUuid: string) {
   );
 
   return {
-    data: data?.data,
+    listDetails: data?.data,
     error,
     isLoading,
-    mutate,
+    mutateListDetails: mutate,
   };
 }
 
@@ -134,11 +134,22 @@ export function usePatientListMembers(
   pageSize: number = 10,
   v: string = 'full',
 ) {
-  const swrResult = useSWR<FetchResponse<CohortResponse<OpenmrsCohortMember>>, Error>(
+  const { data, error, mutate } = useSWR<FetchResponse<CohortResponse<OpenmrsCohortMember>>, Error>(
     `${cohortUrl}/cohortmember?cohort=${patientListUuid}&startIndex=${startIndex}&limit=${pageSize}&v=${v}&q=${searchQuery}`,
     openmrsFetch,
   );
-  return { ...swrResult, data: swrResult?.data?.data?.results };
+
+  // FIXME: This is a workaround for removing a patient from a list
+  const filterList = (listMembers: Array<OpenmrsCohortMember>) =>
+    listMembers.filter((member) => !member.endDate && !member.voided);
+
+  const filteredListMembers = filterList(data?.data?.results ?? []);
+
+  return {
+    listMembers: filteredListMembers,
+    error: error,
+    mutateListMembers: mutate,
+  };
 }
 
 export function useCohortTypes() {

diff --git a/packages/esm-patient-list-app/src/api/types.ts b/packages/esm-patient-list-app/src/api/types.ts
@@ -75,6 +75,7 @@ export interface OpenmrsCohortMember {
   name: string;
   uuid: string;
   patient: OpenmrsResource;
+  voided: boolean;
 }
 
 export interface CohortResponse<T> {

diff --git a/packages/esm-patient-list-app/src/overflow-menu/overflow-menu.component.tsx b/packages/esm-patient-list-app/src/overflow-menu/overflow-menu.component.tsx
@@ -40,6 +40,7 @@ const CustomOverflowMenuComponent: React.FC<CustomOverflowMenuComponentProps> =
         onClick={toggleShowMenu}
         style={{
           boxShadow: showMenu ? '0 2px 6px 0 rgb(0 0 0 / 30%)' : 'none',
+          height: '2.5rem',
         }}>
         {menuTitle}
       </button>
@@ -52,6 +53,7 @@ const CustomOverflowMenuComponent: React.FC<CustomOverflowMenuComponentProps> =
         id="custom-actions-overflow-menu"
         style={{
           display: showMenu ? 'block' : 'none',
+          marginTop: '-0.475rem',
         }}>
         <ul className="cds--overflow-menu-options__content">{children}</ul>
         <span />

diff --git a/packages/esm-patient-list-app/src/overlay.component.tsx b/packages/esm-patient-list-app/src/overlay.component.tsx
@@ -18,14 +18,15 @@ const Overlay: React.FC<OverlayProps> = ({ close, children, header, buttonsGroup
     <div className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}>
       {isDesktop(layout) ? (
         <div className={styles.desktopHeader}>
-          <div className={styles.headerContent}>{header}</div>
+          <span className={styles.headerContent}>{header}</span>
           <Button
             className={styles.closeButton}
-            onClick={close}
-            kind="ghost"
             hasIconOnly
-            renderIcon={(props) => <Close size={16} {...props} />}
             iconDescription="Close overlay"
+            kind="ghost"
+            onClick={close}
+            renderIcon={(props) => <Close size={16} {...props} />}
+            size="lg"
           />
         </div>
       ) : (

diff --git a/packages/esm-patient-list-app/src/overlay.scss b/packages/esm-patient-list-app/src/overlay.scss
@@ -47,6 +47,7 @@
   align-items: center;
   background-color: $ui-03;
   border-bottom: 1px solid $text-03;
+  height: 2.5rem;
 }
 
 .headerContent {
@@ -56,14 +57,28 @@
 }
 
 .closeButton {
+  border: none;
+  border-bottom: 1px solid $text-03;
   background-color: $ui-02;
+  padding-block-start: 0.75rem;
+  // FIXME: Why are carbon's default button styles not working?
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
 .overlayContent {
   padding: spacing.$spacing-05;
   overflow-y: auto;
 }
 
+:global(.omrs-breakpoint-lt-desktop) .overlayContent {
+  background-color: #ededed;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .overlayContent {
+  background-color: white;
+}
+
 .buttonsGroup {
   align-self: end;
 }

diff --git a/packages/esm-patient-list-app/src/patient-list-detail/patient-list-detail.component.tsx b/packages/esm-patient-list-app/src/patient-list-detail/patient-list-detail.component.tsx
@@ -1,14 +1,14 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { navigate, formatDate, parseDate, showToast } from '@openmrs/esm-framework';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem, Modal } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import CustomOverflowMenuComponent from '../overflow-menu/overflow-menu.component';
-import EditPatientListDetailsOverlay from '../create-edit-patient-list/create-edit-list.component';
-import PatientListTable from '../patient-table/patient-table.component';
+import { navigate, formatDate, parseDate, showToast } from '@openmrs/esm-framework';
 import { deletePatientList } from '../api/api-remote';
 import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
+import CustomOverflowMenuComponent from '../overflow-menu/overflow-menu.component';
+import EditPatientListDetailsOverlay from '../create-edit-patient-list/create-edit-list.component';
+import PatientTable from '../patient-table/patient-table.component';
 import styles from './patient-list-detail.scss';
 
 interface PatientListMemberRow {
@@ -26,21 +26,22 @@ const PatientListDetailComponent = () => {
   const [currentPage, setPageCount] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(10);
   const [searchString, setSearchString] = useState('');
-  const { data: patientListDetails, mutate: mutatePatientListDetails } = usePatientListDetails(patientListUuid);
-  const { data: patientListMembers, mutate: mutatePatientListMembers } = usePatientListMembers(
+  const { listDetails, mutateListDetails } = usePatientListDetails(patientListUuid);
+  const { listMembers, mutateListMembers } = usePatientListMembers(
     patientListUuid,
     searchString,
     (currentPage - 1) * currentPageSize,
     currentPageSize,
   );
+
   const [showEditPatientListDetailOverlay, setEditPatientListDetailOverlay] = useState(false);
   const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false);
 
   const patients: PatientListMemberRow[] = useMemo(
     () =>
-      patientListMembers
-        ? patientListMembers?.length
-          ? patientListMembers?.map((member) => ({
+      listMembers
+        ? listMembers?.length
+          ? listMembers?.map((member) => ({
               name: member?.patient?.person?.display,
               identifier: member?.patient?.identifiers[0]?.identifier ?? null,
               sex: member?.patient?.person?.gender,
@@ -50,7 +51,7 @@ const PatientListDetailComponent = () => {
             }))
           : []
         : [],
-    [patientListMembers],
+    [listMembers],
   );
 
   const headers = useMemo(
@@ -93,31 +94,31 @@ const PatientListDetailComponent = () => {
       .then(() =>
         showToast({
           title: t('deleted', 'Deleted'),
-          description: `${t('deletedPatientList', 'Deleted patient list')}: ${patientListDetails?.name}`,
+          description: `${t('deletedPatientList', 'Deleted patient list')}: ${listDetails?.name}`,
           kind: 'success',
         }),
       )
       .then(() => navigate({ to: `${window.spaBase}/home/patient-lists/` }))
-      .catch(() =>
+      .catch((e) =>
         showToast({
-          title: t('error', 'Error'),
-          description: t('errorDeleteList', "Couldn't delete patient list"),
+          title: t('errorDeleteList', 'Error deleting patient list'),
+          description: e?.message,
           kind: 'error',
         }),
       )
       .finally(() => setShowDeleteConfirmationModal(false));
-  }, [patientListUuid, patientListDetails, t]);
+  }, [patientListUuid, listDetails, t]);
 
   return (
     <main className={styles.container}>
       <section className={styles.cohortHeader}>
         <div data-testid="patientListHeader">
-          <h1 className={styles.productiveHeading03}>{patientListDetails?.name ?? '--'}</h1>
-          <h4 className={`${styles.bodyShort02} ${styles.marginTop}`}>{patientListDetails?.description ?? '--'}</h4>
+          <h1 className={styles.productiveHeading03}>{listDetails?.name ?? '--'}</h1>
+          <h4 className={`${styles.bodyShort02} ${styles.marginTop}`}>{listDetails?.description ?? '--'}</h4>
           <div className={` ${styles.text02} ${styles.bodyShort01} ${styles.marginTop}`}>
-            {patientListDetails?.size} {t('patients', 'patients')} &middot;{' '}
+            {listDetails?.size} {t('patients', 'patients')} &middot;{' '}
             <span className={styles.label01}>{t('createdOn', 'Created on')}:</span>{' '}
-            {patientListDetails?.startDate ? formatDate(parseDate(patientListDetails.startDate)) : null}
+            {listDetails?.startDate ? formatDate(parseDate(listDetails.startDate)) : null}
           </div>
         </div>
         <div className={styles.overflowMenu}>
@@ -130,7 +131,7 @@ const PatientListDetailComponent = () => {
             }>
             <OverflowMenuItem
               className={styles.menuItem}
-              itemText={t('editNameDescription', 'Edit Name or Description')}
+              itemText={t('editNameDescription', 'Edit name or description')}
               onClick={() => setEditPatientListDetailOverlay(true)}
             />
             <OverflowMenuItem
@@ -144,38 +145,37 @@ const PatientListDetailComponent = () => {
       </section>
       <section>
         <div className={styles.tableContainer}>
-          <PatientListTable
+          <PatientTable
             patients={patients}
             columns={headers}
-            isLoading={!patientListMembers && !patients}
-            isFetching={!patientListMembers}
-            cohortName={patientListDetails?.name}
-            mutatePatientListMembers={mutatePatientListMembers}
+            isLoading={!listMembers && !patients}
+            isFetching={!listMembers}
+            mutateListMembers={mutateListMembers}
+            mutateListDetails={mutateListDetails}
             search={{
               onSearch: handleSearch,
               placeHolder: 'Search',
             }}
             pagination={{
-              usePagination: patientListDetails?.size > currentPageSize,
+              usePagination: listDetails?.size > currentPageSize,
               currentPage,
               onChange: ({ page, pageSize }) => {
                 setPageCount(page);
                 setCurrentPageSize(pageSize);
               },
               pageSize: 10,
-              totalItems: patientListDetails?.size,
+              totalItems: listDetails?.size,
               pagesUnknown: true,
-              lastPage:
-                patients?.length < currentPageSize || currentPage * currentPageSize === patientListDetails?.size,
+              lastPage: patients?.length < currentPageSize || currentPage * currentPageSize === listDetails?.size,
             }}
           />
         </div>
         {showEditPatientListDetailOverlay && (
           <EditPatientListDetailsOverlay
             close={() => setEditPatientListDetailOverlay(false)}
             edit
-            patientListDetails={patientListDetails}
-            onSuccess={mutatePatientListDetails}
+            patientListDetails={listDetails}
+            onSuccess={mutateListDetails}
           />
         )}
         {showDeleteConfirmationModal && (
@@ -188,10 +188,15 @@ const PatientListDetailComponent = () => {
             onRequestClose={() => setShowDeleteConfirmationModal(false)}
             onRequestSubmit={confirmDeletePatientList}
             primaryButtonDisabled={false}>
-            {patientListDetails?.size > 0 ? (
-              <p>{`This list has ${patientListDetails.size} patients.`}</p>
+            {listDetails?.size > 0 ? (
+              <p>
+                {t('patientListMemberCount', 'This list has {count} patients', {
+                  count: listDetails.size,
+                })}
+                .
+              </p>
             ) : (
-              <p>This list has no patients.</p>
+              <p>{t('emptyList', 'This list has no patients')}</p>
             )}
           </Modal>
         )}