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

package/src/components/data-themes/data-themes-page.component.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Button, Search, Stack } from '@carbon/react';
+import { Add } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+
+import DataThemesTable from './data-themes-table.component';
+import DataThemeModal from './data-theme-modal.component';
+import Header from '../shared/header/header.component';
+
+import type { DataTheme, DataThemeRow } from '../../types/theme/data-theme.types';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+import { listThemes, createTheme, updateTheme, deleteTheme, getTheme } from '../../resources/theme/data-theme.api';
+
+export default function DataThemesPage() {
+    const { t } = useTranslation();
+    const { has: hasPrivilege } = useReportBuilderPrivileges();
+    const canEditTheme = hasPrivilege(RB.THEME_ADD, RB.THEME_EDIT);
+    const canDeleteTheme = hasPrivilege(RB.THEME_PURGE);
+    const [q, setQ] = React.useState('');
+    const [rows, setRows] = React.useState<DataThemeRow[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState<'create' | 'edit'>('create');
+    const [editing, setEditing] = React.useState<DataTheme | null>(null);
+
+    const load = React.useCallback(
+        (signal?: AbortSignal) => {
+            setLoading(true);
+            setError(null);
+
+            return listThemes(q, signal)
+                .then((data) => {
+                    const next: DataThemeRow[] = (data ?? []).map((t) => ({
+                        uuid: t.uuid ?? '',
+                        name: t.name ?? '',
+                        code: t.code ?? '',
+                        domain: t.domain,
+                        description: t.description,
+                        retired: t.retired,
+                    }));
+                    setRows(next.filter((r) => Boolean(r.uuid)));
+                })
+                .catch((e) => setError(e?.message ?? 'Failed to load themes'))
+                .finally(() => setLoading(false));
+        },
+        [q],
+    );
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        load(ac.signal);
+        return () => ac.abort();
+    }, [load]);
+
+    const onCreate = () => {
+        setMode('create');
+        setEditing(null);
+        setOpen(true);
+    };
+
+    const onEdit = async (uuid: string) => {
+        try {
+            setMode('edit');
+            setError(null);
+            setLoading(true);
+
+            // ✅ fetch full record so modal can pre-populate Source/Fields/Metadata
+            const full = await getTheme(uuid);
+            setEditing(full);
+            setOpen(true);
+        } catch (e: any) {
+            setError(e?.message ?? 'Failed to load theme for editing');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const onDelete = async (uuid: string) => {
+        await deleteTheme(uuid, false);
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    const onSave = async (payload: DataTheme) => {
+        if (mode === 'create') {
+            await createTheme(payload);
+        } else {
+            if (!payload.uuid) throw new Error('Missing uuid for update');
+            await updateTheme(payload.uuid, payload);
+        }
+
+        setOpen(false);
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    return (
+        <Stack gap={5}>
+            <Header
+                title={t('dataTheme', 'Data Themes')}
+                subtitle={t('dataThemeSubTitle', ' Define reusable data sources (mamba_* tables/views) for indicators and reporting.')}
+            />
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: '1rem' }}>
+                <div>
+                </div>
+
+                {canEditTheme && (
+                    <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
+                        Create Theme
+                    </Button>
+                )}
+            </div>
+
+            <Search
+                size="lg"
+                labelText="Search"
+                placeholder="Search themes…"
+                value={q}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+            />
+
+            {loading ? <div>Loading…</div> : null}
+            {!loading && error ? <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{error}</div> : null}
+
+            <DataThemesTable rows={rows} onEdit={onEdit} onDelete={onDelete} canEdit={canEditTheme} canDelete={canDeleteTheme} />
+
+            <DataThemeModal
+                open={open}
+                mode={mode}
+                initial={editing}
+                onClose={() => setOpen(false)}
+                onSave={onSave}
+            />
+        </Stack>
+    );
+}

package/src/components/data-themes/data-themes-table.component.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  OverflowMenu,
+  OverflowMenuItem,
+} from '@carbon/react';
+
+import type { DataThemeRow } from '../../types/theme/data-theme.types';
+
+type Props = {
+  rows: DataThemeRow[];
+  onEdit: (uuid: string) => void;
+  onDelete: (uuid: string) => Promise<void> | void;
+  /** Row actions the signed-in user may see (privilege gating). */
+  canEdit?: boolean;
+  canDelete?: boolean;
+};
+
+const headers = [
+  { key: 'name', header: 'Name' },
+  { key: 'code', header: 'Code' },
+  { key: 'domain', header: 'Domain' },
+  { key: 'description', header: 'Description' },
+  { key: 'actions', header: '' },
+];
+
+export default function DataThemesTable({ rows, onEdit, onDelete, canEdit = true, canDelete = true }: Props) {
+  const tableRows = React.useMemo(
+    () =>
+      (rows ?? []).map((r) => ({
+        id: r.uuid,
+        name: r.name,
+        code: r.code,
+        domain: r.domain,
+        description: r.description ?? '',
+        actions: r.uuid,
+      })),
+    [rows],
+  );
+
+  return (
+    <DataTable rows={tableRows} headers={headers}>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
+        <TableContainer title="Data Themes" description="Manage derived data themes used by the indicator builder." {...getTableContainerProps()}>
+          <TableToolbar>
+            <TableToolbarContent />
+          </TableToolbar>
+
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((h) => (
+                  <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                    {h.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow key={row.id} {...getRowProps({ row })}>
+                  {row.cells.map((cell) => {
+                    if (cell.info.header === 'actions') {
+                      return (
+                        <TableCell key={cell.id}>
+                          <OverflowMenu size="sm" ariaLabel="Theme actions">
+                            {canEdit && (
+                              <OverflowMenuItem itemText="Edit" onClick={() => onEdit(row.id)} />
+                            )}
+                            {canDelete && (
+                              <OverflowMenuItem hasDivider isDelete itemText="Delete" onClick={() => onDelete(row.id)} />
+                            )}
+                          </OverflowMenu>
+                        </TableCell>
+                      );
+                    }
+
+                    return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+}

package/src/components/data-themes/icon-registry.ts

@@ -0,0 +1,35 @@
+import {
+    Report,
+    ChartColumn,
+    Medication,
+    Calendar,
+    Hospital,
+    Document,
+    Search,
+    Information,
+    Warning,
+    CheckmarkFilled,
+    List,
+    Tag,
+} from '@carbon/icons-react';
+
+export const themeIconOptions = [
+    { key: 'Report', label: 'Report', Icon: Report },
+    { key: 'ChartColumn', label: 'Chart', Icon: ChartColumn },
+    { key: 'Medication', label: 'Medication', Icon: Medication },
+    { key: 'Calendar', label: 'Appointments', Icon: Calendar },
+    { key: 'Hospital', label: 'Facility', Icon: Hospital },
+    { key: 'Document', label: 'Document', Icon: Document },
+    { key: 'Search', label: 'Search', Icon: Search },
+    { key: 'Information', label: 'Info', Icon: Information },
+    { key: 'Warning', label: 'Warning', Icon: Warning },
+    { key: 'CheckmarkFilled', label: 'Check', Icon: CheckmarkFilled },
+    { key: 'List', label: 'List', Icon: List },
+    { key: 'Tag', label: 'Tag', Icon: Tag },
+] as const;
+
+export type ThemeIconKey = (typeof themeIconOptions)[number]['key'];
+
+export function getThemeIcon(key?: string) {
+    return themeIconOptions.find((x) => x.key === key)?.Icon;
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TextInput, TextArea, Select, SelectItem } from '@carbon/react';
+import type { DataTheme, MainDataDomain } from '../../../types/theme/data-theme.types';
+
+const DOMAINS: Array<{ value: MainDataDomain; text: string }> = [
+    { value: 'DIAGNOSIS', text: 'Diagnosis' },
+    { value: 'OBSERVATIONS', text: 'Observations' },
+    { value: 'TEST_ORDERS', text: 'Test Orders' },
+    { value: 'MEDICATION_ORDERS', text: 'Medication Orders' },
+    { value: 'APPOINTMENTS', text: 'Appointments' },
+    { value: 'MEDICATION_DISPENSE', text: 'Medication Dispense' },
+];
+
+type Props = {
+    value: Pick<DataTheme, 'name' | 'description' | 'code' | 'domain'>;
+    onChange: (next: Props['value']) => void;
+};
+
+export default function DataThemeBasicsSection({ value, onChange }: Props) {
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.75rem' }}>Basics</div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+                <TextInput
+                    id="theme-name"
+                    labelText="Name"
+                    value={value.name}
+                    onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+                />
+                <TextInput
+                    id="theme-code"
+                    labelText="Code"
+                    helperText="Short unique code (e.g. DX_OPD)"
+                    value={value.code}
+                    onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+                />
+            </div>
+
+            <div style={{ marginTop: '0.75rem' }}>
+                <Select
+                    id="theme-domain"
+                    labelText="Main domain"
+                    value={value.domain}
+                    onChange={(e) => onChange({ ...value, domain: (e.target as HTMLSelectElement).value as MainDataDomain })}
+                >
+                    {DOMAINS.map((d) => (
+                        <SelectItem key={d.value} value={d.value} text={d.text} />
+                    ))}
+                </Select>
+            </div>
+
+            <div style={{ marginTop: '0.75rem' }}>
+                <TextArea
+                    id="theme-desc"
+                    labelText="Description"
+                    value={value.description ?? ''}
+                    onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+                />
+            </div>
+        </div>
+    );
+}