Scheduler: Multilevel grouping — Writing Demo

[aleksei-semikozov]

No description provided.

[Copilot]

Pull request overview

Adds a new Scheduler demo showcasing multilevel grouping (rooms → employees) across the demos app, including wiring it into the demos navigation metadata.

Changes:

• Registered a new Scheduler demo entry (MultilevelGrouping) in apps/demos/menuMeta.json.
• Added demo implementations for Angular, React (TS), React (JS), Vue, and jQuery, including shared sample data and styling.
• Customized the Scheduler appointment form to insert a “Room” editor that filters the “Employee” resource editor.

Reviewed changes

Copilot reviewed 24 out of 26 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/demos/menuMeta.json	Adds the “Multilevel Grouping” Scheduler demo to the Grouping section.
apps/demos/Demos/Scheduler/MultilevelGrouping/Vue/index.ts	Vue entry point mounting the demo app.
apps/demos/Demos/Scheduler/MultilevelGrouping/Vue/index.html	Vue demo host page and SystemJS bootstrap.
apps/demos/Demos/Scheduler/MultilevelGrouping/Vue/data.ts	Vue sample assignees/appointments data for grouped resources.
apps/demos/Demos/Scheduler/MultilevelGrouping/Vue/App.vue	Vue Scheduler configuration + appointment form customization (Room selector).
apps/demos/Demos/Scheduler/MultilevelGrouping/ReactJs/styles.css	React JS demo CSS tweaks for Scheduler cell/header sizing.
apps/demos/Demos/Scheduler/MultilevelGrouping/ReactJs/index.js	React JS entry point rendering the app.
apps/demos/Demos/Scheduler/MultilevelGrouping/ReactJs/index.html	React JS demo host page and SystemJS bootstrap.
apps/demos/Demos/Scheduler/MultilevelGrouping/ReactJs/data.js	React JS sample assignees/appointments data.
apps/demos/Demos/Scheduler/MultilevelGrouping/ReactJs/App.js	React JS Scheduler configuration + appointment form customization.
apps/demos/Demos/Scheduler/MultilevelGrouping/React/styles.css	React (TS) demo CSS tweaks for Scheduler cell/header sizing.
apps/demos/Demos/Scheduler/MultilevelGrouping/React/index.tsx	React (TS) entry point rendering the app.
apps/demos/Demos/Scheduler/MultilevelGrouping/React/index.html	React (TS) demo host page and SystemJS bootstrap.
apps/demos/Demos/Scheduler/MultilevelGrouping/React/data.ts	React (TS) typed sample assignees/appointments data.
apps/demos/Demos/Scheduler/MultilevelGrouping/React/App.tsx	React (TS) Scheduler configuration + typed appointment form customization.
apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/styles.css	jQuery demo CSS tweaks for Scheduler cell/header sizing.
apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/index.js	jQuery Scheduler initialization + appointment form customization.
apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/index.html	jQuery demo host page wiring scripts/styles.
apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/data.js	jQuery sample assignees/appointments data.
apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/index.html	Angular demo host page and SystemJS bootstrap.
apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.service.ts	Angular service providing assignees/appointments/resources data.
apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.component.ts	Angular Scheduler configuration + appointment form customization.
apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.component.html	Angular Scheduler template with vertical/horizontal grouping views.
apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.component.css	Angular demo CSS tweaks for Scheduler cell/header sizing.

Suppressed comments (2)

apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.component.ts:76

• createRoomItem's form parameter is implicitly any. Add an explicit type to avoid noImplicitAny errors.

  createRoomItem(form, roomId: string | null) {

apps/demos/Demos/Scheduler/MultilevelGrouping/Angular/app/app.component.ts:88

• onValueChanged's event parameter is implicitly any here (no contextual typing), which can fail under noImplicitAny. Please type it explicitly.

        onValueChanged: (e) => {

[Copilot]

Pull request overview

Copilot reviewed 24 out of 26 changed files in this pull request and generated no new comments.

Suppressed comments (3)

apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/index.js:155

• findItem(items, item => item.dataField === 'assigneeId') can return null, but the code dereferences employeeEditor.list[...] unconditionally, which can throw if the expected editor is not present in the form. Please guard this block (consistent with the React/Vue/Angular versions of this demo).

      employeeEditor.list[employeeEditor.index].validationRules = [
        { type: 'required', message: 'Employee is required' },
      ];

apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/index.js:164

• findItem(items, item => item.name === 'descriptionGroup') can return null, but description.list[...] is used unconditionally. Guard this access to avoid runtime errors if the description group is absent.

      description.list[description.index].visible = false;
      form.option('items', items.slice());

apps/demos/Demos/Scheduler/MultilevelGrouping/jQuery/index.js:147

• findItem(items, item => item.name === 'assigneeIdGroup') can return null, but the result is dereferenced unconditionally (employee.list.splice(...)), which will throw if the form structure changes or the expected group is missing. Add a guard (early return) before using employee.

This issue also appears in the following locations of the same file:

• line 153
• line 163

      employee.list.splice(employee.index, 0, createRoomGroup(form, roomId));