Scheduler - Fix unstable ContextMenu demo test

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html

@@ -1,3 +1,34 @@
+<dx-context-menu
+  [items]="appointmentContextMenuItems"
+  target=".dx-scheduler-appointment"
+  (onItemClick)="onContextMenuItemClick($event)"
+  [width]="200"
+>
+  <div *dxTemplate="let e of 'item'">
+    <div>
+      @if(e.color) {
+      <div class="item-badge" [style.background-color]="e.color"></div>
+      }
+      {{ e.text }}
+    </div>
+  </div>
+</dx-context-menu>
+<dx-context-menu
+  [items]="cellContextMenuItems"
+  target=".dx-scheduler-date-table-cell"
+  (onItemClick)="onContextMenuItemClick($event)"
+  [width]="200"
+>
+  <div *dxTemplate="let e of 'item'">
+    <div>
+      @if(e.color) {
+      <div class="item-badge" [style.background-color]="e.color"></div>
+      }
+      {{ e.text }}
+    </div>
+  </div>
+</dx-context-menu>
+
 <dx-scheduler
   timeZone="America/Los_Angeles"
   [crossScrollingEnabled]="crossScrollingEnabled"
@@ -19,17 +50,3 @@
     icon="conferenceroomoutline"
   ></dxi-scheduler-resource>
 </dx-scheduler>
-<dx-context-menu
-  [items]="contextMenuItems"
-  [disabled]="disabled"
-  [target]="target"
-  (onItemClick)="onContextMenuItemClick($event)"
-  [width]="200"
->
-  <div *dxTemplate="let e of 'item'">
-    @if(e.color) {
-    <div class="item-badge" [ngStyle]="{ backgroundColor: e.color }"></div>
-    }
-    <div class="item-text">{{ e.text }}</div>
-  </div>
-</dx-context-menu>

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.ts

@@ -13,9 +13,6 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
-
 let modulePrefix = '';
 // @ts-ignore
 if (window && window.config?.packageConfigPaths) {
@@ -42,60 +39,78 @@ export class AppComponent {
 
   resourcesData: Resource[];
 
-  groups: string[];
+  groups: string[] = [];
 
   crossScrollingEnabled = false;
 
-  contextMenuItems = [];
-
-  disabled = true;
+  appointmentContextMenuItems: ContextMenuItem[] = [];
 
-  target: string = appointmentClassName;
+  cellContextMenuItems: ContextMenuItem[] = [];
 
   constructor(service: Service) {
     this.resourcesData = service.getResources();
     this.appointmentsData = service.getAppointments();
   }
 
-  onAppointmentContextMenu({ appointmentData, targetedAppointmentData }: DxSchedulerTypes.AppointmentContextMenuEvent) {
+  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
+    e.itemData.onItemClick(e);
+  }
+
+  onAppointmentContextMenu(e: DxSchedulerTypes.AppointmentContextMenuEvent) {
+    const items = this.getAppointmentContextMenuItems(e);
+    this.appointmentContextMenuItems = items;
+  }
+
+  onCellContextMenu(e: DxSchedulerTypes.CellContextMenuEvent) {
+    const items = this.getCellContextMenuItems(e);
+    this.cellContextMenuItems = items;
+  }
+
+  getAppointmentContextMenuItems(e: DxSchedulerTypes.AppointmentContextMenuEvent): ContextMenuItem[] {
+    const {
+      appointmentData: appointment,
+      targetedAppointmentData: targetedAppointment,
+    } = e;
     const scheduler = this.scheduler.instance;
-    const resourceItems = this.resourcesData
-      .map((item) => ({
-        ...item,
-        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointmentData, {
-          ...appointmentData,
-          ...{ roomId: [itemData.id] },
-        }),
-      }));
-    this.target = appointmentClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
-        onItemClick: () => scheduler.updateAppointment(appointmentData, {
-          startDate: targetedAppointmentData.startDate,
+        onItemClick: () => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment.startDate,
           recurrenceRule: 'FREQ=WEEKLY',
         }),
       },
-      { text: 'Set Room', beginGroup: true, disabled: true },
-      ...resourceItems,
+      {
+        text: 'Set Room',
+        beginGroup: true,
+        disabled: true,
+      },
+      ...this.resourcesData.map((item) => ({
+        ...item,
+        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          roomId: [itemData.id],
+        }),
+      })),
     ];
   }
 
-  onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent) {
+  getCellContextMenuItems(e: DxSchedulerTypes.CellContextMenuEvent): ContextMenuItem[] {
+    const { cellData } = e;
     const scheduler = this.scheduler.instance;
-    this.target = cellClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'New Appointment',
         onItemClick: () => scheduler.showAppointmentPopup(
@@ -117,9 +132,9 @@ export class AppComponent {
         text: 'Group by Room/Ungroup',
         beginGroup: true,
         onItemClick: () => {
-          if (this.groups) {
+          if (this.groups.length) {
             this.crossScrollingEnabled = false;
-            this.groups = null;
+            this.groups = [];
           } else {
             this.crossScrollingEnabled = true;
             this.groups = ['roomId'];
@@ -134,10 +149,6 @@ export class AppComponent {
       },
     ];
   }
-
-  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
-    e.itemData.onItemClick(e);
-  }
 }
 
 bootstrapApplication(AppComponent, {

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts

@@ -16,7 +16,7 @@ export interface Resource {
   color: string;
 }
 
-export type ContextMenuItem = DxContextMenuTypes.Item & Resource & {
+export type ContextMenuItem = DxContextMenuTypes.Item & Partial<Resource> & {
   onItemClick?: (e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) => void
 };