All files / blong-browser/src/components/Editor/stories Report.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Editor in "report" mode — queryAction drives table re-fetch when "Run Report" is submitted.
 *
 * The params card collects filter values; the result table fetches server-side data on "Run".
 * Paging and sorting are handled by the table widget's built-in listAction mechanism.
 */
import type {Meta} from '@storybook/react-vite';
import type {WidgetType} from '../../../index.js';
import {Editor} from '../Editor.js';
import type {StoryFn} from '../Editor.stories.js';

const meta: Meta<typeof Editor> = {title: 'Editor/Report', component: Editor};
export default meta;

// ── Dispatch mock for the report story ──────────────────────────────────────
// Handled by the global withDispatch decorator via coralCoralFind in dispatch.tsx.
// The 'coralCoralFind' handler already supports cascade params (flat filter keys).

// ── Schema ────────────────────────────────────────────────────────────────────

const reportSchema = {
    properties: {
        // Params card fields (flat filter — passed directly to the list action)
        coralName: {title: 'Name', type: 'string'},
        coralType: {
            title: 'Type',
            widget: {
                type: 'select' as WidgetType,
                options: [
                    {value: '', label: 'All'},
                    {value: 'hard', label: 'Hard Coral'},
                    {value: 'soft', label: 'Soft Coral'},
                    {value: 'fire', label: 'Fire Coral'},
                ],
            },
        },
        // Result table (populated by listAction via reportParams)
        result: {
            type: 'array',
            title: '',
            widget: {
                type: 'table' as WidgetType,
                listAction: 'coralCoralFind',
                resultSet: 'items',
                keyField: 'coralId',
                columns: ['coralName', 'coralType', 'maxDepth', 'endangered'],
                actions: {allowEdit: false, allowDelete: false},
            },
            items: {
                properties: {
                    coralId: {title: 'ID'},
                    coralName: {title: 'Name'},
                    coralType: {title: 'Type'},
                    maxDepth: {title: 'Max Depth (m)', type: 'number'},
                    endangered: {title: 'Endangered', type: 'boolean'},
                },
            },
        },
    },
};

const reportCards = {
    params: {label: 'Report Parameters', widgets: ['coralName', 'coralType']},
    result: {label: 'Results', widgets: ['result']},
};

const reportLayouts = {report: ['params', 'result']};

/**
 * Basic report — params card with name/type filters, result table populated on "Run Report".
 * Uses `coralCoralFind` from the global dispatch mock (supports paging, sorting, cascade filter).
 */
export const BasicReport: StoryFn = () => (
    <Editor
        schema={reportSchema}
        cards={reportCards}
        layouts={reportLayouts}
        layout="report"
        queryAction="coralCoralFind"
        title="Coral Report"
    />
);

/**
 * Pre-populated — starts with `coralType: 'hard'` so the table fetches hard corals on first run.
 * Demonstrates how to open a report with default filter values.
 */
export const PrePopulated: StoryFn = () => (
    <Editor
        schema={reportSchema}
        cards={reportCards}
        layouts={reportLayouts}
        layout="report"
        queryAction="coralCoralFind"
        title="Hard Coral Report"
        value={{coralType: 'hard'}}
    />
);

// Interact play: wait for blong to load, type in params and click Run Report
BasicReport.play = async ({canvas, userEvent}) => {
    // The report table should not show data before "Run Report" is clicked
    const nameInput = await canvas.findByLabelText('Name', {}, {timeout: 5000}).catch(() => null);
    if (!nameInput) return; // Storybook dispatch not ready
    await userEvent.tripleClick(nameInput);
    await userEvent.type(nameInput, 'Brain');
    await new Promise(resolve => setTimeout(resolve, 200));
    // Click "Run Report"
    const runBtn = canvas
        .queryAllByRole('button')
        .find(
            (b: HTMLElement) =>
                b.getAttribute('title') === 'Run Report' || b.textContent?.trim() === 'Run Report',
        );
    if (runBtn) await userEvent.click(runBtn);
    await new Promise(resolve => setTimeout(resolve, 500));
};