nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-354 Fix sorting bug and create sorting component

This commit is contained in:
Martin Rojas Miguel Angel 2018-03-06 11:28:02 +01:00 committed by Holger Hagen
parent 7fd9422dd6
commit d751c43a2f
19 changed files with 210 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/src/app/app.module.ts
View File

@ -30,6 +30,7 @@ import { SpinnerComponent } from './shared/spinner/spinner.component';
import { FilterComponent } from './shared/filter/filter.component';
import { IconTypeComponent } from './shared/type-icon/icon-type.component';
import { AlertComponent } from './shared/alert/alert.component';
import { SortComponent } from './shared/sort/sort.component';
import { GeneralMessageModalComponent } from './shared/general-message-modal/general-message-modal.component';
//Shared
@ -81,6 +82,7 @@ const DECLARATIONS = [
IconTypeComponent,
AlertComponent,
GeneralMessageModalComponent,
SortComponent,
MapValuesPipe,
RemoveNoneTypePipe
];

14
admin/src/app/pipes/remove-none-type.ts
View File

@ -1,15 +1,15 @@
import {Pipe, PipeTransform} from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'removeNoneType'})
@Pipe({ name: 'removeEmptyType' })
export class RemoveNoneTypePipe implements PipeTransform {
transform(value: any): Object[] {
let returnArray = [];
value.forEach((entry) => {
if(entry.key !== 'NONE')
returnArray.push({
key: entry.key,
value: entry.value
});
if (entry.key !== '')
returnArray.push({
key: entry.key,
value: entry.value
});
});
return returnArray;
}

3
admin/src/app/services/workbasket.service.spec.ts
View File

@ -1,5 +1,6 @@
import { TestBed, inject, async } from '@angular/core/testing';
import { WorkbasketService, Direction } from './workbasket.service';
import { WorkbasketService } from './workbasket.service';
import { Direction } from '../shared/sort/sort.component';
import { HttpModule, Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

9
admin/src/app/services/workbasket.service.ts
View File

@ -4,16 +4,9 @@ import { WorkbasketSummary } from '../model/workbasketSummary';
import { Workbasket } from '../model/workbasket';
import { WorkbasketAccessItems } from '../model/workbasket-access-items';
import { environment } from '../../environments/environment';
import { Direction } from '../shared/sort/sort.component';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Timestamp } from 'rxjs';
//sort direction
export enum Direction {
ASC = 'asc',
DESC = 'desc'
};
@Injectable()
export class WorkbasketService {

4
admin/src/app/shared/filter/filter.component.html
View File

@ -7,7 +7,7 @@
</button>
<ul class="dropdown-menu dropdown-menu-users" role="menu">
<li *ngFor ="let type of allTypes | mapValues">
<button type="button" (click)="selectType(type.key)" class="btn btn-default btn-users-list" data-toggle="tooltip" [title]="type.value">
<button type="button" (click)="selectType(type.key); search()" class="btn btn-default btn-users-list" data-toggle="tooltip" [title]="type.value">
<taskana-icon-type class="vertical-align" [type] ='type.key'></taskana-icon-type>
</button>
</li>
@ -19,7 +19,7 @@
<div class="col-xs-4">
<input type="text" [(ngModel)]= "filter.key" (keyup.enter)="search()" class="form-control" id="wb-display-key-filter" placeholder="Filter key">
</div>
<button (click)="clear()" type="button"
<button (click)="clear(); search()" type="button"
class="btn btn-default glyphicon glyphicon-ban-circle blue pull-right margin-right" data-toggle="tooltip" title="Clear">
</button>
</div>

29
admin/src/app/shared/sort/sort.component.html Normal file
View File

@ -0,0 +1,29 @@
<div class="dropdown clearfix btn-group">
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon {{sort.sortDirection === 'asc'? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes' }} blue"
data-toggle= "tooltip" title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}"></span>
</button>
<div class="dropdown-menu dropdown-menu-right sortby-dropdown popup" aria-labelledby="sortingDropdown">
<div>
<div class="col-xs-6">
<h5>Sort By</h5>
</div>
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')" data-toggle="tooltip" title="A-Z" class="btn btn-default {{sort.sortDirection === 'asc'? 'selected' : '' }}">
<span class="glyphicon glyphicon-sort-by-attributes-alt blue" aria-hidden="true"></span>
</button>
<button id= "sort-by-direction-desc" type="button" (click)="changeOrder('desc')" data-toggle="tooltip" title="Z-A" class="btn btn-default {{sort.sortDirection === 'desc'? 'selected' : '' }}" >
<span class="glyphicon glyphicon-sort-by-attributes blue" aria-hidden="true"></span>
</button>
</div>
<div role="separator" class="divider"></div>
<li id="sort-by-{{sortingField.key}}"(click)="changeSortBy(sortingField.key)" *ngFor="let sortingField of sortingFields | mapValues">
<a>
<label>
<span class="glyphicon {{sort.sortBy === sortingField.key? 'glyphicon-check': 'glyphicon-unchecked'}} blue" aria-hidden="true"></span>
{{sortingField.value}}
</label>
</a>
</li>
</div>
</div>

4
admin/src/app/shared/sort/sort.component.scss Normal file
View File

@ -0,0 +1,4 @@
.sortby-dropdown {
min-width: 200px;
}

40
admin/src/app/shared/sort/sort.component.spec.ts Normal file
View File

@ -0,0 +1,40 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MapValuesPipe } from '../../pipes/map-values.pipe';
import { SortComponent, Direction } from './sort.component';
describe('SortComponent', () => {
let component: SortComponent;
let fixture: ComponentFixture<SortComponent>;
let debugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SortComponent, MapValuesPipe ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SortComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement.nativeElement;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should change order when click on order ', () => {
expect(component.sort.sortDirection).toBe(Direction.ASC);
debugElement.querySelector('#sort-by-direction-desc').click();
expect(component.sort.sortDirection).toBe(Direction.DESC);
});
it('should change sort by when click on sort by ', () => {
expect(component.sort.sortBy).toBe('key');
debugElement.querySelector('#sort-by-name').click();
expect(component.sort.sortBy).toBe('name');
});
});

49
admin/src/app/shared/sort/sort.component.ts Normal file
View File

@ -0,0 +1,49 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
export enum Direction {
ASC = 'asc',
DESC = 'desc'
};
export class SortingModel {
sortBy:string;
sortDirection:string;
constructor(sortBy:string = 'key', sortDirection:Direction = Direction.ASC){
this.sortBy = sortBy;
this.sortDirection = sortDirection;
}
}
@Component({
selector: 'taskana-sort',
templateUrl: './sort.component.html',
styleUrls: ['./sort.component.scss']
})
export class SortComponent implements OnInit {
readonly sortingFields: Map<string, string> = new Map([['name', 'Name'], ['key', 'Id'], ['description', 'Description'], ['owner', 'Owner'], ['type', 'Type']]);
constructor() { }
@Output()
performSorting = new EventEmitter<SortingModel>();
sort: SortingModel = new SortingModel();
ngOnInit() {
}
changeOrder(sortDirection: string) {
this.sort.sortDirection = (sortDirection === Direction.ASC) ? Direction.ASC : Direction.DESC;
this.search();
}
changeSortBy(sortBy: string) {
this.sort.sortBy = sortBy;
this.search();
}
private search(){
this.performSorting.emit(this.sort);
}
}

6
admin/src/app/shared/type-icon/icon-type.component.html
View File

@ -1,2 +1,4 @@
<svg-icon *ngIf="type !== 'NONE'" class="{{selected? 'white': 'blue' }} small" src="./assets/icons/{{type === 'PERSONAL'? 'user.svg': type === 'GROUP'? 'users.svg' : type === 'TOPIC'? 'topic.svg' : 'clearance.svg'}}"></svg-icon>
<div *ngIf="type === 'NONE'" class = "glyphicon glyphicon-asterisk blue"></div>
<div *ngIf="type === ''; else customIcon" class = "glyphicon glyphicon-asterisk blue"></div>
<ng-template #customIcon>
<svg-icon class="{{selected? 'white': 'blue' }} small" src="./assets/icons/{{type === 'PERSONAL'? 'user.svg': type === 'GROUP'? 'users.svg' : type === 'TOPIC'? 'topic.svg' : 'clearance.svg'}}"></svg-icon>
</ng-template>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 347 B

4
admin/src/app/shared/type-icon/icon-type.component.ts
View File

@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
export enum ICONTYPES {
NONE = 'NONE',
NONE = '',
PERSONAL = 'PERSONAL',
GROUP = 'GROUP',
CLEARANCE = 'CLEARANCE',
@ -17,7 +17,7 @@ export enum ICONTYPES {
})
export class IconTypeComponent implements OnInit {
public static get allTypes(): Map<string, string> { return new Map([['NONE', 'None'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'], ['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']])};
public static get allTypes(): Map<string, string> { return new Map([['', 'None'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'], ['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']])};
constructor() { }

2
admin/src/app/workbasket/details/information/workbasket-information.component.html
View File

@ -28,7 +28,7 @@
</button>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a *ngFor="let type of allTypes | mapValues | removeNoneType" (click)="selectType(type.key)">
<a *ngFor="let type of allTypes | mapValues | removeEmptyType" (click)="selectType(type.key)">
<taskana-icon-type class="vertical-align" [type] ='type.key'></taskana-icon-type>
{{type.value}}
</a>

15
admin/src/app/workbasket/details/workbasket-details.component.spec.ts
View File

@ -12,6 +12,7 @@ import { RemoveNoneTypePipe } from '../../pipes/remove-none-type';
import { AlertComponent } from '../../shared/alert/alert.component';
import { GeneralMessageModalComponent } from '../../shared/general-message-modal/general-message-modal.component';
import { Links } from 'app/model/links';
import { WorkbasketAccessItems } from '../../model/workbasket-access-items';
import { WorkbasketService } from '../../services/workbasket.service';
import { MasterAndDetailService } from '../../services/master-and-detail.service';
@ -38,7 +39,7 @@ describe('WorkbasketDetailsComponent', () => {
declarations: [ WorkbasketDetailsComponent, NoAccessComponent, WorkbasketInformationComponent, SpinnerComponent, IconTypeComponent, MapValuesPipe, RemoveNoneTypePipe, AlertComponent, GeneralMessageModalComponent, AccessItemsComponent ],
providers:[WorkbasketService, MasterAndDetailService, PermissionService, AlertService]
})
.compileComponents();
.compileComponents();
}));
beforeEach(() => {
@ -48,13 +49,15 @@ describe('WorkbasketDetailsComponent', () => {
fixture.detectChanges();
masterAndDetailService = TestBed.get(MasterAndDetailService);
workbasketService = TestBed.get(WorkbasketService);
spyOn(masterAndDetailService, 'getShowDetail').and.returnValue(Observable.of(true));
spyOn(workbasketService,'getSelectedWorkBasket').and.returnValue(Observable.of('id1'));
spyOn(workbasketService,'getWorkBasketsSummary').and.returnValue(Observable.of(new Array<WorkbasketSummary>(new WorkbasketSummary('id1','','','','','','','','','','','',new Array<Links>( new Links('self', 'someurl'))))));
spyOn(workbasketService,'getWorkBasket').and.returnValue(Observable.of(new Workbasket('id1')));
spyOn(masterAndDetailService, 'getShowDetail').and.callFake(()=>{return Observable.of(true)})
spyOn(workbasketService, 'getSelectedWorkBasket').and.callFake(()=>{return Observable.of('id1')})
spyOn(workbasketService, 'getWorkBasketsSummary').and.callFake(()=>{return Observable.of(new Array<WorkbasketSummary>(new WorkbasketSummary('id1', '', '', '', '', '', '', '', '', '', '', '', new Array<Links>(new Links('self', 'someurl')))))})
spyOn(workbasketService, 'getWorkBasket').and.callFake(()=>{return Observable.of(new Workbasket('id1'))})
spyOn(workbasketService, 'getWorkBasketAccessItems').and.callFake(()=>{return Observable.of(new Array<WorkbasketAccessItems>())})
});
afterEach(() =>{
afterEach(() => {
document.body.removeChild(debugElement);
});

59
admin/src/app/workbasket/list/workbasket-list.component.html
View File

@ -1,5 +1,5 @@
<div class = "workbasket-list-full-height">
<ul id = "wb-list-container" class="list-group footer-space">
<div class="workbasket-list-full-height">
<ul id="wb-list-container" class="list-group footer-space">
<li id="wb-action-toolbar" class="list-group-item tab-align">
<div class="row">
<div class="col-xs-9">
@ -19,65 +19,42 @@
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class = "pull-right margin-right">
<div class="dropdown clearfix btn-group">
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon {{sortDirection === 'asc'? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes' }} blue"
data-toggle= "tooltip" title="{{sortDirection === 'asc'? 'A-Z' : 'Z-A' }}"></span>
</button>
<div class="dropdown-menu dropdown-menu-right sortby-dropdown popup" aria-labelledby="sortingDropdown">
<div>
<div class="col-xs-6">
<h5>Sort By</h5>
</div>
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')" data-toggle="tooltip" title="A-Z" class="btn btn-default {{sortDirection === 'asc'? 'selected' : '' }}">
<span class="glyphicon glyphicon-sort-by-attributes-alt blue" aria-hidden="true"></span>
</button>
<button id= "sort-by-direction-desc" type="button" (click)="changeOrder('desc')" data-toggle="tooltip" title="Z-A" class="btn btn-default {{sortDirection === 'desc'? 'selected' : '' }}" >
<span class="glyphicon glyphicon-sort-by-attributes blue" aria-hidden="true"></span>
</button>
</div>
<div role="separator" class="divider"></div>
<li id="sort-by-{{sortingField.key}}"(click)="changeSortBy(sortingField.key)" *ngFor="let sortingField of sortingFields | mapValues">
<a>
<label>
<span class="glyphicon {{sortBy === sortingField.key? 'glyphicon-check': 'glyphicon-unchecked'}} blue" aria-hidden="true"></span>
{{sortingField.value}}
</label>
</a>
</li>
</div>
</div>
<div class="pull-right margin-right">
<taskana-sort (performSorting)="performSorting($event)"></taskana-sort>
<div class="clearfix btn-group">
<button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" data-toggle="collapse" data-target="#wb-filter-bar" aria-expanded="false">
<button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" data-toggle="collapse" data-target="#wb-filter-bar"
aria-expanded="false">
<span class="glyphicon glyphicon-filter blue wb-filter-toggle"></span>
</button>
</div>
</div>
</div>
<div class = "row">
<div class="row">
<taskana-filter target="wb-filter-bar" (performFilter)="performFilter($event)"></taskana-filter>
</div>
</li>
<taskana-spinner [isRunning]="requestInProgress" class = "centered-horizontally"></taskana-spinner>
<li class="list-group-item" *ngFor= "let workbasket of workbaskets" [class.active]="workbasket.workbasketId == selectedId" type="text" (click) ="selectWorkbasket(workbasket.workbasketId)">
<taskana-spinner [isRunning]="requestInProgress" class="centered-horizontally"></taskana-spinner>
<li class="list-group-item" *ngFor="let workbasket of workbaskets" [class.active]="workbasket.workbasketId == selectedId"
type="text" (click)="selectWorkbasket(workbasket.workbasketId)">
<div class="row">
<dl class="col-xs-1">
<dt>
<taskana-icon-type class="vertical-align" [type] ="workbasket.type" [selected] = "workbasket.workbasketId === selectedId" ></taskana-icon-type>
<taskana-icon-type class="vertical-align" [type]="workbasket.type" [selected]="workbasket.workbasketId === selectedId"></taskana-icon-type>
</dt>
</dl>
<dl class="col-xs-10">
<dt>{{workbasket.name}} ({{workbasket.key}}) </dt>
<dt>{{workbasket.name}} ({{workbasket.key}}) </dt>
<dd>{{workbasket.description}}</dd>
<dd>{{workbasket.owner}} &nbsp;</dd>
</dl>
</div>
</li>
</ul>
<ul id= "wb-pagination" class="pagination vertical-center">
<ul id="wb-pagination" class="pagination vertical-center">
<li>
<a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="">1</a>
@ -95,7 +72,9 @@
<a href="">5</a>
</li>
<li>
<a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>

4
admin/src/app/workbasket/list/workbasket-list.component.scss
View File

@ -16,10 +16,6 @@ a > label{
width: 100%;
}
.sortby-dropdown {
min-width: 200px;
}
.tab-align{
padding-bottom: 12px;
}

5
admin/src/app/workbasket/list/workbasket-list.component.spec.ts
View File

@ -4,13 +4,14 @@ import { WorkbasketListComponent } from './workbasket-list.component';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';
import { WorkbasketSummary } from '../../model/workbasketSummary';
import { WorkbasketService, Direction } from '../../services/workbasket.service';
import { WorkbasketService } from '../../services/workbasket.service';
import { HttpModule } from '@angular/http';
import { Router, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { Observable } from 'rxjs/Observable';
import { SpinnerComponent } from '../../shared/spinner/spinner.component';
import { FilterModel } from '../../shared/filter/filter.component';
import { SortComponent } from '../../shared/sort/sort.component';
import { IconTypeComponent } from '../../shared/type-icon/icon-type.component';
import { RemoveNoneTypePipe } from '../../pipes/remove-none-type';
import { MapValuesPipe } from '../../pipes/map-values.pipe';
@ -50,7 +51,7 @@ describe('WorkbasketListComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [WorkbasketListComponent, DummyDetailComponent, MapValuesPipe, SpinnerComponent, FilterComponent, RemoveNoneTypePipe, IconTypeComponent],
declarations: [WorkbasketListComponent, DummyDetailComponent, SpinnerComponent, FilterComponent, RemoveNoneTypePipe, IconTypeComponent, SortComponent, MapValuesPipe],
imports: [
AngularSvgIconModule,
HttpModule,

23
admin/src/app/workbasket/list/workbasket-list.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, EventEmitter } from '@angular/core';
import { WorkbasketSummary } from '../../model/workbasketSummary';
import { WorkbasketService, Direction } from '../../services/workbasket.service'
import { WorkbasketService } from '../../services/workbasket.service'
import { Subscription } from 'rxjs/Subscription';
import { FilterModel } from '../../shared/filter/filter.component'
import { filter } from 'rxjs/operator/filter';
import { Direction, SortingModel } from '../../shared/sort/sort.component'
import { Router, ActivatedRoute } from '@angular/router';
@Component({
@ -20,9 +20,7 @@ export class WorkbasketListComponent implements OnInit {
workbaskets: Array<WorkbasketSummary> = [];
requestInProgress: boolean = false;
sortBy: string = 'key';
sortDirection: Direction = Direction.ASC;
sortingFields: Map<string, string> = new Map([['name', 'Name'], ['key', 'Id'], ['description', 'Description'], ['owner', 'Owner'], ['type', 'Type']]);
sort: SortingModel = new SortingModel();
filterBy: FilterModel = new FilterModel();
private workBasketSummarySubscription: Subscription;
@ -57,14 +55,10 @@ export class WorkbasketListComponent implements OnInit {
}
changeOrder(sortDirection: string) {
this.sortDirection = (sortDirection === Direction.ASC) ? Direction.ASC : Direction.DESC;
performSorting(sort: SortingModel) {
this.sort = sort;
this.performRequest();
}
changeSortBy(sortBy: string) {
this.sortBy = sortBy;
this.performRequest();
}
performFilter(filterBy: FilterModel) {
@ -81,17 +75,12 @@ export class WorkbasketListComponent implements OnInit {
}
onClear() {
this.newWorkbasket.workbasketId = "";
this.newWorkbasket.name = "";
this.newWorkbasket.description = "";
this.newWorkbasket.owner = "";
this.newWorkbasket.key = "";
}
private performRequest(): void {
this.requestInProgress = true;
this.workbaskets = undefined;
this.workbasketServiceSubscription.add(this.workbasketService.getWorkBasketsSummary(true, this.sortBy, this.sortDirection, undefined,
this.workbasketServiceSubscription.add(this.workbasketService.getWorkBasketsSummary(true, this.sort.sortBy, this.sort.sortDirection, undefined,
this.filterBy.name, this.filterBy.description, undefined, this.filterBy.owner,
this.filterBy.type, undefined, this.filterBy.key).subscribe(resultList => {
this.workbaskets = resultList;

10
monitor/package-lock.json generated
View File

@ -1652,8 +1652,7 @@
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.1.tgz",
"integrity": "sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==",
"requires": {
"chartjs-color": "2.2.0",
"moment": "2.18.1"
"chartjs-color": "2.2.0"
}
},
"chartjs-color": {
@ -7525,9 +7524,10 @@
}
},
"moment": {
"version": "2.18.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
"integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
"version": "2.21.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.21.0.tgz",
"integrity": "sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==",
"dev": true
},
"move-concurrently": {
"version": "1.0.1",

3
monitor/package.json
View File

@ -50,6 +50,7 @@
"protractor": "5.2.2",
"ts-node": "4.1.0",
"tslint": "5.9.1",
"typescript": "2.5.3"
"typescript": "2.5.3",
"moment": "2.21.0"
}
}