merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

4 files changed, 154 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.html
new file mode 100644
index 000000000..0222b8097
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.html
@@ -0,0 +1,8 @@
+<div class="search-container">
+  <sdc-filter-bar
+    [placeHolder]="'Search...'"
+    [debounceTime]="250"
+    [testId]="inputTestId"
+    (valueChange)="searchTree($event)">
+  </sdc-filter-bar>
+</div>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.scss
new file mode 100644
index 000000000..5d9996256
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.scss
@@ -0,0 +1,3 @@
+.search-container {
+  min-width: 40px;
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.spec.ts
new file mode 100644
index 000000000..754dd6690
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.spec.ts
@@ -0,0 +1,93 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
+import {SearchComponent} from "./search.component";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+
+describe('Spinner component', () => {
+
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      providers: [],
+      declarations: [SearchComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+    await TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+  })().then(done).catch(done.fail));
+
+
+  test('component should be defined', () => {
+    expect(component).toBeDefined();
+  });
+
+  test('searchTree should return all nodes that include some text: with text', () => {
+    component.nodes = [
+      {
+        name: 'name_1'
+      },
+      {
+        name: 'name_2'
+      },
+      {
+        name: 'name_3'
+      },
+      {
+        name: 'name_3'
+      }];
+    jest.spyOn(component.updateNodes, 'emit');
+    spyOn(component, 'expandParentByNodeId').and.stub();
+    component.searchTree('name_1');
+
+    expect(component.updateNodes.emit).toHaveBeenCalledWith({
+      nodes: [
+        {
+          name: 'name_1'
+        },
+        {
+          name: 'name_2'
+        },
+        {
+          name: 'name_3'
+        },
+        {
+          name: 'name_3'
+        }],
+      filterValue: 'name_1'
+    });
+  });
+
+  test('searchTree should return all nodes that include some text: without text', () => {
+    component.nodes = [
+      {
+        name: 'name_1',
+        children: [
+          {
+            name: 'name_child_1'
+          }
+        ]
+      },
+      {
+        name: 'name_2'
+      },
+      {
+        name: 'name_3'
+      },
+      {
+        name: 'name_4'
+      }];
+    jest.spyOn(component.updateNodes, 'emit');
+    spyOn(component, 'expandParentByNodeId').and.stub();
+    component.searchTree('');
+
+    expect(component.updateNodes.emit).toHaveBeenCalled();
+  });
+});
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.ts
new file mode 100644
index 000000000..19edbcd09
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/search/search.component.ts
@@ -0,0 +1,50 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {IDType, ITreeNode} from "angular-tree-component/dist/defs/api";
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'search-component',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss']
+})
+export class SearchComponent {
+  @Input() tree;
+  @Input() nodes;
+  @Input() inputTestId: string;
+
+  @Output() updateNodes: EventEmitter<any> = new EventEmitter();
+
+  searchTree(searchText: string): void {
+      if(_.isNil(searchText)){
+        return;
+      }
+      let __this = this;
+      let results: ITreeNode[] = [];
+      this.nodes.forEach( (node) => {
+        __this.searchTreeNode(node, searchText, results);
+      });
+      results.forEach(function (result) {
+        __this.expandParentByNodeId(result.id)
+      });
+      this.updateNodes.emit({
+        nodes: this.nodes,
+        filterValue: searchText
+      });
+      return;
+  }
+
+  expandParentByNodeId(id: IDType): void {
+    this.tree.treeModel.getNodeById(id).parent.expand();
+  }
+
+  searchTreeNode(node, searchText: string, results): void {
+    if (node.name.toLowerCase().indexOf(searchText.toLowerCase()) != -1) {
+      results.push(node);
+    }
+    if (node.children != null) {
+      for (let i = 0; i < node.children.length; i++) {
+        this.searchTreeNode(node.children[i], searchText, results);
+      }
+    }
+  }
+}