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

package/src/components/indicators/create-final-indicator-modal.component.tsx

@@ -0,0 +1,285 @@
+import React from 'react';
+import { Modal, Stack, InlineLoading, InlineNotification } from '@carbon/react';
+
+import type { IndicatorDto } from '../../resources/indicator/indicators.api';
+import { getIndicator } from '../../resources/indicator/indicators.api';
+
+import { listAgeCategoriesWithGroups, type AgeCategoryOption } from '../../resources/agegroup/agegroups.api';
+
+import FinalIndicatorBasicsSection from './sections/final-indicator-basics.section';
+import FinalIndicatorPickerSection from './sections/final-indicator-picker.section';
+import FinalIndicatorDisaggregationSection from './sections/final-indicator-disaggregation.section';
+import FinalIndicatorResultsPreviewSection from './sections/final-indicator-results-preview.section';
+
+import { buildFinalIndicatorSql, buildFinalIndicatorSqlAsync, type FinalIndicatorAuthoringV1 } from './utils/final-indicator-sql.utils';
+
+type Props = {
+    open: boolean;
+    mode?: 'create' | 'edit';
+    initial?: IndicatorDto | null;
+
+    onClose: () => void;
+
+    onCreate: (payload: Partial<IndicatorDto>) => Promise<void>;
+    onUpdate?: (uuid: string, payload: Partial<IndicatorDto>) => Promise<void>;
+    onSaved: () => void;
+};
+
+function safeParseJson<T = any>(input?: string | null): T | null {
+    if (!input) return null;
+    try {
+        return JSON.parse(input) as T;
+    } catch {
+        return null;
+    }
+}
+
+const toCode = (name: string) =>
+    name
+        .toUpperCase()
+        .replace(/[^A-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 50);
+
+function todayIso(): string {
+    const d = new Date();
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+}
+
+export default function CreateFinalIndicatorModal({
+                                                      open,
+                                                      mode = 'create',
+                                                      initial,
+                                                      onClose,
+                                                      onCreate,
+                                                      onUpdate,
+                                                      onSaved,
+                                                  }: Props) {
+    const [ageCategories, setAgeCategories] = React.useState<AgeCategoryOption[]>([]);
+    const [loadingCats, setLoadingCats] = React.useState(false);
+    const [catsError, setCatsError] = React.useState<string | null>(null);
+
+    const [basics, setBasics] = React.useState({ name: '', code: '', description: '' });
+
+    const [baseIndicatorId, setBaseIndicatorId] = React.useState('');
+    const [ageCategoryCode, setAgeCategoryCode] = React.useState('');
+    const [genders, setGenders] = React.useState<Array<'F' | 'M'>>(['F', 'M']);
+
+    const [baseFull, setBaseFull] = React.useState<IndicatorDto | null>(null);
+    const [loadingBase, setLoadingBase] = React.useState(false);
+    const [baseError, setBaseError] = React.useState<string | null>(null);
+
+    const [sqlPreview, setSqlPreview] = React.useState('');
+
+    // ✅ Preview parameters (must be inside component)
+    const [previewStartDate, setPreviewStartDate] = React.useState('2025-01-01');
+    const [previewEndDate, setPreviewEndDate] = React.useState(todayIso);
+
+    // load categories when modal opens
+    React.useEffect(() => {
+        if (!open) return;
+        const ac = new AbortController();
+
+        setLoadingCats(true);
+        setCatsError(null);
+
+        listAgeCategoriesWithGroups(ac.signal)
+            .then((items) => setAgeCategories(items))
+            .catch((e: any) => setCatsError(e?.message ?? 'Failed to load age categories'))
+            .finally(() => setLoadingCats(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    // init create vs edit
+    // Only re-initialize when switching to a different indicator (uuid changes),
+    // not when individual fields change. This prevents re-initializing during
+    // typing/editing of the form.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => {
+        if (!open) return;
+
+        if (mode === 'edit' && initial?.uuid) {
+            const cfg = safeParseJson<Partial<FinalIndicatorAuthoringV1>>(initial.configJson) ?? {};
+
+            setBasics({
+                name: initial.name ?? '',
+                code: initial.code ?? '',
+                description: initial.description ?? '',
+            });
+
+            setBaseIndicatorId(String(cfg.baseIndicatorId ?? ''));
+            setAgeCategoryCode(String(cfg.ageGroupSetCode ?? cfg.ageCategoryCode ?? '')); // tolerate both keys
+            setGenders((cfg.genders as any) ?? ['F', 'M']);
+
+            setSqlPreview(String(cfg.sqlPreview ?? initial.sqlTemplate ?? ''));
+
+            // keep preview dates as-is (user controlled)
+            return;
+        }
+
+        // create defaults
+        setBasics({ name: '', code: '', description: '' });
+        setBaseIndicatorId('');
+        setAgeCategoryCode('');
+        setGenders(['F', 'M']);
+        setSqlPreview('');
+        setBaseFull(null);
+        setBaseError(null);
+        // preview dates remain (or you can reset here if desired)
+    // Only re-initialize when switching to a different indicator (uuid changes),
+    // not when individual fields change. This prevents re-initializing during
+    // typing/editing of the form.
+    /* eslint-disable react-hooks/exhaustive-deps */
+    }, [open, mode, initial?.uuid]);
+
+    // load full base indicator
+    React.useEffect(() => {
+        if (!open) return;
+        if (!baseIndicatorId) {
+            setBaseFull(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingBase(true);
+        setBaseError(null);
+
+        getIndicator(baseIndicatorId, ac.signal, 'full')
+            .then((full) => setBaseFull(full))
+            .catch((e: any) => setBaseError(e?.message ?? 'Failed to load selected base indicator'))
+            .finally(() => setLoadingBase(false));
+
+        return () => ac.abort();
+    }, [open, baseIndicatorId]);
+
+    // compute sql preview
+    React.useEffect(() => {
+        if (!open) return;
+
+        if (!baseFull || !ageCategoryCode) {
+            setSqlPreview('');
+            return;
+        }
+
+        const computeSql = async () => {
+            // For composite base indicators, use the async version
+            if (baseFull.kind === 'COMPOSITE') {
+                const sql = await buildFinalIndicatorSqlAsync({
+                    baseIndicator: baseFull,
+                    ageCategoryCode,
+                    genders,
+                    getIndicator: async (uuid) => {
+                        try {
+                            return await getIndicator(uuid, undefined, 'full');
+                        } catch {
+                            return null;
+                        }
+                    },
+                    compilerOptions: { allowRetired: true }
+                });
+                setSqlPreview(sql);
+            } else {
+                // For BASE indicators, use the sync version
+                const sql = buildFinalIndicatorSql({
+                    baseIndicator: baseFull,
+                    ageCategoryCode,
+                    genders,
+                });
+                setSqlPreview(sql);
+            }
+        };
+
+        computeSql();
+    }, [open, baseFull, ageCategoryCode, genders]);
+
+    const canSubmit =
+        Boolean(basics.name.trim()) &&
+        Boolean(baseIndicatorId) &&
+        Boolean(ageCategoryCode) &&
+        Boolean(sqlPreview.trim());
+
+    const submit = async () => {
+        if (!canSubmit || !baseFull) return;
+
+        const finalCode = basics.code.trim() ? basics.code.trim().toUpperCase() : toCode(basics.name);
+
+        // store both keys for forward compatibility (you can later remove ageGroupSetCode)
+        const authoring: any = {
+            version: 1,
+            baseIndicatorId,
+            ageCategoryCode,
+            ageGroupSetCode: ageCategoryCode,
+            genders,
+            sqlPreview,
+        };
+
+        const payload: Partial<IndicatorDto> = {
+            name: basics.name.trim(),
+            code: finalCode,
+            description: basics.description.trim() || undefined,
+            kind: 'FINAL',
+            defaultValueType: 'NUMBER',
+            themeUuid: null,
+            configJson: JSON.stringify(authoring, null, 2),
+            sqlTemplate: sqlPreview,
+        };
+
+        if (mode === 'edit' && initial?.uuid) {
+            if (!onUpdate) throw new Error('onUpdate handler is required for edit mode');
+            await onUpdate(initial.uuid, payload);
+        } else {
+            await onCreate(payload);
+        }
+
+        onSaved();
+    };
+
+
+    return (
+        <Modal
+            open={open}
+            onRequestClose={onClose}
+            modalHeading={mode === 'edit' ? 'Edit Final Indicator' : 'Create Final Indicator'}
+            primaryButtonText={mode === 'edit' ? 'Update Indicator' : 'Save Indicator'}
+            secondaryButtonText="Cancel"
+            onRequestSubmit={submit}
+            primaryButtonDisabled={!canSubmit}
+            size="lg"
+        >
+            <Stack gap={6}>
+                {loadingCats ? <InlineLoading description="Loading age categories…" /> : null}
+                {catsError ? <InlineNotification kind="error" lowContrast title="Age categories" subtitle={catsError} /> : null}
+
+                <FinalIndicatorBasicsSection value={basics} onChange={setBasics} />
+
+                <hr style={{ border: 0, borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }} />
+
+                <FinalIndicatorPickerSection
+                    ageCategories={ageCategories}
+                    selectedBaseId={baseIndicatorId}
+                    selectedAgeCategoryCode={ageCategoryCode}
+                    onChangeBaseId={setBaseIndicatorId}
+                    onChangeAgeCategoryCode={setAgeCategoryCode}
+                />
+
+                {loadingBase ? <InlineLoading description="Loading base indicator details…" /> : null}
+                {baseError ? <InlineNotification kind="error" lowContrast title="Base indicator" subtitle={baseError} /> : null}
+
+                <FinalIndicatorDisaggregationSection genders={genders} onChange={setGenders} />
+
+                <FinalIndicatorResultsPreviewSection
+                    sql={sqlPreview}
+                    maxRows={200}
+                    startDate={previewStartDate}
+                    endDate={previewEndDate}
+                    onChangeStartDate={setPreviewStartDate}
+                    onChangeEndDate={setPreviewEndDate}
+                />
+            </Stack>
+        </Modal>
+    );
+}

package/src/components/indicators/custom-condition-input.component.tsx

@@ -0,0 +1,310 @@
+import React from 'react';
+import { Stack, TextInput, Button, Select, SelectItem, Tag } from '@carbon/react';
+
+type ConditionOperator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'IN' | 'NOT IN' | 'LIKE' | 'IS NULL' | 'IS NOT NULL' | 'BETWEEN';
+
+type CustomCondition = {
+    id: string;
+    column: string;
+    operator: ConditionOperator;
+    value: string | string[] | boolean;
+    wildcardMode?: 'none' | 'contains' | 'startsWith' | 'endsWith';
+};
+
+type Props = {
+    conditions: CustomCondition[];
+    onChange: (conditions: CustomCondition[]) => void;
+};
+
+const OPERATOR_OPTIONS: Array<{ value: ConditionOperator; label: string; requiresValue: boolean }> = [
+    { value: '=', label: 'Equals', requiresValue: true },
+    { value: '!=', label: 'Not Equals', requiresValue: true },
+    { value: '>', label: 'Greater Than', requiresValue: true },
+    { value: '>=', label: 'Greater Than or Equal', requiresValue: true },
+    { value: '<', label: 'Less Than', requiresValue: true },
+    { value: '<=', label: 'Less Than or Equal', requiresValue: true },
+    { value: 'IN', label: 'IN (comma-separated)', requiresValue: true },
+    { value: 'NOT IN', label: 'NOT IN (comma-separated)', requiresValue: true },
+    { value: 'LIKE', label: 'LIKE (pattern matching)', requiresValue: true },
+    { value: 'IS NULL', label: 'IS NULL', requiresValue: false },
+    { value: 'IS NOT NULL', label: 'IS NOT NULL', requiresValue: false },
+    { value: 'BETWEEN', label: 'BETWEEN (two values)', requiresValue: true },
+];
+
+/**
+ * CustomConditionInput - allows users to define custom column conditions
+ * beyond what's configured in the theme.
+ */
+export default function CustomConditionInput({ conditions, onChange }: Props) {
+    const [newCondition, setNewCondition] = React.useState<{
+        column: string;
+        operator: ConditionOperator;
+        value: string;
+        wildcardMode: 'none' | 'contains' | 'startsWith' | 'endsWith';
+    }>({
+        column: '',
+        operator: '=',
+        value: '',
+        wildcardMode: 'contains', // Default to contains for LIKE
+    });
+
+    const addCondition = () => {
+        if (!newCondition.column.trim()) return;
+
+        const operatorConfig = OPERATOR_OPTIONS.find((opt) => opt.value === newCondition.operator);
+        if (operatorConfig?.requiresValue && !newCondition.value.trim()) return;
+
+        const id = `custom_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const condition: CustomCondition = {
+            id,
+            column: newCondition.column.trim(),
+            operator: newCondition.operator,
+            value: getValueForOperator(newCondition.operator, newCondition.value),
+            wildcardMode: newCondition.operator === 'LIKE' ? newCondition.wildcardMode : undefined,
+        };
+
+        onChange([...conditions, condition]);
+
+        // Reset for next condition
+        setNewCondition({
+            column: '',
+            operator: '=',
+            value: '',
+            wildcardMode: 'contains',
+        });
+    };
+
+    const removeCondition = (id: string) => {
+        onChange(conditions.filter((c) => c.id !== id));
+    };
+
+    const getValueForOperator = (operator: ConditionOperator, input: string): string | string[] | boolean => {
+        if (operator === 'IS NULL' || operator === 'IS NOT NULL') {
+            return true; // Toggle is checked
+        }
+        if (operator === 'IN' || operator === 'NOT IN') {
+            return input.split(',').map((v) => v.trim()).filter(Boolean);
+        }
+        if (operator === 'BETWEEN') {
+            const parts = input.split(',').map((v) => v.trim()).filter(Boolean);
+            if (parts.length === 2) {
+                return JSON.stringify({ start: parts[0], end: parts[1] });
+            }
+            return input;
+        }
+        return input;
+    };
+
+    const operatorConfig = OPERATOR_OPTIONS.find((opt) => opt.value === newCondition.operator);
+
+    return (
+        <div>
+            <div style={{ marginBottom: '1rem' }}>
+                <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Add Custom Condition</div>
+                <Stack gap={3}>
+                    {/* Column Input */}
+                    <div>
+                        <label
+                            htmlFor="custom-column"
+                            style={{
+                                display: 'block',
+                                marginBottom: '0.25rem',
+                                fontSize: '0.75rem',
+                                color: 'var(--cds-text-secondary, #525252)',
+                            }}
+                        >
+                            Column name
+                        </label>
+                        <TextInput
+                            id="custom-column"
+                            labelText=""
+                            value={newCondition.column}
+                            placeholder="e.g., a.status, a.encounter_type"
+                            onChange={(e) =>
+                                setNewCondition({ ...newCondition, column: (e.target as HTMLInputElement).value })
+                            }
+                        />
+                    </div>
+
+                    {/* Operator Select */}
+                    <div style={{ maxWidth: '300px' }}>
+                        <Select
+                            id="custom-operator"
+                            labelText="Operator"
+                            value={newCondition.operator}
+                            onChange={(e) =>
+                                setNewCondition({
+                                    ...newCondition,
+                                    operator: e.target.value as ConditionOperator,
+                                })
+                            }
+                        >
+                            {OPERATOR_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                            ))}
+                        </Select>
+                    </div>
+
+                    {/* Value Input - only show if operator requires a value */}
+                    {operatorConfig?.requiresValue && (
+                        <div>
+                            <label
+                                htmlFor="custom-value"
+                                style={{
+                                    display: 'block',
+                                    marginBottom: '0.25rem',
+                                    fontSize: '0.75rem',
+                                    color: 'var(--cds-text-secondary, #525252)',
+                                }}
+                            >
+                                Value
+                                {newCondition.operator === 'IN' || newCondition.operator === 'NOT IN'
+                                    ? ' (comma-separated)'
+                                    : newCondition.operator === 'BETWEEN'
+                                      ? ' (two values, comma-separated)'
+                                      : ''}
+                            </label>
+                            <TextInput
+                                id="custom-value"
+                                labelText=""
+                                value={newCondition.value}
+                                placeholder={
+                                    newCondition.operator === 'IN' || newCondition.operator === 'NOT IN'
+                                        ? 'e.g., 1,2,3 or a,b,c'
+                                        : newCondition.operator === 'BETWEEN'
+                                          ? 'e.g., 10,50'
+                                          : 'Enter value'
+                                }
+                                onChange={(e) =>
+                                    setNewCondition({ ...newCondition, value: (e.target as HTMLInputElement).value })
+                                }
+                            />
+
+                            {/* Wildcard options for LIKE operator */}
+                            {newCondition.operator === 'LIKE' && (
+                                <div style={{ marginTop: '0.5rem' }}>
+                                    <label
+                                        style={{
+                                            display: 'block',
+                                            marginBottom: '0.25rem',
+                                            fontSize: '0.75rem',
+                                            color: 'var(--cds-text-secondary, #525252)',
+                                        }}
+                                    >
+                                        Wildcard pattern
+                                    </label>
+                                    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}>
+                                            <input
+                                                type="radio"
+                                                name="wildcard-mode"
+                                                value="contains"
+                                                checked={newCondition.wildcardMode === 'contains'}
+                                                onChange={() => setNewCondition({ ...newCondition, wildcardMode: 'contains' })}
+                                            />
+                                            <span style={{ fontSize: '0.875rem' }}>Contains (%value%)</span>
+                                        </label>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}>
+                                            <input
+                                                type="radio"
+                                                name="wildcard-mode"
+                                                value="startsWith"
+                                                checked={newCondition.wildcardMode === 'startsWith'}
+                                                onChange={() => setNewCondition({ ...newCondition, wildcardMode: 'startsWith' })}
+                                            />
+                                            <span style={{ fontSize: '0.875rem' }}>Starts with (value%)</span>
+                                        </label>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}>
+                                            <input
+                                                type="radio"
+                                                name="wildcard-mode"
+                                                value="endsWith"
+                                                checked={newCondition.wildcardMode === 'endsWith'}
+                                                onChange={() => setNewCondition({ ...newCondition, wildcardMode: 'endsWith' })}
+                                            />
+                                            <span style={{ fontSize: '0.875rem' }}>Ends with (%value)</span>
+                                        </label>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}>
+                                            <input
+                                                type="radio"
+                                                name="wildcard-mode"
+                                                value="none"
+                                                checked={newCondition.wildcardMode === 'none'}
+                                                onChange={() => setNewCondition({ ...newCondition, wildcardMode: 'none' })}
+                                            />
+                                            <span style={{ fontSize: '0.875rem' }}>None (exact match)</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    <Button onClick={addCondition} size="sm">
+                        Add Condition
+                    </Button>
+                </Stack>
+            </div>
+
+            {/* List of Added Conditions */}
+            {conditions.length > 0 && (
+                <div>
+                    <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Custom Conditions</div>
+                    <Stack gap={3}>
+                        {conditions.map((condition) => (
+                            <div
+                                key={condition.id}
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.5rem',
+                                    padding: '0.5rem',
+                                    backgroundColor: 'var(--cds-background, #ffffff)',
+                                    border: '1px solid var(--cds-interactive-01, #0f62fe)',
+                                    borderRadius: '0.25rem',
+                                }}
+                            >
+                                <Tag type="blue" style={{ margin: 0 }}>
+                                    {condition.column}
+                                </Tag>
+                                <span>{condition.operator}</span>
+                                {condition.wildcardMode && condition.operator === 'LIKE' && (
+                                    <Tag type="cool-gray" style={{ margin: 0, fontSize: '0.75rem' }}>
+                                        {condition.wildcardMode === 'contains' ? '%value%' :
+                                         condition.wildcardMode === 'startsWith' ? 'value%' :
+                                         condition.wildcardMode === 'endsWith' ? '%value' : 'exact'}
+                                    </Tag>
+                                )}
+                                {typeof condition.value === 'boolean' ? (
+                                    <span style={{ color: 'var(--cds-text-secondary, #525252)' }}>
+                                        (toggle enabled)
+                                    </span>
+                                ) : Array.isArray(condition.value) ? (
+                                    <Tag type="cool-gray" style={{ margin: 0 }}>
+                                        {condition.value.join(', ')}
+                                    </Tag>
+                                ) : (
+                                    <span style={{ fontFamily: 'monospace' }}>
+                                        {String(condition.value)}
+                                    </span>
+                                )}
+                                <Button
+                                    size="sm"
+                                    kind="ghost"
+                                    hasIconOnly
+                                    renderIcon={() => <span>×</span>}
+                                    onClick={() => removeCondition(condition.id)}
+                                    style={{ marginLeft: 'auto' }}
+                                >
+                                    Remove
+                                </Button>
+                            </div>
+                        ))}
+                    </Stack>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export type { CustomCondition };