Adding search-user to portal-FE-os

Change-Id: I7578f95d0e4f91d8499e9c973fc5bfc5a2e45e27
Issue-ID: PORTAL-867
Signed-off-by: rachitha.ramappa@att.com

4 files changed, 311 insertions, 0 deletions

diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.html b/portal-FE-os/src/app/layout/components/search-users/search-users.component.html
new file mode 100644
index 00000000..4c318f9f
--- /dev/null
+++ b/portal-FE-os/src/app/layout/components/search-users/search-users.component.html
@@ -0,0 +1,73 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+
+<form>
+    {{searchTitle}}
+    <div class="form-row">
+        <div class="col-md-6 my-1">
+            <label for="inputSearch" class="sr-only"></label>
+            <input id="inputSearch" pattern="[a-zA-Z0-9-'\s]{3,}" [(ngModel)]="searchString" (keyup)="passSystemUserInfo($event.srcElement.value)" maxlength="80"
+                required="true" name="searchString" #searchInput auto-focus tabindex="0" autocomplete="off" type="text"
+                class="form-control" value="searchString" placeholder="{{placeHolder}}">
+        </div>
+
+        <div class="col-auto my-1">
+            <button id="button-search-users" *ngIf="!isSystemUser" [disabled]="!searchInput.validity.valid || isLoading " type="submit"
+                class="btn btn-primary mb-2" (click)="searchUsers()"> Search
+            </button>
+        </div>
+    </div>
+</form>
+<span class="ecomp-spinner" *ngIf="isLoading"></span>
+<div class="search-user-container" *ngIf="showUserTable && !isSystemUser">
+    <table mat-table [dataSource]="dataSourceMap">
+        <!-- Search Result Column-->
+        <ng-container matColumnDef="firstName">
+            <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Showing {{searchUsersResults.length}} {{txtResults}} </th>
+            <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
+                {{element.firstName}} {{element.lastName}} <br> {{element.jobTitle}}
+            </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+        <tr mat-row (click)="setSelectedUser(row)" id="table-row-{{i}}" [ngClass]="{ 'selected': row === selectedUser }"
+            *matRowDef="let row; columns: displayedColumns; let i = index;"></tr>
+    </table>
+</div>
+<div class="search-user-container" *ngIf="noUserFlag">
+    <p>{{message}} Or <a href="javascript:void(0);" (click)="addNewUser()"><b>Click Here</b></a> to add <b>New User!</b></p>
+</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.scss b/portal-FE-os/src/app/layout/components/search-users/search-users.component.scss
new file mode 100644
index 00000000..95a2a5ec
--- /dev/null
+++ b/portal-FE-os/src/app/layout/components/search-users/search-users.component.scss
@@ -0,0 +1,56 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+ 
+@import "../../../pages/pages.component";
+
+.mat-row {
+  cursor: pointer;
+  background-color: #f2f2f2;
+}
+.selected {
+  background-color: #ffffff !important;
+}
+
+.search-user-container {
+  overflow-y: auto;
+  height: 250px;
+}
+
+.ecomp-spinner{
+  opacity: 10;
+}
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.spec.ts b/portal-FE-os/src/app/layout/components/search-users/search-users.component.spec.ts
new file mode 100644
index 00000000..9db3e395
--- /dev/null
+++ b/portal-FE-os/src/app/layout/components/search-users/search-users.component.spec.ts
@@ -0,0 +1,67 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchUsersComponent } from './search-users.component';
+import { NgMaterialModule } from 'src/app/ng-material-module';
+import { FormsModule } from '@angular/forms';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('SearchUsersComponent', () => {
+  let component: SearchUsersComponent;
+  let fixture: ComponentFixture<SearchUsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchUsersComponent ],
+      imports: [FormsModule,NgMaterialModule,HttpClientTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchUsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts b/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts
new file mode 100644
index 00000000..10e4e041
--- /dev/null
+++ b/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts
@@ -0,0 +1,115 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
+import { UsersService } from 'src/app/shared/services';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { PortalAdmin } from 'src/app/shared/model/PortalAdmin';
+
+@Component({
+  selector: 'app-search-users',
+  templateUrl: './search-users.component.html',
+  styleUrls: ['./search-users.component.scss']
+})
+export class SearchUsersComponent implements OnInit {
+
+  constructor(private userService: UsersService, private ngModal: NgbModal) { }
+  @Input() searchTitle: string;
+  @Input() placeHolder: string;
+  @Input() isSystemUser: boolean;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @Output() passBackSelectedUser: EventEmitter<any> = new EventEmitter();
+  @Output() userNotFoundFlag = new EventEmitter<boolean>();
+  searchString: string;
+  txtResults = 'result';
+  searchUsersResults: any;
+  selected: any;
+  isLoading: boolean;
+  showUserTable: boolean;
+  selectedUser: any;
+  displayedColumns: string[] = ['firstName'];
+  dataSourceMap = new MatTableDataSource(this.searchUsersResults);
+  submitted = false;
+  message = " No users found with your query. Please change your search and try again.";
+
+  ngOnInit() {
+    this.searchString = '';
+    this.showUserTable = false;
+    this.isSystemUser = false;
+  }
+
+  passSystemUserInfo(systemUser: string) {
+    if (this.isSystemUser)
+      this.passBackSelectedUser.emit(systemUser);
+  }
+
+  noUserFlag: boolean = false;
+  searchUsers() {
+    if (!this.isSystemUser) {
+      this.isLoading = true;
+      this.showUserTable = false;
+      this.passBackSelectedUser.emit(this.selectedUser = '');
+      this.userService.searchUsers(this.searchString).subscribe((_data: PortalAdmin) => {
+        this.searchUsersResults = _data;
+        if (this.searchUsersResults == null || this.searchUsersResults.length == 0) {
+          this.noUserFlag = true;
+          this.isLoading = false;
+        } else {
+          this.noUserFlag = false;
+          this.showUserTable = true;
+          this.isLoading = false;
+          this.dataSourceMap = new MatTableDataSource(this.searchUsersResults);
+          this.txtResults = (this.searchUsersResults && this.searchUsersResults.length > 1) ? 'results' : 'result';
+        }
+      });
+    }
+  }
+
+  setSelectedUser(user: PortalAdmin) {
+    this.selectedUser = user;
+    this.passBackSelectedUser.emit(this.selectedUser);
+  }
+
+  addNewUser() {
+    console.log("Emit the value to parent");
+    this.userNotFoundFlag.emit(true);
+  }
+
+}