Moved from tslint to eslint as tslint was depreciated.

Added prettier and also prettied all the typescript files using prettier

ESLint is using the AirBnB rules which are the most strict to lint the files.
This commit is contained in:
2020-10-01 20:51:22 +05:30
parent 40e79ff949
commit 1350870f9e
545 changed files with 8455 additions and 7036 deletions

View File

@ -5,15 +5,17 @@ import { map, tap } from 'rxjs/operators';
import { merge, Observable, of as observableOf } from 'rxjs';
import { Employee } from '../employee';
export class EmployeeListDataSource extends DataSource<Employee> {
private filterValue: string;
constructor(private paginator: MatPaginator, private sort: MatSort, private filter: Observable<string>, public data: Employee[]) {
constructor(
private paginator: MatPaginator,
private sort: MatSort,
private filter: Observable<string>,
public data: Employee[],
) {
super();
this.filter = filter.pipe(
tap(x => this.filterValue = x)
);
this.filter = filter.pipe(tap((x) => (this.filterValue = x)));
}
connect(): Observable<Employee[]> {
@ -21,34 +23,41 @@ export class EmployeeListDataSource extends DataSource<Employee> {
observableOf(this.data),
this.filter,
this.paginator.page,
this.sort.sortChange
this.sort.sortChange,
];
return merge(...dataMutations).pipe(
map((x: any) => {
return this.getFilteredData([...this.data]);
}),
tap((x: Employee[]) => this.paginator.length = x.length)
).pipe(
map((x: any) => {
return this.getPagedData(this.getSortedData(x));
})
);
return merge(...dataMutations)
.pipe(
map((x: any) => {
return this.getFilteredData([...this.data]);
}),
tap((x: Employee[]) => (this.paginator.length = x.length)),
)
.pipe(
map((x: any) => {
return this.getPagedData(this.getSortedData(x));
}),
);
}
disconnect() {
}
disconnect() {}
private getFilteredData(data: Employee[]): Employee[] {
const filter = (this.filterValue === undefined) ? '' : this.filterValue;
const filter = this.filterValue === undefined ? '' : this.filterValue;
return filter.split(' ').reduce((p: Employee[], c: string) => {
return p.filter(x => {
const employeeString = (
x.code + ' ' + x.name + ' ' + x.designation + ' ' + x.costCentre + (x.isActive ? ' active' : ' inactive')
).toLowerCase();
return employeeString.indexOf(c) !== -1;
}
);
return p.filter((x) => {
const employeeString = (
x.code +
' ' +
x.name +
' ' +
x.designation +
' ' +
x.costCentre +
(x.isActive ? ' active' : ' inactive')
).toLowerCase();
return employeeString.indexOf(c) !== -1;
});
}, Object.assign([], data));
}

View File

@ -11,19 +11,30 @@
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"
fxLayoutAlign="space-around start">
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
fxLayoutAlign="space-around start"
>
<mat-form-field fxFlex>
<input type="text" matInput #filterElement placeholder="Filter" formControlName="filter" autocomplete="off">
<input
type="text"
matInput
#filterElement
placeholder="Filter"
formControlName="filter"
autocomplete="off"
/>
</mat-form-field>
</div>
</form>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Code Column -->
<ng-container matColumnDef="code">
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.code}}</mat-cell>
<mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
</ng-container>
<!-- Name Column -->
@ -31,9 +42,8 @@
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let row">
<a [routerLink]="['/employees', row.id]">
<mat-icon matSuffix *ngIf="row.isStarred" class="gold">star
</mat-icon>
{{row.name}}
<mat-icon matSuffix *ngIf="row.isStarred" class="gold">star </mat-icon>
{{ row.name }}
</a>
</mat-cell>
</ng-container>
@ -41,48 +51,50 @@
<!-- Designation Column -->
<ng-container matColumnDef="designation">
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.designation}}</mat-cell>
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
</ng-container>
<!-- Salary Column -->
<ng-container matColumnDef="salary">
<mat-header-cell *matHeaderCellDef class="right">Salary</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{row.salary | currency:'INR'}}</mat-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.salary | currency: 'INR' }}</mat-cell>
</ng-container>
<!-- Points Column -->
<ng-container matColumnDef="points">
<mat-header-cell *matHeaderCellDef class="right">Points</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{row.points | number:'1.2-2'}}</mat-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.points | number: '1.2-2' }}</mat-cell>
</ng-container>
<!-- Department Column -->
<ng-container matColumnDef="department">
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.costCentre}}</mat-cell>
<mat-cell *matCellDef="let row">{{ row.costCentre }}</mat-cell>
</ng-container>
<!-- JoiningDate Column -->
<ng-container matColumnDef="joiningDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Joining On</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.joiningDate}}</mat-cell>
<mat-cell *matCellDef="let row">{{ row.joiningDate }}</mat-cell>
</ng-container>
<!-- LeavingDate Column -->
<ng-container matColumnDef="leavingDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Left On</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.leavingDate}}</mat-cell>
<mat-cell *matCellDef="let row">{{ row.leavingDate }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
<mat-paginator
#paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]"
>
</mat-paginator>
</mat-card-content>
</mat-card>

View File

@ -1,6 +1,6 @@
import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import {EmployeeListComponent} from './employee-list.component';
import { EmployeeListComponent } from './employee-list.component';
describe('EmployeeListComponent', () => {
let component: EmployeeListComponent;
@ -8,9 +8,8 @@ describe('EmployeeListComponent', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
declarations: [EmployeeListComponent]
})
.compileComponents();
declarations: [EmployeeListComponent],
}).compileComponents();
fixture = TestBed.createComponent(EmployeeListComponent);
component = fixture.componentInstance;

View File

@ -1,18 +1,18 @@
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {EmployeeListDataSource} from './employee-list-datasource';
import {Employee} from '../employee';
import {ActivatedRoute} from '@angular/router';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
import {ToCsvService} from '../../shared/to-csv.service';
import { EmployeeListDataSource } from './employee-list-datasource';
import { Employee } from '../employee';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
import { ToCsvService } from '../../shared/to-csv.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
styleUrls: ['./employee-list.component.css'],
})
export class EmployeeListComponent implements OnInit, AfterViewInit {
@ViewChild('filterElement', { static: true }) filterElement: ElementRef;
@ -24,7 +24,16 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
list: Employee[];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['code', 'name', 'designation', 'salary', 'points', 'department', 'joiningDate', 'leavingDate'];
displayedColumns = [
'code',
'name',
'designation',
'salary',
'points',
'department',
'joiningDate',
'leavingDate',
];
constructor(private route: ActivatedRoute, private fb: FormBuilder, private toCsv: ToCsvService) {
this.createForm();
@ -33,24 +42,20 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
createForm() {
this.form = this.fb.group({
filter: ''
filter: '',
});
}
listenToFilterChange() {
return this.form.get('filter').valueChanges
.pipe(
startWith(''),
debounceTime(150),
distinctUntilChanged()
);
return this.form
.get('filter')
.valueChanges.pipe(startWith(''), debounceTime(150), distinctUntilChanged());
}
ngOnInit() {
this.route.data
.subscribe((data: { list: Employee[] }) => {
this.list = data.list;
});
this.route.data.subscribe((data: { list: Employee[] }) => {
this.list = data.list;
});
this.dataSource = new EmployeeListDataSource(this.paginator, this.sort, this.filter, this.list);
}
@ -69,10 +74,12 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
Points: 'points',
Department: 'department',
JoiningDate: 'joiningDate',
LeavingDate: 'leavingDate'
LeavingDate: 'leavingDate',
};
const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {type: 'text/csv;charset=utf-8;'});
const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
type: 'text/csv;charset=utf-8;',
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', 'employees.csv');