From c507951810c9f7d9b73eab8b8a790891a6bc2c2f Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Tue, 2 Feb 2021 12:05:23 +0100
Subject: [PATCH] TSK-1433: Sort distribution targets by type and description

---
 .../classification-list.component.html        |  1 -
 ...t-distribution-targets-list.component.html |  2 +-
 ...istribution-targets-list.component.spec.ts | 24 +++++++++++++++++--
 web/src/app/shared/pipes/order-by.pipe.ts     |  8 ++++---
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/web/src/app/administration/components/classification-list/classification-list.component.html b/web/src/app/administration/components/classification-list/classification-list.component.html
index dabb80e06..1c563b21a 100644
--- a/web/src/app/administration/components/classification-list/classification-list.component.html
+++ b/web/src/app/administration/components/classification-list/classification-list.component.html
@@ -35,7 +35,6 @@
         <mat-menu #menu="matMenu">
           <button class="classification-list__all-button" mat-menu-item (click)="selectCategory('')">
             <span> <mat-icon style="color: #555" class="classification-list__filter-all-icon">filter_list</mat-icon> All </span>
-            <span> All </span>
           </button>
           <button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
             <svg-icon class="classification-list__categories" [src]="(getCategoryIcon(category) | async)?.left"
diff --git a/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html b/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html
index 8f3ce4767..13d59d5fa 100644
--- a/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html
+++ b/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html
@@ -34,7 +34,7 @@
        [scrollWindow]="false" *ngIf="distributionTargets?.length > 0">
     <mat-selection-list #workbasket [multiple]="true">
       <mat-list-option class="workbasket-distribution-targets__workbaskets-item"
-                       *ngFor="let workbasket of distributionTargets"
+                       *ngFor="let workbasket of distributionTargets | orderBy: ['type', 'description']"
                        [selected]="workbasket.selected"
                        (click)="workbasket.selected = !workbasket.selected"
                        [value]="workbasket.workbasketId">
diff --git a/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.spec.ts b/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.spec.ts
index 523b3fe47..022294a3a 100644
--- a/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.spec.ts
@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
+import { Component, DebugElement, EventEmitter, Input, Output, Pipe, PipeTransform } from '@angular/core';
 import { WorkbasketDistributionTargetsListComponent } from './workbasket-distribution-targets-list.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { WorkbasketType } from '../../../shared/models/workbasket-type';
@@ -11,6 +11,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatListModule } from '@angular/material/list';
 import { WorkbasketQueryFilterParameter } from '../../../shared/models/workbasket-query-filter-parameter';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { OrderBy } from '../../../shared/pipes/order-by.pipe';
 
 @Component({ selector: 'taskana-shared-workbasket-filter', template: '' })
 class FilterStub {
@@ -28,6 +29,13 @@ class IconTypeStub {
   @Input() text: string;
 }
 
+@Pipe({ name: 'orderBy' })
+class OrderByMock implements PipeTransform {
+  transform(list, sortBy): any {
+    return list;
+  }
+}
+
 describe('WorkbasketDistributionTargetsListComponent', () => {
   let fixture: ComponentFixture<WorkbasketDistributionTargetsListComponent>;
   let debugElement: DebugElement;
@@ -43,7 +51,7 @@ describe('WorkbasketDistributionTargetsListComponent', () => {
         InfiniteScrollModule,
         BrowserAnimationsModule
       ],
-      declarations: [WorkbasketDistributionTargetsListComponent, FilterStub, SpinnerStub, IconTypeStub],
+      declarations: [WorkbasketDistributionTargetsListComponent, FilterStub, SpinnerStub, IconTypeStub, OrderByMock],
       providers: []
     }).compileComponents();
 
@@ -76,6 +84,12 @@ describe('WorkbasketDistributionTargetsListComponent', () => {
     expect(component.toolbarState).toBe(true);
   });
 
+  it('should display filter when toolbarState is true', () => {
+    component.toolbarState = true;
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.querySelector('taskana-shared-workbasket-filter')).toBeTruthy();
+  });
+
   it('should display all available workbaskets', () => {
     fixture.detectChanges();
     const distributionTargetList = debugElement.nativeElement.getElementsByClassName(
@@ -83,4 +97,10 @@ describe('WorkbasketDistributionTargetsListComponent', () => {
     );
     expect(distributionTargetList).toHaveLength(5);
   });
+
+  it('should call orderBy pipe', () => {
+    const orderBySpy = jest.spyOn(OrderByMock.prototype, 'transform');
+    fixture.detectChanges();
+    expect(orderBySpy).toHaveBeenCalledWith(component.distributionTargets, ['type', 'description']);
+  });
 });
diff --git a/web/src/app/shared/pipes/order-by.pipe.ts b/web/src/app/shared/pipes/order-by.pipe.ts
index a954f2bf1..c79bfc50c 100644
--- a/web/src/app/shared/pipes/order-by.pipe.ts
+++ b/web/src/app/shared/pipes/order-by.pipe.ts
@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'orderBy' })
 export class OrderBy implements PipeTransform {
-  transform(records: Array<Object>, sortKeys?: string[]): any {
+  transform(records: Object[], sortKeys?: string[]): any {
     return records.sort((a, b) => {
       for (let i = 0; i < sortKeys.length; i++) {
         let sortKey = sortKeys[i];
@@ -11,10 +11,12 @@ export class OrderBy implements PipeTransform {
           direction = -1;
           sortKey = sortKey.substr(1);
         }
-        if (a[sortKey] < b[sortKey]) {
+        const objectA = a[sortKey].toLowerCase();
+        const objectB = b[sortKey].toLowerCase();
+        if (objectA < objectB) {
           return -1 * direction;
         }
-        if (a[sortKey] > b[sortKey]) {
+        if (objectA > objectB) {
           return direction;
         }
       }