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

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

@@ -0,0 +1,342 @@
+import React, { useEffect, useState } from 'react';
+import { Select, SelectItem, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import type { Time } from '../../utils/time-utils';
+import CronDatePicker from './cron-date-picker.component';
+import CronTimePicker from './cron-time-picker.component';
+import CronDayOfWeekSelect from './cron-day-of-week-select.component';
+import type { CronField } from './commons';
+import {
+  DAYS_OF_MONTH,
+  DAYS_OF_WEEK,
+  SCHEDULE_TYPE_DEFAULT_LABELS,
+  SCHEDULE_TYPES,
+  ST_ADVANCED,
+  ST_EVERY_DAY,
+  ST_EVERY_MONTH,
+  ST_EVERY_WEEK,
+  ST_ONCE,
+} from './commons';
+import CronDayOfMonthSelect from './cron-day-of-month-select.component';
+import styles from './simple-cron-editor.scss';
+import { parseOpenMRSCron } from '../../utils/openmrs-cron-utils';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+
+interface SimpleCronEditorProps {
+  initialCron: string;
+  onChange: (cron: string, isValid: boolean) => void;
+}
+
+interface EditorState {
+  scheduleType: string;
+  date: Date | null;
+  time: Time | null;
+  selectedDaysOfWeek: CronField[];
+  selectedDayOfMonth: CronField | null;
+  cron: string | null;
+}
+
+const EMPTY_EDITOR_STATE: EditorState = {
+  scheduleType: ST_ONCE,
+  date: null,
+  time: null,
+  selectedDaysOfWeek: [],
+  selectedDayOfMonth: null,
+  cron: null,
+};
+
+function getEditorState(initialCron: string): EditorState {
+  const scheduleType = detectSchedulingType(initialCron);
+  const openMRSCron = parseOpenMRSCron(initialCron);
+
+  if (scheduleType == ST_ADVANCED) {
+    return {
+      scheduleType,
+      date: undefined,
+      selectedDayOfMonth: undefined,
+      selectedDaysOfWeek: [],
+      time: undefined,
+      cron: initialCron,
+    };
+  } else if (scheduleType == ST_ONCE) {
+    return {
+      scheduleType,
+      date: dayjs()
+        .utc()
+        .set('year', parseInt(openMRSCron.year))
+        .set('month', parseInt(openMRSCron.month) - 1)
+        .set('date', parseInt(openMRSCron.day))
+        .toDate(),
+      selectedDayOfMonth: undefined,
+      selectedDaysOfWeek: [],
+      time: { hours: parseInt(openMRSCron.hours), minutes: parseInt(openMRSCron.minutes) },
+      cron: null,
+    };
+  } else if (scheduleType == ST_EVERY_DAY) {
+    return {
+      scheduleType,
+      date: undefined,
+      selectedDayOfMonth: undefined,
+      selectedDaysOfWeek: [],
+      time: { hours: parseInt(openMRSCron.hours), minutes: parseInt(openMRSCron.minutes) },
+      cron: null,
+    };
+  } else if (scheduleType == ST_EVERY_WEEK) {
+    return {
+      scheduleType,
+      date: undefined,
+      selectedDayOfMonth: undefined,
+      selectedDaysOfWeek: openMRSCron.dayOfWeek
+        .split(',')
+        .map((dayId) => parseInt(dayId))
+        .map((dayId) => DAYS_OF_WEEK[dayId]),
+      time: { hours: parseInt(openMRSCron.hours), minutes: parseInt(openMRSCron.minutes) },
+      cron: null,
+    };
+  } else if (scheduleType == ST_EVERY_MONTH) {
+    return {
+      scheduleType,
+      date: undefined,
+      selectedDayOfMonth: DAYS_OF_MONTH.find((dayOfMonth) => dayOfMonth.value === openMRSCron.day),
+      selectedDaysOfWeek: [],
+      time: { hours: parseInt(openMRSCron.hours), minutes: parseInt(openMRSCron.minutes) },
+      cron: null,
+    };
+  }
+
+  return EMPTY_EDITOR_STATE;
+}
+
+function detectSchedulingType(expression: string) {
+  if (!expression) {
+    return null;
+  }
+  const onceRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s\\d{1,2}\\s\\d{1,2}\\s[?]\\s\\d{4}');
+  if (onceRegexp.test(expression)) {
+    return ST_ONCE;
+  }
+  const everyDayRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s[*]\\s[*]\\s[?]');
+  if (everyDayRegexp.test(expression)) {
+    return ST_EVERY_DAY;
+  }
+  const everyWeekRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s[?]\\s[*]\\s[1-7*,]*');
+  if (everyWeekRegexp.test(expression)) {
+    return ST_EVERY_WEEK;
+  }
+  const everyMonthRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s(1|L)\\s[*]\\s[?]');
+  if (everyMonthRegexp.test(expression)) {
+    return ST_EVERY_MONTH;
+  }
+  return ST_ADVANCED;
+}
+
+const SimpleCronEditor: React.FC<SimpleCronEditorProps> = ({ initialCron, onChange }) => {
+  const { t } = useTranslation();
+  const initialScheduleType = detectSchedulingType(initialCron);
+
+  const [editorState, setEditorState] = useState<EditorState>(getEditorState(initialCron));
+  const [invalid, setInvalid] = useState(false);
+  const [cron, setCron] = useState(initialCron);
+
+  useEffect(() => {
+    setEditorState(getEditorState(initialCron));
+  }, [initialCron]);
+
+  useEffect(() => {
+    buildCron();
+  }, [editorState]);
+
+  useEffect(() => {
+    onChange(cron, !invalid);
+  }, [cron]);
+
+  const buildCron = () => {
+    if (!validateEditor()) {
+      setCron(null);
+      return;
+    }
+
+    const selectedScheduleType = editorState.scheduleType;
+    const selectedTime = editorState.time;
+
+    if (selectedScheduleType == ST_ADVANCED) {
+      setCron(editorState.cron);
+    } else if (selectedScheduleType == ST_ONCE) {
+      setCron(
+        `0 ${selectedTime.minutes} ${selectedTime.hours} ${editorState.date.getUTCDate()} ${
+          editorState.date.getUTCMonth() + 1
+        } ? ${editorState.date.getUTCFullYear()}`,
+      );
+    } else if (selectedScheduleType == ST_EVERY_DAY) {
+      setCron(`0 ${selectedTime.minutes} ${selectedTime.hours} * * ?`);
+    } else if (selectedScheduleType == ST_EVERY_WEEK) {
+      setCron(
+        `0 ${selectedTime.minutes} ${selectedTime.hours} ? * ${editorState.selectedDaysOfWeek.map(
+          (dayOfWeek) => dayOfWeek.value,
+        )}`,
+      );
+    } else if (selectedScheduleType == ST_EVERY_MONTH) {
+      setCron(`0 ${selectedTime.minutes} ${selectedTime.hours} ${editorState.selectedDayOfMonth.value} * ?`);
+    }
+  };
+
+  const validateEditor = (): boolean => {
+    const selectedScheduleType = editorState.scheduleType;
+    const selectedTime = editorState.time;
+
+    if (selectedScheduleType == ST_ADVANCED) {
+      if (!editorState.cron) {
+        return validationFailed();
+      }
+    } else if (selectedScheduleType == ST_ONCE) {
+      if (!selectedTime || !(editorState.date instanceof Date)) {
+        return validationFailed();
+      }
+    } else if (selectedScheduleType == ST_EVERY_DAY) {
+      if (!selectedTime) {
+        return validationFailed();
+      }
+    } else if (selectedScheduleType == ST_EVERY_WEEK) {
+      if (!selectedTime || !editorState.selectedDaysOfWeek || editorState.selectedDaysOfWeek.length == 0) {
+        return validationFailed();
+      }
+    } else if (selectedScheduleType == ST_EVERY_MONTH) {
+      if (!selectedTime || !editorState.selectedDayOfMonth) {
+        return validationFailed();
+      }
+    }
+
+    return validationSuccess();
+  };
+
+  const validationFailed = (): boolean => {
+    setInvalid(true);
+    return false;
+  };
+
+  const validationSuccess = (): boolean => {
+    setInvalid(false);
+    return true;
+  };
+
+  const renderScheduleTypeSelect = () => {
+    return (
+      <div className={styles.cronEditorField}>
+        <Select
+          hideLabel={true}
+          onChange={(event) => {
+            setEditorState((state) => ({ ...state, scheduleType: event.target.value }));
+          }}
+          value={editorState.scheduleType}
+        >
+          {SCHEDULE_TYPES.filter(
+            (scheduleType) =>
+              (initialScheduleType != ST_ADVANCED && scheduleType != ST_ADVANCED) || initialScheduleType == ST_ADVANCED,
+          ).map((scheduleType) => (
+            <SelectItem
+              key={scheduleType}
+              text={t('scheduleType_' + scheduleType, SCHEDULE_TYPE_DEFAULT_LABELS[scheduleType] || scheduleType)}
+              value={scheduleType}
+            >
+              {scheduleType}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+    );
+  };
+
+  const renderDatePicker = () => {
+    return (
+      <div className={styles.cronEditorField}>
+        <CronDatePicker
+          value={editorState.date}
+          onChange={(selectedDate) => {
+            setEditorState((state) => ({ ...state, date: selectedDate }));
+          }}
+        />
+      </div>
+    );
+  };
+
+  const renderDayOfWeekSelect = () => {
+    return (
+      <div className={styles.cronEditorField}>
+        <CronDayOfWeekSelect
+          value={editorState.selectedDaysOfWeek}
+          onChange={(selectedDaysOfWeek) => {
+            setEditorState((state) => ({ ...state, selectedDaysOfWeek }));
+          }}
+        />
+      </div>
+    );
+  };
+
+  const renderTimePicker = () => {
+    return (
+      <div className={styles.cronTimePickerField}>
+        <CronTimePicker
+          value={editorState.time}
+          onChange={(selectedTime) => {
+            setEditorState((state) => ({ ...state, time: selectedTime }));
+          }}
+        />
+      </div>
+    );
+  };
+
+  const renderDayOfMonthSelect = () => {
+    return (
+      <div className={styles.cronEditorField}>
+        <CronDayOfMonthSelect
+          value={editorState.selectedDayOfMonth}
+          onChange={(selectedDayOfMonth) => {
+            setEditorState((state) => ({ ...state, selectedDayOfMonth }));
+          }}
+        />
+      </div>
+    );
+  };
+
+  const renderCronInput = () => {
+    return (
+      <div className={styles.cronEditorField}>
+        <TextInput
+          type="text"
+          readOnly={true}
+          hideLabel={true}
+          value={editorState.cron}
+          onChange={(event) => {
+            setEditorState((state) => ({ ...state, cron: event.target.value }));
+          }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.cronContainer}>
+      {renderScheduleTypeSelect()}
+      {editorState.scheduleType != ST_ADVANCED && editorState.scheduleType != ST_EVERY_DAY && (
+        <div className={styles.cronEditorFieldSeparator}>
+          <span>{t('on', 'on')}</span>
+        </div>
+      )}
+      {editorState.scheduleType == ST_ONCE && renderDatePicker()}
+      {editorState.scheduleType == ST_EVERY_WEEK && renderDayOfWeekSelect()}
+      {editorState.scheduleType == ST_EVERY_MONTH && renderDayOfMonthSelect()}
+      {editorState.scheduleType != ST_ADVANCED && (
+        <div className={styles.cronEditorFieldSeparator}>
+          <span>{t('at', 'at')}</span>
+        </div>
+      )}
+      {editorState.scheduleType != ST_ADVANCED && renderTimePicker()}
+      {editorState.scheduleType == ST_ADVANCED && renderCronInput()}
+    </div>
+  );
+};
+
+export default SimpleCronEditor;

package/src/components/simple-cron-editor/simple-cron-editor.scss

@@ -0,0 +1,34 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.dangerLabel01 {
+  @include type.type-style('label-01');
+  color: $danger;
+}
+
+.cronEditor {
+  display: inline;
+}
+
+.cronEditorField {
+  float: left;
+}
+
+.cronTimePickerField {
+  float: left;
+  width: min-content;
+}
+
+.cronEditorFieldSeparator {
+  float: left;
+  height: layout.$spacing-08;
+  margin-top: 1.25rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.cronContainer {
+  padding: layout.$spacing-05;
+}

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const basePath = '/reports';
+export const spaBasePath = `${window.spaBase}${basePath}`;
+export const PRIVILEGE_SYSTEM_DEVELOPER = 'System Developer';

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/hooks/useOverlay.tsx

@@ -0,0 +1,45 @@
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState: OverlayStore = { isOverlayOpen: false, header: '' };
+
+const getOverlayStore = () => {
+  return getGlobalStore('reports-store', initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender: any) => {
+  const store = getOverlayStore();
+  store.setState({ isOverlayOpen: true, component: componentToRender, header: headerTitle });
+};
+
+export const closeOverlay = (): void => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  const update = useCallback((state: OverlayStore) => {
+    setOverlay(state);
+  }, []);
+
+  useEffect(() => {
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, [update]);
+
+  const { isOverlayOpen, component, header } = overlay ?? {};
+
+  return {
+    isOverlayOpen,
+    component,
+    header,
+  };
+};

package/src/index.ts

@@ -0,0 +1,73 @@
+/**
+ * This is the entrypoint file of the application. It communicates the
+ * important features of this microfrontend to the app shell. It
+ * connects the app shell to the React application(s) that make up this
+ * microfrontend.
+ */
+import { getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+
+const moduleName = '@openmrs/esm-reports-app';
+
+const options = {
+  featureName: 'reports',
+  moduleName,
+};
+
+/**
+ * This tells the app shell how to obtain translation files: that they
+ * are JSON files in the directory `../translations` (which you should
+ * see in the directory structure).
+ */
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+/**
+ * This function performs any setup that should happen at microfrontend
+ * load-time (such as defining the config schema) and then returns an
+ * object which describes how the React application(s) should be
+ * rendered.
+ */
+export function startupApp() {
+  registerBreadcrumbs([
+    {
+      title: 'Home',
+      path: `${window.openmrsBase}`,
+    },
+    {
+      path: `${window.spaBase}/system-administration`,
+      title: () => Promise.resolve(window.i18next.t('systemAdmin', 'System Administration')),
+      parent: `${window.spaBase}/home`,
+    },
+    {
+      title: () => Promise.resolve(window.i18next.t('reports', 'Reports')),
+      path: `${window.spaBase}/reports`,
+      parent: `${window.spaBase}/system-administration`,
+    },
+    {
+      title: () => Promise.resolve(window.i18next.t('scheduledReports', 'Scheduled Reports')),
+      path: `${window.spaBase}/reports/scheduled-overview`,
+      parent: `${window.spaBase}/reports`,
+    },
+  ]);
+}
+
+/**
+ * This named export tells the app shell that the default export of `root.component.tsx`
+ * should be rendered when the route matches `root`. The full route
+ * will be `openmrsSpaBase() + 'root'`, which is usually
+ * `/openmrs/spa/root`.
+ */
+
+export const root = getAsyncLifecycle(() => import('./reports.component'), options);
+
+export const reportsLink = getAsyncLifecycle(() => import('./reports-link'), options);
+
+export const overview = getAsyncLifecycle(() => import('./components/overview.component'), options);
+
+export const scheduledOverview = getAsyncLifecycle(() => import('./components/scheduled-overview.component'), options);
+
+export const runReport = getAsyncLifecycle(() => import('./components/run-report/run-report-form.component'), options);
+
+export const cancelReportModal = getAsyncLifecycle(
+  () => import('./components/run-report/cancel-report-modal.component'),
+  options,
+);

package/src/reports-link.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { spaBasePath } from './constants';
+import { ClickableTile, Layer } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+export default function ReportsLink() {
+  const { t } = useTranslation();
+  return (
+    <Layer>
+      <ClickableTile href={`${spaBasePath}`}>
+        <div>
+          <div className="heading">{t('manageReports', 'Manage Reports')}</div>
+          <div className="content">{t('reports', 'Reports')}</div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+}

package/src/reports.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import styles from './root.scss';
+import OverviewComponent from './components/overview.component';
+import ScheduledOverviewComponent from './components/scheduled-overview.component';
+import { spaBasePath } from './constants';
+
+const RootComponent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <BrowserRouter basename={spaBasePath}>
+        <Routes>
+          <Route path="/" element={<OverviewComponent />} />
+          <Route path="/scheduled-overview" element={<ScheduledOverviewComponent />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+};
+
+export default RootComponent;

package/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-07;
+}
+
+.welcome {
+  @include type.type-style('heading-04');
+  margin: layout.$spacing-05 0; 
+}
+
+.explainer {
+  margin-bottom: 2rem;
+}

package/src/routes.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0",
+    "reportingrest": ">=1.14.0",
+    "reporting": ">=1.26.0"
+  },
+  "extensions": [
+    {
+      "name": "admin-report-link",
+      "slot": "system-admin-page-card-link-slot",
+      "component": "reportsLink"
+    },
+    {
+      "name": "run-report",
+      "component": "runReport"
+    }
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "reports"
+    },
+    {
+      "component": "overview",
+      "route": "overview"
+    },
+    {
+      "component": "scheduled-overview",
+      "route": "scheduled-overview"
+    }
+  ],
+  "modals": [
+    {
+      "name": "cancel-report-modal",
+      "component": "cancelReportModal"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/types/report-definition.ts

@@ -0,0 +1,12 @@
+export interface ReportDefinition {
+  uuid: string;
+  name: string;
+  description: string;
+  parameters: ReportParameter[];
+}
+
+interface ReportParameter {
+  name: string;
+  label: string;
+  type: string;
+}

package/src/types/report-design.ts

@@ -0,0 +1,4 @@
+export interface ReportDesign {
+  name: string;
+  uuid: string;
+}

package/src/types/report-request.ts

@@ -0,0 +1,8 @@
+export interface ReportRequest {
+  uuid: string;
+  schedule: string;
+  renderingMode: {
+    argument: string;
+  };
+  parameterMappings: Record<string, string>;
+}

package/src/utils/openmrs-cron-utils.ts

@@ -0,0 +1,26 @@
+export interface OpenMRSCron {
+  seconds: string;
+  minutes: string;
+  hours: string;
+  day: string;
+  month: string;
+  dayOfWeek: string;
+  year: string;
+}
+
+export function parseOpenMRSCron(expression: string): OpenMRSCron {
+  if (!expression) {
+    return null;
+  }
+
+  const tokens = expression.split(' ');
+  return {
+    seconds: tokens[0],
+    minutes: tokens[1],
+    hours: tokens[2],
+    day: tokens[3],
+    month: tokens[4],
+    dayOfWeek: tokens[5],
+    year: tokens[6],
+  };
+}