TSK-465 Add classification tree filtering

web/src/app/administration/classification/details/classification-details.component.scss

@@ -4,8 +4,8 @@
     box-shadow: none;
     margin-bottom: 0px;
     &> .panel-body {
-        height: 87vh;
-        max-height: 87vh;
+        height: 85vh;
+        max-height: 85vh;
         overflow-y: auto;
     }
 }

web/src/app/administration/classification/master/list/classification-list.component.html

@@ -11,6 +11,10 @@
 			</div>
 		</div>
 	</li>
-	<taskana-spinner [isRunning]="requestInProgress" ></taskana-spinner>
-	<taskana-tree *ngIf="classifications" [treeNodes]="classifications" [selectNodeId] ="selectedId" (selectNodeIdChanged) ="selectClassification($event)"></taskana-tree>
+	<div  class="col-xs-12">
+		<input class="filter-input" [ngModel]="inputValue" (ngModelChange)="inputValue = $event" placeholder="Filter classifications">
+	</div>
+	<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress"></taskana-spinner>
+	<taskana-tree class="col-xs-12" *ngIf="classifications" [treeNodes]="classifications" [selectNodeId]="selectedId" [filterText]="inputValue"
+	 (selectNodeIdChanged)="selectClassification($event)"></taskana-tree>
 </div>

web/src/app/administration/classification/master/list/classification-list.component.scss

@@ -1,5 +1,5 @@
 .classification-list-full-height {
-  height: calc(100vh - 57px);
+  height: calc(100vh - 55px);
 }
 
 .list-group-item {
@@ -14,3 +14,9 @@
    margin: 6px 0px;
   }
 }
+
+input.filter-input {
+  margin: 10px 0px;
+  height: 32px;
+  padding-left: 10px;
+}

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
@@ -29,6 +30,7 @@ import { RequestInProgressService } from 'app/services/requestInProgress/request
 class TaskanaTreeComponent {
   @Input() treeNodes;
   @Input() selectNodeId;
+  @Input() filterText;
 }
 
 @Component({
@@ -56,7 +58,7 @@ describe('ClassificationListComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ClassificationListComponent, ImportExportComponent, SpinnerComponent, ClassificationTypesSelectorComponent,
         TaskanaTreeComponent, DummyDetailComponent],
-      imports: [HttpClientModule, RouterTestingModule.withRoutes(routes)],
+      imports: [HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule],
       providers: [
         HttpClient, WorkbasketDefinitionService, AlertService, ClassificationsService, DomainService, ClassificationDefinitionService,
         ErrorModalService, ClassificationTypesService, RequestInProgressService

web/src/app/administration/classification/master/list/classification-list.component.ts

@@ -21,6 +21,7 @@ export class ClassificationListComponent implements OnInit, OnDestroy {
 	selectionToImport = ImportType.CLASSIFICATIONS;
 	requestInProgress = false;
 	initialized = false;
+	inputValue: string;
 
 	classifications: Array<Classification> = [];
 	classificationsTypes: Array<string> = [];

web/src/app/administration/workbasket/master/list/workbasket-list.component.scss

@@ -1,5 +1,5 @@
 .workbasket-list-full-height{
-    height: calc(100vh - 57px);
+    height: calc(100vh - 55px);
 }
 
 .row.list-group {

web/src/app/components/nav-bar/nav-bar.component.scss

@@ -27,9 +27,6 @@ svg-icon.logo {
     padding:2px;
 }
 
-.logo-container {
-    padding-left: 0px;
-}
 
 p.navbar-brand >a{
     vertical-align: middle;

web/src/app/shared/tree/tree.component.ts

@@ -19,6 +19,9 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked {
   @Output() treeNodesChange = new EventEmitter<Array<TreeNodeModel>>();
   @Input() selectNodeId: string;
   @Output() selectNodeIdChanged = new EventEmitter<string>();
+  @Input() filterText: string;
+
+  private filterTextOld: string
 
   options: ITreeOptions = {
     displayField: 'name',
@@ -54,6 +57,10 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked {
     } else if (!this.selectNodeId && this.tree.treeModel.getActiveNode()) {
       this.unSelectActiveNode();
     }
+    if (this.filterTextOld !== this.filterText) {
+      this.filterTextOld = this.filterText;
+      this.filterNodes(this.filterText)
+    }
   }
 
   onActivate(treeNode: any) {
@@ -92,6 +99,13 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked {
     this.expandParent(node.parent);
   }
 
+  private filterNodes(text) {
+    this.tree.treeModel.filterNodes((node) => {
+      return (node.data.name.toUpperCase().includes(text.toUpperCase())
+           || node.data.key.toUpperCase().includes(text.toUpperCase()));
+    });
+  }
+
 }
 
 

web/src/assets/_site.scss

@@ -21,18 +21,18 @@
 /*
  * Base structure
  */
-/* Move down content because we have a fixed navbar that is 57px tall */
+/* Move down content because we have a fixed navbar that is 55px tall */
 
 .container-main {
-    margin-top: 57px;
+    margin-top: 55px;
     overflow-y: hidden;
     /*Min mobile view size*/
     min-width: 420px;
 }
 
 .container-scrollable {
-    max-height: calc(100vh - 57px);
-    height: calc(100vh - 57px);
+    max-height: calc(100vh - 55px);
+    height: calc(100vh - 55px);
     overflow: hidden;
 }
 
@@ -268,5 +268,5 @@ taskana-workbasket-information, taskana-workbasket-access-items, taskana-workbas
 }
 
 tree-viewport {
-    height: calc(100vh - 110px);   
+    height: calc(100vh - 165px);   
 }

web/src/assets/_tree.scss

@@ -23,9 +23,6 @@ tree-node-expander .toggle-children-wrapper-expanded {
         transform: none;
     }
 }
-tree-node-collection > div > tree-node > .tree-node {
-    padding-left: 10px;
-}
 
 .node-content-wrapper {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;