TSK-1276: Added radio buttons for selection of classification types

web/src/app/administration/administration.module.ts

@@ -10,6 +10,7 @@ import { TreeModule } from 'angular-tree-component';
 import { ClassificationTypesSelectorComponent } from 'app/administration/components/classification-types-selector/classification-types-selector.component';
 import { ClassificationCategoriesService } from 'app/shared/services/classification-categories/classification-categories.service';
 import { AccessItemsManagementComponent } from 'app/administration/components/access-items-management/access-items-management.component';
+import { MatRadioModule } from '@angular/material/radio';
 import { AdministrationRoutingModule } from './administration-routing.module';
 /**
  * Components
@@ -61,7 +62,10 @@ const DECLARATIONS = [
 
 @NgModule({
   declarations: DECLARATIONS,
-  imports: MODULES,
+  imports: [
+    MODULES,
+    MatRadioModule
+  ],
   providers: [
     ClassificationDefinitionService,
     WorkbasketDefinitionService,

web/src/app/administration/components/classification-list/classification-list.component.spec.ts

@@ -21,6 +21,7 @@ import { configureTests } from 'app/app.test.configuration';
 import { TreeService } from 'app/shared/services/tree/tree.service';
 import { ImportExportService } from 'app/administration/services/import-export.service';
 import { NgxsModule } from '@ngxs/store';
+import { MatRadioModule } from '@angular/material/radio';
 import { ClassificationListComponent } from './classification-list.component';
 import { NotificationService } from '../../../shared/services/notifications/notification.service';
 
@@ -46,7 +47,7 @@ describe('ClassificationListComponent', () => {
     testBed.configureTestingModule({
       declarations: [ClassificationListComponent, ImportExportComponent, ClassificationTypesSelectorComponent,
         DummyDetailComponent],
-      imports: [HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, NgxsModule.forRoot()],
+      imports: [HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, NgxsModule.forRoot(), MatRadioModule],
       providers: [
         HttpClient, WorkbasketDefinitionService, NotificationService,
         ClassificationsService, DomainService, ClassificationDefinitionService,

web/src/app/administration/components/classification-types-selector/classification-types-selector.component.html

@@ -5,15 +5,11 @@
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
-  <div class="dropdown-menu dropdown-menu-right sortby-dropdown popup" aria-labelledby="sortingDropdown">
+  <div class="dropdown-menu dropdown-menu-right popup" aria-labelledby="sortingDropdown">
-    <li *ngFor="let classificationType of classificationTypes$ | async">
+    <mat-radio-group name="classificationTypeSelector" color="accent" class="radio-group">
-      <a (click)="select(classificationType)">
+      <mat-radio-button *ngFor="let classificationType of classificationTypes$ | async"
-        <label>
+                        name="classificationTypeSelector" id="select-{{classificationType}}" [checked]="classificationType === (classificationTypeSelected$ | async)"
-          <span data-toggle="tooltip" class="material-icons md-20 blue">{{(classificationTypeSelected$ | async) === classificationType?
+                        (change)="select(classificationType)" [value]="classificationType">{{classificationType}}</mat-radio-button>
-            'check_box': 'check_box_outline_blank'}}</span>
+    </mat-radio-group>
-          <span>{{classificationType}}</span>
-        </label>
-      </a>
-    </li>
   </div>
 </div>

web/src/app/administration/components/classification-types-selector/classification-types-selector.component.scss

@@ -0,0 +1,5 @@
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem 2.5rem;
+}

web/src/app/administration/components/classification-types-selector/classification-types-selector.component.spec.ts

@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NgxsModule } from '@ngxs/store';
+import { MatRadioModule } from '@angular/material/radio';
 import { ClassificationTypesSelectorComponent } from './classification-types-selector.component';
 
 describe('ClassificationTypesSelectorComponent', () => {
@@ -9,7 +10,7 @@ describe('ClassificationTypesSelectorComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NgxsModule.forRoot()],
+      imports: [NgxsModule.forRoot(), MatRadioModule],
       declarations: [ClassificationTypesSelectorComponent],
       providers: []
     }).compileComponents();

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

@@ -31,7 +31,6 @@
       <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

@@ -2,9 +2,6 @@
   min-width: 200px;
 }
 
-ul {
-  list-style-type: none;
-}
 .bold-blue {
   color: #337ab7;
   font-weight: bold;