From 1c7260e8c7d464a040bbb2a03757253a343a33f3 Mon Sep 17 00:00:00 2001 From: miguelmartinrojas Date: Mon, 30 Apr 2018 11:31:34 +0200 Subject: [PATCH] TSK-465 Add classification tree filtering --- .../details/classification-details.component.scss | 4 ++-- .../master/list/classification-list.component.html | 8 ++++++-- .../master/list/classification-list.component.scss | 8 +++++++- .../list/classification-list.component.spec.ts | 4 +++- .../master/list/classification-list.component.ts | 1 + .../master/list/workbasket-list.component.scss | 2 +- .../app/components/nav-bar/nav-bar.component.scss | 3 --- web/src/app/shared/tree/tree.component.ts | 14 ++++++++++++++ web/src/assets/_site.scss | 10 +++++----- web/src/assets/_tree.scss | 3 --- 10 files changed, 39 insertions(+), 18 deletions(-) diff --git a/web/src/app/administration/classification/details/classification-details.component.scss b/web/src/app/administration/classification/details/classification-details.component.scss index 191fc8aae..16f01e043 100644 --- a/web/src/app/administration/classification/details/classification-details.component.scss +++ b/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; } } diff --git a/web/src/app/administration/classification/master/list/classification-list.component.html b/web/src/app/administration/classification/master/list/classification-list.component.html index 8234ce233..290caa6fc 100644 --- a/web/src/app/administration/classification/master/list/classification-list.component.html +++ b/web/src/app/administration/classification/master/list/classification-list.component.html @@ -11,6 +11,10 @@ - - +
+ +
+ + \ No newline at end of file diff --git a/web/src/app/administration/classification/master/list/classification-list.component.scss b/web/src/app/administration/classification/master/list/classification-list.component.scss index b82aee1e2..6dbe56d56 100644 --- a/web/src/app/administration/classification/master/list/classification-list.component.scss +++ b/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; +} diff --git a/web/src/app/administration/classification/master/list/classification-list.component.spec.ts b/web/src/app/administration/classification/master/list/classification-list.component.spec.ts index 039d7ed10..51a65d7e6 100644 --- a/web/src/app/administration/classification/master/list/classification-list.component.spec.ts +++ b/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 diff --git a/web/src/app/administration/classification/master/list/classification-list.component.ts b/web/src/app/administration/classification/master/list/classification-list.component.ts index cf8d54701..e98ed153a 100644 --- a/web/src/app/administration/classification/master/list/classification-list.component.ts +++ b/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 = []; classificationsTypes: Array = []; diff --git a/web/src/app/administration/workbasket/master/list/workbasket-list.component.scss b/web/src/app/administration/workbasket/master/list/workbasket-list.component.scss index 3c7f2a0e6..eed93ab90 100644 --- a/web/src/app/administration/workbasket/master/list/workbasket-list.component.scss +++ b/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 { diff --git a/web/src/app/components/nav-bar/nav-bar.component.scss b/web/src/app/components/nav-bar/nav-bar.component.scss index 98755949e..962cd805e 100644 --- a/web/src/app/components/nav-bar/nav-bar.component.scss +++ b/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; diff --git a/web/src/app/shared/tree/tree.component.ts b/web/src/app/shared/tree/tree.component.ts index 698f2e952..d7808836d 100644 --- a/web/src/app/shared/tree/tree.component.ts +++ b/web/src/app/shared/tree/tree.component.ts @@ -19,6 +19,9 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked { @Output() treeNodesChange = new EventEmitter>(); @Input() selectNodeId: string; @Output() selectNodeIdChanged = new EventEmitter(); + @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())); + }); + } + } diff --git a/web/src/assets/_site.scss b/web/src/assets/_site.scss index 8c7a5e14a..8895a3843 100644 --- a/web/src/assets/_site.scss +++ b/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); } diff --git a/web/src/assets/_tree.scss b/web/src/assets/_tree.scss index 1b1b12909..16621d475 100644 --- a/web/src/assets/_tree.scss +++ b/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;