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

packages/esm-patient-list-app/src/api/api-remote.ts

@@ -105,14 +105,24 @@ export async function getPatientListMembers(cohortUuid: string, ac = new AbortCo
     throw error;
   }
 
+  const currentDate = new Date();
   const searchQuery = results.map((p) => p.patient.uuid).join(',');
   const result = await openmrsFetch(`/ws/fhir2/R4/Patient/_search?_id=${searchQuery}`, {
     method: 'POST',
     signal: ac.signal,
   });
 
   const patients: Array<PatientListMember> = result.data.entry.map((e) => e.resource);
-  return patients;
+  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()) {
@@ -136,6 +146,16 @@ export async function addPatientToList(data: AddPatientData, ac = new AbortContr
   return postData(`${cohortUrl}/cohortmember`, data, ac);
 }
 
+export async function removePatientFromList(cohortMembershipUuid: string, ac = new AbortController()) {
+  return postData(
+    `${cohortUrl}/cohortmember/${cohortMembershipUuid}`,
+    {
+      endDate: new Date(),
+    },
+    ac,
+  );
+}
+
 export async function createPatientList(cohort: NewCohortDataPayload, ac = new AbortController()) {
   return postData(
     `${cohortUrl}/cohort/`,

packages/esm-patient-list-app/src/api/types.ts

@@ -34,6 +34,7 @@ export interface PatientListOption {
 }
 
 export interface PatientListMember {
+  endDate: string | number | Date;
   id: string;
 }
 

packages/esm-patient-list-app/src/patient-list-detail/patient-list-detail.component.tsx

@@ -27,7 +27,7 @@ const PatientListDetailComponent = () => {
   const [currentPageSize, setCurrentPageSize] = useState(10);
   const [searchString, setSearchString] = useState('');
   const { data: patientListDetails, mutate: mutatePatientListDetails } = usePatientListDetails(patientListUuid);
-  const { data: patientListMembers } = usePatientListMembers(
+  const { data: patientListMembers, mutate: mutatePatientListMembers } = usePatientListMembers(
     patientListUuid,
     searchString,
     (currentPage - 1) * currentPageSize,
@@ -45,6 +45,7 @@ const PatientListDetailComponent = () => {
               sex: member?.patient?.person?.gender,
               startDate: formatDate(parseDate(member?.startDate)),
               uuid: `${member?.patient?.uuid}`,
+              membershipUuid: member?.uuid,
             }))
           : []
         : [],
@@ -139,6 +140,8 @@ const PatientListDetailComponent = () => {
             columns={headers}
             isLoading={!patientListMembers && !patients}
             isFetching={!patientListMembers}
+            cohortName={patientListDetails?.name}
+            mutatePatientListMembers={mutatePatientListMembers}
             search={{
               onSearch: handleSearch,
               placeHolder: 'Search',

packages/esm-patient-list-app/src/patient-table/overflow-menu.component.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { removePatientFromList } from '../api/api-remote';
+import { ExtensionSlot, isDesktop, showToast, useLayoutType } from '@openmrs/esm-framework';
+import { OverflowMenu, Layer, OverflowMenuItem, Modal } from '@carbon/react';
+import overflowMenuStyles from './overflow-menu.scss';
+
+interface OverflowMenuCellProps {
+  cohortMembershipUuid: string;
+  cohortName: string;
+  mutatePatientListMembers: () => void;
+}
+
+const OverflowMenuComponent: React.FC<OverflowMenuCellProps> = ({
+  cohortMembershipUuid,
+  cohortName,
+  mutatePatientListMembers,
+}) => {
+  const { t } = useTranslation();
+  const layoutType = useLayoutType();
+  const desktopLayout = isDesktop(layoutType);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+
+  const confirmRemovePatientFromList = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      await removePatientFromList(cohortMembershipUuid);
+      mutatePatientListMembers();
+      showToast({
+        title: t('removed', 'Removed'),
+        description: `${t('successRemovePatientFromList', 'Successfully removed patient from list')}: ${cohortName}`,
+      });
+    } catch (error) {
+      showToast({
+        title: t('error', 'Error'),
+        kind: 'error',
+        description: `${t('errorRemovePatientFromList', 'Failed to remove patient from list')}: ${cohortName}`,
+      });
+    }
+
+    setIsDeleting(false);
+    setShowConfirmationModal(false);
+  }, [cohortMembershipUuid, cohortName, mutatePatientListMembers, t]);
+
+  return (
+    <Layer className={overflowMenuStyles.layer}>
+      <OverflowMenu
+        data-floating-menu-container
+        ariaLabel={`Remove patient from the ${cohortName} list`}
+        size={desktopLayout ? 'sm' : 'lg'}
+        flipped>
+        <ExtensionSlot name="cohort-member-action-items" />
+        <OverflowMenuItem
+          size={desktopLayout ? 'sm' : 'lg'}
+          className={overflowMenuStyles.menuItem}
+          onClick={() => setShowConfirmationModal(true)}
+          itemText={t('removePatient', 'Remove patient')}
+          isDelete
+        />
+      </OverflowMenu>
+
+      {showConfirmationModal && (
+        <Modal
+          open
+          danger
+          modalHeading={t('confirmRemovePatient', 'Are you sure you want to remove this patient from {cohortName}?', {
+            cohortName: cohortName,
+          })}
+          modalLabel={t('removePatient', 'Remove patient')}
+          primaryButtonText="Remove patient"
+          secondaryButtonText="Cancel"
+          onRequestClose={() => setShowConfirmationModal(false)}
+          onRequestSubmit={confirmRemovePatientFromList}
+          primaryButtonDisabled={isDeleting}
+        />
+      )}
+    </Layer>
+  );
+};
+
+export default OverflowMenuComponent;

packages/esm-patient-list-app/src/patient-table/overflow-menu.scss

@@ -0,0 +1,6 @@
+.layer {
+  height: 100%;
+}
+.menuItem {
+  max-width: none;
+}

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,16 +16,19 @@ 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;
   isLoading: boolean;
   isFetching?: boolean;
+  cohortName: string;
+  mutatePatientListMembers: () => void;
   search: {
     onSearch(searchTerm: string): any;
     placeHolder: string;
@@ -61,13 +63,15 @@ const PatientTable: React.FC<PatientTableProps> = ({
   isLoading,
   autoFocus,
   isFetching,
+  cohortName,
+  mutatePatientListMembers,
 }) => {
   const layout = useLayoutType();
   const rows: Array<any> = useMemo(
     () =>
       patients.map((patient, index) => {
         const row = {
-          id: index,
+          id: patient.membershipUuid,
         };
         columns.forEach((column) => {
           const value = column.getValue?.(patient) || patient[column.key];
@@ -83,7 +87,6 @@ const PatientTable: React.FC<PatientTableProps> = ({
       }),
     [patients, columns],
   );
-
   const handleSearch = useMemo(() => debounce((searchTerm) => search.onSearch(searchTerm), 300), []);
   const otherSearchProps = useMemo(() => search.otherSearchProps || {}, [search]);
 
@@ -126,6 +129,7 @@ const PatientTable: React.FC<PatientTableProps> = ({
                       {header.header?.content ?? header.header}
                     </TableHeader>
                   ))}
+                  <TableHeader />
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -137,6 +141,13 @@ const PatientTable: React.FC<PatientTableProps> = ({
                     {row.cells.map((cell) => (
                       <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
+                    <TableCell className="cds--table-column-menu">
+                      <PatientListOverflowMenuComponent
+                        cohortMembershipUuid={row.id}
+                        cohortName={cohortName}
+                        mutatePatientListMembers={mutatePatientListMembers}
+                      />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>