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

package/src/components/overview.component.tsx

@@ -0,0 +1,356 @@
+import {
+  Button,
+  Checkbox,
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { downloadMultipleReports, downloadReport, preserveReport, useReports } from './reports.resource';
+import {
+  ExtensionSlot,
+  isDesktop,
+  navigate,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  userHasAccess,
+  useSession,
+} from '@openmrs/esm-framework';
+import { Calendar, Download, Play, Save, TrashCan } from '@carbon/react/icons';
+import styles from './reports.scss';
+import { DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from './pagination-constants';
+import { closeOverlay, launchOverlay } from '../hooks/useOverlay';
+import RunReportForm from './run-report/run-report-form.component';
+import Overlay from './overlay.component';
+import ReportStatus from './report-status.component';
+import { COMPLETED, RAN_REPORT_STATUSES, SAVED } from './report-statuses-constants';
+import ReportOverviewButton from './report-overview-button.component';
+import { PRIVILEGE_SYSTEM_DEVELOPER } from '../constants';
+import classNames from 'classnames';
+
+const OverviewComponent: React.FC = () => {
+  const { t } = useTranslation();
+  const currentSession = useSession();
+
+  let [checkedReportUuidsArray, setCheckedReportUuidsArray] = useState([]);
+  const [downloadReportButtonVisible, setDownloadReportButtonVisible] = useState(false);
+
+  useEffect(() => {
+    setDownloadReportButtonVisible(checkedReportUuidsArray.length > 0);
+  }, [checkedReportUuidsArray]);
+
+  const tableHeaders = [
+    { key: 'reportName', header: t('reportName', 'Report Name') },
+    { key: 'status', header: t('status', 'Status') },
+    { key: 'requestedBy', header: t('requestedBy', 'Requested by') },
+    { key: 'requestedOn', header: t('requestedOn', 'Requested on') },
+    { key: 'outputFormat', header: t('outputFormat', 'Output format') },
+    { key: 'parameters', header: t('parameters', 'Parameters') },
+    { key: 'actions', header: t('actions', 'Actions') },
+  ];
+
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE_NUMBER);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+  const { reports, reportsTotalCount, mutateReports } = useReports(
+    RAN_REPORT_STATUSES.join(','),
+    currentPage,
+    pageSize,
+  );
+
+  const layout = useLayoutType();
+
+  function getReportStatus(row) {
+    return row?.cells.find((cell) => cell.info?.header === 'status')?.value;
+  }
+
+  function isCurrentUserTheSameAsReportRequestedByUser(reportRequestUuid: string) {
+    const report = reports.find((tableRow) => tableRow.id === reportRequestUuid);
+    const requestedByUserUuid = report?.requestedByUserUuid;
+    const currentUserUuid = currentSession?.user.uuid;
+
+    return requestedByUserUuid === currentUserUuid;
+  }
+
+  function isSystemDeveloperUser() {
+    return userHasAccess(PRIVILEGE_SYSTEM_DEVELOPER, currentSession.user);
+  }
+
+  function isEligibleReportUser(reportRequestUuid: string) {
+    return isCurrentUserTheSameAsReportRequestedByUser(reportRequestUuid) || isSystemDeveloperUser();
+  }
+
+  function renderRowCheckbox(row, index) {
+    const statusCell = row?.cells.find((cell) => cell.info?.header === 'status');
+    const statusValue = statusCell?.value;
+    if (statusValue === COMPLETED || statusValue === SAVED) {
+      return (
+        <td className={classNames({ [styles.rowCellEven]: index % 2 === 0, [styles.rowCellOdd]: index % 2 !== 0 })}>
+          <Checkbox
+            id={`checkbox-${row.id}`}
+            onChange={(e) => handleOnCheckboxClick(e)}
+            checked={checkedReportUuidsArray.includes(row.id)}
+          />
+        </td>
+      );
+    } else {
+      return (
+        <td
+          className={classNames({ [styles.rowCellEven]: index % 2 === 0, [styles.rowCellOdd]: index % 2 !== 0 })}
+        ></td>
+      );
+    }
+  }
+
+  function handleOnCheckboxClick(event) {
+    const checkboxElement = event?.target;
+    const checkboxId = checkboxElement.id;
+    const reportUuid = checkboxId.slice(checkboxId.indexOf('-') + 1);
+    const isChecked = checkboxElement?.checked;
+
+    setCheckedReportUuidsArray((prevState) => {
+      if (isChecked && !prevState.includes(reportUuid)) {
+        return [...prevState, reportUuid];
+      } else {
+        return prevState.filter((checkedReportUuid) => checkedReportUuid !== reportUuid);
+      }
+    });
+  }
+
+  const handlePreserveReport = useCallback(async (reportRequestUuid: string) => {
+    preserveReport(reportRequestUuid)
+      .then(() => {
+        mutateReports();
+        showSnackbar({
+          kind: 'success',
+          title: t('preserveReport', 'Preserve report'),
+          subtitle: t('reportPreservedSuccessfully', 'Report preserved successfully'),
+        });
+      })
+      .catch(() => {
+        showSnackbar({
+          kind: 'error',
+          title: t('preserveReport', 'Preserve report'),
+          subtitle: t('reportPreservingErrorMsg', 'Error during report preserving'),
+        });
+      });
+  }, []);
+
+  const launchDeleteReportDialog = (reportRequestUuid: string) => {
+    const dispose = showModal('cancel-report-modal', {
+      closeModal: () => {
+        dispose();
+        mutateReports();
+      },
+      reportRequestUuid,
+      modalType: 'delete',
+    });
+  };
+
+  const handleDownloadReport = useCallback(async (reportRequestUuid: string) => {
+    try {
+      const response = await downloadReport(reportRequestUuid);
+      processAndDownloadFile(response);
+      clearReportCheckboxes();
+      showSnackbar({
+        kind: 'success',
+        title: t('downloadReport', 'Download report'),
+        subtitle: t('reportDownloadedSuccessfully', 'Report downloaded successfully'),
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('downloadReport', 'Download report'),
+        subtitle: t('reportDownloadError', 'Error downloading report'),
+      });
+    }
+  }, []);
+
+  const handleDownloadMultipleReports = useCallback(async (reportRequestUuids) => {
+    try {
+      const response = await downloadMultipleReports(reportRequestUuids);
+      response.forEach((file) => processAndDownloadFile(file));
+      clearReportCheckboxes();
+      showSnackbar({
+        kind: 'success',
+        title: t('downloadReport', 'Download report(s)'),
+        subtitle: t('reportDownloadedSuccessfully', 'Report(s) downloaded successfully'),
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('downloadReport', 'Download report(s)s'),
+        subtitle: t('reportDownloadingErrorMsg', 'Error during report(s) downloading'),
+      });
+    }
+  }, []);
+
+  const processAndDownloadFile = (file) => {
+    const decodedData = window.atob(file.fileContent);
+    const byteArray = new Uint8Array(decodedData.length);
+    for (let i = 0; i < decodedData.length; i++) {
+      byteArray[i] = decodedData.charCodeAt(i);
+    }
+    const url = window.URL.createObjectURL(new Blob([byteArray]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', file.filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const clearReportCheckboxes = () => {
+    setCheckedReportUuidsArray([]);
+  };
+
+  return (
+    <div>
+      <ExtensionSlot name="breadcrumbs-slot" className={styles.breadcrumb} />
+      <div className={styles.mainPanelDiv}>
+        <div className={styles.reportsLabelDiv}>
+          <h3>{t('reports', 'Reports')}</h3>
+        </div>
+        <div className={styles.mainActionButtonsDiv}>
+          <Button
+            kind="ghost"
+            renderIcon={() => <Download size={16} style={{ fill: '#0F62FE' }} className={styles.actionButtonIcon} />}
+            iconDescription="Download reports"
+            onClick={() => handleDownloadMultipleReports(checkedReportUuidsArray.join(','))}
+            className={classNames(styles.mainActionButton, {
+              [styles.downloadReportsVisible]: downloadReportButtonVisible,
+              [styles.downloadReportsHidden]: !downloadReportButtonVisible,
+            })}
+          >
+            {t('downloadReports', 'Download reports')}
+          </Button>
+          <Button
+            kind="ghost"
+            renderIcon={() => <Play size={16} style={{ fill: '#0F62FE' }} className={styles.actionButtonIcon} />}
+            iconDescription="Run reports"
+            onClick={() => {
+              launchOverlay(
+                t('runReport', 'Run Report'),
+                <RunReportForm
+                  closePanel={() => {
+                    closeOverlay();
+                    mutateReports();
+                  }}
+                />,
+              );
+            }}
+            className={styles.mainActionButton}
+          >
+            {t('runReports', 'Run reports')}
+          </Button>
+          <Overlay />
+          <Button
+            kind="ghost"
+            renderIcon={() => <Calendar size={16} style={{ fill: '#0F62FE' }} className={styles.actionButtonIcon} />}
+            iconDescription="Report schedule"
+            onClick={() => navigate({ to: `\${openmrsSpaBase}/reports/scheduled-overview` })}
+            className={styles.mainActionButton}
+          >
+            {t('reportSchedule', 'Report schedule')}
+          </Button>
+        </div>
+      </div>
+      <DataTable rows={reports} headers={tableHeaders} isSortable>
+        {({ rows, headers }) => (
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <th></th>
+                  {headers.map((header) => (
+                    <TableHeader>{header.header?.content ?? header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <TableRow className={styles.tableRow}>
+                    {renderRowCheckbox(row, index)}
+                    {row.cells.map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className={classNames({
+                          [styles.rowCellEven]: index % 2 === 0,
+                          [styles.rowCellOdd]: index % 2 !== 0,
+                        })}
+                      >
+                        {cell.info.header === 'actions' ? (
+                          <div>
+                            <ReportOverviewButton
+                              shouldBeDisplayed={getReportStatus(row) === COMPLETED || getReportStatus(row) === SAVED}
+                              label={t('download', 'Download')}
+                              icon={() => <Download size={16} className={styles.actionButtonIcon} />}
+                              reportRequestUuid={row.id}
+                              onClick={() => handleDownloadReport(row.id)}
+                            />
+                            <ReportOverviewButton
+                              shouldBeDisplayed={getReportStatus(row) === COMPLETED && isEligibleReportUser(row.id)}
+                              label={t('preserve', 'Preserve')}
+                              icon={() => <Save size={16} className={styles.actionButtonIcon} />}
+                              reportRequestUuid={row.id}
+                              onClick={() => handlePreserveReport(row.id)}
+                            />
+                            <ReportOverviewButton
+                              shouldBeDisplayed={isEligibleReportUser(row.id)}
+                              label={t('delete', 'Delete')}
+                              icon={() => <TrashCan size={16} className={styles.actionButtonIcon} />}
+                              reportRequestUuid={row.id}
+                              onClick={() => launchDeleteReportDialog(row.id)}
+                            />
+                          </div>
+                        ) : cell.info.header === 'status' ? (
+                          <div>
+                            <ReportStatus status={cell.value} />
+                          </div>
+                        ) : cell.info.header === 'reportName' ? (
+                          <div>{cell.value?.content ?? cell.value}</div>
+                        ) : (
+                          cell.value?.content ?? cell.value
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {reports.length > 0 ? (
+        <Pagination
+          backwardText={t('previousPage', 'Previous page')}
+          forwardText={t('nextPage', 'Next page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={DEFAULT_PAGE_SIZES}
+          totalItems={reportsTotalCount}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+
+            if (newPage !== currentPage) {
+              setCurrentPage(newPage);
+            }
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default OverviewComponent;

package/src/components/pagination-constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_PAGE_SIZES = [5, 10, 20, 50];
+export const DEFAULT_PAGE_NUMBER = 1;

package/src/components/report-overview-button.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import styles from './reports.scss';
+
+interface ReportOverviewButtonProps {
+  shouldBeDisplayed: boolean;
+  label: string;
+  icon: any;
+  reportRequestUuid: string;
+  onClick: () => void;
+}
+
+const ReportOverviewButton: React.FC<ReportOverviewButtonProps> = ({ shouldBeDisplayed, label, icon, onClick }) => {
+  if (shouldBeDisplayed) {
+    return (
+      <div className={styles.actionButtonsWrapperDiv}>
+        <Button kind="ghost" renderIcon={icon} iconDescription={label} onClick={onClick} className={styles.actionButon}>
+          {label}
+        </Button>
+      </div>
+    );
+  } else {
+    return <div className={styles.actionButtonsWrapperDiv}></div>;
+  }
+};
+
+export default ReportOverviewButton;

package/src/components/report-parameter-input.component.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import styles from './run-report/run-report-form.scss';
+import { DatePicker, DatePickerInput, Select, SelectItem, TextInput } from '@carbon/react';
+import { useLocations } from './reports.resource';
+import { isEqual } from 'lodash-es';
+
+interface ReportParameterInputProps {
+  parameter: any;
+  value: any;
+  onChange: (value) => void;
+}
+
+function getInitialValue(parameter: any, value: any) {
+  if (parameter.type === 'java.util.Date') {
+    return new Date(value);
+  } else if (parameter.type === 'org.openmrs.Location') {
+    return value?.uuid;
+  } else {
+    return value;
+  }
+}
+
+const ReportParameterInput: React.FC<ReportParameterInputProps> = ({ parameter, value, onChange }) => {
+  const { locations } = useLocations();
+  const [valueInternal, setValueInternal] = useState<string | number | Date>(getInitialValue(parameter, value));
+
+  useEffect(() => {
+    const newInternalValue = getInitialValue(parameter, value);
+    if (!isValueEqual(newInternalValue, valueInternal)) {
+      setValueInternal(newInternalValue);
+    }
+  }, [value]);
+
+  const isValueEqual = (valueA, valueB) => {
+    if (parameter.type === 'java.util.Date') {
+      return isEqual(new Date(valueA), new Date(valueB));
+    } else {
+      return isEqual(valueA, valueB);
+    }
+  };
+
+  useEffect(() => {
+    if (parameter.type === 'java.util.Date') {
+      onChange(new Date(valueInternal).toLocaleDateString());
+    } else {
+      onChange(valueInternal);
+    }
+  }, [valueInternal]);
+
+  const renderParameterElementBasedOnType = () => {
+    switch (parameter.type) {
+      case 'java.util.Date':
+        return (
+          <DatePicker
+            datePickerType="single"
+            name={parameter.name}
+            onChange={([dateValue]) => handleOnDateChange(dateValue)}
+            className={styles.datePicker}
+            value={valueInternal}
+          >
+            <DatePickerInput id={parameter.name} name={parameter.name} labelText={parameter.label} type="date" />
+          </DatePicker>
+        );
+      case 'java.lang.String':
+      case 'java.lang.Integer':
+        return (
+          <TextInput
+            id={parameter.name}
+            name={parameter.name}
+            labelText={parameter.label}
+            className={styles.basicInputElement}
+            onChange={(e) => handleOnChange(e)}
+            value={valueInternal}
+          />
+        );
+      case 'org.openmrs.Location':
+        return (
+          <Select
+            id={parameter.name}
+            name={parameter.name}
+            labelText={parameter.label}
+            className={styles.basicInputElement}
+            onChange={(e) => handleOnChange(e)}
+            value={valueInternal}
+          >
+            <SelectItem text="" value={''} />
+            {locations?.map((location) => (
+              <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                {location.display}
+              </SelectItem>
+            ))}
+          </Select>
+        );
+      default:
+        return (
+          <span className={styles.unknownParameterTypeSpan}>
+            {`Unknown parameter type: ${parameter.type} for parameter: ${parameter.label}`}
+          </span>
+        );
+    }
+  };
+
+  function handleOnChange(event) {
+    let eventValue = null;
+    if (event.target.type == 'checkbox') {
+      eventValue = event.target.checked;
+    } else {
+      eventValue = event.target.value;
+    }
+
+    setValueInternal(eventValue);
+  }
+
+  function handleOnDateChange(dateValue) {
+    setValueInternal(new Date(dateValue));
+  }
+
+  return <div className={styles.runReportInnerDivElement}>{renderParameterElementBasedOnType()}</div>;
+};
+
+export default ReportParameterInput;

package/src/components/report-schedule-description.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSession } from '@openmrs/esm-framework';
+import cronstrue from 'cronstrue';
+
+interface ReportScheduleProps {
+  schedule: string;
+}
+
+const ReportScheduleDescription: React.FC<ReportScheduleProps> = ({ schedule }) => {
+  const session = useSession();
+  const scheduleDescription = schedule
+    ? cronstrue.toString(schedule, {
+        locale: session.locale,
+        use24HourTimeFormat: true,
+        dayOfWeekStartIndexZero: true,
+      })
+    : '';
+  return <span>{scheduleDescription}</span>;
+};
+
+export default ReportScheduleDescription;

package/src/components/report-status.component.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { CheckmarkFilled, CheckmarkOutline, CloseFilled, Queued } from '@carbon/react/icons';
+import { Loading } from '@carbon/react';
+import styles from './reports.scss';
+import {
+  COMPLETED,
+  FAILED,
+  PROCESSING,
+  SAVED,
+  SCHEDULED,
+  SCHEDULE_COMPLETED,
+  REQUESTED,
+} from './report-statuses-constants';
+
+interface ReportStatusProps {
+  status: string;
+}
+
+const ReportStatus: React.FC<ReportStatusProps> = ({ status }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {status === SAVED && (
+        <>
+          <CheckmarkFilled size={16} className={`${styles.statusIcon} ${styles.successIcon}`} />
+          {t('completedAndPreserved', 'Completed and Preserved')}
+        </>
+      )}
+      {status === COMPLETED && (
+        <>
+          <CheckmarkOutline size={16} className={`${styles.statusIcon} ${styles.successIcon}`} />
+          {t('completed', 'Completed')}
+        </>
+      )}
+      {status === PROCESSING && (
+        <>
+          <Loading small={true} withOverlay={false} className={`${styles.statusIcon} ${styles.runningIcon}`} />
+          {t('running', 'Running')}
+        </>
+      )}
+      {status === FAILED && (
+        <>
+          <CloseFilled size={16} className={`${styles.statusIcon} ${styles.failedIcon}`} />
+          {t('failed', 'Failed')}
+        </>
+      )}
+      {status === SCHEDULED && (
+        <>
+          <span className={styles.scheduledStatusText}>{t('scheduled', 'Scheduled')}</span>
+        </>
+      )}
+      {status === SCHEDULE_COMPLETED && (
+        <>
+          <span className={styles.scheduleCompletedStatusText}>{t('scheduleCompleted', 'Schedule completed')}</span>
+        </>
+      )}
+      {status === REQUESTED && (
+        <>
+          <Queued size={16} className={`${styles.statusIcon}`} />
+          {t('queued', 'Queued')}
+        </>
+      )}
+    </>
+  );
+};
+
+export default ReportStatus;

package/src/components/report-statuses-constants.ts

@@ -0,0 +1,11 @@
+export const SAVED = 'SAVED';
+export const COMPLETED = 'COMPLETED';
+export const PROCESSING = 'PROCESSING';
+export const FAILED = 'FAILED';
+export const SCHEDULED = 'SCHEDULED';
+export const SCHEDULE_COMPLETED = 'SCHEDULE_COMPLETED';
+export const REQUESTED = 'REQUESTED';
+
+export const RAN_REPORT_STATUSES = [REQUESTED, COMPLETED, SAVED, FAILED, PROCESSING];
+export const PROCESSING_REPORT_STATUSES = [REQUESTED, PROCESSING];
+export const SCHEDULED_REPORT_STATUSES = [SCHEDULED, SCHEDULE_COMPLETED];