Skip to content

Commit 4157bb8

Browse files
TucchhaaTucchhaa
authored
Appointment Form Redesign: Implement Main Form (#31191)
Signed-off-by: Eldar Iusupzhanov <84278206+Tucchhaa@users.noreply.github.com>
1 parent 9943587 commit 4157bb8

172 files changed

Lines changed: 2731 additions & 1317 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/react-storybook/stories/scheduler/SchedulerAppointmentForm.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import dxScheduler from "devextreme/ui/scheduler";
3+
import { wrapDxWithReact } from "../utils";
4+
import { data, resources } from "./data";
5+
6+
const Scheduler = wrapDxWithReact(dxScheduler);
7+
8+
const meta: Meta<typeof Scheduler> = {
9+
title: 'Components/Scheduler/AppointmentForm',
10+
component: Scheduler,
11+
parameters: {
12+
layout: 'padded',
13+
},
14+
};
15+
16+
export default meta;
17+
18+
type Story = StoryObj<typeof Scheduler>;
19+
20+
export const Overview: Story = {
21+
args: {
22+
'editing.allowAdding': true,
23+
'editing.allowUpdating': true,
24+
'editing.allowDeleting': true,
25+
'editing.allowDragging': true,
26+
'editing.allowResizing': true,
27+
'editing.allowTimeZoneEditing': false,
28+
resources,
29+
height: 600,
30+
views: ['day', 'week', 'workWeek', 'month'],
31+
currentView: 'workWeek',
32+
currentDate: new Date(2021, 3, 29),
33+
dataSource: data
34+
},
35+
argTypes: {
36+
'editing.allowAdding': {
37+
control: 'boolean',
38+
},
39+
'editing.allowUpdating': {
40+
control: 'boolean',
41+
},
42+
'editing.allowTimeZoneEditing': {
43+
control: 'boolean',
44+
},
45+
'showResources': {
46+
control: 'boolean',
47+
},
48+
'resources': {
49+
control: 'boolean',
50+
mapping: { true: resources, false: [] },
51+
}
52+
},
53+
}

‎apps/react-storybook/stories/scheduler/data.ts‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,175 @@ export const assignees = [
1717
color: '#7b49d3',
1818
},
1919
];
20+
21+
export const rooms = [
22+
{
23+
text: 'Room 1',
24+
id: 1,
25+
color: '#00af2c',
26+
}, {
27+
text: 'Room 2',
28+
id: 2,
29+
color: '#56ca85',
30+
}, {
31+
text: 'Room 3',
32+
id: 3,
33+
color: '#8ecd3c',
34+
},
35+
];
36+
37+
export const priorities = [
38+
{
39+
text: 'High',
40+
id: 1,
41+
color: '#cc5c53',
42+
}, {
43+
text: 'Low',
44+
id: 2,
45+
color: '#ff9747',
46+
},
47+
];
48+
49+
export const resources = [
50+
{
51+
fieldExpr: 'roomId',
52+
dataSource: rooms,
53+
label: 'Room',
54+
}, {
55+
fieldExpr: 'priorityId',
56+
dataSource: priorities,
57+
label: 'Priority',
58+
}, {
59+
fieldExpr: 'assigneeId',
60+
allowMultiple: true,
61+
dataSource: assignees,
62+
label: 'Assignee',
63+
}
64+
];
65+
66+
export const data = [
67+
{
68+
text: 'Watercolor Landscape',
69+
assigneeId: [4],
70+
roomId: 1,
71+
priorityId: 2,
72+
startDate: new Date('2021-04-26T17:30:00.000Z'),
73+
endDate: new Date('2021-04-26T19:00:00.000Z'),
74+
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
75+
},
76+
{
77+
text: 'Website Re-Design Plan',
78+
assigneeId: [4],
79+
roomId: 1,
80+
priorityId: 2,
81+
startDate: new Date('2021-04-26T16:30:00.000Z'),
82+
endDate: new Date('2021-04-26T18:30:00.000Z'),
83+
}, {
84+
text: 'Book Flights to San Fran for Sales Trip',
85+
assigneeId: [2],
86+
roomId: 2,
87+
priorityId: 1,
88+
startDate: new Date('2021-04-26T19:00:00.000Z'),
89+
endDate: new Date('2021-04-26T20:00:00.000Z'),
90+
allDay: true,
91+
}, {
92+
text: 'Install New Router in Dev Room',
93+
assigneeId: [1],
94+
roomId: 1,
95+
priorityId: 2,
96+
startDate: new Date('2021-04-26T21:30:00.000Z'),
97+
endDate: new Date('2021-04-26T22:30:00.000Z'),
98+
}, {
99+
text: 'Approve Personal Computer Upgrade Plan',
100+
assigneeId: [3],
101+
roomId: 2,
102+
priorityId: 2,
103+
startDate: new Date('2021-04-27T17:00:00.000Z'),
104+
endDate: new Date('2021-04-27T18:00:00.000Z'),
105+
}, {
106+
text: 'Final Budget Review',
107+
assigneeId: [1],
108+
roomId: 1,
109+
priorityId: 1,
110+
startDate: new Date('2021-04-27T19:00:00.000Z'),
111+
endDate: new Date('2021-04-27T20:35:00.000Z'),
112+
}, {
113+
text: 'New Brochures',
114+
assigneeId: [4],
115+
roomId: 3,
116+
priorityId: 2,
117+
startDate: new Date('2021-04-27T21:30:00.000Z'),
118+
endDate: new Date('2021-04-27T22:45:00.000Z'),
119+
}, {
120+
text: 'Install New Database',
121+
assigneeId: [2],
122+
roomId: 3,
123+
priorityId: 1,
124+
startDate: new Date('2021-04-28T16:45:00.000Z'),
125+
endDate: new Date('2021-04-28T18:15:00.000Z'),
126+
}, {
127+
text: 'Approve New Online Marketing Strategy',
128+
assigneeId: [4],
129+
roomId: 2,
130+
priorityId: 1,
131+
startDate: new Date('2021-04-28T19:00:00.000Z'),
132+
endDate: new Date('2021-04-28T21:00:00.000Z'),
133+
}, {
134+
text: 'Upgrade Personal Computers',
135+
assigneeId: [2],
136+
roomId: 2,
137+
priorityId: 2,
138+
startDate: new Date('2021-04-28T22:15:00.000Z'),
139+
endDate: new Date('2021-04-28T23:30:00.000Z'),
140+
}, {
141+
text: 'Customer Workshop',
142+
assigneeId: [3],
143+
roomId: 3,
144+
priorityId: 1,
145+
startDate: new Date('2021-04-29T18:00:00.000Z'),
146+
endDate: new Date('2021-04-29T19:00:00.000Z'),
147+
allDay: true,
148+
}, {
149+
text: 'Prepare 2021 Marketing Plan',
150+
assigneeId: [1],
151+
roomId: 1,
152+
priorityId: 2,
153+
startDate: new Date('2021-04-29T18:00:00.000Z'),
154+
endDate: new Date('2021-04-29T20:30:00.000Z'),
155+
}, {
156+
text: 'Brochure Design Review',
157+
assigneeId: [4],
158+
roomId: 1,
159+
priorityId: 1,
160+
startDate: new Date('2021-04-29T21:00:00.000Z'),
161+
endDate: new Date('2021-04-29T22:30:00.000Z'),
162+
}, {
163+
text: 'Create Icons for Website',
164+
assigneeId: [3],
165+
roomId: 3,
166+
priorityId: 1,
167+
startDate: new Date('2021-04-30T17:00:00.000Z'),
168+
endDate: new Date('2021-04-30T18:30:00.000Z'),
169+
}, {
170+
text: 'Upgrade Server Hardware',
171+
assigneeId: [4],
172+
roomId: 2,
173+
priorityId: 2,
174+
startDate: new Date('2021-04-30T21:30:00.000Z'),
175+
endDate: new Date('2021-04-30T23:00:00.000Z'),
176+
}, {
177+
text: 'Submit New Website Design',
178+
assigneeId: [1],
179+
roomId: 1,
180+
priorityId: 2,
181+
startDate: new Date('2021-04-30T23:30:00.000Z'),
182+
endDate: new Date('2021-05-01T01:00:00.000Z'),
183+
}, {
184+
text: 'Launch New Website',
185+
assigneeId: [2],
186+
roomId: 3,
187+
priorityId: 1,
188+
startDate: new Date('2021-04-30T19:20:00.000Z'),
189+
endDate: new Date('2021-04-30T21:00:00.000Z'),
190+
},
191+
];

e2e/testcafe-devextreme/tests/scheduler/common/a11y/popup.ts renamed to e2e/testcafe-devextreme/tests/scheduler/common/a11y/legacyPopup.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ test('Scheduler edit appointment is accessible', async (t) => {
1616
const scheduler = new Scheduler('#container');
1717

1818
await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
19-
await t.expect(scheduler.appointmentPopup.isVisible()).ok();
19+
await t.expect(scheduler.legacyAppointmentPopup.isVisible()).ok();
2020

2121
await a11yCheck(t, checkOptions, '#container');
2222
}).before(async () => {
@@ -28,6 +28,7 @@ test('Scheduler edit appointment is accessible', async (t) => {
2828
endDate: new Date('2021-03-29T22:30:00.000Z'),
2929
recurrenceRule: 'FREQ=DAILY',
3030
}],
31+
editing: { legacyForm: true },
3132
recurrenceEditMode: 'series',
3233
currentView: 'week',
3334
currentDate: new Date(2021, 2, 28),
@@ -37,20 +38,20 @@ test('Scheduler edit appointment is accessible', async (t) => {
3738
test('Scheduler recurrence editor repeat end accessible', async (t) => {
3839
const scheduler = new Scheduler('#container');
3940
const getItem = (index: number) => scheduler
40-
.appointmentPopup
41+
.legacyAppointmentPopup
4142
.getEndRepeatRadioButton(index);
4243
const getAriaLabel = (index: number) => getItem(index)
4344
.getAttribute('aria-label');
4445

4546
await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
46-
await t.expect(scheduler.appointmentPopup.isVisible()).ok();
47+
await t.expect(scheduler.legacyAppointmentPopup.isVisible()).ok();
4748

4849
await t
4950
.expect(getAriaLabel(1))
5051
.eql('On 22 May 2025')
5152
.expect(getAriaLabel(2))
5253
.eql('After')
53-
.typeText(scheduler.appointmentPopup.repeatUntilElement, '2026')
54+
.typeText(scheduler.legacyAppointmentPopup.repeatUntilElement, '2026')
5455
.click(getItem(1)) // unfocus input
5556
.expect(getAriaLabel(1))
5657
.eql('On 22 May 2026')
@@ -68,7 +69,7 @@ test('Scheduler recurrence editor repeat end accessible', async (t) => {
6869
.eql('On')
6970
.expect(getAriaLabel(2))
7071
.eql('After 1 occurrence(s)')
71-
.typeText(scheduler.appointmentPopup.repeatCountElement, '3')
72+
.typeText(scheduler.legacyAppointmentPopup.repeatCountElement, '3')
7273
.click(getItem(2)) // unfocus input
7374
.expect(getAriaLabel(1))
7475
.eql('On')
@@ -77,6 +78,7 @@ test('Scheduler recurrence editor repeat end accessible', async (t) => {
7778
}).before(async () => {
7879
await createWidget('dxScheduler', {
7980
timeZone: 'America/Los_Angeles',
81+
editing: { legacyForm: true },
8082
dataSource: [{
8183
text: 'Install New Router in Dev Room',
8284
startDate: new Date('2021-03-29T21:30:00.000Z'),

‎e2e/testcafe-devextreme/tests/scheduler/common/agenda/keyField.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ test('Wrong behavior: editing recurrence appointment does not affect to appointm
120120

121121
await t.doubleClick(scheduler.getAppointment('Test').element);
122122
await t
123-
.typeText(scheduler.appointmentPopup.subjectElement, 'Updated', { replace: true })
124-
.click(scheduler.appointmentPopup.doneButton);
123+
.typeText(scheduler.appointmentPopup.textEditor.element, 'Updated', { replace: true })
124+
.click(scheduler.appointmentPopup.saveButton.element);
125125

126126
await t.expect(scheduler.getAppointment('Updated').element.exists).ok();
127127
}).before(async () => {

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=fluent.blue.light).png‎

27.3 KB

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=fluent.blue.light.compact).png‎

22.2 KB

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=generic.light).png‎

27.9 KB

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=generic.light.compact).png‎

23.4 KB

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=material.blue.light).png‎

30.2 KB

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=false,allDay=false,theme=material.blue.light.compact).png‎

23.5 KB

0 commit comments

Comments
 (0)