chore: update project to Angular v13 (#18)
This commit is contained in:
Martin Bechev
GitHub
Родитель
bbb818f890
Коммит
15b46c0a7a
|
|
@ -14,4 +14,3 @@ last 2 Edge major versions
|
|||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
|
|
|
|||
|
|
@ -1,21 +1,18 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
# Node
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
|
|
@ -23,7 +20,7 @@ speed-measure-plugin*.json
|
|||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
|
|
@ -31,19 +28,15 @@ speed-measure-plugin*.json
|
|||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Kendo UI Angular license file
|
||||
kendo-ui-license.txt
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "pwa-chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ Run `ng generate component component-name` to generate a new component. You can
|
|||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Angular CLI Help
|
||||
|
||||
|
|
@ -46,4 +46,4 @@ For additional support on the Angular CLI:
|
|||
| [Kendo UI for Angular with Angular Universal](https://github.com/telerik/kendo-angular-universal-demo) | [Universal Rendering](http://www.telerik.com/kendo-angular-ui/components/framework/universal/) |
|
||||
| [Kendo UI for Angular with UI for ASP.NET Core](https://github.com/telerik/kendo-angular-demo-aspnetcore-data/tree/master) |[UI for ASP.NET Core Integration](https://www.telerik.com/kendo-angular-ui/components/data-query/mvc-integration/) |
|
||||
| [Kendo UI for Angular with NativeScript](https://github.com/telerik/ng2-dashboard) | Not documented |
|
||||
| [Translating the custom messages of the Kendo UI components for Angular](https://github.com/telerik/kendo-angular-i18n-sample) | [Translation of Messages](http://www.telerik.com/kendo-angular-ui/components/localization/messages/)|
|
||||
| [Translating the custom messages of the Kendo UI components for Angular](https://github.com/telerik/kendo-angular-i18n-sample) | [Translation of Messages](http://www.telerik.com/kendo-angular-ui/components/localization/messages/)|
|
||||
|
|
|
|||
84
angular.json
84
angular.json
|
|
@ -5,7 +5,11 @@
|
|||
"projects": {
|
||||
"kendo-angular-getting-started": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"schematics": {
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
|
|
@ -18,7 +22,6 @@
|
|||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
|
|
@ -33,44 +36,48 @@
|
|||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "kendo-angular-getting-started:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "kendo-angular-getting-started:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "kendo-angular-getting-started:build:development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
|
|
@ -97,31 +104,6 @@
|
|||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "kendo-angular-getting-started:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "kendo-angular-getting-started:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
86
package.json
86
package.json
|
|
@ -5,59 +5,53 @@
|
|||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.2.7",
|
||||
"@angular/common": "~11.2.7",
|
||||
"@angular/compiler": "~11.2.7",
|
||||
"@angular/core": "~11.2.7",
|
||||
"@angular/forms": "~11.2.7",
|
||||
"@angular/localize": "~11.2.7",
|
||||
"@angular/platform-browser": "~11.2.7",
|
||||
"@angular/platform-browser-dynamic": "~11.2.7",
|
||||
"@angular/router": "~11.2.7",
|
||||
"@progress/kendo-angular-buttons": "^6.0.0",
|
||||
"@progress/kendo-angular-common": "^2.0.0",
|
||||
"@progress/kendo-angular-dateinputs": "^5.0.0",
|
||||
"@progress/kendo-angular-dropdowns": "^5.0.0",
|
||||
"@progress/kendo-angular-excel-export": "^4.0.0",
|
||||
"@progress/kendo-angular-grid": "^5.0.3",
|
||||
"@progress/kendo-angular-inputs": "^7.0.0",
|
||||
"@progress/kendo-angular-intl": "^3.0.0",
|
||||
"@progress/kendo-angular-l10n": "^3.0.0",
|
||||
"@progress/kendo-angular-label": "^3.0.0",
|
||||
"@progress/kendo-angular-pdf-export": "^3.0.0",
|
||||
"@progress/kendo-angular-popup": "^4.0.0",
|
||||
"@progress/kendo-angular-treeview": "^5.0.0",
|
||||
"@progress/kendo-data-query": "^1.0.0",
|
||||
"@progress/kendo-drawing": "^1.0.0",
|
||||
"@progress/kendo-licensing": "^1.0.2",
|
||||
"@progress/kendo-theme-default": "^4.34.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.11.3"
|
||||
"@angular/animations": "~13.2.0",
|
||||
"@angular/common": "~13.2.0",
|
||||
"@angular/compiler": "~13.2.0",
|
||||
"@angular/core": "~13.2.0",
|
||||
"@angular/forms": "~13.2.0",
|
||||
"@angular/platform-browser": "~13.2.0",
|
||||
"@angular/platform-browser-dynamic": "~13.2.0",
|
||||
"@angular/router": "~13.2.0",
|
||||
"@progress/kendo-angular-grid": "^6.1.0",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4",
|
||||
"@progress/kendo-angular-buttons": "^7.0.3",
|
||||
"@progress/kendo-angular-common": "^2.0.2",
|
||||
"@progress/kendo-angular-dateinputs": "^6.0.1",
|
||||
"@progress/kendo-angular-dropdowns": "^6.0.1",
|
||||
"@progress/kendo-angular-excel-export": "^4.0.3",
|
||||
"@progress/kendo-angular-inputs": "^8.0.6",
|
||||
"@progress/kendo-angular-intl": "^3.1.2",
|
||||
"@progress/kendo-angular-l10n": "^3.0.3",
|
||||
"@progress/kendo-angular-label": "^3.1.2",
|
||||
"@progress/kendo-angular-pdf-export": "^3.0.3",
|
||||
"@progress/kendo-angular-popup": "^4.0.4",
|
||||
"@progress/kendo-data-query": "^1.5.5",
|
||||
"@progress/kendo-drawing": "^1.16.2",
|
||||
"@progress/kendo-licensing": "^1.2.2",
|
||||
"@progress/kendo-angular-treeview": "^6.0.1",
|
||||
"@angular/localize": "~13.2.0",
|
||||
"@progress/kendo-theme-default": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.6",
|
||||
"@angular/cli": "~11.2.6",
|
||||
"@angular/compiler-cli": "~11.2.7",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@angular-devkit/build-angular": "~13.2.4",
|
||||
"@angular/cli": "~13.2.4",
|
||||
"@angular/compiler-cli": "~13.2.0",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.1.0",
|
||||
"jasmine-core": "~4.0.0",
|
||||
"karma": "~6.3.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-coverage": "~2.1.0",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.1.2"
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"typescript": "~4.5.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
|
|||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
export class AppRoutingModule {}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,47 @@
|
|||
<h1>Hello Kendo UI for Angular!</h1>
|
||||
|
||||
<p>
|
||||
<kendo-dropdownlist [data]="dropDownItems" textField="text" valueField="value" [defaultItem]="defaultItem"
|
||||
(valueChange)="handleFilterChange($event)">
|
||||
</kendo-dropdownlist>
|
||||
<kendo-dropdownlist
|
||||
[data]="dropDownItems"
|
||||
textField="text"
|
||||
valueField="value"
|
||||
[defaultItem]="defaultItem"
|
||||
(valueChange)="handleFilterChange($event)"
|
||||
[style.width.px]="170"
|
||||
>
|
||||
</kendo-dropdownlist>
|
||||
</p>
|
||||
|
||||
<kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"
|
||||
(pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"
|
||||
[height]="400">
|
||||
<kendo-grid-column field="ProductID" title="ID" width="50">
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="ProductName" title="Product Name">
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="Category.CategoryName" title="Category">
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="Discontinued" width="140" filter="boolean">
|
||||
<ng-template kendoGridCellTemplate let-dataItem>
|
||||
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid
|
||||
[data]="(gridItems | async)!"
|
||||
[pageSize]="pageSize"
|
||||
[skip]="skip"
|
||||
[pageable]="true"
|
||||
(pageChange)="pageChange($event)"
|
||||
[sortable]="true"
|
||||
[sort]="sortDescriptor"
|
||||
(sortChange)="handleSortChange($event)"
|
||||
[height]="400"
|
||||
>
|
||||
<kendo-grid-column field="ProductID" title="ID" [width]="50"> </kendo-grid-column>
|
||||
<kendo-grid-column field="ProductName" title="Product Name"> </kendo-grid-column>
|
||||
<kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column>
|
||||
<kendo-grid-column field="UnitPrice" title="Unit Price" [width]="140" format="{0:c}"> </kendo-grid-column>
|
||||
<kendo-grid-column field="Discontinued" [width]="140" filter="boolean">
|
||||
<ng-template kendoGridCellTemplate let-dataItem>
|
||||
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
</kendo-grid>
|
||||
|
||||
<h2>Resources</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.telerik.com/kendo-angular-ui/components/getting-started/">Kendo UI for Angular -
|
||||
Getting Started Documentation</a></li>
|
||||
<li><a href="https://github.com/telerik/kendo-angular-quickstart-cli">GitHub repo for this app</a></li>
|
||||
<li>
|
||||
<a href="https://www.telerik.com/kendo-angular-ui/components/getting-started/"
|
||||
>Kendo UI for Angular - Getting Started Documentation</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="https://github.com/telerik/kendo-angular-quickstart-cli">GitHub repo for this app</a></li>
|
||||
<li><a href="https://www.telerik.com/kendo-angular-ui/components/">Kendo UI for Angular Components</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -3,33 +3,29 @@ import { RouterTestingModule } from '@angular/router/testing';
|
|||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [AppComponent]
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'kendo-angular-getting-started'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('kendo-angular-getting-started');
|
||||
});
|
||||
it(`should have as title 'kendo-angular-getting-started'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('kendo-angular-getting-started');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain('kendo-angular-getting-started app is running!');
|
||||
});
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain('kendo-angular-getting-started app is running!');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,61 +1,51 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { categories } from "./data.categories";
|
||||
import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
|
||||
import { SortDescriptor } from "@progress/kendo-data-query";
|
||||
import { categories } from './data.categories';
|
||||
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
|
||||
import { SortDescriptor } from '@progress/kendo-data-query';
|
||||
// import { FilterDescriptor } from "@progress/kendo-data-query";
|
||||
import { ProductService } from "./product.service";
|
||||
import { Observable } from "rxjs";
|
||||
|
||||
import { ProductService } from './product.service';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
providers: [ProductService]
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
providers: [ProductService]
|
||||
})
|
||||
export class AppComponent {
|
||||
// used for the DropDownList
|
||||
public dropDownItems = categories;
|
||||
public defaultItem = { text: 'Filter by Category', value: null };
|
||||
|
||||
// used for the DropDownList
|
||||
public dropDownItems = categories;
|
||||
public defaultItem = { text: "Filter by Category", value: null };
|
||||
// used for the Grid
|
||||
public gridItems!: Observable<GridDataResult>;
|
||||
public pageSize: number = 10;
|
||||
public skip: number = 0;
|
||||
public sortDescriptor: SortDescriptor[] = [];
|
||||
// public filterDescriptor: FilterDescriptor[] = [];
|
||||
public filterTerm: number | null = null;
|
||||
|
||||
// used for the Grid
|
||||
public gridItems: Observable<GridDataResult>;
|
||||
public pageSize: number = 10;
|
||||
public skip: number = 0;
|
||||
public sortDescriptor: SortDescriptor[] = [];
|
||||
// public filterDescriptor: FilterDescriptor[] = [];
|
||||
public filterTerm: number = null;
|
||||
constructor(private service: ProductService) {
|
||||
this.loadGridItems();
|
||||
}
|
||||
|
||||
constructor(private service: ProductService) {
|
||||
this.loadGridItems();
|
||||
}
|
||||
public pageChange(event: PageChangeEvent): void {
|
||||
this.skip = event.skip;
|
||||
this.loadGridItems();
|
||||
}
|
||||
|
||||
public pageChange(event: PageChangeEvent): void {
|
||||
this.skip = event.skip;
|
||||
this.loadGridItems();
|
||||
}
|
||||
private loadGridItems(): void {
|
||||
this.gridItems = this.service.getProducts(this.skip, this.pageSize, this.sortDescriptor, this.filterTerm);
|
||||
}
|
||||
|
||||
private loadGridItems(): void {
|
||||
this.gridItems = this.service.getProducts(
|
||||
this.skip,
|
||||
this.pageSize,
|
||||
this.sortDescriptor,
|
||||
this.filterTerm
|
||||
);
|
||||
}
|
||||
public handleSortChange(descriptor: SortDescriptor[]): void {
|
||||
this.sortDescriptor = descriptor;
|
||||
this.loadGridItems();
|
||||
}
|
||||
|
||||
public handleSortChange(descriptor: SortDescriptor[]): void {
|
||||
this.sortDescriptor = descriptor;
|
||||
this.loadGridItems();
|
||||
}
|
||||
|
||||
public handleFilterChange(item: {
|
||||
text: string;
|
||||
value: number | null;
|
||||
}): void {
|
||||
this.filterTerm = item.value;
|
||||
this.skip = 0;
|
||||
this.loadGridItems();
|
||||
}
|
||||
public handleFilterChange(item: { text: string; value: number | null }): void {
|
||||
this.filterTerm = item.value;
|
||||
this.skip = 0;
|
||||
this.loadGridItems();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,19 +7,10 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
|
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { GridModule } from '@progress/kendo-angular-grid';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
DropDownsModule,
|
||||
BrowserAnimationsModule,
|
||||
GridModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, AppRoutingModule, DropDownsModule, BrowserAnimationsModule, GridModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
export const categories: Array<{ text: string; value: number }> = [
|
||||
{ text: "Beverages", value: 1 },
|
||||
{ text: "Condiments", value: 2 },
|
||||
{ text: "Confections", value: 3 },
|
||||
{ text: "Dairy Products", value: 4 },
|
||||
{ text: "Grains/Cereals", value: 5 },
|
||||
{ text: "Meat/Poultry", value: 6 },
|
||||
{ text: "Produce", value: 7 },
|
||||
{ text: "Seafood", value: 8 },
|
||||
{ text: 'Beverages', value: 1 },
|
||||
{ text: 'Condiments', value: 2 },
|
||||
{ text: 'Confections', value: 3 },
|
||||
{ text: 'Dairy Products', value: 4 },
|
||||
{ text: 'Grains/Cereals', value: 5 },
|
||||
{ text: 'Meat/Poultry', value: 6 },
|
||||
{ text: 'Produce', value: 7 },
|
||||
{ text: 'Seafood', value: 8 }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const products = [
|
|||
Category: {
|
||||
CategoryID: 1,
|
||||
CategoryName: "Beverages",
|
||||
Description: "Soft drinks, coffees, teas, beers, and ales"
|
||||
Description: "Soft Fdrinks, coffees, teas, beers, and ales"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,41 +1,36 @@
|
|||
import { Injectable } from "@angular/core";
|
||||
import {
|
||||
DataResult,
|
||||
orderBy,
|
||||
process,
|
||||
SortDescriptor
|
||||
} from "@progress/kendo-data-query";
|
||||
import { Observable, of } from "rxjs";
|
||||
import { products } from "./data.products";
|
||||
import { Injectable } from '@angular/core';
|
||||
import { DataResult, orderBy, process, SortDescriptor } from '@progress/kendo-data-query';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { products } from './data.products';
|
||||
|
||||
@Injectable()
|
||||
export class ProductService {
|
||||
public getProducts(
|
||||
skip: number,
|
||||
pageSize: number,
|
||||
sortDescriptor: SortDescriptor[],
|
||||
filterTerm: number
|
||||
): Observable<DataResult> {
|
||||
let data;
|
||||
if (filterTerm) {
|
||||
data = process(orderBy(products, sortDescriptor), {
|
||||
filter: {
|
||||
logic: "and",
|
||||
filters: [
|
||||
{
|
||||
field: "CategoryID",
|
||||
operator: "eq",
|
||||
value: filterTerm
|
||||
}
|
||||
]
|
||||
public getProducts(
|
||||
skip: number,
|
||||
pageSize: number,
|
||||
sortDescriptor: SortDescriptor[],
|
||||
filterTerm: number | null
|
||||
): Observable<DataResult> {
|
||||
let data;
|
||||
if (filterTerm) {
|
||||
data = process(orderBy(products, sortDescriptor), {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'CategoryID',
|
||||
operator: 'eq',
|
||||
value: filterTerm
|
||||
}
|
||||
]
|
||||
}
|
||||
}).data;
|
||||
} else {
|
||||
data = orderBy(products, sortDescriptor);
|
||||
}
|
||||
}).data;
|
||||
} else {
|
||||
data = orderBy(products, sortDescriptor);
|
||||
return of({
|
||||
data: data.slice(skip, skip + pageSize),
|
||||
total: data.length
|
||||
});
|
||||
}
|
||||
return of({
|
||||
data: data.slice(skip, skip + pageSize),
|
||||
total: data.length
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
|
|
@ -13,4 +13,4 @@ export const environment = {
|
|||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import '@angular/localize/init';
|
|||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
|
@ -22,18 +22,6 @@ import '@angular/localize/init';
|
|||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* IE11 requires the following for NgClass support on SVG elements
|
||||
*/
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
|
|
@ -61,7 +49,7 @@ import '@angular/localize/init';
|
|||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
|
|
@ -9,16 +9,17 @@ import {
|
|||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
|
|
|
|||
|
|
@ -4,20 +4,29 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"target": "es2017",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2018",
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
152
tslint.json
152
tslint.json
|
|
@ -1,152 +0,0 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"align": {
|
||||
"options": [
|
||||
"parameters",
|
||||
"statements"
|
||||
]
|
||||
},
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": true,
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": {
|
||||
"options": [
|
||||
"spaces"
|
||||
]
|
||||
},
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"semicolon": {
|
||||
"options": [
|
||||
"always"
|
||||
]
|
||||
},
|
||||
"space-before-function-paren": {
|
||||
"options": {
|
||||
"anonymous": "never",
|
||||
"asyncArrow": "always",
|
||||
"constructor": "never",
|
||||
"method": "never",
|
||||
"named": "never"
|
||||
}
|
||||
},
|
||||
"typedef": [
|
||||
true,
|
||||
"call-signature"
|
||||
],
|
||||
"typedef-whitespace": {
|
||||
"options": [
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
},
|
||||
{
|
||||
"call-signature": "onespace",
|
||||
"index-signature": "onespace",
|
||||
"parameter": "onespace",
|
||||
"property-declaration": "onespace",
|
||||
"variable-declaration": "onespace"
|
||||
}
|
||||
]
|
||||
},
|
||||
"variable-name": {
|
||||
"options": [
|
||||
"ban-keywords",
|
||||
"check-format",
|
||||
"allow-pascal-case"
|
||||
]
|
||||
},
|
||||
"whitespace": {
|
||||
"options": [
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-typecast"
|
||||
]
|
||||
},
|
||||
"component-class-suffix": true,
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-conflicting-lifecycle": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-output-native": true,
|
||||
"no-output-on-prefix": true,
|
||||
"no-output-rename": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"template-banana-in-box": true,
|
||||
"template-no-negated-async": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче