refactor (sort-button): removed sortKey input since it was used for t…

…wo-way binding in the template. We now use a service called from the class to sort (#101)
dasch-swiss · Jun 9, 2020 · 13b5126 · 13b5126
1 parent bd17723
commit 13b5126
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 23 deletions.
diff --git a/projects/dsp-ui/src/lib/action/components/sort-button/sort-button.component.spec.ts b/projects/dsp-ui/src/lib/action/components/sort-button/sort-button.component.spec.ts
@@ -14,14 +14,14 @@ import { SortingService } from '../../services/sorting.service';
  */
 @Component({
     template: `
-    <dsp-sort-button #sortButton [sortProps]="sortProps" [(sortKey)]="sortKey" [position]="position" (sortKeyChange)="sortList($event)">
+    <dsp-sort-button #sortButton [sortProps]="sortProps" [position]="position" (sortKeyChange)="sortList($event)">
     </dsp-sort-button>
     <ul class="list">
             <li *ngFor="let item of list" class="item">
-                <span [class.active]="sortKey === 'firstname'">{{item.firstname}} </span>
-                <span [class.active]="sortKey === 'lastname'">{{item.lastname}} </span>
+                <span>{{item.firstname}} </span>
+                <span>{{item.lastname}} </span>
                 by
-                <span [class.active]="sortKey === 'creator'">{{item.creator}}</span>
+                <span>{{item.creator}}</span>
             </li>
         </ul>
     `
@@ -45,7 +45,6 @@ class TestHostComponent implements OnInit {
         label: 'Creator'
     }
     ];
-    sortKey = 'creator';
     position = 'left';
 
     list = [{
@@ -123,7 +122,6 @@ describe('SortButtonComponent', () => {
 
     it('should sort the list by lastname', () => {
         expect(testHostComponent.sortButtonComponent).toBeTruthy();
-        expect(testHostComponent.sortKey).toBe('creator');
         expect(testHostComponent.list).toEqual(listData);
 
         const hostCompDe = testHostFixture.debugElement;
@@ -157,8 +155,6 @@ describe('SortButtonComponent', () => {
         item2.click();
         testHostFixture.detectChanges();
 
-        // expect the list to be sorted by lastname
-        expect(testHostComponent.sortKey).toBe('lastname');
 
         const listEl: DebugElement = hostCompDe.query(By.css('.list'));
         const children = listEl.nativeNode.children;

diff --git a/projects/dsp-ui/src/lib/action/components/sort-button/sort-button.component.ts b/projects/dsp-ui/src/lib/action/components/sort-button/sort-button.component.ts
@@ -42,7 +42,6 @@ export class SortButtonComponent implements OnInit {
      */
     @Input() position = 'left';
 
-
     /**
      * @param icon
      * Default icon is "sort" from material design.
@@ -51,14 +50,6 @@ export class SortButtonComponent implements OnInit {
      */
     @Input() icon = 'sort';
 
-    /**
-     * @param sortKey
-     * set and get (two-way data binding) of current sort key
-     */
-    @Input() sortKey(sortKey: string) {
-        this.activeKey = sortKey;
-    }
-
     constructor() {
     }
 

diff --git a/src/app/action-playground/action-playground.component.html b/src/app/action-playground/action-playground.component.html
@@ -1,10 +1,10 @@
 <p>Sorting</p>
-<dsp-sort-button [sortProps]="sortProps" [(sortKey)]="sortKey" [position]="'right'" (sortKeyChange)="sortList($event)"></dsp-sort-button>
+<dsp-sort-button [sortProps]="sortProps" [position]="'right'" (sortKeyChange)="sortList($event)"></dsp-sort-button>
 <ul>
     <li *ngFor="let item of list">
-        <span [class.active]="sortKey === 'firstname'">{{item.firstname}} </span>
-        <span [class.active]="sortKey === 'lastname'">{{item.lastname}} </span>
-        <span [class.active]="sortKey === 'creator'">{{item.creator}}</span>
+        <span>{{item.firstname}} </span>
+        <span>{{item.lastname}} </span>
+        <span>{{item.creator}}</span>
     </li>
 </ul>
 

diff --git a/src/app/action-playground/action-playground.component.ts b/src/app/action-playground/action-playground.component.ts
@@ -26,8 +26,6 @@ export class ActionPlaygroundComponent implements OnInit {
         }
     ];
 
-    sortKey = 'creator';
-
     list = [
         {
             firstname: 'Gaston',