TSK-354 Fix sorting bug and create sorting component

admin/src/app/app.module.ts

@@ -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
                     ];

admin/src/app/pipes/remove-none-type.ts

@@ -1,11 +1,11 @@
 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')
+            if (entry.key !== '')
                 returnArray.push({
                     key: entry.key,
                     value: entry.value

admin/src/app/services/workbasket.service.spec.ts

@@ -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';

admin/src/app/services/workbasket.service.ts

@@ -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 {

admin/src/app/shared/filter/filter.component.html

@@ -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>

admin/src/app/shared/sort/sort.component.html

@@ -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>

admin/src/app/shared/sort/sort.component.scss

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

admin/src/app/shared/sort/sort.component.spec.ts

@@ -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');
+  });
+});

admin/src/app/shared/sort/sort.component.ts

@@ -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);
+  }
+
+}

admin/src/app/shared/type-icon/icon-type.component.html

@@ -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>

admin/src/app/shared/type-icon/icon-type.component.ts

@@ -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() { }
 

admin/src/app/workbasket/details/information/workbasket-information.component.html

@@ -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>

admin/src/app/workbasket/details/workbasket-details.component.spec.ts

@@ -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';
@@ -48,10 +49,12 @@ describe('WorkbasketDetailsComponent', () => {
     fixture.detectChanges();
     masterAndDetailService = TestBed.get(MasterAndDetailService);
     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(() => {

admin/src/app/workbasket/list/workbasket-list.component.html

@@ -20,36 +20,10 @@
                     </button>
                 </div>
                 <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">
-                        <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>
@@ -60,7 +34,8 @@
             </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)">
+        <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>
@@ -77,7 +52,9 @@
     </ul>
     <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>

admin/src/app/workbasket/list/workbasket-list.component.scss

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

admin/src/app/workbasket/list/workbasket-list.component.spec.ts

@@ -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,

admin/src/app/workbasket/list/workbasket-list.component.ts

@@ -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';
+	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();
 
 	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();
-	}
 	
-	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;

monitor/package-lock.json

@@ -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",
+        "chartjs-color": "2.2.0"
-        "moment": "2.18.1"
       }
     },
     "chartjs-color": {
@@ -7525,9 +7524,10 @@
       }
     },
     "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": {
       "version": "1.0.1",

monitor/package.json

@@ -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"
   }
 }