Selecting and adding patient to list implemented

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

@@ -1,18 +1,18 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Search from 'carbon-components-react/lib/components/Search';
 import Button from 'carbon-components-react/lib/components/Button';
 import Checkbox from 'carbon-components-react/lib/components/Checkbox';
 import { usePatientListData } from '../patientListData';
 import { useTranslation } from 'react-i18next';
 import styles from './add-patient-to-list.scss';
 
-import { OpenmrsCohort } from '../patientListData/api';
+import { OpenmrsCohort, addPatientToList } from '../patientListData/api';
 import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
 
-const CheckboxedPatientList = (props) => {
+const CheckboxedPatientList = ({ name, uuid, checked, handleChange }) => {
   return (
     <div className={styles.checkbox}>
-      <Checkbox labelText={props.patientList.display} id={props.patientList.display} />{' '}
+      <Checkbox checked={checked} labelText={name} id={uuid} onChange={(e) => handleChange(uuid, e)} />
     </div>
   );
 };
@@ -21,6 +21,36 @@ const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ clos
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = React.useState('');
   const { loading, data } = usePatientListData(undefined, undefined, undefined, searchValue);
+  const [selectedLists, setSelectedList] = useState({});
+
+  useEffect(() => {
+    const lists = {};
+    if (data) {
+      data.map((patientList, ind) => {
+        lists[patientList.uuid] = false;
+      });
+    }
+    setSelectedList(lists);
+  }, [data]);
+
+  const handleChange = (uuid, e) => {
+    setSelectedList((selectedLists) => ({
+      ...selectedLists,
+      [uuid]: e,
+    }));
+  };
+
+  const handleSubmit = () => {
+    data.map((patientList) => {
+      if (selectedLists[patientList.uuid]) {
+        addPatientToList({
+          patient: 'b2f86b28-7998-4812-83a9-7f8ad3c47e66',
+          name: patientList.name,
+          cohort: patientList.uuid,
+        });
+      }
+    });
+  };
 
   return (
     <div className={styles.modalContent}>
@@ -47,10 +77,18 @@ const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ clos
       </div>
       <div className={styles.patientListList}>
         <fieldset className="bx--fieldset">
-          <label className="bx--label">Patient Lists</label>
+          <p className="bx--label">Patient Lists</p>
           {!loading && data ? (
             data.length > 0 ? (
-              data.map((patientList, ind) => <CheckboxedPatientList key={ind} patientList={patientList} />)
+              data.map((patientList, ind) => (
+                <CheckboxedPatientList
+                  key={ind}
+                  handleChange={handleChange}
+                  checked={selectedLists[patientList.uuid] === undefined}
+                  name={patientList.name}
+                  uuid={patientList.uuid}
+                />
+              ))
             ) : (
               <p className={styles.bodyLong01}>No patient list found</p>
             )
@@ -60,12 +98,14 @@ const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ clos
         </fieldset>
       </div>
       <div className={styles.buttonSet}>
-        <Button kind="ghost">Create new patient list</Button>
+        <Button kind="ghost">{t('createNewPatientList', 'Create new patient list')}</Button>
         <div>
           <Button kind="secondary" className={styles.largeButtons} onClick={close}>
             {t('cancel', 'Cancel')}
           </Button>
-          <Button className={styles.largeButtons}>{t('addToList', 'Add to list')}</Button>
+          <Button onClick={handleSubmit} className={styles.largeButtons}>
+            {t('addToList', 'Add to list')}
+          </Button>
         </div>
       </div>
     </div>

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

@@ -19,15 +19,13 @@ const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps>
         <button
           className="bx--overflow-menu-options__btn"
           role="menuitem"
-          title={t('openPatientList', 'Add To Patient List')}
+          title={t('openPatientList', 'Add to list')}
           data-floating-menu-primary-focus
           onClick={handleClick}
           style={{
             maxWidth: '100vw',
           }}>
-          <span className="bx--overflow-menu-options__option-content">
-            {t('openPatientList', 'Add To Patient List')}
-          </span>
+          <span className="bx--overflow-menu-options__option-content">{t('openPatientList', 'Add to list')}</span>
         </button>
       </li>
       {modalOpen && (

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

@@ -52,8 +52,6 @@ export async function getAllPatientLists(filter?: PATIENT_LIST_TYPE, stared?: bo
     error: Error;
   } = await (await fetch('/openmrs/ws/rest/v1/cohortm/cohort?v=default')).json();
 
-  console.log({ results });
-
   if (error) throw error;
 
   return results;
@@ -79,8 +77,8 @@ async function getPatientListMembers(cohortUuid: string) {
   return patients;
 }
 
-async function addPatientToList(patient: { name: string; patient: string; cohort: string }) {
-  return postData('/openmrs/ws/rest/v1/cohortm/cohortmember', patient);
+export async function addPatientToList(data: { name: string; patient: string; cohort: string }) {
+  return postData('/openmrs/ws/rest/v1/cohortm/cohortmember', data);
 }
 
 export async function createPatientList(cohort: { name: string }) {