@openmrs/esm-reports-app 4.0.6-pre.161

package/src/components/reports.resource.tsx

@@ -0,0 +1,224 @@
+import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
+import type { FetchResponse } from '@openmrs/esm-framework';
+import { type Observable } from 'rxjs';
+import useSWR from 'swr';
+import type { ReportDefinition } from '../types/report-definition';
+import type { ReportDesign } from '../types/report-design';
+import type { ReportRequest } from '../types/report-request';
+import dayjs from 'dayjs';
+
+interface ReportModel {
+  reportName: string;
+  status: string;
+  requestedBy: string;
+  requestedByUserUuid: string;
+  requestedOn: string;
+  outputFormat: string;
+  parameters: any;
+  id: string;
+  evaluateCompleteDatetime: string;
+  schedule: string;
+}
+
+interface ScheduledReportModel {
+  reportDefinitionUuid: string;
+  reportRequestUuid: string;
+  name: string;
+  schedule: string;
+}
+
+export function useLocations() {
+  const apiUrl = `/ws/rest/v1/location?tag=Login+Location`;
+
+  const { data } = useSWR<{ data: { results: Array<any> } }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    locations: data ? data?.data?.results : [],
+  };
+}
+
+export function useReports(statuses: string, pageNumber: number, pageSize: number, sortBy?: string): any {
+  const reportsUrl =
+    `/ws/rest/v1/reportingrest/reportRequest?status=${statuses}&startIndex=${pageNumber}&limit=${pageSize}&totalCount=true` +
+    (sortBy ? `&sortBy=${sortBy}` : '');
+
+  const { data, error, isValidating, mutate } = useSWR<{ data: { results: Array<any>; totalCount: number } }, Error>(
+    reportsUrl,
+    openmrsFetch,
+  );
+
+  const reports = data?.data?.results;
+  const totalCount = data?.data?.totalCount;
+  const reportsArray: Array<any> = reports ? [].concat(...reports.map((report) => mapReportResults(report))) : [];
+
+  return {
+    reports: reportsArray,
+    reportsTotalCount: totalCount,
+    error,
+    isValidating: isValidating,
+    mutateReports: mutate,
+  };
+}
+
+export function useReportRequest(reportRequestUuid: string): any {
+  const reportsUrl = `/ws/rest/v1/reportingrest/reportRequest/${reportRequestUuid}`;
+
+  const { data, error, isValidating, mutate } = useSWR<{ data: ReportRequest }, Error>(reportsUrl, openmrsFetch);
+
+  return {
+    reportRequest: data?.data,
+    error,
+    isValidating: isValidating,
+    mutate,
+  };
+}
+
+export function useScheduledReports(sortBy?: string): any {
+  const scheduledReportsUrl =
+    `/ws/rest/v1/reportingrest/reportDefinitionsWithScheduledRequests` + (sortBy ? `?sortBy=${sortBy}` : '');
+
+  const { data, error, isValidating, mutate } = useSWR<{ data: { results: Array<any> } }, Error>(
+    scheduledReportsUrl,
+    openmrsFetch,
+  );
+
+  const scheduledReports = data?.data?.results;
+  const scheduledReportsArray: Array<any> = scheduledReports
+    ? [].concat(...scheduledReports.map((report) => mapScheduledReportResults(report)))
+    : [];
+
+  return {
+    scheduledReports: scheduledReportsArray,
+    error,
+    isValidating: isValidating,
+    mutateScheduledReports: mutate,
+  };
+}
+
+export function useReportDefinitions() {
+  const apiUrl = `/ws/rest/v1/reportingrest/reportDefinition?v=full`;
+
+  const { data } = useSWR<{ data: { results: Array<ReportDefinition> } }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    reportDefinitions: data ? data?.data?.results : [],
+  };
+}
+
+export function useReportDefinition(reportDefinitionUuid: string): ReportDefinition {
+  const apiUrl = `/ws/rest/v1/reportingrest/reportDefinition/${reportDefinitionUuid}?v=full`;
+
+  const { data } = useSWR<{ data: ReportDefinition }, Error>(apiUrl, openmrsFetch);
+
+  return data?.data;
+}
+
+export function useReportDesigns(reportDefinitionUuid: string) {
+  const apiUrl = `/ws/rest/v1/reportingrest/reportDesign?reportDefinitionUuid=${reportDefinitionUuid}`;
+
+  const { data, error, isValidating, mutate } = useSWR<{ data: { results: ReportDesign[] } }, Error>(
+    reportDefinitionUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    reportDesigns: data?.data.results,
+    error,
+    isValidating: isValidating,
+    mutateReportDesigns: mutate,
+  };
+}
+
+export function runReportObservable(payload: any): Observable<FetchResponse<any>> {
+  const abortController = new AbortController();
+  return openmrsObservableFetch(`/ws/rest/v1/reportingrest/reportRequest`, {
+    signal: abortController.signal,
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function cancelReportRequest(reportRequestUuid: string) {
+  const apiUrl = `/ws/rest/v1/reportingrest/reportRequest/${reportRequestUuid}`;
+
+  return openmrsFetch(apiUrl, {
+    method: 'DELETE',
+  });
+}
+
+export async function preserveReport(reportRequestUuid: string) {
+  const apiUrl = `/ws/rest/v1/reportingrest/saveReport?reportRequestUuid=${reportRequestUuid}`;
+
+  return openmrsFetch(apiUrl, {
+    method: 'POST',
+  });
+}
+
+export async function downloadReport(reportRequestUuid: string) {
+  const apiUrl = `/ws/rest/v1/reportingrest/downloadReport?reportRequestUuid=${reportRequestUuid}`;
+
+  const { data } = await openmrsFetch<any>(apiUrl);
+
+  return data;
+}
+
+export async function downloadMultipleReports(reportRequestUuids: string[]) {
+  const apiUrl = `/ws/rest/v1/reportingrest/downloadMultipleReports?reportRequestUuids=${reportRequestUuids}`;
+
+  const { data } = await openmrsFetch<any>(apiUrl);
+
+  return data;
+}
+
+function mapReportResults(data: any): ReportModel {
+  return {
+    id: data.uuid,
+    reportName: data.parameterizable.name,
+    status: data.status,
+    requestedBy: data.requestedBy.person.display,
+    requestedByUserUuid: data.requestedBy.uuid,
+    requestedOn: dayjs(data.requestDate).format('YYYY-MM-DD HH:mm'),
+    outputFormat: data.renderingMode.label,
+    parameters: convertParametersToString(data),
+    evaluateCompleteDatetime: data.evaluateCompleteDatetime
+      ? dayjs(data.evaluateCompleteDatetime).format('YYYY-MM-DD HH:mm')
+      : undefined,
+    schedule: data.schedule,
+  };
+}
+
+function mapScheduledReportResults(data: any): ScheduledReportModel {
+  return {
+    reportDefinitionUuid: data.reportDefinition.uuid,
+    reportRequestUuid: data.scheduledRequests?.[0]?.uuid,
+    name: data.reportDefinition.display,
+    schedule: data.scheduledRequests?.[0]?.schedule,
+  };
+}
+
+function convertParametersToString(data: any): string {
+  let finalString = '';
+  const parameters = data.parameterizable.parameters;
+  if (parameters.length > 0) {
+    parameters.forEach((parameter) => {
+      let value = data.parameterMappings[parameter.name];
+      if (parameter.type === 'java.util.Date') {
+        value = dayjs(value).format('YYYY-MM-DD');
+      } else if (parameter.type === 'org.openmrs.Location') {
+        value = value?.display;
+      }
+      finalString = finalString + parameter.label + ': ' + value + ', ';
+    });
+
+    finalString = finalString.trim();
+
+    if (finalString.charAt(finalString.length - 1) === ',') {
+      finalString = finalString.slice(0, -1);
+    }
+  }
+
+  return finalString;
+}

package/src/components/reports.scss

@@ -0,0 +1,90 @@
+.statusIcon {
+  margin-bottom: -2px;
+  margin-right: 5px;
+}
+
+.failedIcon {
+  color: red;
+}
+
+.successIcon {
+  color: green;
+}
+
+.runningIcon {
+  display: inline-block;
+}
+
+.actionButon {
+  padding-left: 0px;
+  color: inherit;
+}
+
+.actionButtonIcon {
+  margin-left: 5px;
+}
+
+.mainActionButton {
+  margin-top: 25px;
+}
+
+.mainPanelDiv {
+  height: 130px;
+  background-color: white;
+}
+
+.emptyButton {
+  width: 100px;
+}
+
+.actionButtonsWrapperDiv {
+  width: 110px;
+  display: inline-block;
+}
+
+.mainActionButtonsDiv {
+  text-align: right;
+  height: 48px;
+}
+
+.reportsLabelDiv {
+  margin-left: 20px;
+  padding-top: 20px;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.downloadReportsVisible {
+  display: inline-block;
+}
+
+.downloadReportsHidden {
+  display: none;
+}
+
+.breadcrumb {
+  margin-top: -30px;
+}
+
+.rowCellEven {
+  background-color: #FFFFFF !important;
+}
+
+.rowCellOdd {
+  background-color: #F4F4F4 !important;
+}
+
+.scheduledStatusText {
+  color: green;
+}
+
+.scheduleCompletedStatusText {
+  color: red;
+}
+
+.notScheduledStatusText {
+  color: red;
+}

package/src/components/run-report/cancel-report-modal.component.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useState } from 'react';
+import { ModalBody, Button, ModalFooter, ModalHeader, InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { cancelReportRequest } from '../reports.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import {
+  PROCESSING_REPORT_STATUSES,
+  RAN_REPORT_STATUSES,
+  SCHEDULED_REPORT_STATUSES,
+} from '../report-statuses-constants';
+
+interface CancelReportModalProps {
+  closeModal: () => void;
+  reportRequestUuid: string;
+  modalType: ModalType;
+}
+
+type ModalType = 'delete' | 'cancel' | 'schedule';
+
+const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, reportRequestUuid, modalType }) => {
+  const { t } = useTranslation();
+  const [isCanceling, setIsCanceling] = useState(false);
+
+  const handleCancel = useCallback(async () => {
+    try {
+      setIsCanceling(true);
+      await cancelReportRequest(reportRequestUuid);
+      callMutates(modalType);
+      closeModal();
+      showSnackbar({
+        kind: 'success',
+        title: getModalTitleByType(modalType),
+        subtitle: getSuccessToastMessageByType(modalType),
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: getModalTitleByType(modalType),
+        subtitle: getFailedToastMessageByType(modalType),
+      });
+    } finally {
+      setIsCanceling(false);
+    }
+  }, [closeModal]);
+
+  const callMutates = (modalType: ModalType) => {
+    let baseUrl = '/ws/rest/v1/reportingrest/reportRequest?status=';
+    if (modalType === 'delete') {
+      mutate(baseUrl + RAN_REPORT_STATUSES.join(','));
+    } else if (modalType === 'cancel') {
+      mutate(baseUrl + RAN_REPORT_STATUSES.join(','));
+      mutate(baseUrl + PROCESSING_REPORT_STATUSES.join(','));
+    } else if (modalType === 'schedule') {
+      mutate(baseUrl + SCHEDULED_REPORT_STATUSES.join(',') + '&sortBy=name');
+    }
+  };
+
+  const getModalTitleByType = (modalType: ModalType) => {
+    if (modalType === 'delete') {
+      return t('deleteReport', 'Delete report');
+    } else if (modalType === 'cancel') {
+      return t('cancelReport', 'Cancel report');
+    } else if (modalType === 'schedule') {
+      return t('scheduleReport', 'Schedule report');
+    }
+  };
+
+  const getModalBodyByType = (modalType: ModalType) => {
+    if (modalType === 'delete') {
+      return t('deleteReportModalText', 'Are you sure you want to delete this report?');
+    } else if (modalType === 'cancel') {
+      return t('cancelReportModalText', 'Are you sure you want to cancel this report?');
+    } else if (modalType === 'schedule') {
+      return t('deleteReportScheduleModalText', 'Are you sure you want to delete this schedule?');
+    }
+  };
+
+  const getSuccessToastMessageByType = (modalType: ModalType) => {
+    if (modalType === 'delete') {
+      return t('reportDeletedSuccessfully', 'Report deleted successfully');
+    } else if (modalType === 'cancel') {
+      return t('reportCancelledSuccessfully', 'Report cancelled successfully');
+    } else if (modalType === 'schedule') {
+      return t('reportScheduleDeletedSuccessfully', 'Report schedule deleted successfully');
+    }
+  };
+
+  const getFailedToastMessageByType = (modalType: ModalType) => {
+    if (modalType === 'delete') {
+      return t('reportDeletingErrorMsg', 'Error during report deleting');
+    } else if (modalType === 'cancel') {
+      return t('reportCancelingErrorMsg', 'Error during report canceling');
+    } else if (modalType === 'schedule') {
+      return t('reportScheduleDeletingErrorMsg', 'Error during report schedule deleting');
+    }
+  };
+
+  const getLoadingMessageByType = (modalType: ModalType) => {
+    if (modalType === 'delete' || modalType === 'schedule') {
+      return t('deleting', 'Deleting');
+    } else if (modalType === 'cancel') {
+      return t('canceling', 'Canceling');
+    }
+  };
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={getModalTitleByType(modalType)} />
+      <ModalBody>
+        <p>{getModalBodyByType(modalType)}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('no', 'No')}
+        </Button>
+        <Button kind="danger" onClick={handleCancel} disabled={isCanceling}>
+          {isCanceling ? (
+            <InlineLoading description={getLoadingMessageByType(modalType) + '...'} />
+          ) : (
+            <span>{t('yes', 'Yes')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default CancelReportModal;

package/src/components/run-report/run-report-form.component.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './run-report-form.scss';
+import { useLocations, useReportDefinitions, useReportDesigns, runReportObservable } from '../reports.resource';
+import { closeOverlay } from '../../hooks/useOverlay';
+import { Button, ButtonSet, DatePicker, DatePickerInput, Form, Select, SelectItem, TextInput } from '@carbon/react';
+import { showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { take } from 'rxjs/operators';
+import classNames from 'classnames';
+
+interface RunReportForm {
+  closePanel: () => void;
+}
+
+const RunReportForm: React.FC<RunReportForm> = ({ closePanel }) => {
+  const { t } = useTranslation();
+  const [reportUuid, setReportUuid] = useState('');
+  const [renderModeUuid, setRenderModeUuid] = useState('');
+  const [currentReport, setCurrentReport] = useState(null);
+  const [reportParameters, setReportParameters] = useState({});
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isTablet = useLayoutType() === 'tablet';
+
+  const { reportDesigns, mutateReportDesigns } = useReportDesigns(reportUuid);
+
+  useEffect(() => {
+    mutateReportDesigns();
+  }, [reportUuid]);
+
+  useEffect(() => {
+    const paramTypes = currentReport?.parameters.map((param) => param.type);
+    const isAnyNotSupportedType = !paramTypes?.every((paramType) => supportedParameterTypes.includes(paramType));
+    const allParametersNotEmpty = currentReport?.parameters.every(
+      (parameter) => !!reportParameters[parameter.name] && reportParameters[parameter.name] !== 'Invalid Date',
+    );
+
+    if (!isAnyNotSupportedType && allParametersNotEmpty && reportUuid !== '' && renderModeUuid !== '') {
+      setIsFormValid(true);
+    } else {
+      setIsFormValid(false);
+    }
+  }, [reportParameters, reportUuid, renderModeUuid]);
+
+  const supportedParameterTypes = ['java.util.Date', 'java.lang.String', 'java.lang.Integer', 'org.openmrs.Location'];
+
+  const { reportDefinitions } = useReportDefinitions();
+  const { locations } = useLocations();
+
+  function renderParameterElementBasedOnType(parameter: any) {
+    switch (parameter.type) {
+      case 'java.util.Date':
+        return (
+          <div className={styles.runReportInnerDivElement}>
+            <DatePicker
+              datePickerType="single"
+              name={parameter.name}
+              onChange={([date]) => handleOnDateChange(parameter.name, date)}
+              dateFormat="Y-m-d"
+              className={styles.datePicker}
+            >
+              <DatePickerInput id={parameter.name} name={parameter.name} labelText={parameter.label} type="date" />
+            </DatePicker>
+          </div>
+        );
+      case 'java.lang.String':
+      case 'java.lang.Integer':
+        return (
+          <div className={styles.runReportInnerDivElement}>
+            <TextInput
+              id={parameter.name}
+              name={parameter.name}
+              labelText={parameter.label}
+              className={styles.basicInputElement}
+              onChange={(e) => handleOnChange(e)}
+              value={reportParameters[parameter.name] ?? ''}
+            />
+          </div>
+        );
+      case 'org.openmrs.Location':
+        return (
+          <div className={styles.runReportInnerDivElement}>
+            <Select
+              id={parameter.name}
+              name={parameter.name}
+              labelText={parameter.label}
+              className={styles.basicInputElement}
+              onChange={(e) => handleOnChange(e)}
+              value={reportParameters[parameter.name] ?? ''}
+            >
+              <SelectItem value="" />
+              {locations?.map((location) => (
+                <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                  {location.display}
+                </SelectItem>
+              ))}
+            </Select>
+          </div>
+        );
+      default:
+        return (
+          <div className={styles.runReportInnerDivElement}>
+            <span className={styles.unknownParameterTypeSpan}>
+              {`Unknown parameter type: ${parameter.type} for parameter: ${parameter.label}`}
+            </span>
+          </div>
+        );
+    }
+  }
+
+  function handleOnChange(event) {
+    const key = event.target.name;
+    let value = null;
+    if (event.target.type == 'checkbox') {
+      value = event.target.checked;
+    } else {
+      value = event.target.value;
+    }
+
+    setReportParameters((state) => ({ ...state, [key]: value }));
+  }
+
+  function handleOnDateChange(fieldName, dateValue) {
+    const date = new Date(dateValue).toLocaleDateString();
+    setReportParameters((state) => ({ ...state, [fieldName]: date }));
+  }
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      setIsSubmitting(true);
+
+      const reportRequest = {
+        uuid: null,
+        reportDefinition: {
+          parameterizable: {
+            uuid: reportUuid,
+          },
+          parameterMappings: reportParameters,
+        },
+        renderingMode: {
+          argument: renderModeUuid,
+        },
+        schedule: null,
+      };
+
+      runReportObservable(reportRequest)
+        .pipe(take(1))
+        .subscribe(
+          () => {
+            // delayed handling because runReport returns before new reports is accessible via GET
+            setTimeout(() => {
+              showSnackbar({
+                kind: 'success',
+                title: t('reportRunning', 'Report running'),
+                subtitle: t('reportRanSuccessfullyMsg', 'Report ran successfully'),
+              });
+              closePanel();
+              setIsSubmitting(false);
+            }, 500);
+          },
+          (error) => {
+            console.error(error);
+            showSnackbar({
+              kind: 'error',
+              title: t('reportRunningErrorMsg', 'Error while running the report'),
+              subtitle: t('reportRunningErrorMsg', 'Error while running the report'),
+            });
+            setIsSubmitting(false);
+          },
+        );
+    },
+    [reportUuid, renderModeUuid, reportParameters],
+  );
+
+  return (
+    <Form className={styles.desktopRunReport} onSubmit={handleSubmit}>
+      <div className={styles.runReportInnerDivElement}>
+        <Select
+          id="select-report"
+          className={styles.basicInputElement}
+          labelText={t('selectReportLabel', 'Report')}
+          onChange={(e) => {
+            setReportUuid(e.target.value);
+            setRenderModeUuid('');
+            setCurrentReport(reportDefinitions.find((reportDefinition) => reportDefinition.uuid === e.target.value));
+            setReportParameters({});
+          }}
+          value={reportUuid}
+        >
+          <SelectItem text="" value={''} />
+          {reportDefinitions?.map((reportDefinition) => (
+            <SelectItem key={reportDefinition.uuid} text={reportDefinition.name} value={reportDefinition.uuid}>
+              {reportDefinition.name}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div id="reportParametersDiv">
+        {currentReport?.parameters?.map((parameter) => (
+          <div key={`param-${parameter.name}`}>{renderParameterElementBasedOnType(parameter)}</div>
+        ))}
+      </div>
+      <div className={styles.outputFormatDiv}>
+        <Select
+          id="output-format-select"
+          className={styles.basicInputElement}
+          labelText={t('outputFormat', 'Output format')}
+          onChange={(e) => setRenderModeUuid(e.target.value)}
+          value={renderModeUuid}
+        >
+          <SelectItem text="" value={''} />
+          {reportDesigns?.map((reportDesign) => (
+            <SelectItem key={reportDesign.uuid} text={reportDesign.name} value={reportDesign.uuid}>
+              {reportDesign.name}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div className={styles.buttonsDiv}>
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button onClick={closeOverlay} kind="secondary" size="xl" className={styles.reportButton}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            disabled={!isFormValid || isSubmitting}
+            size="xl"
+            className={styles.reportButton}
+            kind="primary"
+            type="submit"
+          >
+            {t('run', 'Run')}
+          </Button>
+        </ButtonSet>
+      </div>
+    </Form>
+  );
+};
+
+export default RunReportForm;