@openmrs/esm-patient-programs-app 3.2.1-pre.180 → 3.2.1-pre.203

package/src/programs/program-action-button/program-action-button.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from 'carbon-components-react';
+import { useTranslation } from 'react-i18next';
+import TaskAdd20 from '@carbon/icons-react/es/task--add/20';
+import { formEntrySub, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { ConfigurableProgram } from '../../types';
+
+interface ProgramActionButton {
+  enrollment: ConfigurableProgram;
+}
+
+const ProgramActionButton: React.FC<ProgramActionButton> = ({ enrollment }) => {
+  const { t } = useTranslation();
+  const formUuid =
+    enrollment.enrollmentStatus === 'eligible' ? enrollment.enrollmentFormUuid : enrollment.discontinuationFormUuid;
+  const launchEnrollmentForm = (enrollmentStatus: string) => {
+    formEntrySub.next({ formUuid, encounterUuid: '' });
+    launchPatientWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: `${enrollment?.display} ${enrollmentStatus} Form`,
+    });
+  };
+
+  if (enrollment.enrollmentStatus === 'eligible') {
+    return (
+      <Button
+        onClick={() => launchEnrollmentForm(t('enrollment', 'Enrollment'))}
+        renderIcon={TaskAdd20}
+        kind="tertiary"
+        size="small"
+      >
+        {t('enroll', 'Enroll')}
+      </Button>
+    );
+  }
+  return (
+    <Button
+      onClick={() => launchEnrollmentForm(t('discontinue', 'Discontinue'))}
+      renderIcon={TaskAdd20}
+      kind="danger--ghost"
+      size="small"
+    >
+      {t('discontinue', 'Discontinue')}
+    </Button>
+  );
+};
+
+export default ProgramActionButton;

package/src/programs/programs-detailed-summary.component.tsx

@@ -7,7 +7,7 @@ import map from 'lodash-es/map';
 import styles from './programs-detailed-summary.scss';
 import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { useAvailablePrograms, useEnrollments } from './programs.resource';
+import { useAvailablePrograms, useEnrollments, usePrograms } from './programs.resource';
 import {
   Button,
   DataTable,
@@ -24,7 +24,11 @@ import {
   DataTableRow,
   InlineNotification,
 } from 'carbon-components-react';
-import { formatDate, formatDatetime } from '@openmrs/esm-framework';
+import { formatDate, formatDatetime, useConfig, usePagination } from '@openmrs/esm-framework';
+import { ConfigObject } from '../config-schema';
+import { ConfigurableProgram } from '../types';
+import capitalize from 'lodash-es/capitalize';
+import ProgramActionButton from './program-action-button/program-action-button.component';
 
 interface ProgramsDetailedSummaryProps {
   patientUuid: string;
@@ -34,13 +38,18 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
   const { t } = useTranslation();
   const displayText = t('programEnrollments', 'Program enrollments');
   const headerTitle = t('carePrograms', 'Care Programs');
+  const config = useConfig() as ConfigObject;
+  const programsCount = 5;
+  const isConfigurable = config.customUrl ? true : false;
 
-  const { data: enrollments, isError, isLoading, isValidating } = useEnrollments(patientUuid);
-  const { data: availablePrograms } = useAvailablePrograms();
-  const eligiblePrograms = filter(
-    availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
-  );
+  const { enrollments, isLoading, isError, isValidating, availablePrograms, eligiblePrograms, configurablePrograms } =
+    usePrograms(patientUuid);
+
+  const {
+    results: paginatedEnrollments,
+    goTo,
+    currentPage,
+  } = usePagination(isConfigurable ? configurablePrograms : enrollments ?? [], programsCount);
 
   const tableHeaders: Array<DataTableHeader> = React.useMemo(
     () => [
@@ -68,20 +77,24 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
     [t],
   );
 
-  const tableRows: Array<DataTableRow> = React.useMemo(() => {
-    return enrollments?.map((program) => {
-      return {
-        id: program.uuid,
-        display: program.display,
-        location: program.location?.display,
-        dateEnrolled: formatDatetime(new Date(program.dateEnrolled)),
-        status: program.dateCompleted
-          ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
-          : t('active', 'Active'),
-        actions: <ProgramEditButton programEnrollmentId={program.uuid} />,
-      };
-    });
-  }, [enrollments, t]);
+  const tableRows = React.useMemo(() => {
+    return paginatedEnrollments?.map((enrollment: ConfigurableProgram) => ({
+      id: enrollment.uuid,
+      display: enrollment.display,
+      location: enrollment.location?.display,
+      dateEnrolled: enrollment.dateEnrolled ? formatDatetime(new Date(enrollment.dateEnrolled)) : '--',
+      status: isConfigurable
+        ? capitalize(enrollment.enrollmentStatus)
+        : enrollment.dateCompleted
+        ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(enrollment.dateCompleted))}`
+        : t('active', 'Active'),
+      actions: isConfigurable ? (
+        <ProgramActionButton enrollment={enrollment} />
+      ) : (
+        <ProgramEditButton programEnrollmentId={enrollment.uuid} />
+      ),
+    }));
+  }, [isConfigurable, paginatedEnrollments, t]);
 
   const launchProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace'), []);
 
@@ -156,7 +169,7 @@ interface ProgramEditButtonProps {
 function ProgramEditButton({ programEnrollmentId }: ProgramEditButtonProps) {
   const launchEditProgramsForm = React.useCallback(
     () => launchPatientWorkspace('programs-form-workspace', { programEnrollmentId }),
-    [],
+    [programEnrollmentId],
   );
 
   return (

package/src/programs/programs-form.component.tsx

@@ -146,7 +146,17 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
         sub.unsubscribe();
       };
     },
-    [closeWorkspace, completionDate, enrollmentDate, mutate, patientUuid, selectedProgram, t, userLocation],
+    [
+      closeWorkspace,
+      completionDate,
+      enrollmentDate,
+      mutate,
+      patientUuid,
+      selectedProgram,
+      t,
+      userLocation,
+      currentEnrollment,
+    ],
   );
 
   return (

package/src/programs/programs-overview.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Add16 from '@carbon/icons-react/es/add/16';
 import styles from './programs-overview.scss';
-import { formatDate, formatDatetime, usePagination } from '@openmrs/esm-framework';
+import { formatDate, formatDatetime, useConfig, usePagination } from '@openmrs/esm-framework';
 import {
   DataTable,
   DataTableSkeleton,
@@ -16,9 +16,6 @@ import {
   TableRow,
   InlineNotification,
 } from 'carbon-components-react';
-import filter from 'lodash-es/filter';
-import includes from 'lodash-es/includes';
-import map from 'lodash-es/map';
 import {
   CardHeader,
   EmptyState,
@@ -27,7 +24,11 @@ import {
   launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { useAvailablePrograms, useEnrollments } from './programs.resource';
+import { usePrograms } from './programs.resource';
+import { ConfigObject } from '../config-schema';
+import { capitalize } from 'lodash';
+import ProgramActionButton from './program-action-button/program-action-button.component';
+import { ConfigurableProgram } from '../types';
 
 interface ProgramsOverviewProps {
   basePath: string;
@@ -36,23 +37,30 @@ interface ProgramsOverviewProps {
 
 const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUuid }) => {
   const programsCount = 5;
+  const config = useConfig() as ConfigObject;
   const { t } = useTranslation();
   const displayText = t('programs', 'Program enrollments');
   const headerTitle = t('carePrograms', 'Care Programs');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/programs';
+  const isConfigurable = config.customUrl ? true : false;
 
-  const { data: enrollments, isError, isLoading, isValidating } = useEnrollments(patientUuid);
-  const activeEnrollments = enrollments?.filter((enrollment) => !enrollment.dateCompleted);
-
-  const { data: availablePrograms } = useAvailablePrograms();
-
-  const eligiblePrograms = filter(
+  const {
+    enrollments,
+    isLoading,
+    isError,
+    activeEnrollments,
+    isValidating,
     availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
-  );
+    eligiblePrograms,
+    configurablePrograms,
+  } = usePrograms(patientUuid);
 
-  const { results: paginatedEnrollments, goTo, currentPage } = usePagination(enrollments ?? [], programsCount);
+  const {
+    results: paginatedEnrollments,
+    goTo,
+    currentPage,
+  } = usePagination(isConfigurable ? configurablePrograms : enrollments ?? [], programsCount);
 
   const launchProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace'), []);
 
@@ -73,23 +81,30 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
       key: 'status',
       header: t('status', 'Status'),
     },
+    {
+      key: 'actions',
+      header: t('actions', 'Actions'),
+    },
   ];
 
   const tableRows = React.useMemo(() => {
-    return paginatedEnrollments?.map((enrollment) => ({
+    return paginatedEnrollments?.map((enrollment: ConfigurableProgram) => ({
       id: enrollment.uuid,
       display: enrollment.display,
       location: enrollment.location?.display,
-      dateEnrolled: formatDatetime(new Date(enrollment.dateEnrolled)),
-      status: enrollment.dateCompleted
+      dateEnrolled: enrollment.dateEnrolled ? formatDatetime(new Date(enrollment.dateEnrolled)) : '--',
+      status: isConfigurable
+        ? capitalize(enrollment.enrollmentStatus)
+        : enrollment.dateCompleted
         ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(enrollment.dateCompleted))}`
         : t('active', 'Active'),
+      actions: <ProgramActionButton enrollment={enrollment} />,
     }));
-  }, [paginatedEnrollments, t]);
+  }, [isConfigurable, paginatedEnrollments, t]);
 
   if (isLoading) return <DataTableSkeleton role="progressbar" />;
   if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
-  if (activeEnrollments?.length) {
+  if (isConfigurable ? configurablePrograms.length : activeEnrollments?.length) {
     return (
       <div className={styles.widgetCard}>
         <CardHeader title={headerTitle}>
@@ -114,7 +129,12 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
               title={t('fullyEnrolled', 'Enrolled in all programs')}
             />
           )}
-          <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
+          <DataTable
+            rows={tableRows}
+            headers={isConfigurable ? tableHeaders : tableHeaders.filter((header) => header.key !== 'actions')}
+            isSortable={true}
+            size="short"
+          >
             {({ rows, headers, getHeaderProps, getTableProps }) => (
               <Table {...getTableProps()} useZebraStyles>
                 <TableHead>
@@ -150,7 +170,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
           onPageNumberChange={({ page }) => goTo(page)}
           pageNumber={currentPage}
           pageSize={programsCount}
-          totalItems={enrollments.length}
+          totalItems={isConfigurable ? configurablePrograms.length : enrollments?.length}
           dashboardLinkUrl={pageUrl}
           dashboardLinkLabel={urlLabel}
         />

package/src/programs/programs.resource.tsx

@@ -1,8 +1,12 @@
 import useSWR from 'swr';
-import { map } from 'rxjs/operators';
-import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
-import { PatientProgram, Program, ProgramsFetchResponse } from '../types';
+import { map as rxjsMap } from 'rxjs/operators';
+import { openmrsFetch, openmrsObservableFetch, useConfig } from '@openmrs/esm-framework';
+import { ConfigurableProgram, PatientProgram, Program, ProgramsFetchResponse } from '../types';
 import uniqBy from 'lodash-es/uniqBy';
+import filter from 'lodash-es/filter';
+import includes from 'lodash-es/includes';
+import map from 'lodash-es/map';
+import { ConfigObject } from '../config-schema';
 
 export const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
 
@@ -17,30 +21,41 @@ export function useEnrollments(patientUuid: string) {
       ? data?.data.results.sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
       : null;
 
+  const activeEnrollments = formattedEnrollments?.filter((enrollment) => !enrollment.dateCompleted);
+
   return {
     data: data ? uniqBy(formattedEnrollments, (program) => program?.program?.uuid) : null,
     isError: error,
     isLoading: !data && !error,
     isValidating,
+    activeEnrollments,
   };
 }
 
-export function useAvailablePrograms() {
+export function useAvailablePrograms(enrollments?: Array<PatientProgram>) {
   const { data, error } = useSWR<{ data: { results: Array<Program> } }, Error>(
     `/ws/rest/v1/program?v=custom:(uuid,display,allWorkflows,concept:(uuid,display))`,
     openmrsFetch,
   );
 
+  const availablePrograms = data?.data?.results ?? null;
+
+  const eligiblePrograms = filter(
+    availablePrograms,
+    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
+  );
+
   return {
-    data: data?.data?.results?.length ? data.data.results : null,
+    data: availablePrograms,
     isError: error,
     isLoading: !data && !error,
+    eligiblePrograms,
   };
 }
 
 export function getPatientProgramByUuid(programUuid: string) {
   return openmrsObservableFetch<PatientProgram>(`/ws/rest/v1/programenrollment/${programUuid}`).pipe(
-    map(({ data }) => data),
+    rxjsMap(({ data }) => data),
   );
 }
 
@@ -73,3 +88,43 @@ export function updateProgramEnrollment(programEnrollmentUuid: string, payload,
     signal: abortController.signal,
   });
 }
+
+export const useConfigurableProgram = (patientUuid: string) => {
+  const { customUrl } = useConfig() as ConfigObject;
+  const { data, error } = useSWR<{ data: Array<ConfigurableProgram> }>(
+    customUrl ? `${customUrl}${patientUuid}` : null,
+    openmrsFetch,
+  );
+  const configurablePrograms = data?.data ?? [];
+  return {
+    configurablePrograms,
+    isLoading: !data && !error,
+    error: error,
+  };
+};
+
+export const usePrograms = (patientUuid: string) => {
+  const { customUrl } = useConfig() as ConfigObject;
+  const {
+    data: enrollments,
+    isError: enrollError,
+    isLoading: enrolLoading,
+    isValidating,
+    activeEnrollments,
+  } = useEnrollments(patientUuid);
+  const { data: availablePrograms, eligiblePrograms } = useAvailablePrograms(enrollments);
+  const { configurablePrograms, isLoading: configLoading, error: configError } = useConfigurableProgram(patientUuid);
+
+  const status = customUrl
+    ? { isLoading: configLoading, isError: configError }
+    : { isLoading: enrolLoading, isError: enrollError };
+  return {
+    enrollments,
+    ...status,
+    isValidating,
+    activeEnrollments,
+    availablePrograms,
+    eligiblePrograms,
+    configurablePrograms,
+  };
+};

package/src/types/index.ts

@@ -99,3 +99,13 @@ export interface SessionData {
   retired: false;
   links: Links;
 }
+
+export interface ConfigurableProgram extends PatientProgram {
+  uuid: string;
+  display: string;
+  enrollmentFormUuid: string;
+  discontinuationFormUuid: string;
+  enrollmentStatus: string;
+  dateEnrolled: string;
+  dateCompleted: string;
+}

package/translations/en.json

@@ -10,6 +10,9 @@
   "completedOn": "Completed on",
   "dateCompleted": "Date completed",
   "dateEnrolled": "Date enrolled",
+  "discontinue": "Discontinue",
+  "enroll": "Enroll",
+  "enrollment": "Enrollment",
   "enrollmentLocation": "Enrollment location",
   "enrollmentNowVisible": "It is now visible in the Programs table",
   "enrollmentSaved": "Program enrollment saved",