@ampath/esm-reports-app 1.0.0-next.67 → 1.0.0-next.69

package/src/reports/moh-740/registers/moh-222-daily-register/moh-222-daily-register.tsx

@@ -1,14 +1,74 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { type Moh222Patient } from '../../types';
 import styles from '../../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
 import { Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
-interface Moh222DailyRegisterProps {
-  moh222PatientList: Moh222Patient[];
-}
-const Moh222DailyRegister: React.FC<Moh222DailyRegisterProps> = ({ moh222PatientList }) => {
+import { useSearchParams } from 'react-router-dom';
+import ReportFiltersComponent from '../../../../common/report-filters/report-filters.component';
+import { type ReportPeriod } from '../../../../common/report-filters/types';
+import { useGeneratedLocation } from '../../../../common/report-placeholder/use-generated-location';
+import { fetchMoh740Register } from '../../moh-740.resource';
+import { useSession } from '@openmrs/esm-framework';
+import { showReportError } from '../../../../common/report-error/show-report-error';
+import dayjs from 'dayjs';
+const Moh222DailyRegister = () => {
+  const [rows, setRows] = useState<Moh222Patient[] | any>([]);
+  const [searchParams ] = useSearchParams();
+  const startDate = searchParams.get('startDate') ?? '';
+  const endDate = searchParams.get('endDate') ?? '';
+  const locationUuids = searchParams.get('locationUuids') ??'';
+  const indicator = searchParams.get('indicator') ?? '';
+  const [isLoading,setIsLoading] = useState<boolean>(false);
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+  const session = useSession();
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh222Location');
+  const isGenerated = rows !== null && isForCurrentLocation;
+  useEffect(()=>{
+     if(startDate && endDate && locationUuids){
+            generate({startDate: startDate,endDate: endDate, label: ''})
+     }
+  },[startDate,endDate,locationUuids,indicator]);
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+      setIsLoading(true);
+      setPeriod({ startDate, endDate });
+      let indicators = '';
+      let locationUuid = '';
+      const selectedDate =  dayjs(startDate).endOf('month')
+      const registerStartDate = selectedDate.format('YYYY-MM-DD');
+      try {
+        if(!indicator){
+           indicators = 'cumulative_all';
+        }else{
+           indicators = indicator;
+        }
+        if(!locationUuids){
+          locationUuid = session.sessionLocation?.uuid ?? '';
+        }else{
+          locationUuid = locationUuids;
+        }
+        const resp  = await fetchMoh740Register({ locationUuid: locationUuid, endDate: registerStartDate,indicators: indicators});
+        if(resp){
+            setRows(resp);
+        }
+        markGenerated(locationUuids);
+      } catch (error) {
+        showReportError('The MOH 222 register', error);
+      } finally {
+        setIsLoading(false);
+      }
+  };
   return (
     <div className={styles.tableContainer}>
+       <ReportFiltersComponent
+        reportName="MOH 222 Daily Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="custom"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+      />
       <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
         <TableHead>
           <TableRow>
@@ -45,7 +105,7 @@ const Moh222DailyRegister: React.FC<Moh222DailyRegisterProps> = ({ moh222Patient
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh222PatientList.map((p, index) => (
+          {rows.map((p, index) => (
             <TableRow key={p.patient_uuid}>
               <TableCell>{index + 1}</TableCell>
               <TableCell>{p.encounter_date}</TableCell>

package/src/reports/moh-740/registers/moh-270-permanent-register/moh-270-permanent-register.tsx

@@ -1,14 +1,74 @@
 import { Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { type Moh270Patient } from '../../types';
 import styles from '../../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
-interface Moh270DailyRegisterProps {
-  moh270PatientList: Moh270Patient[];
-}
-const Moh270DailyRegister: React.FC<Moh270DailyRegisterProps> = ({ moh270PatientList }) => {
+import { useSearchParams } from 'react-router-dom';
+import { useSession } from '@openmrs/esm-framework';
+import { useGeneratedLocation } from '../../../../common/report-placeholder/use-generated-location';
+import { type ReportPeriod } from '../../../../common/report-filters/types';
+import dayjs from 'dayjs';
+import { fetchMoh740Register } from '../../moh-740.resource';
+import { showReportError } from '../../../../common/report-error/show-report-error';
+import ReportFiltersComponent from '../../../../common/report-filters/report-filters.component';
+const Moh270DailyRegister = () => {
+    const [rows, setRows] = useState<Moh270Patient[] | any>([]);
+    const [searchParams ] = useSearchParams();
+    const startDate = searchParams.get('startDate') ?? '';
+    const endDate = searchParams.get('endDate') ?? '';
+    const locationUuids = searchParams.get('locationUuids') ??'';
+    const indicator = searchParams.get('indicator') ?? '';
+    const [isLoading,setIsLoading] = useState<boolean>(false);
+    const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+    const session = useSession();
+    const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh270Location');
+    const isGenerated = rows !== null && isForCurrentLocation;
+    useEffect(()=>{
+       if(startDate && endDate && locationUuids){
+              generate({startDate: startDate,endDate: endDate, label: ''})
+       }
+    },[startDate,endDate,locationUuids,indicator]);
+    const generate = async ({ startDate, endDate }: ReportPeriod) => {
+        setIsLoading(true);
+        setPeriod({ startDate, endDate });
+        let indicators = '';
+        let locationUuid = '';
+        const selectedDate =  dayjs(startDate).endOf('month')
+        const registerStartDate = selectedDate.format('YYYY-MM-DD');
+        try {
+          if(!indicator){
+             indicators = 'cumulative_all';
+          }else{
+             indicators = indicator;
+          }
+          if(!locationUuids){
+            locationUuid = session.sessionLocation?.uuid ?? '';
+          }else{
+            locationUuid = locationUuids;
+          }
+          const resp  = await fetchMoh740Register({ locationUuid: locationUuid, endDate: registerStartDate,indicators: indicators});
+          if(resp){
+              setRows(resp);
+          }
+          markGenerated(locationUuids);
+        } catch (error) {
+          showReportError('The MOH 270 register', error);
+        } finally {
+          setIsLoading(false);
+        }
+    }
   return (
     <div className={styles.tableContainer}>
+       <ReportFiltersComponent
+        reportName="MOH 270 Permanent Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="custom"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+      />
       <Table className={classNames(styles.table, styles.tableBordered, styles.tableStriped)}>
         <TableHead>
           <TableRow>
@@ -32,7 +92,7 @@ const Moh270DailyRegister: React.FC<Moh270DailyRegisterProps> = ({ moh270Patient
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh270PatientList.map((p, index) => (
+          {rows.map((p, index) => (
             <TableRow key={p.patient_uuid}>
               <TableCell>{index + 1}</TableCell>
               <TableCell>{p?.enrollment_date ?? ''}</TableCell>

package/src/reports/moh-740/registers/moh-740-patient-list.tsx

@@ -30,42 +30,7 @@ const Moh740PatientList: React.FC<Moh740PatientListProps> = ({
 
   const isDaily = register === Moh740Rgisters.DailyRegister;
 
-  useEffect(() => {
-    if (locationUuid && reportingMonth && indicators) {
-      fethPatientList();
-    }
-  }, [locationUuid, reportingMonth, indicators, register]);
 
-  async function fethPatientList() {
-    setIsLoading(true);
-
-    try {
-      const resp = await fetchMoh740Register({
-        locationUuid: locationUuid,
-        endDate: reportingMonth,
-        indicators: indicators,
-      });
-
-      if (resp) {
-        if (register === Moh740Rgisters.DailyRegister) {
-          setMoh222PatientList(resp as any);
-          setMoh270PatientList([]);
-        }
-        if (register === Moh740Rgisters.PermanentRegister) {
-          setMoh270PatientList(resp);
-          setMoh222PatientList([]);
-        }
-      }
-    } catch (error) {
-      /* Without this a failed fetch left an empty list, which reads on screen
-         as "no clients matched" rather than as a request that did not land. */
-      setMoh222PatientList([]);
-      setMoh270PatientList([]);
-      showReportError('the register', error);
-    } finally {
-      setIsLoading(false);
-    }
-  }
 
   if (!locationUuid || !reportingMonth || !indicators) {
     return <></>;
@@ -84,9 +49,9 @@ const Moh740PatientList: React.FC<Moh740PatientListProps> = ({
       fetchAll={async () => rows}
     >
       {isDaily ? (
-        <Moh222DailyRegister moh222PatientList={moh222PatientList} />
+        <Moh222DailyRegister/>
       ) : (
-        <Moh270DailyRegister moh270PatientList={moh270patientList} />
+        <Moh270DailyRegister/>
       )}
     </RegisterLayout>
   );

package/src/root.component.tsx

@@ -25,8 +25,11 @@ import Moh366Register from './reports/moh-731/registers/moh-366.component';
 import PrepRegisterComponent from './reports/moh-731/registers/prep-register.component';
 import Moh731Linelist from './reports/moh-731/linelist/moh-731-linelist.component';
 import Moh362Register from './registers/moh-362/moh-362.component';
+import Moh240LabRegister from './registers/moh-240/moh-240.component';
 import styles from './root.scss';
 import Moh510RegisterComponent from './reports/moh-710/registers/moh-510/moh-510.component';
+import Moh222DailyRegister from './reports/moh-740/registers/moh-222-daily-register/moh-222-daily-register';
+import Moh270DailyRegister from './reports/moh-740/registers/moh-270-permanent-register/moh-270-permanent-register';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/reports';
@@ -61,6 +64,9 @@ const RootComponent: React.FC = () => {
           <Route path="/prep-register" element={<PrepRegisterComponent />} />
           <Route path="/moh-510-register" element={<Moh510RegisterComponent />} />
           <Route path="/moh-362" element={<Moh362Register />} />
+          <Route path="/moh-222" element={<Moh222DailyRegister />} />
+          <Route path="/moh-270" element={<Moh270DailyRegister />} />
+          <Route path="/moh-240-register" element={<Moh240LabRegister />} />
         </Routes>
       </div>
     </BrowserRouter>