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

package/src/components/data-themes/sections/data-theme-metadata.section.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import {
+    ComboBox,
+    Checkbox,
+    MultiSelect,
+    NumberInput,
+    Stack,
+    TextArea,
+    TextInput,
+} from '@carbon/react';
+
+import { themeIconOptions, type ThemeIconKey, getThemeIcon } from '../icon-registry';
+
+export type AllowedIndicatorKind = 'BASE' | 'FINAL' | 'CUSTOM';
+
+export type DataThemeMeta = {
+    icon: string;
+    color: string; // hex
+    category: string;
+    order: number;
+    beta: boolean;
+    descriptionShort: string;
+    allowedIndicatorKinds: AllowedIndicatorKind[];
+};
+
+type Props = {
+    value: DataThemeMeta;
+    onChange: (next: DataThemeMeta) => void;
+    open: boolean;
+};
+
+const KIND_ITEMS: AllowedIndicatorKind[] = ['BASE', 'FINAL'];
+
+function normalizeHex(input: string, fallback = '#0f62fe') {
+    const raw = (input ?? '').trim();
+    if (!raw) return fallback;
+
+    const v = raw.startsWith('#') ? raw : `#${raw}`;
+    const short = /^#[0-9a-fA-F]{3}$/;
+    const full = /^#[0-9a-fA-F]{6}$/;
+
+    if (full.test(v)) return v.toLowerCase();
+    if (short.test(v)) {
+        const r = v[1],
+            g = v[2],
+            b = v[3];
+        return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+    }
+
+    return fallback;
+}
+
+export default function DataThemeMetadataSection({ value, onChange, open }: Props) {
+    const colorValue = normalizeHex(value.color);
+    const IconPreview = getThemeIcon(value.icon);
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.75rem' }}>Metadata</div>
+
+            <div style={{ marginBottom: '0.75rem', opacity: 0.85, fontSize: '0.875rem' }}>
+                Controls how this theme appears in the UI (icon, color, category, ordering, etc.).
+                Stored as <b>metaJson</b>.
+            </div>
+
+            <Stack gap={5}>
+
+                {/* ICON */}
+                <div>
+                    <ComboBox
+                        id="theme-meta-icon"
+                        titleText="Icon"
+                        items={[...themeIconOptions]}
+                        disabled={!open}
+                        itemToString={(it) => (it ? it.label : '')}
+                        selectedItem={
+                            themeIconOptions.find((x) => x.key === value.icon) ?? null
+                        }
+                        placeholder="Type to search icons…"
+                        onChange={(e: any) => {
+                            const picked = e?.selectedItem as
+                                | (typeof themeIconOptions)[number]
+                                | null;
+                            onChange({
+                                ...value,
+                                icon: (picked?.key as ThemeIconKey) ?? '',
+                            });
+                        }}
+                    />
+
+                    {/* Preview */}
+                    {IconPreview ? (
+                        <div
+                            style={{
+                                marginTop: '0.5rem',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                                opacity: 0.9,
+                            }}
+                        >
+                            <IconPreview size={20} />
+                            <span style={{ fontSize: '0.875rem' }}>{value.icon}</span>
+                        </div>
+                    ) : null}
+                </div>
+
+                {/* COLOR */}
+                <div>
+                    <div style={{ fontSize: '0.875rem', marginBottom: '0.25rem' }}>
+                        Color
+                    </div>
+
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.75rem',
+                        }}
+                    >
+                        <input
+                            id="theme-meta-color-picker"
+                            type="color"
+                            value={colorValue}
+                            disabled={!open}
+                            onChange={(e) =>
+                                onChange({
+                                    ...value,
+                                    color: normalizeHex(e.target.value),
+                                })
+                            }
+                            style={{
+                                width: '3rem',
+                                height: '2.5rem',
+                                padding: 0,
+                                border: '1px solid var(--cds-border-subtle)',
+                                borderRadius: '4px',
+                                background: 'transparent',
+                                cursor: open ? 'pointer' : 'not-allowed',
+                            }}
+                        />
+
+                        <TextInput
+                            id="theme-meta-color-hex"
+                            labelText=""
+                            hideLabel
+                            value={colorValue}
+                            disabled={!open}
+                            onChange={(e) =>
+                                onChange({
+                                    ...value,
+                                    color: normalizeHex(
+                                        (e.target as HTMLInputElement).value,
+                                    ),
+                                })
+                            }
+                        />
+                    </div>
+                </div>
+
+                {/* CATEGORY + ORDER */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '0.75rem',
+                    }}
+                >
+                    <TextInput
+                        id="theme-meta-category"
+                        labelText="Category"
+                        value={value.category ?? ''}
+                        disabled={!open}
+                        placeholder="e.g. Clinical"
+                        onChange={(e) =>
+                            onChange({
+                                ...value,
+                                category: (e.target as HTMLInputElement).value,
+                            })
+                        }
+                    />
+
+                    <NumberInput
+                        id="theme-meta-order"
+                        label="Order"
+                        value={Number.isFinite(value.order) ? value.order : 0}
+                        disabled={!open}
+                        min={0}
+                        step={1}
+                        onChange={(_, data) => {
+                            const n = Number(data?.value);
+                            onChange({
+                                ...value,
+                                order: Number.isFinite(n) ? n : 0,
+                            });
+                        }}
+                    />
+                </div>
+
+                {/* BETA */}
+                <Checkbox
+                    id="theme-meta-beta"
+                    labelText="Beta"
+                    checked={Boolean(value.beta)}
+                    disabled={!open}
+                    onChange={(_, { checked }) =>
+                        onChange({ ...value, beta: Boolean(checked) })
+                    }
+                />
+
+                {/* SHORT DESCRIPTION */}
+                <TextArea
+                    id="theme-meta-description-short"
+                    labelText="Short description"
+                    value={value.descriptionShort ?? ''}
+                    disabled={!open}
+                    placeholder="e.g. Diagnosis-based indicators"
+                    onChange={(e) =>
+                        onChange({
+                            ...value,
+                            descriptionShort: (
+                                e.target as HTMLTextAreaElement
+                            ).value,
+                        })
+                    }
+                />
+
+                {/* ALLOWED KINDS */}
+                <MultiSelect
+                    id="theme-meta-kinds"
+                    titleText="Allowed indicator kinds"
+                    items={KIND_ITEMS}
+                    disabled={!open}
+                    itemToString={(x) => (x ? String(x) : '')}
+                    initialSelectedItems={value.allowedIndicatorKinds ?? []}
+                    onChange={(e: any) => {
+                        const next = (e?.selectedItems ?? []) as AllowedIndicatorKind[];
+                        onChange({ ...value, allowedIndicatorKinds: next });
+                    }}
+                    label="Select kinds"
+                />
+            </Stack>
+        </div>
+    );
+}

package/src/components/data-themes/sections/data-theme-preview.section.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Button, TextArea } from '@carbon/react';
+import { Copy } from '@carbon/icons-react';
+
+type Props = {
+    config: any; // or DataThemeConfig
+    metaJson: string; // pass the already-wrapped metaJson string you're saving
+    onConfigJson: (json: string) => void;
+};
+
+function copyToClipboard(text: string) {
+    if (!text) return;
+    navigator.clipboard?.writeText(text).catch(() => {});
+}
+
+export default function DataThemePreviewSection({ config, metaJson, onConfigJson }: Props) {
+    const configJson = React.useMemo(() => JSON.stringify(config, null, 2), [config]);
+
+    React.useEffect(() => {
+        onConfigJson(configJson);
+    }, [configJson, onConfigJson]);
+
+    const Panel = ({
+                       title,
+                       subtitle,
+                       value,
+                       copyLabel,
+                       textAreaId,
+                   }: {
+        title: string;
+        subtitle?: string;
+        value: string;
+        copyLabel: string;
+        textAreaId: string;
+    }) => (
+        <div
+            style={{
+                background: 'var(--cds-layer-01)',
+                border: '1px solid var(--cds-border-subtle)',
+                borderRadius: 8,
+                padding: '1rem',
+            }}
+        >
+            <div style={{ display: 'flex', alignItems: 'start', justifyContent: 'space-between', gap: '1rem' }}>
+                <div>
+                    <div style={{ fontWeight: 600 }}>{title}</div>
+                    {subtitle ? (
+                        <div style={{ fontSize: '0.875rem', opacity: 0.8, marginTop: '0.25rem' }}>{subtitle}</div>
+                    ) : null}
+                </div>
+
+                <Button
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={Copy}
+                    iconDescription={copyLabel}
+                    onClick={() => copyToClipboard(value)}
+                >
+                    Copy
+                </Button>
+            </div>
+
+            <div style={{ marginTop: '0.75rem' }}>
+                <TextArea
+                    id={textAreaId}
+                    labelText=""
+                    hideLabel
+                    value={value}
+                    readOnly
+                    style={{
+                        minHeight: 420,
+                        fontFamily:
+                            'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                    }}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <div>
+            <div style={{ marginBottom: '0.75rem' }}>
+                <div style={{ fontWeight: 600 }}>Preview</div>
+                <div style={{ fontSize: '0.875rem', opacity: 0.8 }}>
+                    These are the exact JSON payloads that will be saved.
+                </div>
+            </div>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '1rem',
+                    alignItems: 'start',
+                }}
+            >
+                <Panel
+                    title="configJson"
+                    subtitle="Data source + fields + conditions."
+                    value={configJson}
+                    copyLabel="Copy configJson"
+                    textAreaId="theme-config-preview"
+                />
+
+                <Panel
+                    title="metaJson"
+                    subtitle="UI metadata (icon, color, category, ordering)."
+                    value={metaJson}
+                    copyLabel="Copy metaJson"
+                    textAreaId="theme-meta-preview"
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/data-themes/sections/data-theme-source.section.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { ComboBox, Select, SelectItem, InlineLoading } from '@carbon/react';
+
+import type { DataThemeConfig } from '../../../types/theme/data-theme.types';
+import { getSchemaTables, type SchemaTable } from '../../../resources/theme/etl-schema.api';
+import { getETLTableMeta, type TableColumn } from '../../../resources/theme/etl-table-meta.api';
+
+type Props = {
+    open: boolean;
+    config: DataThemeConfig;
+    onChange: (next: DataThemeConfig) => void;
+};
+
+function getTableName(t: SchemaTable): string {
+    // supports { name }, { table }, { tableName }, or string-ish payloads (defensive)
+    if (typeof (t as any) === 'string') return String(t);
+    return (t as any)?.name ?? (t as any)?.table ?? (t as any)?.tableName ?? '';
+}
+
+export default function DataThemeSourceSection({ open, config, onChange }: Props) {
+    // tables state
+    const [tables, setTables] = React.useState<SchemaTable[]>([]);
+    const [loadingTables, setLoadingTables] = React.useState(false);
+    const [tablesError, setTablesError] = React.useState<string | null>(null);
+
+    // columns state
+    const [columns, setColumns] = React.useState<TableColumn[]>([]);
+    const [loadingCols, setLoadingCols] = React.useState(false);
+    const [colsError, setColsError] = React.useState<string | null>(null);
+
+    // Load schema tables only when modal is open
+    React.useEffect(() => {
+        if (!open) {
+            setTables([]);
+            setLoadingTables(false);
+            setTablesError(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingTables(true);
+        setTablesError(null);
+
+        getSchemaTables(ac.signal)
+            .then((data) => setTables(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setTablesError(e?.message ?? 'Failed to load tables');
+            })
+            .finally(() => setLoadingTables(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    // Load columns only when modal is open AND a table is selected
+    React.useEffect(() => {
+        if (!open) {
+            setColumns([]);
+            setLoadingCols(false);
+            setColsError(null);
+            return;
+        }
+
+        const table = config?.sourceTable;
+        if (!table) {
+            setColumns([]);
+            setLoadingCols(false);
+            setColsError(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingCols(true);
+        setColsError(null);
+
+        getETLTableMeta(table, ac.signal)
+            .then((data) => setColumns(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setColsError(e?.message ?? 'Failed to load columns');
+            })
+            .finally(() => setLoadingCols(false));
+
+        return () => ac.abort();
+    }, [open, config?.sourceTable]);
+
+    const colNames = React.useMemo(
+        () => (columns ?? []).map((c) => c?.name).filter(Boolean) as string[],
+        [columns],
+    );
+
+    const tableNames = React.useMemo(() => (tables ?? []).map(getTableName).filter(Boolean), [tables]);
+
+    const canPickTable = open && !loadingTables && !tablesError;
+    const canPickCols = open && Boolean(config.sourceTable) && !loadingCols && !colsError;
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.75rem' }}>Source</div>
+
+            {/* ✅ Searchable table selector */}
+            <ComboBox
+                id="theme-source-table"
+                titleText="Source table/view"
+                items={tableNames}
+                selectedItem={config.sourceTable || null}
+                disabled={!canPickTable}
+                placeholder={loadingTables ? 'Loading…' : tablesError ? 'Failed to load tables' : 'Type to search tables…'}
+                onChange={(e: any) => {
+                    const nextTable = e?.selectedItem ?? '';
+
+                    onChange({
+                        ...config,
+                        sourceTable: nextTable,
+                        patientIdColumn: '',
+                        dateColumn: '',
+                        locationColumn: '',
+                        fields: config.fields ?? [],
+                    });
+                }}
+            />
+
+            <div style={{ marginTop: '0.5rem' }}>
+                {loadingTables ? <InlineLoading description="Loading tables…" /> : null}
+                {!loadingTables && tablesError ? (
+                    <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{tablesError}</div>
+                ) : null}
+            </div>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr 1fr',
+                    gap: '0.75rem',
+                    marginTop: '0.75rem',
+                }}
+            >
+                <Select
+                    id="theme-patient-id-col"
+                    labelText="patient_id column"
+                    value={config.patientIdColumn || ''}
+                    disabled={!canPickCols}
+                    onChange={(e) => onChange({ ...config, patientIdColumn: (e.target as HTMLSelectElement).value })}
+                >
+                    <SelectItem value="" disabled text={loadingCols ? 'Loading…' : 'Select'} />
+                    {colNames.map((c) => (
+                        <SelectItem key={c} value={c} text={c} />
+                    ))}
+                </Select>
+
+                <Select
+                    id="theme-date-col"
+                    labelText="date column"
+                    value={config.dateColumn || ''}
+                    disabled={!canPickCols}
+                    onChange={(e) => onChange({ ...config, dateColumn: (e.target as HTMLSelectElement).value })}
+                >
+                    <SelectItem value="" disabled text={loadingCols ? 'Loading…' : 'Select'} />
+                    {colNames.map((c) => (
+                        <SelectItem key={c} value={c} text={c} />
+                    ))}
+                </Select>
+
+                <Select
+                    id="theme-location-col"
+                    labelText="location column (optional)"
+                    value={config.locationColumn || ''}
+                    disabled={!canPickCols}
+                    onChange={(e) => onChange({ ...config, locationColumn: (e.target as HTMLSelectElement).value })}
+                >
+                    <SelectItem value="" disabled text={loadingCols ? 'Loading…' : 'Select'} />
+                    {colNames.map((c) => (
+                        <SelectItem key={c} value={c} text={c} />
+                    ))}
+                </Select>
+            </div>
+
+            <div style={{ marginTop: '0.5rem' }}>
+                {loadingCols ? <InlineLoading description="Loading columns…" /> : null}
+                {!loadingCols && colsError ? (
+                    <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{colsError}</div>
+                ) : null}
+            </div>
+        </div>
+    );
+}