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 { FilterComponent } from './shared/filter/filter.component';
import { IconTypeComponent } from './shared/type-icon/icon-type.component'; import { IconTypeComponent } from './shared/type-icon/icon-type.component';
import { AlertComponent } from './shared/alert/alert.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'; import { GeneralMessageModalComponent } from './shared/general-message-modal/general-message-modal.component';
//Shared //Shared
@ -81,6 +82,7 @@ const DECLARATIONS = [
IconTypeComponent, IconTypeComponent,
AlertComponent, AlertComponent,
GeneralMessageModalComponent, GeneralMessageModalComponent,
SortComponent,
MapValuesPipe, MapValuesPipe,
RemoveNoneTypePipe RemoveNoneTypePipe
]; ];

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

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

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

@ -1,5 +1,6 @@
import { TestBed, inject, async } from '@angular/core/testing'; 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 { HttpModule, Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http'; import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; 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 { Workbasket } from '../model/workbasket';
import { WorkbasketAccessItems } from '../model/workbasket-access-items'; import { WorkbasketAccessItems } from '../model/workbasket-access-items';
import { environment } from '../../environments/environment'; import { environment } from '../../environments/environment';
import { Direction } from '../shared/sort/sort.component';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import { Timestamp } from 'rxjs';
//sort direction
export enum Direction {
ASC = 'asc',
DESC = 'desc'
};
@Injectable() @Injectable()
export class WorkbasketService { export class WorkbasketService {

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

@ -7,7 +7,7 @@
</button> </button>
<ul class="dropdown-menu dropdown-menu-users" role="menu"> <ul class="dropdown-menu dropdown-menu-users" role="menu">
<li *ngFor ="let type of allTypes | mapValues"> <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> <taskana-icon-type class="vertical-align" [type] ='type.key'></taskana-icon-type>
</button> </button>
</li> </li>
@ -19,7 +19,7 @@
<div class="col-xs-4"> <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"> <input type="text" [(ngModel)]= "filter.key" (keyup.enter)="search()" class="form-control" id="wb-display-key-filter" placeholder="Filter key">
</div> </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"> class="btn btn-default glyphicon glyphicon-ban-circle blue pull-right margin-right" data-toggle="tooltip" title="Clear">
</button> </button>
</div> </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 === ''; else customIcon" class = "glyphicon glyphicon-asterisk blue"></div>
<div *ngIf="type === 'NONE'" 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 { export enum ICONTYPES {
NONE = 'NONE', NONE = '',
PERSONAL = 'PERSONAL', PERSONAL = 'PERSONAL',
GROUP = 'GROUP', GROUP = 'GROUP',
CLEARANCE = 'CLEARANCE', CLEARANCE = 'CLEARANCE',
@ -17,7 +17,7 @@ export enum ICONTYPES {
}) })
export class IconTypeComponent implements OnInit { 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() { } constructor() { }

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

@ -28,7 +28,7 @@
</button> </button>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1">
<li> <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> <taskana-icon-type class="vertical-align" [type] ='type.key'></taskana-icon-type>
{{type.value}} {{type.value}}
</a> </a>

13
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 { AlertComponent } from '../../shared/alert/alert.component';
import { GeneralMessageModalComponent } from '../../shared/general-message-modal/general-message-modal.component'; import { GeneralMessageModalComponent } from '../../shared/general-message-modal/general-message-modal.component';
import { Links } from 'app/model/links'; import { Links } from 'app/model/links';
import { WorkbasketAccessItems } from '../../model/workbasket-access-items';
import { WorkbasketService } from '../../services/workbasket.service'; import { WorkbasketService } from '../../services/workbasket.service';
import { MasterAndDetailService } from '../../services/master-and-detail.service'; import { MasterAndDetailService } from '../../services/master-and-detail.service';
@ -48,13 +49,15 @@ describe('WorkbasketDetailsComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
masterAndDetailService = TestBed.get(MasterAndDetailService); masterAndDetailService = TestBed.get(MasterAndDetailService);
workbasketService = TestBed.get(WorkbasketService); workbasketService = TestBed.get(WorkbasketService);
spyOn(masterAndDetailService, 'getShowDetail').and.returnValue(Observable.of(true)); spyOn(masterAndDetailService, 'getShowDetail').and.callFake(()=>{return Observable.of(true)})
spyOn(workbasketService,'getSelectedWorkBasket').and.returnValue(Observable.of('id1')); spyOn(workbasketService, 'getSelectedWorkBasket').and.callFake(()=>{return 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, 'getWorkBasketsSummary').and.callFake(()=>{return 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(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); document.body.removeChild(debugElement);
}); });

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

@ -1,5 +1,5 @@
<div class = "workbasket-list-full-height"> <div class="workbasket-list-full-height">
<ul id = "wb-list-container" class="list-group footer-space"> <ul id="wb-list-container" class="list-group footer-space">
<li id="wb-action-toolbar" class="list-group-item tab-align"> <li id="wb-action-toolbar" class="list-group-item tab-align">
<div class="row"> <div class="row">
<div class="col-xs-9"> <div class="col-xs-9">
@ -19,52 +19,27 @@
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button> </button>
</div> </div>
<div class = "pull-right margin-right"> <div class="pull-right margin-right">
<div class="dropdown clearfix btn-group"> <taskana-sort (performSorting)="performSorting($event)"></taskana-sort>
<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="clearfix btn-group"> <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> <span class="glyphicon glyphicon-filter blue wb-filter-toggle"></span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class = "row"> <div class="row">
<taskana-filter target="wb-filter-bar" (performFilter)="performFilter($event)"></taskana-filter> <taskana-filter target="wb-filter-bar" (performFilter)="performFilter($event)"></taskana-filter>
</div> </div>
</li> </li>
<taskana-spinner [isRunning]="requestInProgress" class = "centered-horizontally"></taskana-spinner> <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)"> <li class="list-group-item" *ngFor="let workbasket of workbaskets" [class.active]="workbasket.workbasketId == selectedId"
type="text" (click)="selectWorkbasket(workbasket.workbasketId)">
<div class="row"> <div class="row">
<dl class="col-xs-1"> <dl class="col-xs-1">
<dt> <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> </dt>
</dl> </dl>
<dl class="col-xs-10"> <dl class="col-xs-10">
@ -75,9 +50,11 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul id= "wb-pagination" class="pagination vertical-center"> <ul id="wb-pagination" class="pagination vertical-center">
<li> <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>
<li> <li>
<a href="">1</a> <a href="">1</a>
@ -95,7 +72,9 @@
<a href="">5</a> <a href="">5</a>
</li> </li>
<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> </li>
</ul> </ul>
</div> </div>

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

@ -16,10 +16,6 @@ a > label{
width: 100%; width: 100%;
} }
.sortby-dropdown {
min-width: 200px;
}
.tab-align{ .tab-align{
padding-bottom: 12px; 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 { AngularSvgIconModule } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { WorkbasketSummary } from '../../model/workbasketSummary'; import { WorkbasketSummary } from '../../model/workbasketSummary';
import { WorkbasketService, Direction } from '../../services/workbasket.service'; import { WorkbasketService } from '../../services/workbasket.service';
import { HttpModule } from '@angular/http'; import { HttpModule } from '@angular/http';
import { Router, Routes } from '@angular/router'; import { Router, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing'; import { RouterTestingModule } from '@angular/router/testing';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { SpinnerComponent } from '../../shared/spinner/spinner.component'; import { SpinnerComponent } from '../../shared/spinner/spinner.component';
import { FilterModel } from '../../shared/filter/filter.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 { IconTypeComponent } from '../../shared/type-icon/icon-type.component';
import { RemoveNoneTypePipe } from '../../pipes/remove-none-type'; import { RemoveNoneTypePipe } from '../../pipes/remove-none-type';
import { MapValuesPipe } from '../../pipes/map-values.pipe'; import { MapValuesPipe } from '../../pipes/map-values.pipe';
@ -50,7 +51,7 @@ describe('WorkbasketListComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [WorkbasketListComponent, DummyDetailComponent, MapValuesPipe, SpinnerComponent, FilterComponent, RemoveNoneTypePipe, IconTypeComponent], declarations: [WorkbasketListComponent, DummyDetailComponent, SpinnerComponent, FilterComponent, RemoveNoneTypePipe, IconTypeComponent, SortComponent, MapValuesPipe],
imports: [ imports: [
AngularSvgIconModule, AngularSvgIconModule,
HttpModule, 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 { Component, OnInit, EventEmitter } from '@angular/core';
import { WorkbasketSummary } from '../../model/workbasketSummary'; import { WorkbasketSummary } from '../../model/workbasketSummary';
import { WorkbasketService, Direction } from '../../services/workbasket.service' import { WorkbasketService } from '../../services/workbasket.service'
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { FilterModel } from '../../shared/filter/filter.component' 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'; import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
@ -20,9 +20,7 @@ export class WorkbasketListComponent implements OnInit {
workbaskets: Array<WorkbasketSummary> = []; workbaskets: Array<WorkbasketSummary> = [];
requestInProgress: boolean = false; requestInProgress: boolean = false;
sortBy: string = 'key'; sort: SortingModel = new SortingModel();
sortDirection: Direction = Direction.ASC;
sortingFields: Map<string, string> = new Map([['name', 'Name'], ['key', 'Id'], ['description', 'Description'], ['owner', 'Owner'], ['type', 'Type']]);
filterBy: FilterModel = new FilterModel(); filterBy: FilterModel = new FilterModel();
private workBasketSummarySubscription: Subscription; private workBasketSummarySubscription: Subscription;
@ -57,14 +55,10 @@ export class WorkbasketListComponent implements OnInit {
} }
changeOrder(sortDirection: string) { performSorting(sort: SortingModel) {
this.sortDirection = (sortDirection === Direction.ASC) ? Direction.ASC : Direction.DESC; this.sort = sort;
this.performRequest(); this.performRequest();
}
changeSortBy(sortBy: string) {
this.sortBy = sortBy;
this.performRequest();
} }
performFilter(filterBy: FilterModel) { performFilter(filterBy: FilterModel) {
@ -81,17 +75,12 @@ export class WorkbasketListComponent implements OnInit {
} }
onClear() { onClear() {
this.newWorkbasket.workbasketId = "";
this.newWorkbasket.name = "";
this.newWorkbasket.description = "";
this.newWorkbasket.owner = "";
this.newWorkbasket.key = "";
} }
private performRequest(): void { private performRequest(): void {
this.requestInProgress = true; this.requestInProgress = true;
this.workbaskets = undefined; 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.name, this.filterBy.description, undefined, this.filterBy.owner,
this.filterBy.type, undefined, this.filterBy.key).subscribe(resultList => { this.filterBy.type, undefined, this.filterBy.key).subscribe(resultList => {
this.workbaskets = 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", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.1.tgz",
"integrity": "sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==", "integrity": "sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==",
"requires": { "requires": {
"chartjs-color": "2.2.0", "chartjs-color": "2.2.0"
"moment": "2.18.1"
} }
}, },
"chartjs-color": { "chartjs-color": {
@ -7525,9 +7524,10 @@
} }
}, },
"moment": { "moment": {
"version": "2.18.1", "version": "2.21.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.21.0.tgz",
"integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8=" "integrity": "sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==",
"dev": true
}, },
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",

3
monitor/package.json
View File

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