@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/linelist/design/panels/json-preview.component.tsx

@@ -0,0 +1,114 @@
+/**
+ * JSON Preview Component for Linelist Report Configuration
+ *
+ * Displays a live preview of the report configuration JSON
+ * with validation status and copy functionality.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { Button, Tag, CodeSnippet } from '@carbon/react';
+import { Code } from '@carbon/react/icons';
+import type { LinelistReportDraft } from '../../../../types/linelist-types';
+import { draftToConfig } from '../../../../types/linelist-types';
+import type { IndicatorDto } from '../../../../resources/indicator/indicators.api';
+import { enhanceConfigForPreview } from '../../../../utils/config-enhancer';
+import styles from './json-preview.scss';
+
+type Props = {
+  draft: LinelistReportDraft;
+  className?: string;
+  indicators?: IndicatorDto[]; // Available indicators for INDICATOR mode
+};
+
+/**
+ * JSON Preview Component
+ * Shows the current draft configuration as formatted JSON
+ */
+export default function JsonPreview({ draft, className, indicators = [] }: Props) {
+  /**
+   * Convert indicators array to a Map for efficient lookup
+   */
+  const indicatorMap = useMemo(() => {
+    const map = new Map<string, { sqlTemplate?: string | null; configJson?: string | null }>();
+    for (const indicator of indicators) {
+      map.set(indicator.uuid, {
+        sqlTemplate: indicator.sqlTemplate,
+        configJson: indicator.configJson,
+      });
+    }
+    return map;
+  }, [indicators]);
+
+  /**
+   * Handle copy to clipboard
+   */
+  const handleCopy = useCallback(() => {
+    const config = draftToConfig(draft, indicatorMap);
+    const enhancedConfig = enhanceConfigForPreview(config, draft);
+    navigator.clipboard.writeText(JSON.stringify(enhancedConfig, null, 2));
+  }, [draft, indicatorMap]);
+
+  /**
+   * Get validation status items
+   */
+  const getValidationItems = () => {
+    const items: React.ReactNode[] = [];
+
+    // Check columns
+    if (draft.columns.length === 0) {
+      items.push(<Tag key="no-columns" size="sm" type="red">Missing columns</Tag>);
+    } else {
+      items.push(<Tag key="columns" size="sm" type="green">{draft.columns.length} columns</Tag>);
+    }
+
+    // Check data source
+    if (!draft.dataSourceUuid) {
+      items.push(<Tag key="no-source" size="sm" type="red">No data source</Tag>);
+    }
+
+    // Check indicators when in indicator mode
+    if (draft.populationMode === 'INDICATOR' && (!draft.indicatorRules || draft.indicatorRules.length === 0)) {
+      items.push(<Tag key="no-indicators" size="sm" type="red">No indicators selected</Tag>);
+    }
+
+    // Check for unsaved changes
+    if (draft.unsavedChanges) {
+      items.push(<Tag key="unsaved" size="sm" type="blue">Unsaved changes</Tag>);
+    }
+
+    return items;
+  };
+
+  const config = draftToConfig(draft, indicatorMap);
+  const enhancedConfig = enhanceConfigForPreview(config, draft);
+
+  return (
+    <div className={`${styles.preview} ${className || ''}`}>
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <Code size={16} className={styles.icon} />
+          <span className={styles.title}>Report Configuration JSON</span>
+        </div>
+        <Button
+          kind="ghost"
+          size="sm"
+          onClick={handleCopy}
+        >
+          Copy JSON
+        </Button>
+      </div>
+
+      <CodeSnippet
+        type="multi"
+        feedback="Copied!"
+        className={styles.code}
+      >
+        {JSON.stringify(enhancedConfig, null, 2)}
+      </CodeSnippet>
+
+      <div className={styles.validation}>
+        {getValidationItems()}
+      </div>
+    </div>
+  );
+}

package/src/components/linelist/design/panels/json-preview.scss

@@ -0,0 +1,85 @@
+/**
+ * JSON Preview Component Styles
+ */
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.icon {
+  color: #00897b;
+}
+
+.title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.code {
+  font-size: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+
+  :global {
+    .cds--copy-button {
+      background: transparent;
+    }
+
+    pre {
+      margin: 0;
+      padding: 0.75rem;
+      background: #1e1e1e;
+      color: #d4d4d4;
+      border-radius: 4px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      line-height: 1.5;
+      font-size: 0.75rem;
+    }
+
+    code {
+      font-family: inherit;
+    }
+  }
+}
+
+.validation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+
+  :global {
+    .cds--tag--red {
+      background-color: #fee2e2;
+      color: #991b1b;
+    }
+
+    .cds--tag--green {
+      background-color: #d1fae5;
+      color: #065f46;
+    }
+
+    .cds--tag--blue {
+      background-color: #dbeafe;
+      color: #1e40af;
+    }
+  }
+}