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

package/src/components/run-report/run-report-form.scss

@@ -0,0 +1,87 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.desktopRunReport {
+  background-color: $ui-background;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.runReportInnerDivElement {
+  display: flex;
+  padding: layout.$spacing-05;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: layout.$spacing-05;
+}
+
+.basicInputElement {
+  width: 300px;
+  height: 30px;
+  margin-bottom: 30px;
+}
+
+.outputFormatDiv {
+  margin-bottom: 50px;
+  display: flex;
+  padding: layout.$spacing-07 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: layout.$spacing-05;
+}
+
+.buttonsDiv {
+  margin-top: 50px;
+}
+
+.parameterElement {
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+
+.datePicker {
+  text-align: left;
+}
+
+.cancelActionButton {
+  text-decoration: underline;
+  color: #525252;
+  padding-left: 0px;
+}
+
+.unknownParameterTypeSpan {
+  text-align: left;
+  color: red;
+}
+
+.tableIcon {
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.reportButton {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.rowCellEven {
+  background-color: #FFFFFF !important;
+}
+
+.rowCellOdd {
+  background-color: #F4F4F4 !important;
+}

package/src/components/scheduled-overview-cell-content.component.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Edit, TrashCan } from '@carbon/react/icons';
+import { showModal, userHasAccess, useSession } from '@openmrs/esm-framework';
+import ReportScheduleDescription from './report-schedule-description.component';
+import NextReportExecution from './next-report-execution.component';
+import ReportOverviewButton from './report-overview-button.component';
+import { useTranslation } from 'react-i18next';
+import { closeOverlay, launchOverlay } from '../hooks/useOverlay';
+import styles from './reports.scss';
+import { PRIVILEGE_SYSTEM_DEVELOPER } from '../constants';
+import EditScheduledReportForm from './edit-scheduled-report/edit-scheduled-report-form.component';
+import ScheduledReportStatus from './scheduled-report-status.component';
+
+interface ScheduledOverviewCellContentProps {
+  cell: { info: { header: string }; value: any };
+  mutate: () => void;
+}
+
+const ScheduledOverviewCellContent: React.FC<ScheduledOverviewCellContentProps> = ({ cell, mutate }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+
+  const renderContent = () => {
+    switch (cell.info.header) {
+      case 'name':
+        return <div>{cell.value?.content ?? cell.value}</div>;
+      case 'status':
+        return <ScheduledReportStatus hasSchedule={cell.value} />;
+      case 'schedule':
+        return <ReportScheduleDescription schedule={cell.value} />;
+      case 'nextRun':
+        return <NextReportExecution schedule={cell.value} currentDate={new Date()} />;
+      case 'actions':
+        return (
+          <div>
+            <ReportOverviewButton
+              shouldBeDisplayed={userHasAccess(PRIVILEGE_SYSTEM_DEVELOPER, session.user)}
+              label={t('edit', 'Edit')}
+              icon={() => <Edit size={16} className={styles.actionButtonIcon} />}
+              reportRequestUuid={null}
+              onClick={() => {
+                launchOverlay(
+                  t('editScheduledReport', 'Edit Scheduled Report'),
+                  <EditScheduledReportForm
+                    reportDefinitionUuid={cell.value.reportDefinitionUuid}
+                    reportRequestUuid={cell.value.reportRequestUuid}
+                    closePanel={() => {
+                      closeOverlay();
+                      mutate();
+                    }}
+                  />,
+                );
+              }}
+            />
+            <ReportOverviewButton
+              shouldBeDisplayed={
+                !!cell.value.reportRequestUuid && userHasAccess(PRIVILEGE_SYSTEM_DEVELOPER, session.user)
+              }
+              label={t('deleteSchedule', 'Delete Schedule')}
+              icon={() => <TrashCan size={16} className={styles.actionButtonIcon} />}
+              reportRequestUuid={cell.value.reportRequestUuid}
+              onClick={() => launchDeleteReportScheduleDialog(cell.value.reportRequestUuid)}
+            />
+          </div>
+        );
+      default:
+        return <span>{cell.value?.content ?? cell.value}</span>;
+    }
+  };
+
+  const launchDeleteReportScheduleDialog = (reportRequestUuid: string) => {
+    const dispose = showModal('cancel-report-modal', {
+      closeModal: () => {
+        dispose();
+        mutate();
+      },
+      reportRequestUuid,
+      modalType: 'schedule',
+    });
+  };
+
+  return renderContent();
+};
+
+export default ScheduledOverviewCellContent;

package/src/components/scheduled-overview.component.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { ExtensionSlot, isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import styles from './reports.scss';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useScheduledReports } from './reports.resource';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from './pagination-constants';
+import ScheduledOverviewCellContent from './scheduled-overview-cell-content.component';
+import Overlay from './overlay.component';
+import classNames from 'classnames';
+
+const ScheduledOverviewComponent: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  const { scheduledReports, mutateScheduledReports } = useScheduledReports('name');
+  const scheduledReportRows = scheduledReports
+    ? scheduledReports.map((report) => ({
+        id: report.reportRequestUuid ? report.reportRequestUuid : report.reportDefinitionUuid,
+        name: report.name,
+        status: !!report.reportRequestUuid,
+        schedule: report.schedule,
+        nextRun: report.schedule,
+        actions: {
+          reportDefinitionUuid: report.reportDefinitionUuid,
+          reportRequestUuid: report.reportRequestUuid,
+        },
+      }))
+    : [];
+
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const { currentPage, results, goTo } = usePagination(scheduledReportRows, pageSize);
+
+  const tableHeaders = [
+    { key: 'name', header: t('reportName', 'Report Name') },
+    { key: 'status', header: t('status', 'Status') },
+    { key: 'schedule', header: t('schedule', 'Schedule') },
+    { key: 'nextRun', header: t('nextRun', 'Next run') },
+    { key: 'actions', header: t('actions', 'Actions') },
+  ];
+
+  return (
+    <div>
+      <ExtensionSlot name="breadcrumbs-slot" className={styles.breadcrumb} />
+      <div className={styles.mainPanelDiv}>
+        <div className={styles.reportsLabelDiv}>
+          <h3>{t('scheduledReports', 'Scheduld Reports')}</h3>
+        </div>
+        <div className={styles.mainActionButtonsDiv}></div>
+        <DataTable rows={results} headers={tableHeaders} isSortable={false}>
+          {({ rows, headers }) => (
+            <TableContainer>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header, index) => (
+                      <TableHeader key={header.key ?? `header-${index}`}>
+                        {header.header?.content ?? header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => (
+                    <TableRow key={row.id ?? `row-${index}`} className={styles.tableRow}>
+                      {row.cells.map((cell) => (
+                        <TableCell
+                          key={cell.id}
+                          className={classNames({
+                            [styles.rowCellEven]: index % 2 === 0,
+                            [styles.rowCellOdd]: index % 2 !== 0,
+                          })}
+                        >
+                          <ScheduledOverviewCellContent cell={cell} mutate={mutateScheduledReports} />
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+        <Pagination
+          backwardText={t('previousPage', 'Previous page')}
+          forwardText={t('nextPage', 'Next page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={DEFAULT_PAGE_SIZES}
+          totalItems={scheduledReports?.length}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
+      </div>
+      <Overlay />
+    </div>
+  );
+};
+
+export default ScheduledOverviewComponent;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './reports.scss';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+interface ReportStatusProps {
+  hasSchedule: string;
+}
+
+const ScheduledReportStatus: React.FC<ReportStatusProps> = ({ hasSchedule }) => {
+  const { t } = useTranslation();
+
+  return (
+    <span
+      className={classNames({
+        [styles.scheduledStatusText]: hasSchedule,
+        [styles.notScheduledStatusText]: !hasSchedule,
+      })}
+    >
+      {hasSchedule ? t('scheduled', 'Scheduled') : t('notScheduled', 'Not Scheduled')}
+    </span>
+  );
+};
+
+export default ScheduledReportStatus;

package/src/components/simple-cron-editor/commons.ts

@@ -0,0 +1,47 @@
+export interface CronField {
+  name: string;
+  value: number | string;
+}
+
+export const ST_ONCE = 'once';
+export const ST_EVERY_DAY = 'everyDay';
+export const ST_EVERY_WEEK = 'everyWeek';
+export const ST_EVERY_MONTH = 'everyMonth';
+export const ST_ADVANCED = 'advanced';
+export const SCHEDULE_TYPES = [ST_ONCE, ST_EVERY_DAY, ST_EVERY_WEEK, ST_EVERY_MONTH, ST_ADVANCED];
+export const SCHEDULE_TYPE_DEFAULT_LABELS: Record<string, string> = {
+  once: 'Once',
+  everyDay: 'Every day',
+  everyWeek: 'Every week',
+  everyMonth: 'Every month',
+};
+export const DAYS_OF_WEEK: CronField[] = [
+  'sunday',
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+].map((name, idx) => ({
+  name,
+  value: idx,
+}));
+export const DAYS_OF_WEEK_DEFAULT_LABELS: Record<string, string> = {
+  sunday: 'Sunday',
+  monday: 'Monday',
+  tuesday: 'Tuesday',
+  wednesday: 'Wednesday',
+  thursday: 'Thursday',
+  friday: 'Friday',
+  saturday: 'Saturday',
+};
+export const DAYS_OF_MONTH: CronField[] = [
+  { name: '', value: '' },
+  { name: 'firstDay', value: '1' },
+  { name: 'lastDay', value: 'L' },
+];
+export const DAYS_OF_MONTH_DEFAULT_LABELS: Record<string, string> = {
+  firstDay: 'First day',
+  lastDay: 'Last day',
+};

package/src/components/simple-cron-editor/cron-date-picker.component.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './simple-cron-editor.scss';
+import { isEqual } from 'lodash-es';
+
+interface CronDatePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+}
+
+interface ValidationState {
+  invalid: boolean;
+  invalidText: string;
+}
+
+const CronDatePicker: React.FC<CronDatePickerProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const [valueInternal, setValueInternal] = useState(value);
+  const [validationState, setValidationState] = useState<ValidationState>({
+    invalid: false,
+    invalidText: null,
+  });
+
+  useEffect(() => {
+    if (!isEqual(value, valueInternal)) {
+      setValueInternal(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    validate();
+  }, [valueInternal]);
+
+  useEffect(() => {
+    onChange(validationState.invalid ? null : valueInternal);
+  }, [validationState]);
+
+  const validate = () => {
+    if (!(valueInternal instanceof Date)) {
+      setValidationState({ invalid: true, invalidText: t('dateRequired', 'Required') });
+    } else {
+      setValidationState({ invalid: false, invalidText: null });
+    }
+  };
+
+  return (
+    <div>
+      <DatePicker
+        datePickerType="single"
+        value={valueInternal}
+        invalid={validationState.invalid}
+        invalidText={t(validationState.invalidText)}
+        onChange={([selectedDate]) => {
+          setValueInternal(selectedDate);
+        }}
+      >
+        <DatePickerInput hideLabel={true} />
+      </DatePicker>
+      {validationState.invalid && (
+        <span className={styles.dangerLabel01}>{validationState.invalidText && t(validationState.invalidText)}</span>
+      )}
+    </div>
+  );
+};
+
+export default CronDatePicker;

package/src/components/simple-cron-editor/cron-day-of-month-select.component.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select, SelectItem } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type CronField, DAYS_OF_MONTH, DAYS_OF_MONTH_DEFAULT_LABELS } from './commons';
+import { isEqual } from 'lodash-es';
+
+interface CronDayOfMonthSelectProps {
+  value: CronField;
+  onChange: (selectedDayOfMonth: CronField) => void;
+}
+
+interface ValidationState {
+  invalid: boolean;
+  invalidText: string;
+}
+
+const CronDayOfMonthSelect: React.FC<CronDayOfMonthSelectProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+
+  const [valueInternal, setValueInternal] = useState<number | string>(value?.value);
+  const [validationState, setValidationState] = useState<ValidationState>({
+    invalid: false,
+    invalidText: null,
+  });
+
+  useEffect(() => {
+    if (!isEqual(value, valueInternal)) {
+      setValueInternal(value?.value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    validate();
+  }, [valueInternal]);
+
+  useEffect(() => {
+    onChange(validationState.invalid ? null : DAYS_OF_MONTH.find((dayOfMonth) => dayOfMonth.value == valueInternal));
+  }, [validationState]);
+
+  const validate = () => {
+    if (!!valueInternal) {
+      setValidationState({ invalid: false, invalidText: null });
+    } else {
+      setValidationState({ invalid: true, invalidText: t('dayOfMonthRequired', 'Required') });
+    }
+  };
+
+  const translatedOptions = useMemo(
+    () =>
+      DAYS_OF_MONTH.map((day) => ({
+        ...day,
+        label: t(`dayOfMonth_${day.name}`, DAYS_OF_MONTH_DEFAULT_LABELS[day.name] || day.name),
+      })),
+    [t],
+  );
+
+  return (
+    <Select
+      hideLabel={true}
+      onChange={(event) => {
+        setValueInternal(event.target.value);
+      }}
+      value={valueInternal}
+      invalid={validationState.invalid}
+      invalidText={t(validationState.invalidText)}
+    >
+      {translatedOptions.map((dayOfMonth) => (
+        <SelectItem key={dayOfMonth.value} text={dayOfMonth.label} value={dayOfMonth.value.toString()} />
+      ))}
+    </Select>
+  );
+};
+
+export default CronDayOfMonthSelect;

package/src/components/simple-cron-editor/cron-day-of-week-select.component.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { FilterableMultiSelect } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type CronField, DAYS_OF_WEEK, DAYS_OF_WEEK_DEFAULT_LABELS } from './commons';
+import { isEqual } from 'lodash-es';
+
+interface CronDayOfWeekSelectProps {
+  value: CronField[];
+  onChange: (selectedDaysOfWeek: CronField[]) => void;
+}
+
+interface ValidationState {
+  invalid: boolean;
+  invalidText: string;
+}
+
+const CronDayOfWeekSelect: React.FC<CronDayOfWeekSelectProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+
+  const [valueInternal, setValueInternal] = useState<CronField[]>(value);
+  const [validationState, setValidationState] = useState<ValidationState>({
+    invalid: false,
+    invalidText: null,
+  });
+
+  useEffect(() => {
+    if (!isEqual(value, valueInternal)) {
+      setValueInternal(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    validate();
+  }, [valueInternal]);
+
+  useEffect(() => {
+    onChange(validationState.invalid ? null : valueInternal);
+  }, [validationState]);
+
+  const validate = () => {
+    if (!!valueInternal && valueInternal.length > 0) {
+      setValidationState({ invalid: false, invalidText: null });
+    } else {
+      setValidationState({ invalid: true, invalidText: t('dayOfWeekRequired', 'Required') });
+    }
+  };
+
+  return (
+    <FilterableMultiSelect
+      hideLabel={true}
+      items={DAYS_OF_WEEK}
+      compareItems={(item1, item2) => item1.value < item2.value}
+      itemToString={(item) =>
+        item ? t('dayOfWeek_' + item.name, DAYS_OF_WEEK_DEFAULT_LABELS[item.name] || item.name) : ''
+      }
+      selectionFeedback="fixed"
+      initialSelectedItems={valueInternal ? valueInternal : []}
+      onChange={(event) => {
+        setValueInternal(event.selectedItems);
+      }}
+      invalid={validationState.invalid}
+      invalidText={t(validationState.invalidText)}
+    />
+  );
+};
+
+export default CronDayOfWeekSelect;

package/src/components/simple-cron-editor/cron-time-picker.component.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { TimePicker } from '@carbon/react';
+import { parseTime, TIME_PATTERN, TIME_PATTERN_REG_EXP, to24HTime } from '../../utils/time-utils';
+import type { Time } from '../../utils/time-utils';
+import { isEqual } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+
+interface CronTimePickerProps {
+  value: Time;
+  onChange: (time: Time) => void;
+}
+
+interface ValidationState {
+  invalid: boolean;
+  invalidText: string;
+}
+
+const CronTimePicker: React.FC<CronTimePickerProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const [valueInternal, setValueInternal] = useState(to24HTime(value));
+  const [validationState, setValidationState] = useState<ValidationState>({
+    invalid: false,
+    invalidText: null,
+  });
+
+  useEffect(() => {
+    const newInternalValue = to24HTime(value);
+    if (!isEqual(value, newInternalValue)) {
+      setValueInternal(newInternalValue);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    onChange(validationState.invalid ? null : parseTime(valueInternal));
+  }, [validationState]);
+
+  const validate = () => {
+    if (TIME_PATTERN_REG_EXP.test(valueInternal)) {
+      setValidationState({ invalid: false, invalidText: null });
+    } else {
+      setValidationState({ invalid: true, invalidText: t('notATimeText', 'hh:mm 24-hr pattern required') });
+    }
+  };
+
+  return (
+    <TimePicker
+      hideLabel={true}
+      pattern={TIME_PATTERN}
+      value={valueInternal}
+      invalid={validationState.invalid}
+      invalidText={t(validationState.invalidText)}
+      onChange={(event) => {
+        setValueInternal(event.target.value);
+      }}
+      onBlur={validate}
+    />
+  );
+};
+
+export default CronTimePicker;