diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..c0dd2b0 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,221 @@ +{ + "env": { + "browser": true, + "node": true + }, + "extends": [ + "plugin:@angular-eslint/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking" + ], + "overrides": [ + { + "files": [ + ",*.component.ts" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2020, + "sourceType": "module" + }, + "plugins": [ + "@angular-eslint/template" + ], + "processor": "@angular-eslint/template/extract-inline-html" + } + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": "tsconfig.json", + "sourceType": "module" + }, + "plugins": [ + "@typescript-eslint/eslint-plugin", + "import" + ], + "rules": { + "@angular-eslint/component-class-suffix": "error", + "@angular-eslint/directive-class-suffix": "error", + "@angular-eslint/no-input-rename": "error", + "@angular-eslint/no-output-on-prefix": "error", + "@angular-eslint/no-output-rename": "error", + "@angular-eslint/use-pipe-transform-interface": "error", + "@typescript-eslint/adjacent-overload-signatures": "error", + "@typescript-eslint/array-type": "off", + "@typescript-eslint/ban-types": [ + "error", + { + "types": { + "Object": { + "message": "Avoid using the `Object` type. Did you mean `object`?" + }, + "Function": { + "message": "Avoid using the `Function` type. Prefer a specific function type, like `() => void`." + }, + "Boolean": { + "message": "Avoid using the `Boolean` type. Did you mean `boolean`?" + }, + "Number": { + "message": "Avoid using the `Number` type. Did you mean `number`?" + }, + "String": { + "message": "Avoid using the `String` type. Did you mean `string`?" + }, + "Symbol": { + "message": "Avoid using the `Symbol` type. Did you mean `symbol`?" + } + } + } + ], + "@typescript-eslint/class-name-casing": "error", + "@typescript-eslint/consistent-type-assertions": "error", + "@typescript-eslint/dot-notation": "error", + "@typescript-eslint/explicit-member-accessibility": [ + "off", + { + "accessibility": "explicit" + } + ], + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/member-ordering": "error", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-empty-interface": "error", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "error", + "@typescript-eslint/no-misused-new": "error", + "@typescript-eslint/no-namespace": "error", + "@typescript-eslint/no-non-null-assertion": "error", + "@typescript-eslint/no-parameter-properties": "off", + "@typescript-eslint/no-unused-expressions": "error", + "@typescript-eslint/no-unsafe-assignment": "off", + "@typescript-eslint/no-use-before-define": "error", + "@typescript-eslint/no-var-requires": "off", + "@typescript-eslint/prefer-for-of": "error", + "@typescript-eslint/prefer-function-type": "error", + "@typescript-eslint/prefer-namespace-keyword": "error", + "@typescript-eslint/quotes": [ + "error", + "single" + ], + "@typescript-eslint/triple-slash-reference": [ + "error", + { + "path": "always", + "types": "prefer-import", + "lib": "always" + } + ], + "@typescript-eslint/unified-signatures": "error", + "arrow-parens": [ + "off", + "always" + ], + "camelcase": "error", + "comma-dangle": "off", + "complexity": "off", + "constructor-super": "error", + "eqeqeq": [ + "error", + "smart" + ], + "guard-for-in": "error", + "id-blacklist": [ + "error", + "any", + "Number", + "number", + "String", + "string", + "Boolean", + "boolean", + "Undefined", + "undefined" + ], + "id-match": "error", + "import/no-deprecated": "warn", + "import/order": "off", + "max-classes-per-file": "off", + "max-len": [ + "error", + { + "code": 140 + } + ], + "new-parens": "error", + "no-bitwise": "error", + "no-caller": "error", + "no-cond-assign": "error", + "no-console": [ + "error", + { + "allow": [ + "log", + "warn", + "dir", + "timeLog", + "assert", + "clear", + "count", + "countReset", + "group", + "groupEnd", + "table", + "dirxml", + "error", + "groupCollapsed", + "Console", + "profile", + "profileEnd", + "timeStamp", + "context" + ] + } + ], + "no-debugger": "error", + "no-empty": "off", + "no-eval": "error", + "no-fallthrough": "error", + "no-invalid-this": "off", + "no-multiple-empty-lines": "off", + "no-new-wrappers": "error", + "no-restricted-imports": [ + "error", + "rxjs/Rx" + ], + "no-shadow": [ + "error", + { + "hoist": "all" + } + ], + "no-throw-literal": "error", + "no-trailing-spaces": "error", + "no-undef-init": "error", + "no-underscore-dangle": "error", + "no-unsafe-finally": "error", + "no-unused-labels": "error", + "no-var": "error", + "object-shorthand": "error", + "one-var": [ + "error", + "never" + ], + "prefer-const": "error", + "quote-props": [ + "error", + "as-needed" + ], + "radix": "error", + "spaced-comment": [ + "error", + "always", + { + "markers": [ + "/" + ] + } + ], + "use-isnan": "error", + "valid-typeof": "off" + } +} diff --git a/README.md b/README.md index e46f8d0..eb2e8c7 100644 --- a/README.md +++ b/README.md @@ -32,22 +32,22 @@ import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; @Component({ selector: 'datatable', - template:"" + template:'' }) export class DataTableComponent implements OnDestroy, OnInit { - private ui : webix.ui.datatable; + private ui: webix.ui.datatable; constructor(root: ElementRef) { - this.ui = webix.ui({ - container: root.nativeElement + this.ui = webix.ui({ + container: root.nativeElement, view:"datatable", autoConfig:true, url:"data.php" - }) + }) as webix.ui.datatable } - ngOnInit(){ + ngOnInit(): void { this.ui.resize(); } - ngOnDestroy(){ + ngOnDestroy(): void { this.ui.destructor(); } } @@ -80,10 +80,10 @@ export class FilmService { **app/components/datatable.ts** ```js constructor(private films: FilmService, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, view:"datatable", autoConfig:true, data: this.films.getFilms() - }) + }) as webix.ui.datatable } ``` @@ -93,7 +93,7 @@ You can add a public method to the component to call any necessary public method **app/components/datatable.js** ```js - addRow(){ + addRow(): void{ this.ui.add({ title:"New row" }); } ``` @@ -105,17 +105,17 @@ You can expose events of Webix component through the `@Output` property: **app/components/datatable.js** ```js export class DataTableComponent implements OnDestroy, OnInit { + @Output() rowSelected = new EventEmitter(); private ui : webix.ui.datatable; - @Output() onRowSelect = new EventEmitter(); constructor(private films: FilmService, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, view:"datatable", autoConfig:true, data: this.films.getFilms(), on:{ - onAfterSelect: (id) => this.onRowSelect.emit(this.ui.getItem(id)) + onAfterSelect: (id) => this.rowSelected.emit(this.ui.getItem(id)) } - }) + }) as webix.ui.datatable } ``` @@ -140,7 +140,7 @@ You can handle it in the parent component like this: }) export class HTMLLayoutComponent { private selectedFilm: Film; - fillInfo(film : Film){ + fillInfo(film : Film): void{ this.selectedFilm = film; } } @@ -161,7 +161,7 @@ export class MyLayoutComponent implements OnDestroy, OnInit { private ui : webix.ui.datatable; constructor(private films: FilmService, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, view:"layout", rows:[ @@ -169,7 +169,7 @@ export class MyLayoutComponent implements OnDestroy, OnInit { other, { cols:[ views, here ] } ] - }) + }) as webix.ui.layout } ``` @@ -206,7 +206,7 @@ There is no way to define *routerLink* attributes inside of Webix UI. You need to use the `onItemClick` event of a component, if you need to route to a different view: ```js - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, view: "menu", layout: "y", minHeight: 200, select: true, data: [ @@ -217,7 +217,7 @@ You need to use the `onItemClick` event of a component, if you need to route to on: { onItemClick: (id) => this.router.navigate([id]) } - }) + }) as webix.ui.menu ``` ### Limitations diff --git a/package.json b/package.json index 55f79f8..c7200d4 100644 --- a/package.json +++ b/package.json @@ -4,47 +4,54 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": "ng build", + "build": "ng build --prod", "test": "ng test", - "lint": "ng lint", + "lint": "./node_modules/.bin/eslint --ext .jsx,.js,.tsx,.ts --max-warnings 0 ./src/app", "e2e": "ng e2e" }, "private": true, "dependencies": { - "@angular/animations": "^8.2.14", - "@angular/common": "^8.2.14", - "@angular/compiler": "^8.2.14", - "@angular/core": "^8.2.14", - "@angular/forms": "^8.2.14", - "@angular/http": "^7.2.16", - "@angular/platform-browser": "^8.2.14", - "@angular/platform-browser-dynamic": "^8.2.14", - "@angular/router": "^8.2.14", - "core-js": "^3.6.2", - "rxjs": "~6.5.4", - "tslib": "^1.10.0", - "zone.js": "~0.10.2" + "@angular/animations": "^9.1.9", + "@angular/common": "^9.1.9", + "@angular/compiler": "^9.1.9", + "@angular/core": "^9.1.9", + "@angular/forms": "^9.1.9", + "@angular/platform-browser": "^9.1.9", + "@angular/platform-browser-dynamic": "^9.1.9", + "@angular/router": "^9.1.9", + "core-js": "^3.6.5", + "rxjs": "~6.5.5", + "tslib": "^1.13.0", + "zone.js": "~0.10.3" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.803.22", - "@angular/cli": "^8.3.22", - "@angular/compiler-cli": "^8.2.14", - "@angular/language-service": "^8.2.14", - "@types/jasmine": "~3.5.0", + "@angular-devkit/build-angular": "^0.901.7", + "@angular-eslint/builder": "0.0.1-alpha.32", + "@angular-eslint/eslint-plugin": "0.0.1-alpha.32", + "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32", + "@angular-eslint/schematics": "0.0.1-alpha.32", + "@angular-eslint/template-parser": "0.0.1-alpha.32", + "@angular/cli": "^9.1.7", + "@angular/compiler-cli": "^9.1.9", + "@angular/language-service": "^9.1.9", + "@types/jasmine": "~3.5.10", "@types/jasminewd2": "^2.0.8", - "@types/node": "~13.1.5", - "codelyzer": "~5.2.1", + "@types/node": "~14.0.9", + "@typescript-eslint/eslint-plugin": "2.31.0", + "@typescript-eslint/eslint-plugin-tslint": "^3.1.0", + "@typescript-eslint/parser": "2.31.0", + "eslint": "^6.8.0", + "eslint-plugin-import": "^2.20.2", "jasmine-core": "~3.5.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~4.4.1", + "jasmine-spec-reporter": "~5.0.2", + "karma": "~5.0.9", "karma-chrome-launcher": "~3.1.0", - "karma-coverage-istanbul-reporter": "^2.1.1", - "karma-jasmine": "~3.0.3", - "karma-jasmine-html-reporter": "^1.5.1", - "protractor": "~5.4.2", - "ts-node": "~8.5.4", - "tslint": "~5.20.1", - "typescript": "^3.5.3", + "karma-coverage-istanbul-reporter": "^3.0.3", + "karma-jasmine": "~3.3.1", + "karma-jasmine-html-reporter": "^1.5.4", + "protractor": "~7.0.0", + "ts-node": "~8.10.2", + "typescript": "^3.8.3", "webix": "^7.0.0" } } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 94b18fc..7cbf317 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -13,8 +13,8 @@ const routes: Routes = [ { path: 'html-layout', component: HTMLLayoutComponent }, { path: 'form-grid', component: FormToolbarComponent }, { path: 'template-routing', component: TemplateRoutingComponent, children: [ - { path: 'area1', component: WebixLayoutComponent, outlet:"sub" }, - { path: 'area2', component: HTMLLayoutComponent, outlet:"sub" } + { path: 'area1', component: WebixLayoutComponent, outlet:'sub' }, + { path: 'area2', component: HTMLLayoutComponent, outlet:'sub' } ]}, { path: '', component: HTMLLayoutComponent } ]; diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 635a9f7..0bf8fd6 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -20,7 +20,7 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'angular-demo'`, () => { + it('should have as title "angular-demo"', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('angular-demo'); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2e81bd4..1a31342 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,7 +15,7 @@ import { SideBarComponent } from './components/sidebar.component'; import { DataTableComponent } from './components/datatable.component'; import { ToolbarComponent } from './components/toolbar.component'; import { ColumnsComponent, RowsComponent, CellComponent } from './components/layout.component'; - + @NgModule({ declarations: [ diff --git a/src/app/components/data-loading.component.ts b/src/app/components/data-loading.component.ts index 1c73999..a17a72e 100644 --- a/src/app/components/data-loading.component.ts +++ b/src/app/components/data-loading.component.ts @@ -1,38 +1,40 @@ -import { Component, Input, ElementRef, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; import { FilmService } from '../film.service'; import { RemoteDataService } from '../remote.service'; -import { Film } from '../film'; + @Component({ selector: 'data-loading', - template:"", + template: '', providers: [FilmService, RemoteDataService] }) export class DataLoadingComponent implements OnDestroy, OnInit { - private ui : webix.ui.baseview; + private ui: webix.ui.baseview; constructor(private films: FilmService, private remote: RemoteDataService, root: ElementRef) { - this.ui = webix.ui({ - container: root.nativeElement, - type:"wide", - rows:[{ - type:"header", template:"Loading data with Angular HTTP", - },{ - view:"datatable", autoConfig:true, autoheight:true, autowidth:true, - data: remote.getFilms() - },{ height: 50 },{ - type:"header", template:"Loading data with Webix", - },{ - view:"datatable", autoConfig:true, autoheight:true, autowidth:true, - url: "https://api.jsonbin.io/b/5ea6df0b98b3d537523566e7" - }] - }) - } - ngOnInit(){ - this.ui.resize(); - } - ngOnDestroy(){ - this.ui.destructor(); - } + this.ui = webix.ui({ + container: root.nativeElement, + type: 'wide', + rows: [{ + type: 'header', template: 'Loading data with Angular HTTP', + }, { + view: 'datatable', autoConfig: true, autoheight: true, autowidth: true, + data: remote.getFilms() + }, {height: 50}, { + type: 'header', template: 'Loading data with Webix', + }, { + view: 'datatable', autoConfig: true, autoheight: true, autowidth: true, + url: 'https://api.jsonbin.io/b/5ea6df0b98b3d537523566e7' + }] + }) + } + + ngOnInit(): void { + this.ui.resize(); + } + + ngOnDestroy(): void { + this.ui.destructor(); + } } diff --git a/src/app/components/datatable.component.ts b/src/app/components/datatable.component.ts index 6cd9111..6b0581b 100644 --- a/src/app/components/datatable.component.ts +++ b/src/app/components/datatable.component.ts @@ -1,36 +1,36 @@ -import { Component, Input, ElementRef, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; import { FilmService } from '../film.service'; import { Film } from '../film'; @Component({ selector: 'datatable', - template:"", + template:'', providers: [FilmService] }) export class DataTableComponent implements OnDestroy, OnInit { - private ui : webix.ui.datatable; - @Output() onRowSelect = new EventEmitter(); + @Output() rowSelected = new EventEmitter(); + private ui: webix.ui.datatable; constructor(private films: FilmService, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, - view:"datatable", autoConfig:true, data: this.films.getFilms(), + view:'datatable', autoConfig:true, data: this.films.getFilms(), on:{ - onAfterSelect: (id) => this.onRowSelect.emit(this.ui.getItem(id)) + onAfterSelect: (id): void => this.rowSelected.emit(this.ui.getItem(id)) } - }) + }) as webix.ui.datatable } - - addRow(){ - this.ui.add({ title:"New row" }); + + addRow(): void{ + this.ui.add({ title:'New row' }); } - updateFilm(film: Film){ + updateFilm(film: Film): void{ this.ui.updateItem(film.id, film); } - ngOnInit(){ + ngOnInit(): void{ this.ui.resize(); } - ngOnDestroy(){ + ngOnDestroy(): void{ this.ui.destructor(); } -} \ No newline at end of file +} diff --git a/src/app/components/form-toolbar.component.ts b/src/app/components/form-toolbar.component.ts index c4b4c75..950155b 100644 --- a/src/app/components/form-toolbar.component.ts +++ b/src/app/components/form-toolbar.component.ts @@ -1,26 +1,26 @@ import { Component, ViewChild } from '@angular/core'; -import { DataTableComponent } from "./datatable.component"; -import { Film } from "../film"; +import { DataTableComponent } from './datatable.component'; +import { Film } from '../film'; @Component({ selector: 'form-toolbar', template: ` -
- - - -
- ` +
+ + + +
+ ` }) export class FormToolbarComponent { @ViewChild(DataTableComponent, {static: false}) grid: DataTableComponent; - private selectedFilm: Film; + public selectedFilm: Film; - fillInfo(film : Film){ + fillInfo(film: Film): void{ this.selectedFilm = film; } - saveFilm(){ + saveFilm(): void{ this.grid.updateFilm(this.selectedFilm); } -} \ No newline at end of file +} diff --git a/src/app/components/html-layout.component.ts b/src/app/components/html-layout.component.ts index 137d86f..9f0d9f7 100644 --- a/src/app/components/html-layout.component.ts +++ b/src/app/components/html-layout.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { Film } from "../film" +import { Film } from '../film' @Component({ selector: 'html-layout', template: `

Initing Webix component in separate HTML containers

- +

Selected Film

    @@ -15,8 +15,8 @@ import { Film } from "../film" ` }) export class HTMLLayoutComponent { - private selectedFilm: Film; - fillInfo(film : Film){ + public selectedFilm: Film; + fillInfo(film: Film): void{ this.selectedFilm = film; } } diff --git a/src/app/components/layout.component.ts b/src/app/components/layout.component.ts index 0e0c1d6..900d108 100644 --- a/src/app/components/layout.component.ts +++ b/src/app/components/layout.component.ts @@ -1,46 +1,56 @@ -import { Component, Input, ElementRef, AfterContentInit , ContentChildren, QueryList, forwardRef, OnInit } from '@angular/core'; +import { + AfterContentInit, + Component, + ContentChildren, + ElementRef, + forwardRef, + Input, + OnInit, + QueryList +} from '@angular/core'; @Component({ selector: 'columns', - template:"" + template:'' }) -export class ColumnsComponent implements AfterContentInit { - private ui : webix.ui.layout; +export class ColumnsComponent implements AfterContentInit, OnInit { + private ui: webix.ui.layout; private root: ElementRef; @Input() type: string; @Input() padding: number; @Input() margin: number; + // eslint-disable-next-line @typescript-eslint/no-use-before-define @ContentChildren(forwardRef(() => CellComponent)) cells: QueryList; constructor(root: ElementRef) { this.root = root; } - getBaseConfig() : any { + getBaseConfig(): any { return { - view:"layout", - cols:[] + view:'layout', + cols:[] }; } - ngOnInit() : void{ - let config:any = this.getBaseConfig(); + ngOnInit(): void{ + const config: any = this.getBaseConfig(); config.container = this.root.nativeElement; if (this.padding) - config.padding = this.padding*1; + config.padding = +this.padding; if (this.margin) - config.margin = this.margin*1; + config.margin = +this.margin; if (this.type) config.type = this.type; - this.ui = webix.ui(config); + this.ui = webix.ui(config) as webix.ui.layout; } - ngAfterContentInit() { + ngAfterContentInit(): void { this.cells.forEach((item) => this.ui.addView( item.getView() ) ) this.ui.resize(); } @@ -48,24 +58,24 @@ export class ColumnsComponent implements AfterContentInit { @Component({ selector: 'rows', - template:"" + template:'' }) export class RowsComponent extends ColumnsComponent { constructor(root: ElementRef) { super(root); } - getBaseConfig() : any { + getBaseConfig(): any { return { - view:"layout", - rows:[] + view:'layout', + rows:[] }; } } @Component({ selector: 'cell', - template:"" + template:'' }) export class CellComponent{ private root: ElementRef; @@ -82,31 +92,32 @@ export class CellComponent{ this.root = root; } - getView() : any { - var view = this.root.nativeElement.querySelector("[view_id]"); - var result, config; + getView(): any { + const view = this.root.nativeElement.querySelector('[view_id]'); + let result; + let config; if (!view) - result = config = { view:"template", content: this.content || this.root.nativeElement }; + result = config = { view:'template', content: this.content || this.root.nativeElement }; else { - result = webix.$$(view.getAttribute("view_id")); + result = webix.$$(view.getAttribute('view_id')); config = result.config; } if (this.width) - config.width = this.width*1; + config.width = +this.width; if (this.height) - config.height = this.height*1; + config.height = +this.height; if (this.minHeight) - config.minHeight = this.minHeight*1; + config.minHeight = +this.minHeight; if (this.minWidth) - config.minWidth = this.minWidth*1; + config.minWidth = +this.minWidth; if (this.maxHeight) - config.maxHeight = this.maxHeight*1; + config.maxHeight = +this.maxHeight; if (this.maxWidth) - config.maxWidth = this.maxWidth*1; + config.maxWidth = +this.maxWidth; if (this.gravity) - config.gravity = this.gravity*1; + config.gravity = +this.gravity; return result; } -} \ No newline at end of file +} diff --git a/src/app/components/sidebar.component.ts b/src/app/components/sidebar.component.ts index cbfaec0..eaa85a9 100644 --- a/src/app/components/sidebar.component.ts +++ b/src/app/components/sidebar.component.ts @@ -1,34 +1,34 @@ -import { Component, Input, ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'sidebar', - template: "" + template: '' }) export class SideBarComponent implements OnDestroy, OnInit { private ui: webix.ui.menu; constructor(private router: Router, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, - view: "menu", layout: "y", minHeight: 200, select: true, + view: 'menu', layout: 'y', minHeight: 200, select: true, data: [ - { id: "html-layout", value: "HTML Layout" }, - { id: "webix-layout", value: "Webix Layout" }, - { id: "form-grid", value: "Form and Grid" } + { id: 'html-layout', value: 'HTML Layout' }, + { id: 'webix-layout', value: 'Webix Layout' }, + { id: 'form-grid', value: 'Form and Grid' } ], on: { - onItemClick: (id) => this.router.navigate([id]) + onItemClick: (id): Promise => this.router.navigate([id]) } - }) + }) as webix.ui.menu - this.ui.select("webix-layout", false); + this.ui.select('webix-layout', false); } - ngOnInit() { + ngOnInit(): void { this.ui.resize(); } - ngOnDestroy() { + ngOnDestroy(): void { this.ui.destructor(); } -} \ No newline at end of file +} diff --git a/src/app/components/template-routing.component.ts b/src/app/components/template-routing.component.ts index 06f7b6c..22d4792 100644 --- a/src/app/components/template-routing.component.ts +++ b/src/app/components/template-routing.component.ts @@ -1,22 +1,20 @@ -import { Component, ViewChild } from '@angular/core'; -import { DataTableComponent } from "./datatable.component"; -import { Film } from "../film"; +import { Component } from '@angular/core'; @Component({ selector: 'template-routing', template: ` - + - + ` }) export class TemplateRoutingComponent { - -} \ No newline at end of file + +} diff --git a/src/app/components/toolbar.component.ts b/src/app/components/toolbar.component.ts index d6c874a..3f3f0cd 100644 --- a/src/app/components/toolbar.component.ts +++ b/src/app/components/toolbar.component.ts @@ -1,29 +1,29 @@ -import { Component, Input, ElementRef, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; import { FilmService } from '../film.service'; @Component({ selector: 'toolbar', - template:"", + template:'', providers: [FilmService] }) export class ToolbarComponent implements OnDestroy, OnInit { - private ui : webix.ui.toolbar; - @Output() onButton = new EventEmitter(); + private ui: webix.ui.toolbar; + @Output() button = new EventEmitter(); constructor(private films: FilmService, root: ElementRef) { - this.ui = webix.ui({ + this.ui = webix.ui({ container: root.nativeElement, - view:"toolbar", + view:'toolbar', elements:[ - { view:"button", value:"Add Row", width:150, click: () => this.onButton.emit("add") } + { view:'button', value:'Add Row', width:150, click: (): void => this.button.emit('add') } ] - }) + }) as webix.ui.toolbar } - - ngOnInit(){ + + ngOnInit(): void{ this.ui.resize(); } - ngOnDestroy(){ + ngOnDestroy(): void{ this.ui.destructor(); } -} \ No newline at end of file +} diff --git a/src/app/components/webix-layout.component.ts b/src/app/components/webix-layout.component.ts index bbf41d8..e86f0a9 100644 --- a/src/app/components/webix-layout.component.ts +++ b/src/app/components/webix-layout.component.ts @@ -1,24 +1,30 @@ import { Component, ViewChild } from '@angular/core'; -import { ToolbarComponent } from "./toolbar.component"; -import { DataTableComponent } from "./datatable.component"; +import { DataTableComponent } from './datatable.component'; @Component({ selector: 'webix-layout', - template: ` - > - - - - - - - - ` + template: ` + + + > + + + + + + + + + + + + + ` }) export class WebixLayoutComponent { @ViewChild(DataTableComponent, {static: false}) grid: DataTableComponent; - buttonClick(id: string){ - if (id === "add") + buttonClick(id: string): void{ + if (id === 'add') this.grid.addRow(); } } diff --git a/src/app/film.service.ts b/src/app/film.service.ts index 78ecc36..316494f 100644 --- a/src/app/film.service.ts +++ b/src/app/film.service.ts @@ -1,18 +1,18 @@ import { Injectable } from '@angular/core'; -import { Film } from "./film"; +import { Film } from './film'; const FILMS: Film[] = [ - { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"}, - { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"}, - { id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"}, - { id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"}, - { id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"}, - { id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"} + { id:1, title:'The Shawshank Redemption', year:1994, votes:678790, rating:9.2, rank:1, category:'Thriller'}, + { id:2, title:'The Godfather', year:1972, votes:511495, rating:9.2, rank:2, category:'Crime'}, + { id:3, title:'The Godfather: Part II', year:1974, votes:319352, rating:9.0, rank:3, category:'Crime'}, + { id:4, title:'The Good, the Bad and the Ugly', year:1966, votes:213030, rating:8.9, rank:4, category:'Western'}, + { id:5, title:'Pulp fiction', year:1994, votes:533848, rating:8.9, rank:5, category:'Crime'}, + { id:6, title:'12 Angry Men', year:1957, votes:164558, rating:8.9, rank:6, category:'Western'} ]; @Injectable() export class FilmService { getFilms(): Promise{ return Promise.resolve(FILMS); - } + } } diff --git a/src/app/remote.service.ts b/src/app/remote.service.ts index 94652a5..fe0ffed 100644 --- a/src/app/remote.service.ts +++ b/src/app/remote.service.ts @@ -1,13 +1,13 @@ import { Injectable } from '@angular/core'; -import { Film } from "./film"; +import { Film } from './film'; import { HttpClient } from '@angular/common/http'; @Injectable() export class RemoteDataService { constructor(private http: HttpClient) { } - getFilms():Promise{ - return this.http.get(`https://api.jsonbin.io/b/5ea6df0b98b3d537523566e7`).toPromise(); + getFilms(): Promise{ + return this.http.get('https://api.jsonbin.io/b/5ea6df0b98b3d537523566e7').toPromise(); } } diff --git a/src/tslint.json b/src/tslint.json deleted file mode 100644 index aa7c3ee..0000000 --- a/src/tslint.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../tslint.json", - "rules": { - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ] - } -} diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 868ecba..0000000 --- a/tslint.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - "extends": "tslint:recommended", - "rulesDirectory": [ - "codelyzer" - ], - "rules": { - "array-type": false, - "arrow-parens": false, - "deprecation": { - "severity": "warn" - }, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "interface-name": false, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-consecutive-blank-lines": false, - "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-use-before-declare": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "object-literal-sort-keys": false, - "ordered-imports": false, - "quotemark": [ - true, - "single" - ], - "trailing-comma": false, - "no-output-on-prefix": true, - "use-input-property-decorator": true, - "use-output-property-decorator": true, - "use-host-property-decorator": true, - "no-input-rename": true, - "no-output-rename": true, - "use-life-cycle-interface": true, - "use-pipe-transform-interface": true, - "component-class-suffix": true, - "directive-class-suffix": true - } -}