Refactor types in Angular Demos p.4 (#3077)

* refactor types in Angular Demos p.4
DevExpress · Feb 7, 2024 · 6015836 · 6015836
1 parent 07aa368
commit 6015836
Show file tree

Hide file tree

Showing 64 changed files with 481 additions and 635 deletions.
diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.ts
@@ -1,13 +1,11 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import {
   DxDataGridModule, DxFormModule, DxSelectBoxModule, DxTabPanelModule,
 } from 'devextreme-angular';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import DataSource from 'devextreme/data/data_source';
-
 import { DetailViewComponent } from './detail-view/detail-view.component';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,19 +18,11 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  url: string;
-
-  suppliersData: any;
+  url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 
-  productsDataMap: object = {};
-
-  productIdBySupplier: object = {};
-
-  orderHistoryDataMap: object = {};
+  suppliersData: DataSource;
 
   constructor() {
-    this.url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
-
     this.suppliersData = new DataSource({
       store: AspNetData.createStore({
         key: 'SupplierID',

diff --git a/.../Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts b/.../Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input, AfterViewInit } from '@angular/core';
 import DataSource from 'devextreme/data/data_source';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
+import { DxFormTypes } from 'devextreme-angular/ui/form';
+import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 
 @Component({
   selector: 'detail-view',
@@ -44,7 +46,7 @@ export class DetailViewComponent implements AfterViewInit {
     }
   }
 
-  handleValueChange(e: any) {
+  handleValueChange(e: DxSelectBoxTypes.ValueChangedEvent) {
     this.productIdBySupplier = e.value;
     this.orderHistoryData = new DataSource({
       store: AspNetData.createStore({
@@ -55,7 +57,7 @@ export class DetailViewComponent implements AfterViewInit {
     });
   }
 
-  customizeItemTemplate(item: any) {
+  customizeItemTemplate(item: DxFormTypes.SimpleItem) {
     item.template = 'formItem';
   }
 }
diff --git a/JSDemos/Demos/DataGrid/AjaxRequest/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/AjaxRequest/Angular/app/app.component.ts
@@ -1,7 +1,6 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxDataGridModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {

diff --git a/JSDemos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts
@@ -2,10 +2,9 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import DxDataGrid from 'devextreme/ui/data_grid';
-import { DxDataGridModule } from 'devextreme-angular';
-import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { lastValueFrom } from 'rxjs';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
+import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -19,7 +18,7 @@ const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridBatchUpdateWebApi';
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  ordersStore: any;
+  ordersStore: AspNetData.CustomStore;
 
   constructor(private http: HttpClient) {
     this.ordersStore = AspNetData.createStore({
@@ -31,15 +30,19 @@ export class AppComponent {
     });
   }
 
-  onSaving(e: any) {
+  onSaving(e: DxDataGridTypes.SavingEvent) {
     e.cancel = true;
 
     if (e.changes.length) {
       e.promise = this.processBatchRequest(`${URL}/Batch`, e.changes, e.component);
     }
   }
 
-  async processBatchRequest(url: string, changes: Array<{}>, component: DxDataGrid): Promise<any> {
+  async processBatchRequest(
+    url: string,
+    changes: Array<DxDataGridTypes.DataChange>,
+    component: DxDataGridComponent['instance'],
+  ): Promise<void> {
     await lastValueFrom(
       this.http.post(url, JSON.stringify(changes), {
         withCredentials: true,

diff --git a/JSDemos/Demos/DataGrid/CRUDOperations/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/CRUDOperations/Angular/app/app.component.ts
@@ -1,18 +1,12 @@
-import {
-  NgModule, Component, enableProdMode, ChangeDetectionStrategy,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  HttpClient, HttpClientModule, HttpHeaders, HttpParams,
-} from '@angular/common/http';
-
+import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
+import { lastValueFrom, Observable } from 'rxjs';
 import { DxDataGridModule, DxSelectBoxModule, DxButtonModule } from 'devextreme-angular';
 import CustomStore from 'devextreme/data/custom_store';
 import { formatDate } from 'devextreme/localization';
 
-import { lastValueFrom } from 'rxjs';
-
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
@@ -26,22 +20,30 @@ const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  dataSource: any;
+  dataSource: CustomStore;
 
-  customersData: any;
+  requests: string[] = [];
 
-  shippersData: any;
+  refreshModes = ['full', 'reshape', 'repaint'];
 
-  refreshModes: string[];
+  refreshMode = 'reshape';
 
-  refreshMode: string;
+  customersData = {
+    paginate: true,
+    store: new CustomStore({
+      key: 'Value',
+      loadMode: 'raw',
+      load: () => this.sendRequest(`${URL}/CustomersLookup`),
+    }),
+  };
 
-  requests: string[] = [];
+  shippersData = new CustomStore({
+    key: 'Value',
+    loadMode: 'raw',
+    load: () => this.sendRequest(`${URL}/ShippersLookup`),
+  });
 
   constructor(private http: HttpClient) {
-    this.refreshMode = 'reshape';
-    this.refreshModes = ['full', 'reshape', 'repaint'];
-
     this.dataSource = new CustomStore({
       key: 'OrderID',
       load: () => this.sendRequest(`${URL}/Orders`),
@@ -56,29 +58,14 @@ export class AppComponent {
         key,
       }),
     });
-
-    this.customersData = {
-      paginate: true,
-      store: new CustomStore({
-        key: 'Value',
-        loadMode: 'raw',
-        load: () => this.sendRequest(`${URL}/CustomersLookup`),
-      }),
-    };
-
-    this.shippersData = new CustomStore({
-      key: 'Value',
-      loadMode: 'raw',
-      load: () => this.sendRequest(`${URL}/ShippersLookup`),
-    });
   }
 
-  async sendRequest(url: string, method = 'GET', data: any = {}) {
+  async sendRequest(url: string, method = 'GET', data = {}) {
     this.logRequest(method, url, data);
 
     const httpParams = new HttpParams({ fromObject: data });
     const httpOptions = { withCredentials: true, body: httpParams };
-    let request;
+    let request: Observable<Object>;
 
     switch (method) {
       case 'GET':

diff --git a/JSDemos/Demos/DataGrid/CascadingLookups/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/CascadingLookups/Angular/app/app.component.ts
@@ -1,8 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxDataGridModule } from 'devextreme-angular';
-import { Column } from 'devextreme/ui/data_grid';
+import { DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
 import {
   Service, Employee, State, City,
 } from './app.service';
@@ -31,22 +30,20 @@ export class AppComponent {
     this.getFilteredCities = this.getFilteredCities.bind(this);
   }
 
-  getFilteredCities(options) {
+  getFilteredCities(options: { data: City }) {
     return {
       store: this.cities,
       filter: options.data ? ['StateID', '=', options.data.StateID] : null,
     };
   }
 
-  onEditorPreparing(e) {
+  onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent<Employee>) {
     if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
-      const isStateNotSet = e.row.data.StateID === undefined;
-
-      e.editorOptions.disabled = isStateNotSet;
+      e.editorOptions.disabled = e.row.data.StateID === undefined;
     }
   }
 
-  setStateValue(this: Column, newData: Employee, value: number, currentRowData: Employee) {
+  setStateValue(this: DxDataGridTypes.Column, newData: Employee, value: number, currentRowData: Employee) {
     newData.CityID = null;
     this.defaultSetCellValue(newData, value, currentRowData);
   }

diff --git a/JSDemos/Demos/DataGrid/CellCustomization/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/CellCustomization/Angular/app/app.component.ts
@@ -27,15 +27,15 @@ export class AppComponent {
     this.dataSource = service.getWeekData();
   }
 
-  abs(value) {
+  abs(value: number) {
     return Math.abs(value);
   }
 }
 
 @Pipe({ name: 'gridCellData' })
 export class GridCellDataPipe implements PipeTransform {
-  transform(gridData: any) {
-    return gridData.data[gridData.column.caption.toLowerCase()];
+  transform({ data, column }) {
+    return data[column.caption.toLowerCase()];
   }
 }
 

diff --git a/JSDemos/Demos/DataGrid/CellEditingAndEditingAPI/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/CellEditingAndEditingAPI/Angular/app/app.component.ts
@@ -3,13 +3,10 @@ import {
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxDataGridModule,
-  DxDataGridComponent,
-  DxButtonModule,
-} from 'devextreme-angular';
+import { DxButtonModule } from 'devextreme-angular';
 import ArrayStore from 'devextreme/data/array_store';
-import { Service, Employee, State } from './app.service';
+import { DxDataGridModule, DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { Service, State } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -28,7 +25,7 @@ export class AppComponent {
 
   states: State[];
 
-  selectedItemKeys: any[] = [];
+  selectedItemKeys: string[] = [];
 
   constructor(service: Service) {
     this.dataSource = new ArrayStore({
@@ -38,8 +35,8 @@ export class AppComponent {
     this.states = service.getStates();
   }
 
-  onSelectionChanged(data: any) {
-    this.selectedItemKeys = data.selectedRowKeys;
+  onSelectionChanged({ selectedRowKeys }: DxDataGridTypes.SelectionChangedEvent) {
+    this.selectedItemKeys = selectedRowKeys;
   }
 
   deleteRecords() {

diff --git a/JSDemos/Demos/DataGrid/CollaborativeEditing/Angular/app/app.service.ts b/JSDemos/Demos/DataGrid/CollaborativeEditing/Angular/app/app.service.ts
@@ -9,9 +9,9 @@ const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/';
 class StoreChangedEvent {
   type: 'update' | 'insert' | 'remove';
 
-  key?: any;
+  key?: string;
 
-  data?: any;
+  data?: Record<string, unknown>;
 }
 
 @Injectable()

diff --git a/JSDemos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.ts
@@ -1,9 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxDataGridModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
-
 import { Employee, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,32 +18,26 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employees: Employee[];
 
-  searchEnabled: boolean;
+  searchEnabled = true;
 
-  editorOptions: any;
+  editorOptions = { placeholder: 'Search column' };
 
-  allowSelectAll: boolean;
+  allowSelectAll = true;
 
-  selectByClick: boolean;
+  selectByClick = true;
 
-  recursive: boolean;
+  recursive = true;
 
-  columnChooserModes: any;
+  columnChooserModes = [{
+    key: 'dragAndDrop',
+    name: 'Drag and drop',
+  }, {
+    key: 'select',
+    name: 'Select',
+  }];
 
   constructor(service: Service) {
     this.employees = service.getEmployees();
-    this.searchEnabled = true;
-    this.editorOptions = { placeholder: 'Search column' };
-    this.allowSelectAll = true;
-    this.selectByClick = true;
-    this.recursive = true;
-    this.columnChooserModes = [{
-      key: 'dragAndDrop',
-      name: 'Drag and drop',
-    }, {
-      key: 'select',
-      name: 'Select',
-    }];
   }
 }
 

diff --git a/JSDemos/Demos/DataGrid/ColumnCustomization/Angular/app/app.component.ts b/JSDemos/Demos/DataGrid/ColumnCustomization/Angular/app/app.component.ts
@@ -1,9 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxDataGridModule } from 'devextreme-angular';
-
 import { Service, Employee } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -23,9 +21,7 @@ export class AppComponent {
     this.employees = service.getEmployees();
   }
 
-  calculateCellValue(data) {
-    return [data.Title, data.FirstName, data.LastName].join(' ');
-  }
+  calculateCellValue = ({ Title, FirstName, LastName }) => [Title, FirstName, LastName].join(' ');
 }
 
 @NgModule({