MF-641: Completed Patient List Modal (#26)

* Completed Patient List Modal

* Closing modal workflow fixed

Author: vasharma05

packages/esm-patient-list-app/src/AddPatientToList/add-patient-to-list.scss

@@ -2,7 +2,6 @@
 
 .modalContent {
   width: 100%;
-  max-width: 678px;
   background-color: #f4f4f4;
 }
 
@@ -14,16 +13,43 @@
   padding: 0 1rem;
 }
 
-.buttonSet {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
 .largeButtons {
   padding-bottom: 2rem;
 }
 
 .checkbox {
   padding-bottom: 0.875rem;
+}
+
+.pagination {
+  width: 100%;
+  overflow: hidden;
+}
+
+.paginationContainer { 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.itemsCountDisplay {
+  position: absolute;
+  top: 0;
+  left: 1rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  color: #525252
+}
+
+.pagination > div:first-child {
+  visibility: hidden;
+  width: 0;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }

packages/esm-patient-list-app/src/AddPatientToList/index.tsx

@@ -2,76 +2,120 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { usePatientListData } from '../patientListData';
 import { useTranslation } from 'react-i18next';
 import { addPatientToList, getPatientListsForPatient } from '../patientListData/api';
-import { toOmrsIsoString } from '@openmrs/esm-framework';
+import { toOmrsIsoString, showToast, showModal, usePagination } from '@openmrs/esm-framework';
 import Search from 'carbon-components-react/lib/components/Search';
 import Button from 'carbon-components-react/lib/components/Button';
+import Pagination from 'carbon-components-react/lib/components/Pagination';
 import Checkbox from 'carbon-components-react/lib/components/Checkbox';
 import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
 import styles from './add-patient-to-list.scss';
 
+function getPatientUuidFromUrl(): string {
+  const match = /\/patient\/([a-zA-Z0-9\-]+)\/?/.exec(location.pathname);
+  return match && match[1];
+}
+
 interface AddPatientProps {
-  close: () => void;
-  patientUuid: string;
+  closeModal: () => void;
+}
+
+interface PatientListProp {
+  name: string;
+  visible: boolean;
+  selected: boolean;
 }
 
-const AddPatient: React.FC<AddPatientProps> = ({ close, patientUuid }) => {
+type PatientListObj = Record<string, PatientListProp>;
+
+const AddPatient: React.FC<AddPatientProps> = ({ closeModal }) => {
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const { loading, data } = usePatientListData();
-  const [selectedLists, setSelectedList] = useState({});
+  const [page, setPage] = useState(1);
+  const [patientListsObj, setPatientListsObj] = useState<PatientListObj | null>(null);
+  const patientUuid = getPatientUuidFromUrl();
 
   useEffect(() => {
     if (data) {
-      const lists = {};
+      const lists: PatientListObj = {};
       data.map((patientList) => {
         lists[patientList.id] = {
           visible: true,
           selected: false,
+          name: patientList?.display,
         };
       });
       getPatientListsForPatient(patientUuid).then((enrolledPatientLists) => {
         enrolledPatientLists.forEach((patientList) => {
           lists[patientList.cohort.uuid].visible = false;
         });
-        setSelectedList(lists);
+        setPatientListsObj(lists);
       });
     }
   }, [data]);
 
-  const searchResults = useMemo(() => {
-    if (data) {
-      if (searchValue && searchValue.trim() !== '') {
-        const search = searchValue.toLowerCase();
-        return data.filter((patientList) => patientList.display.toLowerCase().includes(search));
-      } else {
-        return data;
-      }
-    } else {
-      return [];
-    }
-  }, [searchValue, data]);
-
   const handleChange = useCallback((uuid, e) => {
-    setSelectedList((selectedLists) => ({
-      ...selectedLists,
+    setPatientListsObj((patientListsObj) => ({
+      ...patientListsObj,
       [uuid]: {
-        ...selectedLists[uuid],
+        ...patientListsObj[uuid],
         selected: e,
       },
     }));
   }, []);
 
+  const handleClose = useCallback(() => {
+    closeModal();
+  }, []);
+
   const handleSubmit = useCallback(() => {
-    Object.keys(selectedLists).forEach((patientListUuid) => {
-      if (selectedLists[patientListUuid].selected) {
+    Object.keys(patientListsObj).forEach((patientListUuid) => {
+      if (patientListsObj[patientListUuid].selected) {
         addPatientToList({
           patient: patientUuid,
           cohort: patientListUuid,
           startDate: toOmrsIsoString(new Date()),
-        });
+        })
+          .then(() =>
+            showToast({
+              title: 'Successfully added',
+              kind: 'success',
+              description: `Patient added to ${patientListsObj[patientListUuid].name} list successfully.`,
+            }),
+          )
+          .catch(() =>
+            showToast({
+              title: 'Error',
+              kind: 'error',
+              description: `Patient not added to ${patientListsObj[patientListUuid].name} list.`,
+            }),
+          );
       }
     });
-  }, [selectedLists]);
+    handleClose();
+  }, [patientListsObj]);
+
+  const searchResults = useMemo(() => {
+    if (data && patientListsObj) {
+      if (searchValue && searchValue.trim() !== '') {
+        const search = searchValue.toLowerCase();
+        setPage(1);
+        return data.filter(
+          (patientList) =>
+            patientListsObj[patientList.id]?.visible && patientList.display.toLowerCase().includes(search),
+        );
+      } else {
+        return data.filter((patientList) => patientListsObj[patientList.id]?.visible);
+      }
+    } else {
+      return [];
+    }
+  }, [searchValue, data, patientListsObj]);
+  const { results, goTo, currentPage, paginated } = usePagination(searchResults, 5);
+
+  useEffect(() => {
+    goTo(page);
+  }, [page]);
 
   return (
     <div className={styles.modalContent}>
@@ -89,33 +133,25 @@ const AddPatient: React.FC<AddPatientProps> = ({ close, patientUuid }) => {
           onChange={({ target }) => {
             setSearchValue(target.value);
           }}
-          onKeyPress={(e) => {
-            if (e.key === 'Enter') {
-              // trigger search or search on typing?
-            }
-          }}
           value={searchValue}
         />
       </div>
       <div className={styles.patientListList}>
         <fieldset className="bx--fieldset">
           <p className="bx--label">Patient Lists</p>
-          {!loading && searchResults ? (
-            searchResults.length > 0 ? (
-              searchResults.map(
-                (patientList, ind) =>
-                  selectedLists[patientList.id]?.visible && (
-                    <div key={ind} className={styles.checkbox}>
-                      <Checkbox
-                        key={ind}
-                        onChange={(e) => handleChange(patientList.id, e)}
-                        checked={selectedLists[patientList.id]?.selected}
-                        labelText={patientList.display}
-                        id={patientList.id}
-                      />
-                    </div>
-                  ),
-              )
+          {!loading && patientListsObj && results ? (
+            results.length > 0 ? (
+              results.map((patientList, ind) => (
+                <div key={ind} className={styles.checkbox}>
+                  <Checkbox
+                    key={ind}
+                    onChange={(e) => handleChange(patientList.id, e)}
+                    checked={patientListsObj[patientList.id]?.selected}
+                    labelText={patientList.display}
+                    id={patientList.id}
+                  />
+                </div>
+              ))
             ) : (
               <p className={styles.bodyLong01}>No patient list found</p>
             )
@@ -124,10 +160,27 @@ const AddPatient: React.FC<AddPatientProps> = ({ close, patientUuid }) => {
           )}
         </fieldset>
       </div>
+      {paginated && (
+        <div className={styles.paginationContainer}>
+          <span className={`${styles.itemsCountDisplay} ${styles.bodyLong01}`}>
+            {results.length * currentPage} / {searchResults.length} items
+          </span>
+          <Pagination
+            className={styles.pagination}
+            forwardText=""
+            backwardText=""
+            page={currentPage}
+            pageSize={5}
+            pageSizes={[5]}
+            totalItems={searchResults.length}
+            onChange={({ page }) => setPage(page)}
+          />
+        </div>
+      )}
       <div className={styles.buttonSet}>
         <Button kind="ghost">{t('createNewPatientList', 'Create new patient list')}</Button>
         <div>
-          <Button kind="secondary" className={styles.largeButtons} onClick={close}>
+          <Button kind="secondary" className={styles.largeButtons} onClick={handleClose}>
             {t('cancel', 'Cancel')}
           </Button>
           <Button onClick={handleSubmit} className={styles.largeButtons}>

packages/esm-patient-list-app/src/patient-list-action.tsx

@@ -7,7 +7,9 @@ interface AddPastVisitOverflowMenuItemProps {}
 const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps> = () => {
   const { t } = useTranslation();
   const openModal = React.useCallback(() => {
-    showModal('add-patient-to-patient-list-modal', { patientUuid: '' });
+    const dispose = showModal('add-patient-to-patient-list-modal', {
+      closeModal: () => dispose(),
+    });
   }, []);
 
   return (