Appointment Form Redesign: Implement Main Form

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import dxScheduler from "devextreme/ui/scheduler";
+import { wrapDxWithReact } from "../utils";
+import { data, resources } from "./data";
+
+const Scheduler = wrapDxWithReact(dxScheduler);
+
+const meta: Meta<typeof Scheduler> = {
+  title: 'Components/Scheduler/AppointmentForm',
+  component: Scheduler,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Scheduler>;
+
+export const Overview: Story = {
+  args: {
+    'editing.allowAdding': true,
+    'editing.allowUpdating': true,
+    'editing.allowDeleting': true,
+    'editing.allowDragging': true,
+    'editing.allowResizing': true,
+    'editing.allowTimeZoneEditing': false,
+    resources,
+    height: 600,
+    views: ['day', 'week', 'workWeek', 'month'],
+    currentView: 'workWeek',
+    currentDate: new Date(2021, 3, 29),
+    dataSource: data
+  },
+  argTypes: {
+    'editing.allowAdding': { 
+      control: 'boolean',
+    },
+    'editing.allowUpdating': { 
+      control: 'boolean',
+    },
+    'editing.allowTimeZoneEditing': { 
+      control: 'boolean',
+    },
+    'showResources': {
+      control: 'boolean',
+    },
+    'resources': {
+      control: 'boolean',
+      mapping: { true: resources, false: [] },
+    }
+  },
+}

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

@@ -17,3 +17,175 @@ export const assignees = [
     color: '#7b49d3',
   },
 ];
+
+export const rooms = [
+  {
+    text: 'Room 1',
+    id: 1,
+    color: '#00af2c',
+  }, {
+    text: 'Room 2',
+    id: 2,
+    color: '#56ca85',
+  }, {
+    text: 'Room 3',
+    id: 3,
+    color: '#8ecd3c',
+  },
+];
+
+export const priorities = [
+  {
+    text: 'High',
+    id: 1,
+    color: '#cc5c53',
+  }, {
+    text: 'Low',
+    id: 2,
+    color: '#ff9747',
+  },
+];
+
+export const resources = [
+  {
+    fieldExpr: 'roomId',
+    dataSource: rooms,
+    label: 'Room',
+  }, {
+    fieldExpr: 'priorityId',
+    dataSource: priorities,
+    label: 'Priority',
+  }, {
+    fieldExpr: 'assigneeId',
+    allowMultiple: true,
+    dataSource: assignees,
+    label: 'Assignee',
+  }
+];
+
+export const data = [
+  {
+    text: 'Watercolor Landscape',
+    assigneeId: [4],
+    roomId: 1,
+    priorityId: 2,
+    startDate: new Date('2021-04-26T17:30:00.000Z'),
+    endDate: new Date('2021-04-26T19:00:00.000Z'),
+    recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
+  },
+  {
+    text: 'Website Re-Design Plan',
+    assigneeId: [4],
+    roomId: 1,
+    priorityId: 2,
+    startDate: new Date('2021-04-26T16:30:00.000Z'),
+    endDate: new Date('2021-04-26T18:30:00.000Z'),
+  }, {
+    text: 'Book Flights to San Fran for Sales Trip',
+    assigneeId: [2],
+    roomId: 2,
+    priorityId: 1,
+    startDate: new Date('2021-04-26T19:00:00.000Z'),
+    endDate: new Date('2021-04-26T20:00:00.000Z'),
+    allDay: true,
+  }, {
+    text: 'Install New Router in Dev Room',
+    assigneeId: [1],
+    roomId: 1,
+    priorityId: 2,
+    startDate: new Date('2021-04-26T21:30:00.000Z'),
+    endDate: new Date('2021-04-26T22:30:00.000Z'),
+  }, {
+    text: 'Approve Personal Computer Upgrade Plan',
+    assigneeId: [3],
+    roomId: 2,
+    priorityId: 2,
+    startDate: new Date('2021-04-27T17:00:00.000Z'),
+    endDate: new Date('2021-04-27T18:00:00.000Z'),
+  }, {
+    text: 'Final Budget Review',
+    assigneeId: [1],
+    roomId: 1,
+    priorityId: 1,
+    startDate: new Date('2021-04-27T19:00:00.000Z'),
+    endDate: new Date('2021-04-27T20:35:00.000Z'),
+  }, {
+    text: 'New Brochures',
+    assigneeId: [4],
+    roomId: 3,
+    priorityId: 2,
+    startDate: new Date('2021-04-27T21:30:00.000Z'),
+    endDate: new Date('2021-04-27T22:45:00.000Z'),
+  }, {
+    text: 'Install New Database',
+    assigneeId: [2],
+    roomId: 3,
+    priorityId: 1,
+    startDate: new Date('2021-04-28T16:45:00.000Z'),
+    endDate: new Date('2021-04-28T18:15:00.000Z'),
+  }, {
+    text: 'Approve New Online Marketing Strategy',
+    assigneeId: [4],
+    roomId: 2,
+    priorityId: 1,
+    startDate: new Date('2021-04-28T19:00:00.000Z'),
+    endDate: new Date('2021-04-28T21:00:00.000Z'),
+  }, {
+    text: 'Upgrade Personal Computers',
+    assigneeId: [2],
+    roomId: 2,
+    priorityId: 2,
+    startDate: new Date('2021-04-28T22:15:00.000Z'),
+    endDate: new Date('2021-04-28T23:30:00.000Z'),
+  }, {
+    text: 'Customer Workshop',
+    assigneeId: [3],
+    roomId: 3,
+    priorityId: 1,
+    startDate: new Date('2021-04-29T18:00:00.000Z'),
+    endDate: new Date('2021-04-29T19:00:00.000Z'),
+    allDay: true,
+  }, {
+    text: 'Prepare 2021 Marketing Plan',
+    assigneeId: [1],
+    roomId: 1,
+    priorityId: 2,
+    startDate: new Date('2021-04-29T18:00:00.000Z'),
+    endDate: new Date('2021-04-29T20:30:00.000Z'),
+  }, {
+    text: 'Brochure Design Review',
+    assigneeId: [4],
+    roomId: 1,
+    priorityId: 1,
+    startDate: new Date('2021-04-29T21:00:00.000Z'),
+    endDate: new Date('2021-04-29T22:30:00.000Z'),
+  }, {
+    text: 'Create Icons for Website',
+    assigneeId: [3],
+    roomId: 3,
+    priorityId: 1,
+    startDate: new Date('2021-04-30T17:00:00.000Z'),
+    endDate: new Date('2021-04-30T18:30:00.000Z'),
+  }, {
+    text: 'Upgrade Server Hardware',
+    assigneeId: [4],
+    roomId: 2,
+    priorityId: 2,
+    startDate: new Date('2021-04-30T21:30:00.000Z'),
+    endDate: new Date('2021-04-30T23:00:00.000Z'),
+  }, {
+    text: 'Submit New Website Design',
+    assigneeId: [1],
+    roomId: 1,
+    priorityId: 2,
+    startDate: new Date('2021-04-30T23:30:00.000Z'),
+    endDate: new Date('2021-05-01T01:00:00.000Z'),
+  }, {
+    text: 'Launch New Website',
+    assigneeId: [2],
+    roomId: 3,
+    priorityId: 1,
+    startDate: new Date('2021-04-30T19:20:00.000Z'),
+    endDate: new Date('2021-04-30T21:00:00.000Z'),
+  },
+];

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

@@ -16,7 +16,7 @@ test('Scheduler edit appointment is accessible', async (t) => {
   const scheduler = new Scheduler('#container');
 
   await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
-  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+  await t.expect(scheduler.legacyAppointmentPopup.isVisible()).ok();
 
   await a11yCheck(t, checkOptions, '#container');
 }).before(async () => {
@@ -28,6 +28,7 @@ test('Scheduler edit appointment is accessible', async (t) => {
       endDate: new Date('2021-03-29T22:30:00.000Z'),
       recurrenceRule: 'FREQ=DAILY',
     }],
+    editing: { legacyForm: true },
     recurrenceEditMode: 'series',
     currentView: 'week',
     currentDate: new Date(2021, 2, 28),
@@ -37,20 +38,20 @@ test('Scheduler edit appointment is accessible', async (t) => {
 test('Scheduler recurrence editor repeat end accessible', async (t) => {
   const scheduler = new Scheduler('#container');
   const getItem = (index: number) => scheduler
-    .appointmentPopup
+    .legacyAppointmentPopup
     .getEndRepeatRadioButton(index);
   const getAriaLabel = (index: number) => getItem(index)
     .getAttribute('aria-label');
 
   await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
-  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+  await t.expect(scheduler.legacyAppointmentPopup.isVisible()).ok();
 
   await t
     .expect(getAriaLabel(1))
     .eql('On 22 May 2025')
     .expect(getAriaLabel(2))
     .eql('After')
-    .typeText(scheduler.appointmentPopup.repeatUntilElement, '2026')
+    .typeText(scheduler.legacyAppointmentPopup.repeatUntilElement, '2026')
     .click(getItem(1)) // unfocus input
     .expect(getAriaLabel(1))
     .eql('On 22 May 2026')
@@ -68,7 +69,7 @@ test('Scheduler recurrence editor repeat end accessible', async (t) => {
     .eql('On')
     .expect(getAriaLabel(2))
     .eql('After 1 occurrence(s)')
-    .typeText(scheduler.appointmentPopup.repeatCountElement, '3')
+    .typeText(scheduler.legacyAppointmentPopup.repeatCountElement, '3')
     .click(getItem(2)) // unfocus input
     .expect(getAriaLabel(1))
     .eql('On')
@@ -77,6 +78,7 @@ test('Scheduler recurrence editor repeat end accessible', async (t) => {
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
+    editing: { legacyForm: true },
     dataSource: [{
       text: 'Install New Router in Dev Room',
       startDate: new Date('2021-03-29T21:30:00.000Z'),

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

@@ -120,8 +120,8 @@ test('Wrong behavior: editing recurrence appointment does not affect to appointm
 
   await t.doubleClick(scheduler.getAppointment('Test').element);
   await t
-    .typeText(scheduler.appointmentPopup.subjectElement, 'Updated', { replace: true })
-    .click(scheduler.appointmentPopup.doneButton);
+    .typeText(scheduler.appointmentPopup.textEditor.element, 'Updated', { replace: true })
+    .click(scheduler.appointmentPopup.saveButton.element);
 
   await t.expect(scheduler.getAppointment('Updated').element.exists).ok();
 }).before(async () => {