TSK-1276 Replaced checkboxes with radiobuttons in workbasket filter

web/angular.json

@@ -118,4 +118,4 @@
       "prefix": "app"
     }
   }
-}
+}

web/src/app/shared/components/sort/sort.component.html

@@ -1,35 +1,37 @@
 <div class="dropdown">
-    <button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span class="material-icons md-20 blue  {{sort.sortDirection === 'asc'? '' : 'flip' }}" data-toggle="tooltip"
-            title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}">sort</span>
-    </button>
-    <div class="dropdown-menu dropdown-menu-{{menuPosition}} sortby-dropdown popup" aria-labelledby="sortingDropdown">
-        <div>
-            <div class="col-xs-6">
-                <h5>Sort By</h5>
-            </div>
-            <div class="btn-group">
-                <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="material-icons md-20 blue ">sort</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="material-icons md-20 blue flip">sort</span>
-                </button>
-            </div>
-        </div>
-        <div role="separator" class="divider"></div>
-        <ul>
-            <li id="sort-by-{{sortingField.key}}" (click)="changeSortBy(sortingField.key)" *ngFor="let sortingField of sortingFields | mapValues">
-                <a>
-                    <label>
-                        <span class="material-icons md-20 blue ">{{sort.sortBy === sortingField.key?
-                            'check_box': 'check_box_outline_blank'}} </span>
-                        <span> {{sortingField.value}} </span>
-                    </label>
-                </a>
-            </li>
-        </ul>
+  <button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="true">
+        <span class="material-icons md-20 blue  {{sort.sortDirection === 'asc'? '' : 'flip' }}"
+              data-toggle="tooltip"
+              title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}">sort</span>
+  </button>
+  <div class="dropdown-menu dropdown-menu-{{menuPosition}} sortby-dropdown popup"
+       aria-labelledby="sortingDropdown">
+    <div>
+      <div class="col-xs-6">
+        <h5>Sort By</h5>
+      </div>
+      <div class="btn-group">
+        <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="material-icons md-20 blue ">sort</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="material-icons md-20 blue flip">sort</span>
+        </button>
+      </div>
     </div>
-</div>
+    <div role="separator" class="divider"></div>
+    <mat-radio-group name="sort" color="accent" class="radio-group">
+      <mat-radio-button *ngFor="let sortingField of sortingFields | mapValues"
+                        name="sort" id="sort-by-{{sortingField.key}}" [checked]="sortingField.key === defaultSortBy"
+                        (change)="changeSortBy(sortingField.key)" [value]="sortingField.value"> {{ sortingField.value }}</mat-radio-button>
+      <!--TODO make sortingby the default checked and change theme colors to use taskana colors-->
+    </mat-radio-group>
+  </div>
+</div>

web/src/app/shared/components/sort/sort.component.scss

@@ -9,3 +9,9 @@ ul {
   color: #337ab7;
   font-weight: bold;
 }
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 0rem 2.5rem;
+}

web/src/app/shared/components/sort/sort.component.spec.ts

@@ -42,7 +42,7 @@ describe('SortComponent', () => {
     component.sortingFields = new Map<string, string>([['name', 'Name']]);
     fixture.detectChanges();
     expect(component.sort.sortBy).toBe('key');
-    debugElement.querySelector('#sort-by-name').click();
+    debugElement.querySelector('#sort-by-name-input').click();
     expect(component.sort.sortBy).toBe('name');
   });
 });

web/src/app/shared/components/sort/sort.component.ts

@@ -1,5 +1,13 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild, ViewChildren,
+  ViewRef } from '@angular/core';
 import { Direction, Sorting } from 'app/shared/models/sorting';
+import { MatRadioButton } from '@angular/material/radio';
 
 @Component({
   selector: 'taskana-sort',

web/src/app/shared/pipes/map-values.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'mapValues' })
 export class MapValuesPipe implements PipeTransform {
-  transform(value: any, args?: any[]): Object[] {
+  transform<T, V>(value: Map<T, V>, args?: any[]): { key: T, value: V }[] {
     const returnArray = [];
 
     if (!value) {

web/src/app/shared/shared.module.ts

@@ -24,6 +24,7 @@ import { FieldErrorDisplayComponent } from 'app/shared/components/field-error-di
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
 import { SortComponent } from './components/sort/sort.component';
 import { PaginationComponent } from './components/pagination/pagination.component';
 import { NumberPickerComponent } from './components/number-picker/number-picker.component';
@@ -97,7 +98,8 @@ const DECLARATIONS = [
 @NgModule({
   declarations: DECLARATIONS,
   imports: [
-    MODULES
+    MODULES,
+    MatRadioModule
   ],
   exports: DECLARATIONS,
   providers: [

web/src/theme/_main.scss

@@ -4,7 +4,7 @@
 @import 'variables';
 @import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
 @import '../../node_modules/ngx-bootstrap/datepicker/bs-datepicker';
-@import 'material_icons';
+@import 'material_styles';
 @import 'site';
 @import 'forms';
 @import 'tree';

web/src/theme/_material_icons.scss → web/src/theme/_material_styles.scss

@@ -50,3 +50,10 @@
 /* Rules for using icons as white on a dark background. */
 .material-icons.md-light { color: rgba(255, 255, 255, 1); }
 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+
+/** styling of mat-radio overwrites the default colors of the radio TODO needs to be removed when migrating to material*/
+.mat-radio-button.mat-accent .mat-radio-inner-circle{background-color: $blue;}
+.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {border-color: $blue;}
+.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {background-color: $blue;}
+.mat-radio-outer-circle {border-color: $blue;}
+.mat-radio-label-content {color: $blue;}