@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.42

package/src/root.component.tsx

@@ -23,38 +23,40 @@ import Moh511710Register from './reports/moh-710/registers/moh-511-710-register.
 import Moh731Report from './reports/moh-731/moh-731.component';
 import Moh366Register from './reports/moh-731/registers/moh-366.component';
 import PrepRegisterComponent from './reports/moh-731/registers/prep-register.component';
+import styles from './root.scss';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/reports';
 
   return (
     <BrowserRouter basename={baseName}>
-      <Routes>
-        <Route path="/" element={<ReportsDashboard />} />
-        <Route path="/moh-710" element={<Moh710Report />} />
-        <Route path="/moh-711" element={<Moh711Report />} />
-        <Route path="/moh-717" element={<Moh717Report />} />
-        <Route path="/moh-706" element={<MoH706Report />} />
-        <Route path="/moh-240" element={<Moh240Report />} />
-        <Route path="/moh-505" element={<Moh505Report />} />
-        <Route path="/moh-705a" element={<Moh705AComponent />} />
-        <Route path="/moh-705b" element={<Moh705BComponent />} />
-        <Route path="/moh-745" element={<Moh745Component />} />
-        <Route path="/moh-740" element={<Moh740Report />} />
-        <Route path="/moh-412-register" element={<Moh412Register />} />
-        <Route path="/moh-204b" element={<Moh204BRegisterComponent />} />
-        <Route path="/moh-204a" element={<Moh204ARegisterComponent />} />
-        <Route path="/moh-405-register" element={<Moh405Register />} />
-        <Route path="/moh-406-register" element={<Moh406Register />} />
-        <Route path="/moh-333-register" element={<Moh333Register />} />
-        <Route path="/moh-511-register" element={<Moh511Register />} />
-        <Route path="/moh-510-register" element={<Moh510Register />} />
-        <Route path="/moh-412-register" element={<Moh412Register />} />
-        <Route path="/moh-511-710-register" element={<Moh511710Register />} />
-        <Route path="/moh-731" element={<Moh731Report />} />
-        <Route path="/moh-366-register" element={<Moh366Register />} />
-        <Route path="/prep-register" element={<PrepRegisterComponent />} />
-      </Routes>
+      <div className={styles.page}>
+        <Routes>
+          <Route path="/" element={<ReportsDashboard />} />
+          <Route path="/moh-710" element={<Moh710Report />} />
+          <Route path="/moh-711" element={<Moh711Report />} />
+          <Route path="/moh-717" element={<Moh717Report />} />
+          <Route path="/moh-706" element={<MoH706Report />} />
+          <Route path="/moh-240" element={<Moh240Report />} />
+          <Route path="/moh-505" element={<Moh505Report />} />
+          <Route path="/moh-705a" element={<Moh705AComponent />} />
+          <Route path="/moh-705b" element={<Moh705BComponent />} />
+          <Route path="/moh-745" element={<Moh745Component />} />
+          <Route path="/moh-740" element={<Moh740Report />} />
+          <Route path="/moh-412-register" element={<Moh412Register />} />
+          <Route path="/moh-204b" element={<Moh204BRegisterComponent />} />
+          <Route path="/moh-204a" element={<Moh204ARegisterComponent />} />
+          <Route path="/moh-405-register" element={<Moh405Register />} />
+          <Route path="/moh-406-register" element={<Moh406Register />} />
+          <Route path="/moh-333-register" element={<Moh333Register />} />
+          <Route path="/moh-511-register" element={<Moh511Register />} />
+          <Route path="/moh-510-register" element={<Moh510Register />} />
+          <Route path="/moh-511-710-register" element={<Moh511710Register />} />
+          <Route path="/moh-731" element={<Moh731Report />} />
+          <Route path="/moh-366-register" element={<Moh366Register />} />
+          <Route path="/prep-register" element={<PrepRegisterComponent />} />
+        </Routes>
+      </div>
     </BrowserRouter>
   );
 };

package/src/root.scss

@@ -1,10 +1,25 @@
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Single gutter for every route, so the dashboard and the individual reports
+   all clear the left nav by the same amount. */
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 0 layout.$spacing-06;
+}
 
 .container {
   padding: layout.$spacing-07;
 }
 
+@media (max-width: $breakpoint-tablet-max) {
+  .page {
+    padding: 0 layout.$spacing-05;
+  }
+}
+
 .welcome {
   @include type.type-style('heading-04');
   margin: layout.$spacing-05 0;
@@ -13,3 +28,27 @@
 .explainer {
   margin-bottom: layout.$spacing-07;
 }
+
+/* Printing a report should put the report on the paper, not the application
+   around it. Every route renders inside `.page`, so the chrome is hidden once
+   here; the filter bar hides itself (see report-filters.scss), and a report
+   with its own sheet geometry (MOH-731) refines this further. */
+
+@media print {
+  :global(body) {
+    visibility: hidden;
+  }
+
+  .page,
+  .page * {
+    visibility: visible;
+  }
+
+  .page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 0;
+  }
+}

package/src/utils/get-base-url.ts

@@ -1,12 +1,44 @@
 import { getConfig } from '@openmrs/esm-framework';
-import { moduleName } from '../index';
+import { configSectionName } from '../index';
 
-export async function getEtlBaseUrl() {
-  const { etlBaseUrl } = await getConfig(moduleName);
-  return etlBaseUrl ?? null;
+/**
+ * The ETL host every report reads from, taken from this module's frontend
+ * configuration (`etlBaseUrl`).
+ *
+ * Throws when it is unset rather than returning an empty string: an empty base
+ * collapses every report URL onto the OpenMRS root, which surfaces as a bare
+ * 404 that reads like a missing endpoint instead of missing configuration.
+ */
+export async function getEtlBaseUrl(): Promise<string> {
+  const { etlBaseUrl } = await getConfig(configSectionName);
+  const baseUrl = typeof etlBaseUrl === 'string' ? etlBaseUrl.trim() : '';
+
+  if (!baseUrl) {
+    throw new Error(
+      `The ETL base URL is not configured. Set "etlBaseUrl" for ${configSectionName} in the frontend configuration.`,
+    );
+  }
+
+  // trailing slash trimmed so callers can join with a leading slash safely
+  return baseUrl.replace(/\/+$/, '');
 }
 
-export async function getSubDomain() {
-  const { subDomain } = await getConfig(moduleName);
-  return subDomain ?? null;
+export type EtlQueryParams = Record<string, string | number | undefined | null>;
+
+/**
+ * Builds a report URL from the configured ETL base, a path and its query
+ * parameters. Blank parameters are dropped rather than sent as empty values.
+ */
+export async function buildEtlUrl(path: string, params: EtlQueryParams = {}): Promise<string> {
+  const baseUrl = await getEtlBaseUrl();
+
+  const query = new URLSearchParams(
+    Object.entries(params)
+      .filter(([, value]) => value !== undefined && value !== null && value !== '')
+      .map(([key, value]) => [key, String(value)]),
+  ).toString();
+
+  const url = `${baseUrl}/${path.replace(/^\/+/, '')}`;
+
+  return query ? `${url}?${query}` : url;
 }