All files / blong-browser/src/components/Editor/stories MasterDetail.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Selecting a person in the master table populates the editable detail card.
 * The master table uses selectionMode: 'single' with allowEdit: false (no row-edit buttons).
 * The detail card uses watch: '$.selected.person' with '$.edit.person.*' widget names.
 */
import type {Meta} from '@storybook/react-vite';
import type {StoryFn} from '../Editor.stories.js';
import {Editor} from '../Editor.js';

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

const personValue = {
    person: [
        {personId: 1, fullName: 'John Doe', birthDate: '2000-01-08', nationalId: '777777777'},
        {personId: 2, fullName: 'Jane Doe', birthDate: '2002-03-18', nationalId: '888888888'},
        {personId: 3, fullName: 'Alice Smith', birthDate: '1995-06-12', nationalId: '123456789'},
    ],
};

export const MasterDetail: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                person: {
                    title: '',
                    type: 'array',
                    widget: {
                        type: 'table',
                        selectionMode: 'single',
                        actions: {allowEdit: false},
                        columns: ['fullName', 'nationalId'],
                    },
                    items: {
                        properties: {
                            personId: {title: 'ID', readOnly: true},
                            fullName: {title: 'Full Name', required: true},
                            nationalId: {title: 'National ID'},
                            birthDate: {title: 'Birth Date', format: 'date'},
                        },
                    },
                },
            },
        }}
        cards={{
            master: {
                label: 'Persons',
                className: 'col-12 md:col-4',
                widgets: ['person'],
            },
            detail: {
                label: 'Personal Information',
                className: 'col-12 md:col-5',
                watch: '$.selected.person',
                widgets: [
                    '$.edit.person.fullName',
                    '$.edit.person.birthDate',
                    '$.edit.person.nationalId',
                ],
            },
        }}
        value={personValue}
        editable
        editMode
        layout="edit"
        layouts={{edit: ['master', 'detail']}}
    />
);

MasterDetail.play = async ({canvas, userEvent}) => {
    const johnRow = await canvas.findByText('John Doe');
    await userEvent.click(johnRow);
    await new Promise(resolve => setTimeout(resolve, 200));
};