@epcare/esm-report-builder 0.1.1-pre.13

package/src/components/indicators/base-indicator-basic-fields.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextInput } from '@carbon/react';
+
+type Props = {
+  code: string;
+  name: string;
+  onChangeCode: (next: string) => void;
+  onChangeName: (next: string) => void;
+};
+
+export default function BaseIndicatorBasicFields({ code, name, onChangeCode, onChangeName }: Props) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '0.75rem' }}>
+      <TextInput id="base-code" labelText="Code" value={code} onChange={(e) => onChangeCode((e.target as HTMLInputElement).value)} />
+      <TextInput id="base-name" labelText="Name" value={name} onChange={(e) => onChangeName((e.target as HTMLInputElement).value)} />
+    </div>
+  );
+}

package/src/components/indicators/base-indicator-basics.section.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Select, SelectItem, TextArea, TextInput, Stack } from '@carbon/react';
+
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+import { THEME_OPTIONS, THEME_LABELS } from './types/base-indicator-theme.constants';
+
+type Props = {
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorBasicsSection: React.FC<Props> = ({ state, onChange }) => {
+    return (
+        <Stack gap={5}>
+            <Select
+                id="theme"
+                labelText="Theme"
+                value={state.theme}
+                onChange={(e) => onChange({ theme: (e.target as HTMLSelectElement).value })}
+            >
+                {THEME_OPTIONS.map((key) => (
+                    <SelectItem key={key} value={key} text={THEME_LABELS[key]} />
+                ))}
+            </Select>
+
+            <TextInput
+                id="code"
+                labelText="Code"
+                helperText="Short unique code used in reports (e.g. MAL_PREG)"
+                value={state.code}
+                onChange={(e) => onChange({ code: (e.target as HTMLInputElement).value })}
+                placeholder="e.g. MAL_PREG"
+            />
+
+            <TextInput
+                id="name"
+                labelText="Indicator"
+                value={state.indicatorName}
+                onChange={(e) => onChange({ indicatorName: (e.target as HTMLInputElement).value })}
+                placeholder="e.g. Pregnant Women with Malaria"
+            />
+
+            <TextArea
+                id="desc"
+                labelText="Description"
+                value={state.description}
+                onChange={(e) => onChange({ description: (e.target as HTMLTextAreaElement).value })}
+                placeholder="Short description of what this indicator represents"
+            />
+        </Stack>
+    );
+};
+
+export default BaseIndicatorBasicsSection;

package/src/components/indicators/base-indicator-countby.section.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
+
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+
+type Props = {
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorCountBySection: React.FC<Props> = ({ state, onChange }) => {
+    return (
+        <RadioButtonGroup
+            legendText="Count By"
+            name="countBy"
+            valueSelected={state.countBy}
+            onChange={(val) => onChange({ countBy: val as 'Patients' | 'Encounters' })}
+        >
+            <RadioButton id="cb-patients" labelText="Patients" value="Patients" />
+            <RadioButton id="cb-encounters" labelText="Encounters" value="Encounters" />
+        </RadioButtonGroup>
+    );
+};
+
+export default BaseIndicatorCountBySection;

package/src/components/indicators/base-indicator-criteria.section.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Stack, Search, InlineLoading, FilterableMultiSelect, Select, SelectItem } from '@carbon/react';
+
+import { useConceptSearch } from '../../resources/concepts/useConceptSearch';
+import type { ConceptSummary } from '../../resources/concepts/concept-types';
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+
+type Props = {
+    open: boolean; // to reset when modal opens
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorCriteriaSection: React.FC<Props> = ({ open, state, onChange }) => {
+    const [conceptQuery, setConceptQuery] = React.useState('');
+    const { loading, results, error } = useConceptSearch(conceptQuery);
+
+    // Force-reset Carbon internal selected state on open
+    const [multiKey, setMultiKey] = React.useState(0);
+
+    React.useEffect(() => {
+        if (!open) return;
+        setConceptQuery('');
+        setMultiKey((k) => k + 1);
+        onChange({ conditionConceptUuids: [], conditionConceptLabels: [] });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const itemToString = React.useCallback((item: ConceptSummary | null) => (item ? item.display : ''), []);
+
+    const onSelectedItems = (selectedItems: ConceptSummary[]) => {
+        onChange({
+            conditionConceptUuids: selectedItems.map((x) => x.uuid),
+            conditionConceptLabels: selectedItems.map((x) => x.display),
+        });
+    };
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Criteria</div>
+
+            <Stack gap={4}>
+                <Search
+                    id="concept-search"
+                    labelText="Search concepts"
+                    placeholder="Type to search concepts..."
+                    value={conceptQuery}
+                    onChange={(e) => setConceptQuery((e.target as HTMLInputElement).value)}
+                    size="lg"
+                />
+
+                {loading ? <InlineLoading description="Searching…" /> : null}
+                {error ? (
+                    <div style={{ fontSize: '0.875rem', color: 'var(--cds-text-error, #da1e28)' }}>{error}</div>
+                ) : null}
+
+                <FilterableMultiSelect
+                    key={multiKey}
+                    id="conditionConcepts"
+                    titleText="Condition concept(s)"
+                    items={results}
+                    itemToString={itemToString}
+                    placeholder={results.length ? 'Select concept(s)…' : 'No results'}
+                    helperText="Select 1 concept for '=' filtering, select 2+ for 'IN (...)' filtering"
+                    onChange={(e: any) => onSelectedItems((e.selectedItems ?? []) as ConceptSummary[])}
+                />
+
+                <Select
+                    id="preg"
+                    labelText="Pregnancy Status"
+                    value={state.pregnancyStatus}
+                    onChange={(e) => onChange({ pregnancyStatus: (e.target as HTMLSelectElement).value })}
+                >
+                    {['Pregnant', 'Not pregnant'].map((x) => (
+                        <SelectItem key={x} value={x} text={x} />
+                    ))}
+                </Select>
+            </Stack>
+        </div>
+    );
+};
+
+export default BaseIndicatorCriteriaSection;

package/src/components/indicators/base-indicator-details-form.component.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {Select, SelectItem, TextInput} from '@carbon/react';
+
+export type DataTheme = 'DIAGNOSIS' | 'OBSERVATIONS' | 'ENCOUNTERS';
+
+type Props = {
+    code: string;
+    name: string;
+    theme: DataTheme;
+    unit: 'Patients' | 'Encounters';
+
+    onChangeCode: (v: string) => void;
+    onChangeName: (v: string) => void;
+    onChangeTheme: (v: DataTheme) => void;
+    onChangeUnit: (v: 'Patients' | 'Encounters') => void;
+};
+
+const grid2 = {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '0.75rem',
+} as const;
+
+const BaseIndicatorDetailsForm: React.FC<Props> = ({
+                                                       code,
+                                                       name,
+                                                       theme,
+                                                       unit,
+                                                       onChangeCode,
+                                                       onChangeName,
+                                                       onChangeTheme,
+                                                       onChangeUnit,
+                                                   }) => {
+    return (
+        <>
+            <div style={grid2}>
+                <TextInput
+                    id="base-code"
+                    labelText="Code"
+                    value={code}
+                    onChange={(e) => onChangeCode((e.target as HTMLInputElement).value)}
+                    placeholder="e.g. MAL_CASES"
+                />
+
+                <TextInput
+                    id="base-name"
+                    labelText="Name"
+                    value={name}
+                    onChange={(e) => onChangeName((e.target as HTMLInputElement).value)}
+                    placeholder="e.g. Malaria Cases"
+                />
+            </div>
+
+            <div style={{...grid2, marginTop: '0.75rem'}}>
+                <Select
+                    id="base-theme"
+                    labelText="Data theme"
+                    value={theme}
+                    onChange={(e) => onChangeTheme((e.target as HTMLSelectElement).value as DataTheme)}
+                >
+                    <SelectItem value="DIAGNOSIS" text="Diagnosis Data"/>
+                    <SelectItem value="OBSERVATIONS" text="Observations (coming soon)"/>
+                    <SelectItem value="ENCOUNTERS" text="Encounters (coming soon)"/>
+                </Select>
+
+                <Select
+                    id="base-unit"
+                    labelText="Unit"
+                    value={unit}
+                    onChange={(e) => onChangeUnit((e.target as HTMLSelectElement).value as 'Patients' | 'Encounters')}
+                >
+                    <SelectItem value="Patients" text="Patients"/>
+                    <SelectItem value="Encounters" text="Encounters"/>
+                </Select>
+            </div>
+        </>
+    );
+};
+
+export default BaseIndicatorDetailsForm;

package/src/components/indicators/base-indicator-theme-unit-fields.component.tsx

@@ -0,0 +1,39 @@
+/*
+import React from 'react';
+import { Select, SelectItem, TextInput } from '@carbon/react';
+
+import type { CountingUnit, DataTheme } from './types/indicator-types';
+
+type Props = {
+  theme: DataTheme;
+  unit: CountingUnit;
+
+  onChangeTheme: (next: DataTheme) => void;
+  onChangeUnit: (next: CountingUnit) => void;
+};
+
+export default function BaseIndicatorThemeUnitFields({ theme, unit, onChangeTheme, onChangeUnit }: Props) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+      <Select
+        id="base-theme"
+        labelText="Data theme"
+        value={theme}
+        onChange={(e) => onChangeTheme((e.target as HTMLSelectElement).value as DataTheme)}
+      >
+        <SelectItem value="DIAGNOSIS" text="Diagnosis Data" />
+        <SelectItem value="OBSERVATIONS" text="Observations (coming soon)" />
+        <SelectItem value="ENCOUNTERS" text="Encounters (coming soon)" />
+      </Select>
+
+      {/!* keeping this as TextInput allows future custom units, but we still type it as Patients/Encounters for now *!/}
+      <TextInput
+        id="base-unit"
+        labelText="Unit"
+        value={unit}
+        onChange={(e) => onChangeUnit(((e.target as HTMLInputElement).value as CountingUnit) || 'Patients')}
+      />
+    </div>
+  );
+}
+*/