@kenyaemr/esm-reports-app 5.4.4-pre.483

package/src/workspaces/report-request.workspace.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  overflow-y: auto;
+}
+
+.reportName {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+}
+
+.reportDescription {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-02;
+}
+
+.emptyState {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.datePicker {
+  width: 100%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.buttonContainer {
+  max-width: 50%;
+}
+
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}

package/src/workspaces/report-request.workspaces.tsx

@@ -0,0 +1,266 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import {
+  Button,
+  ButtonSet,
+  Checkbox,
+  Form,
+  FormGroup,
+  InlineLoading,
+  NumberInput,
+  SkeletonText,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import classNames from 'classnames';
+import {
+  ErrorState,
+  OpenmrsDatePicker,
+  ResponsiveWrapper,
+  Workspace2,
+  navigate,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+
+import styles from './report-request.workspace.scss';
+import { requestReport, useReportDefinition } from '../hooks/useReportDefinition';
+import { type ReportParameter, type ReportWithDefinition } from '../types';
+
+type ReportRequestWorkspacesProps = {
+  reportUuid: string;
+};
+
+const isDateType = (type: string) => type === 'java.util.Date';
+const isBooleanType = (type: string) => type === 'java.lang.Boolean';
+const isNumberType = (type: string) => ['java.lang.Integer', 'java.lang.Long', 'java.lang.Double'].includes(type);
+
+const humanizeName = (name: string) =>
+  name
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/^./, (char) => char.toUpperCase())
+    .trim();
+
+const formatDateParam = (date: Date) => {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+const getDefaultValue = (parameter: ReportParameter) => {
+  if (isBooleanType(parameter.type)) {
+    return parameter.defaultValue === true || parameter.defaultValue === 'true';
+  }
+  if (isDateType(parameter.type)) {
+    return parameter.defaultValue ? new Date(parameter.defaultValue as string) : null;
+  }
+  return parameter.defaultValue ?? '-1';
+};
+
+const serializeValue = (parameter: ReportParameter, value: unknown) => {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  if (isDateType(parameter.type)) {
+    return value instanceof Date ? formatDateParam(value) : '';
+  }
+  if (isBooleanType(parameter.type)) {
+    return String(Boolean(value));
+  }
+  return String(value);
+};
+
+type ReportRequestFormProps = {
+  report: ReportWithDefinition;
+  parameters: Array<ReportParameter>;
+  closeWorkspace: Workspace2DefinitionProps<ReportRequestWorkspacesProps>['closeWorkspace'];
+};
+
+const ReportRequestForm: React.FC<ReportRequestFormProps> = ({ report, parameters, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, isDirty },
+  } = useForm<Record<string, unknown>>({
+    defaultValues: Object.fromEntries(parameters.map((parameter) => [parameter.name, getDefaultValue(parameter)])),
+  });
+
+  const onSubmit = async (data: Record<string, unknown>) => {
+    const payload = Object.fromEntries(
+      parameters.map((parameter) => [parameter.name, serializeValue(parameter, data[parameter.name])]),
+    );
+
+    try {
+      await requestReport(report.uuid, payload);
+      showSnackbar({
+        title: t('reportQueued', 'Report queued'),
+        kind: 'success',
+        subtitle: t('reportQueuedSubtitle', '{{name}} has been queued for processing.', { name: report.name }),
+      });
+      closeWorkspace({ discardUnsavedChanges: true });
+      navigate({ to: `${(globalThis as any).spaBase}/reporting/report/${report.uuid}` });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('reportRequestError', 'Error requesting report'),
+        kind: 'error',
+        isLowContrast: false,
+        subtitle:
+          error?.responseBody?.error?.message ?? error?.message ?? t('unknownError', 'An unknown error occurred'),
+      });
+    }
+  };
+
+  const renderField = (parameter: ReportParameter) => {
+    const labelText = parameter.label?.trim() || humanizeName(parameter.name);
+    const isRequired = parameter.defaultValue === null || parameter.defaultValue === undefined;
+    const requiredRule = isRequired
+      ? { required: t('fieldRequired', '{{field}} is required', { field: labelText }) }
+      : {};
+
+    return (
+      <Controller
+        key={parameter.name}
+        name={parameter.name}
+        control={control}
+        rules={isBooleanType(parameter.type) ? {} : requiredRule}
+        render={({ field, fieldState }) => {
+          if (isDateType(parameter.type)) {
+            return (
+              <OpenmrsDatePicker
+                id={`${parameter.name}Input`}
+                className={styles.datePicker}
+                labelText={labelText}
+                value={(field.value as Date) ?? undefined}
+                onChange={(date) => field.onChange(date ?? null)}
+                invalid={Boolean(fieldState.error)}
+                invalidText={fieldState.error?.message}
+              />
+            );
+          }
+
+          if (isBooleanType(parameter.type)) {
+            return (
+              <Checkbox
+                id={`${parameter.name}Input`}
+                labelText={labelText}
+                checked={Boolean(field.value)}
+                onChange={(_event, { checked }) => field.onChange(checked)}
+              />
+            );
+          }
+
+          if (isNumberType(parameter.type)) {
+            return (
+              <NumberInput
+                id={`${parameter.name}Input`}
+                label={labelText}
+                value={(field.value as number) ?? ''}
+                onChange={(_event, { value }) => field.onChange(value)}
+                invalid={Boolean(fieldState.error)}
+                invalidText={fieldState.error?.message}
+              />
+            );
+          }
+
+          return (
+            <TextInput
+              id={`${parameter.name}Input`}
+              labelText={labelText}
+              value={(field.value as string) ?? ''}
+              onChange={field.onChange}
+              invalid={Boolean(fieldState.error)}
+              invalidText={fieldState.error?.message}
+              helperText={t('parameterType', 'Parameter type: {{type}}', { type: parameter.type })}
+            />
+          );
+        }}
+      />
+    );
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <div>
+          <span className={styles.reportName}>{report.name}</span>
+          {report.description && <p className={styles.reportDescription}>{report.description}</p>}
+        </div>
+        <Stack gap={5}>
+          {parameters.length === 0 ? (
+            <p className={styles.emptyState}>
+              {t('noParameters', 'This report has no parameters. Submit to queue it for processing.')}
+            </p>
+          ) : (
+            parameters.map((parameter) => (
+              <ResponsiveWrapper key={parameter.name}>
+                <FormGroup legendText="">{renderField(parameter)}</FormGroup>
+              </ResponsiveWrapper>
+            ))
+          )}
+        </Stack>
+      </div>
+
+      <ButtonSet
+        className={classNames({
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}>
+        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          className={styles.buttonContainer}
+          disabled={isSubmitting || (parameters.length > 0 && !isDirty)}
+          kind="primary"
+          type="submit">
+          {isSubmitting ? (
+            <span className={styles.inlineLoading}>
+              {t('submitting', 'Submitting...')}
+              <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('requestReport', 'Request report')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+const ReportRequestWorkspaces: React.FC<Workspace2DefinitionProps<ReportRequestWorkspacesProps>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { t } = useTranslation();
+  const { report, parameters, isLoading, error } = useReportDefinition(workspaceProps?.reportUuid ?? '');
+
+  return (
+    <Workspace2 title={t('reportRequest', 'Report Request')} hasUnsavedChanges={false}>
+      {isLoading ? (
+        <div className={styles.formContainer}>
+          <SkeletonText heading width="60%" />
+          <SkeletonText paragraph lineCount={3} />
+        </div>
+      ) : error ? (
+        <div className={styles.formContainer}>
+          <ErrorState error={error} headerTitle={t('reportRequest', 'Report Request')} />
+        </div>
+      ) : report ? (
+        <ReportRequestForm report={report} parameters={parameters} closeWorkspace={closeWorkspace} />
+      ) : (
+        <div className={styles.formContainer}>
+          <p className={styles.emptyState}>{t('reportNotFound', 'Report not found.')}</p>
+        </div>
+      )}
+    </Workspace2>
+  );
+};
+
+export default ReportRequestWorkspaces;

package/translations/am.json

@@ -0,0 +1,49 @@
+{
+  "actions": "Actions",
+  "availableSoon": "Available soon",
+  "avgGenerationTime": "Avg. Generation Time",
+  "backToAllReports": "Back to all reports",
+  "backToHistory": "Back to report history",
+  "description": "Description",
+  "errorLoadingReports": "Error loading reports",
+  "generatedOn": "Generated on {{date}}",
+  "indicator": "Indicator",
+  "indicators": "Indicators",
+  "itemsPerPage": "Items per page:",
+  "lastRunBy": "Last Run By",
+  "loadingReports": "Loading reports...",
+  "minMaxItems": "{{min}}-{{max}} of {{total}} items",
+  "name": "Name",
+  "nextPage": "Next page",
+  "noRuns": "No runs yet",
+  "noRunsSubtitle": "This report has not been requested yet.",
+  "pageRangeText_one": "of {{count}} pages",
+  "pageRangeText_other": "of {{count}} pages",
+  "patientFollowUpReports": "Patient Follow-up Reports",
+  "previousPage": "Previous page",
+  "processing": "Processing...",
+  "reportData": "Report data",
+  "reportExecutionHistory": "Report Execution History",
+  "reportExecutionHistoryDescription": "A list of all the runs of this report.",
+  "reportHistory": "Report History",
+  "reports": "Reports",
+  "reportsTable": "Reports table",
+  "reportTableDescription": "List of reports in this category",
+  "reportType": "Report",
+  "requestedBy": "Requested By",
+  "requestedDateTime": "Requested Date & Time",
+  "requestReport": "Request Report",
+  "rowActions": "Row actions",
+  "runReportNow": "Run Report Now",
+  "searchForReports": "Search for reports by name, description, or category",
+  "searchHistory": "Search history",
+  "selfServicePortal": "Self-Service Portal",
+  "showingRuns": "Showing {{min}} to {{max}} of {{total}} runs",
+  "status": "Status",
+  "successRate": "Success Rate",
+  "timeTaken": "Time Taken",
+  "totalRuns": "Total Runs",
+  "value": "Value",
+  "view": "View",
+  "viewHistory": "View History"
+}

package/translations/en.json

@@ -0,0 +1,49 @@
+{
+  "actions": "Actions",
+  "availableSoon": "Available soon",
+  "avgGenerationTime": "Avg. Generation Time",
+  "backToAllReports": "Back to all reports",
+  "backToHistory": "Back to report history",
+  "description": "Description",
+  "errorLoadingReports": "Error loading reports",
+  "generatedOn": "Generated on {{date}}",
+  "indicator": "Indicator",
+  "indicators": "Indicators",
+  "itemsPerPage": "Items per page:",
+  "lastRunBy": "Last Run By",
+  "loadingReports": "Loading reports...",
+  "minMaxItems": "{{min}}-{{max}} of {{total}} items",
+  "name": "Name",
+  "nextPage": "Next page",
+  "noRuns": "No runs yet",
+  "noRunsSubtitle": "This report has not been requested yet.",
+  "pageRangeText_one": "of {{count}} pages",
+  "pageRangeText_other": "of {{count}} pages",
+  "patientFollowUpReports": "Patient Follow-up Reports",
+  "previousPage": "Previous page",
+  "processing": "Processing...",
+  "reportData": "Report data",
+  "reportExecutionHistory": "Report Execution History",
+  "reportExecutionHistoryDescription": "A list of all the runs of this report.",
+  "reportHistory": "Report History",
+  "reports": "Reports",
+  "reportsTable": "Reports table",
+  "reportTableDescription": "List of reports in this category",
+  "reportType": "Report",
+  "requestedBy": "Requested By",
+  "requestedDateTime": "Requested Date & Time",
+  "requestReport": "Request Report",
+  "rowActions": "Row actions",
+  "runReportNow": "Run Report Now",
+  "searchForReports": "Search for reports by name, description, or category",
+  "searchHistory": "Search history",
+  "selfServicePortal": "Self-Service Portal",
+  "showingRuns": "Showing {{min}} to {{max}} of {{total}} runs",
+  "status": "Status",
+  "successRate": "Success Rate",
+  "timeTaken": "Time Taken",
+  "totalRuns": "Total Runs",
+  "value": "Value",
+  "view": "View",
+  "viewHistory": "View History"
+}

package/translations/fr.json

@@ -0,0 +1,50 @@
+{
+  "actions": "Actions",
+  "availableSoon": "Available soon",
+  "avgGenerationTime": "Avg. Generation Time",
+  "backToAllReports": "Back to all reports",
+  "backToHistory": "Back to report history",
+  "description": "Description",
+  "errorLoadingReports": "Error loading reports",
+  "generatedOn": "Generated on {{date}}",
+  "indicator": "Indicator",
+  "indicators": "Indicators",
+  "itemsPerPage": "Items per page:",
+  "lastRunBy": "Last Run By",
+  "loadingReports": "Loading reports...",
+  "minMaxItems": "{{min}}-{{max}} of {{total}} items",
+  "name": "Name",
+  "nextPage": "Next page",
+  "noRuns": "No runs yet",
+  "noRunsSubtitle": "This report has not been requested yet.",
+  "pageRangeText_one": "of {{count}} pages",
+  "pageRangeText_many": "of {{count}} pages",
+  "pageRangeText_other": "of {{count}} pages",
+  "patientFollowUpReports": "Patient Follow-up Reports",
+  "previousPage": "Previous page",
+  "processing": "Processing...",
+  "reportData": "Report data",
+  "reportExecutionHistory": "Report Execution History",
+  "reportExecutionHistoryDescription": "A list of all the runs of this report.",
+  "reportHistory": "Report History",
+  "reports": "Reports",
+  "reportsTable": "Reports table",
+  "reportTableDescription": "List of reports in this category",
+  "reportType": "Report",
+  "requestedBy": "Requested By",
+  "requestedDateTime": "Requested Date & Time",
+  "requestReport": "Request Report",
+  "rowActions": "Row actions",
+  "runReportNow": "Run Report Now",
+  "searchForReports": "Search for reports by name, description, or category",
+  "searchHistory": "Search history",
+  "selfServicePortal": "Self-Service Portal",
+  "showingRuns": "Showing {{min}} to {{max}} of {{total}} runs",
+  "status": "Status",
+  "successRate": "Success Rate",
+  "timeTaken": "Time Taken",
+  "totalRuns": "Total Runs",
+  "value": "Value",
+  "view": "View",
+  "viewHistory": "View History"
+}

package/translations/sw.json

@@ -0,0 +1,49 @@
+{
+  "actions": "Actions",
+  "availableSoon": "Available soon",
+  "avgGenerationTime": "Avg. Generation Time",
+  "backToAllReports": "Back to all reports",
+  "backToHistory": "Back to report history",
+  "description": "Description",
+  "errorLoadingReports": "Error loading reports",
+  "generatedOn": "Generated on {{date}}",
+  "indicator": "Indicator",
+  "indicators": "Indicators",
+  "itemsPerPage": "Items per page:",
+  "lastRunBy": "Last Run By",
+  "loadingReports": "Loading reports...",
+  "minMaxItems": "{{min}}-{{max}} of {{total}} items",
+  "name": "Name",
+  "nextPage": "Next page",
+  "noRuns": "No runs yet",
+  "noRunsSubtitle": "This report has not been requested yet.",
+  "pageRangeText_one": "of {{count}} pages",
+  "pageRangeText_other": "of {{count}} pages",
+  "patientFollowUpReports": "Patient Follow-up Reports",
+  "previousPage": "Previous page",
+  "processing": "Processing...",
+  "reportData": "Report data",
+  "reportExecutionHistory": "Report Execution History",
+  "reportExecutionHistoryDescription": "A list of all the runs of this report.",
+  "reportHistory": "Report History",
+  "reports": "Reports",
+  "reportsTable": "Reports table",
+  "reportTableDescription": "List of reports in this category",
+  "reportType": "Report",
+  "requestedBy": "Requested By",
+  "requestedDateTime": "Requested Date & Time",
+  "requestReport": "Request Report",
+  "rowActions": "Row actions",
+  "runReportNow": "Run Report Now",
+  "searchForReports": "Search for reports by name, description, or category",
+  "searchHistory": "Search history",
+  "selfServicePortal": "Self-Service Portal",
+  "showingRuns": "Showing {{min}} to {{max}} of {{total}} runs",
+  "status": "Status",
+  "successRate": "Success Rate",
+  "timeTaken": "Time Taken",
+  "totalRuns": "Total Runs",
+  "value": "Value",
+  "view": "View",
+  "viewHistory": "View History"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');