fix code style

Author: Tucchhaa

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

@@ -4,15 +4,15 @@ <h3>DXCinema Show Times</h3>
 <dx-scheduler
   timeZone="America/Los_Angeles"
   [dataSource]="data"
-  [views]="['day', 'week', 'timelineDay']"
+  [views]="views"
   currentView="day"
   [currentDate]="currentDate"
   [firstDayOfWeek]="0"
   [startDayHour]="9"
   [endDayHour]="23"
   [showAllDayPanel]="false"
   [height]="600"
-  [groups]="['theatreId']"
+  [groups]="groups"
   [crossScrollingEnabled]="true"
   [cellDuration]="20"
   appointmentTemplate="appointment-template"
@@ -30,49 +30,34 @@ <h3>DXCinema Show Times</h3>
 
   <dxo-scheduler-editing
     [allowAdding]="false"
-    [popup]="{
-      maxWidth: 440,
-      onOptionChanged: onPopupOptionChanged
-    }"
+    [popup]="popupOptions"
   >
-    <dxo-scheduler-form [onInitialized]="onFormInitialized">
+    <dxo-scheduler-form (onInitialized)="onFormInitialized($event)">
       <dxi-scheduler-item
         template="movie-info-form-template"
       ></dxi-scheduler-item>
 
       <dxi-scheduler-item
         itemType="group"
         [colCount]="2"
-        [colCountByScreen]="{ xs: 2 }"
+        [colCountByScreen]="colCountByScreen"
       >
         <dxi-scheduler-item
           dataField="movieId"
           editorType="dxSelectBox"
-          [label]="{ text: 'Movie' }"
           [colSpan]="1"
-          [editorOptions]="{
-            items: moviesData,
-            displayExpr: 'text',
-            valueExpr: 'id',
-            stylingMode: getEditorStylingMode(),
-            onValueChanged: onMovieValueChanged,
-            onContentReady: onMovieEditorContentReady
-          }"
+          [editorOptions]="movieEditorOptions"
         >
+          <dxi-scheduler-label>Movie</dxi-scheduler-label>
         </dxi-scheduler-item>
 
         <dxi-scheduler-item
           dataField="price"
           editorType="dxSelectBox"
-          [label]="{ text: 'Price' }"
           [colSpan]="1"
-          [editorOptions]="{
-            items: [5, 10, 15, 20],
-            displayExpr: priceDisplayExpr,
-            stylingMode: getEditorStylingMode(),
-            onContentReady: onPriceEditorContentReady
-          }"
+          [editorOptions]="priceEditorOptions"
         >
+          <dxi-scheduler-label>Price</dxi-scheduler-label>
         </dxi-scheduler-item>
       </dxi-scheduler-item>
 

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

@@ -46,17 +46,43 @@ export class AppComponent {
 
   theatreData: TheatreData[];
 
+  views: string[] = ['day', 'week', 'timelineDay'];
+
+  groups: string[] = ['theatreId'];
+
   formInstance: dxForm | null = null;
 
   currentSelectedMovie: MovieData | null = null;
 
+  movieEditorOptions: DxSelectBoxTypes.Options;
+
+  priceEditorOptions: DxSelectBoxTypes.Options;
+
   constructor(service: Service) {
     this.data = service.getData();
     this.moviesData = service.getMoviesData();
     this.theatreData = service.getTheatreData();
+
+    this.movieEditorOptions = {
+      items: this.moviesData,
+      displayExpr: 'text',
+      valueExpr: 'id',
+      stylingMode: this.getEditorStylingMode(),
+      onValueChanged: this.onMovieValueChanged,
+      onContentReady: this.onCustomEditorContentReady,
+    };
+
+    this.priceEditorOptions = {
+      items: [5, 10, 15, 20],
+      displayExpr: this.priceDisplayExpr,
+      stylingMode: this.getEditorStylingMode(),
+      onContentReady: this.onCustomEditorContentReady,
+    };
   }
 
-  getMovieById = (id: number): MovieData | undefined => query(this.moviesData).filter(['id', '=', id]).toArray()[0];
+  getMovieById = (id: number | undefined): MovieData | undefined => id
+    ? query(this.moviesData).filter(['id', '=', id]).toArray()[0]
+    : null;
 
   getEditorStylingMode = (): 'filled' | 'outlined' => {
     const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
@@ -65,23 +91,7 @@ export class AppComponent {
 
   priceDisplayExpr = (value: number): string => `$${value}`;
 
-  onMovieValueChanged = (e: DxSelectBoxTypes.ValueChangedEvent): void => {
-    const movie = this.getMovieById(e.value);
-    this.currentSelectedMovie = movie;
-
-    if (this.formInstance && movie) {
-      this.formInstance.updateData('director', movie.director);
-      this.updateEndDate(this.formInstance, movie);
-    }
-  };
-
-  onMovieEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => {
-    e.component.option('stylingMode', this.getEditorStylingMode());
-  };
-
-  onPriceEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => {
-    e.component.option('stylingMode', this.getEditorStylingMode());
-  };
+  colCountByScreen = { xs: 2 };
 
   onPopupOptionChanged = (e: DxPopupTypes.OptionChangedEvent): void => {
     if (e.fullName === 'toolbarItems' && e.value) {
@@ -93,39 +103,55 @@ export class AppComponent {
     }
   };
 
-  updateEndDate = (form: dxForm, movie: MovieData): void => {
+  popupOptions: DxPopupTypes.Options = {
+    maxWidth: 440,
+    onOptionChanged: this.onPopupOptionChanged,
+  };
+
+  updateEndDate = (movie: MovieData): void => {
+    const form = this.formInstance!;
     const formData = form.option('formData');
     const { startDate } = formData;
-    if (startDate && movie?.duration) {
+
+    if (startDate) {
       const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
       form.updateData('endDate', newEndDate);
     }
   };
 
   onFormInitialized = (e: DxFormTypes.InitializedEvent): void => {
+    console.log('form initialized');
     const form = e.component;
-    this.formInstance = form;
-
     const formData = form.option('formData');
-    if (formData?.movieId) {
-      const movie = this.getMovieById(formData.movieId);
-      this.currentSelectedMovie = movie;
-    } else {
-      this.currentSelectedMovie = null;
-    }
+
+    this.formInstance = form;
+    this.currentSelectedMovie = this.getMovieById(formData?.movieId);
 
     form.on('fieldDataChanged', (fieldEvent: DxFormTypes.FieldDataChangedEvent) => {
       if (fieldEvent.dataField === 'startDate') {
         const currentFormData = form.option('formData');
-        if (currentFormData.movieId) {
-          const movie = this.getMovieById(currentFormData.movieId);
-          if (movie) {
-            this.updateEndDate(form, movie);
-          }
+        const movie = this.getMovieById(currentFormData?.movieId);
+
+        if (movie) {
+          this.updateEndDate(movie);
         }
       }
     });
   };
+
+  onMovieValueChanged = (e: DxSelectBoxTypes.ValueChangedEvent): void => {
+    const movie = this.getMovieById(e.value);
+    this.currentSelectedMovie = movie;
+
+    if (movie) {
+      this.formInstance.updateData('director', movie.director);
+      this.updateEndDate(movie);
+    }
+  };
+
+  onCustomEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => {
+    e.component.option('stylingMode', this.getEditorStylingMode());
+  };
 }
 
 @NgModule({