(fix)O3-2197:Unable to remove a patient from a list

openmrs · Aug 2, 2023 · ad3bc72 · ad3bc72
1 parent 7a2237d
commit ad3bc72
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 4 deletions.
diff --git a/packages/esm-patient-list-app/src/api/api-remote.ts b/packages/esm-patient-list-app/src/api/api-remote.ts
@@ -136,8 +136,19 @@ export async function addPatientToList(data: AddPatientData, ac = new AbortContr
   return postData(`${cohortUrl}/cohortmember`, data, ac);
 }
 
-export async function createPatientList(cohort: NewCohortDataPayload, ac = new AbortController()) {
+export async function removePatientFromList(cohortMembershipUuid: string, ac = new AbortController()) {
   return postData(
+    `${cohortUrl}/cohortmember/${cohortMembershipUuid}`,
+    {
+      endDate: new Date(),
+      voidReason: '',
+    },
+    ac,
+  );
+}
+
+export async function createPatientList(cohort: NewCohortDataPayload, ac = new AbortController()) {
+  return deleteData(
     `${cohortUrl}/cohort/`,
     {
       ...cohort,

diff --git a/packages/esm-patient-list-app/src/patient-table/overflow-menu.component.tsx b/packages/esm-patient-list-app/src/patient-table/overflow-menu.component.tsx
@@ -0,0 +1,54 @@
+import { isDesktop, showToast, useLayoutType } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { removePatientFromList } from '../api/api-remote';
+import { OverflowMenu, Layer, OverflowMenuItem } from '@carbon/react';
+import styles from './patient-table.scss';
+
+interface OverflowMenuCellProps {
+  cohortMembershipUuid: string;
+}
+
+const OverflowMenuComponent: React.FC<OverflowMenuCellProps> = ({ cohortMembershipUuid }) => {
+  const { t } = useTranslation();
+  const layoutType = useLayoutType();
+  const desktopLayout = isDesktop(layoutType);
+
+  const handleRemovePatientFromList = useCallback(() => {
+    removePatientFromList(cohortMembershipUuid)
+      .then(() =>
+        showToast({
+          title: t('removed', 'Removed'),
+          description: t('removePatientFromList', 'Successfully removed patient from list'),
+          kind: 'success',
+        }),
+      )
+      .catch(() =>
+        showToast({
+          title: t('error', 'Error'),
+          description: t('errorRemovePatientFromList', "Couldn't remove patient from this list"),
+          kind: 'error',
+        }),
+      );
+  }, [cohortMembershipUuid, t]);
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu
+        data-floating-menu-container
+        ariaLabel="Remove patient from the list"
+        size={desktopLayout ? 'sm' : 'lg'}
+        flipped>
+        <OverflowMenuItem
+          size={desktopLayout ? 'sm' : 'lg'}
+          className={styles.menuItem}
+          onClick={handleRemovePatientFromList}
+          itemText={t('removePatient', 'Remove patient')}
+          isDelete
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};
+
+export default OverflowMenuComponent;
diff --git a/packages/esm-patient-list-app/src/patient-table/patient-table.component.tsx b/packages/esm-patient-list-app/src/patient-table/patient-table.component.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, CSSProperties } from 'react';
-
 import {
   DataTable,
   DataTableSkeleton,
@@ -17,11 +16,12 @@ import {
   TableRow,
 } from '@carbon/react';
 import debounce from 'lodash-es/debounce';
-import { ConfigurableLink, useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import { ConfigurableLink, useLayoutType, isDesktop, OpenmrsResource } from '@openmrs/esm-framework';
 import styles from './patient-table.scss';
+import PatientListOverflowMenuComponent from './overflow-menu.component';
 
 interface PatientTableProps {
-  patients: Array<Object>;
+  patients: Array<OpenmrsResource>;
   columns: Array<PatientTableColumn>;
   style?: CSSProperties;
   autoFocus?: boolean;
@@ -68,6 +68,7 @@ const PatientTable: React.FC<PatientTableProps> = ({
       patients.map((patient, index) => {
         const row = {
           id: index,
+          uuid: patient?.uuid,
         };
         columns.forEach((column) => {
           const value = column.getValue?.(patient) || patient[column.key];
@@ -126,6 +127,7 @@ const PatientTable: React.FC<PatientTableProps> = ({
                       {header.header?.content ?? header.header}
                     </TableHeader>
                   ))}
+                  <TableHeader />
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -137,6 +139,9 @@ const PatientTable: React.FC<PatientTableProps> = ({
                     {row.cells.map((cell) => (
                       <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
+                    <TableCell>
+                      <PatientListOverflowMenuComponent cohortMembershipUuid={row.uuid} />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>