From d2032c462540c6ed6ffdbf7bcec581d2760e3330 Mon Sep 17 00:00:00 2001
From: leejinho <lilis7575@gmail.com>
Date: Wed, 29 Jan 2020 09:58:40 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9E=90=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=201=EC=B0=A8=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/layouts/messenger/dialogs/index.ts    |   2 +
 .../layouts/messenger/dialogs/search/index.ts |   3 +
 .../integrated-search.dialog.component.html   |  11 +
 .../integrated-search.dialog.component.scss   |   0
 ...integrated-search.dialog.component.spec.ts |  25 ++
 .../integrated-search.dialog.component.ts     | 152 ++++++++++++
 .../native/components/top-bar.component.html  |   4 +-
 .../native/components/top-bar.component.ts    |  17 ++
 .../src/assets/i18n/en.json                   |  14 ++
 .../src/assets/i18n/ko.json                   |  14 ++
 .../integrated-search-form.component.html     |  12 +
 .../integrated-search-form.component.scss     |   3 +
 .../integrated-search-form.component.spec.ts  |  27 +++
 .../integrated-search-form.component.ts       |  31 +++
 .../integrated-search.component.html          | 221 ++++++++++++++++++
 .../integrated-search.component.scss          | 106 +++++++++
 .../integrated-search.component.spec.ts       |  27 +++
 .../components/integrated-search.component.ts | 108 +++++++++
 .../src/lib/ucap-ui.module.ts                 |  13 +-
 19 files changed, 788 insertions(+), 2 deletions(-)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/index.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
index 6f4430e9..1165cf8f 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@@ -5,6 +5,7 @@ import { DIALOGS as MESSAGE_DIALOGS } from './message';
 import { DIALOGS as NOTICE_DIALOGS } from './notice';
 import { DIALOGS as ORGANIZATION_DIALOGS } from './organization';
 import { DIALOGS as PROFILE_DIALOGS } from './profile';
+import { DIALOGS as SEARCH_DIALOGS } from './search';
 import { DIALOGS as SETTINGS_DIALOGS } from './settings';
 
 export const DIALOGS = [
@@ -15,5 +16,6 @@ export const DIALOGS = [
   ...NOTICE_DIALOGS,
   ...ORGANIZATION_DIALOGS,
   ...PROFILE_DIALOGS,
+  ...SEARCH_DIALOGS,
   ...SETTINGS_DIALOGS
 ];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/index.ts
new file mode 100644
index 00000000..102349a0
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/index.ts
@@ -0,0 +1,3 @@
+import { IntegratedSearchDialogComponent } from './integrated-search.dialog.component';
+
+export const DIALOGS = [IntegratedSearchDialogComponent];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
new file mode 100644
index 00000000..a2bf3c67
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
@@ -0,0 +1,11 @@
+<ucap-integrated-search
+  [searchWord]="!!data.keyword ? data.keyword : ''"
+  [searchingProcessing]="searchingProcessing"
+  [searchUserInfos]="searchUserInfos"
+  [totalCount]="totalCount"
+  [pageCurrent]="pageCurrent"
+  [pageListCount]="pageListCount"
+  (search)="onSearch($event)"
+  (changePage)="onChangePage($event)"
+>
+</ucap-integrated-search>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.spec.ts
new file mode 100644
index 00000000..93935f51
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.spec.ts
@@ -0,0 +1,25 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntegratedSearchDialogComponent } from './integrated-search.dialog.component';
+
+describe('IntegratedSearchDialogComponent', () => {
+  let component: IntegratedSearchDialogComponent;
+  let fixture: ComponentFixture<IntegratedSearchDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [IntegratedSearchDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntegratedSearchDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
new file mode 100644
index 00000000..fe1553b5
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
@@ -0,0 +1,152 @@
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, PageEvent } from '@angular/material';
+import { KEY_LOGIN_RES_INFO } from '@app/types';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+
+import { Store } from '@ngrx/store';
+import * as StatusStore from '@app/store/messenger/status';
+import {
+  UserInfoSS,
+  QueryProtocolService,
+  DeptSearchType,
+  SSVC_TYPE_QUERY_DEPT_USER_DATA,
+  DeptUserData,
+  SSVC_TYPE_QUERY_DEPT_USER_RES,
+  DeptUserResponse
+} from '@ucap-webmessenger/protocol-query';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { map, catchError } from 'rxjs/operators';
+import { Subscription, of } from 'rxjs';
+import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
+import { NGXLogger } from 'ngx-logger';
+import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
+import { environment } from '../../../../../environments/environment';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface IntegratedSearchDialogData {
+  keyword: string;
+}
+
+export interface IntegratedSearchDialogResult {}
+
+@Component({
+  selector: 'app-integrated-search.dialog',
+  templateUrl: './integrated-search.dialog.component.html',
+  styleUrls: ['./integrated-search.dialog.component.scss']
+})
+export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
+  loginRes: LoginResponse;
+  environmentsInfo: EnvironmentsInfo;
+
+  searchSubscription: Subscription;
+  searchUserInfos: UserInfoSS[] = [];
+  searchingProcessing = false;
+
+  currentSearchWord: string;
+  totalCount = 0;
+  pageCurrent = 1;
+  pageListCount = 20;
+
+  constructor(
+    public dialogRef: MatDialogRef<
+      IntegratedSearchDialogData,
+      IntegratedSearchDialogResult
+    >,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    @Inject(MAT_DIALOG_DATA) public data: IntegratedSearchDialogData,
+    private queryProtocolService: QueryProtocolService,
+    private sessionStorageService: SessionStorageService,
+    private store: Store<any>,
+    private logger: NGXLogger
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
+      KEY_ENVIRONMENTS_INFO
+    );
+  }
+
+  ngOnInit() {
+    this.onSearch(this.data.keyword);
+  }
+
+  onSearch(searchWord: string) {
+    this.currentSearchWord = this.data.keyword;
+
+    if (searchWord.trim().length > 0) {
+      this.searchingProcessing = true;
+      const searchUserInfos: UserInfoSS[] = [];
+
+      this.searchSubscription = this.queryProtocolService
+        .deptUser({
+          divCd: 'INT_SRCH',
+          companyCode: this.loginRes.companyCode,
+          searchRange: DeptSearchType.All,
+          search: searchWord.trim(),
+          senderCompanyCode: this.loginRes.companyCode,
+          senderEmployeeType: this.loginRes.userInfo.employeeType,
+          pageCurrent: this.pageCurrent,
+          pageListCount: this.pageListCount
+        })
+        .pipe(
+          map(res => {
+            switch (res.SSVC_TYPE) {
+              case SSVC_TYPE_QUERY_DEPT_USER_DATA:
+                const userInfos = (res as DeptUserData).userInfos;
+                searchUserInfos.push(...userInfos);
+                break;
+              case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                {
+                  const response = res as DeptUserResponse;
+
+                  // 검색 결과 처리.
+                  this.searchUserInfos = searchUserInfos;
+
+                  this.totalCount = response.pageTotalCount;
+                  this.pageCurrent = response.pageCurrent;
+                  this.pageListCount = response.pageListCount;
+                  this.searchingProcessing = false;
+
+                  // 검색 결과에 따른 프레즌스 조회.
+                  const userSeqList: number[] = [];
+                  if (userSeqList.length > 0) {
+                    this.store.dispatch(
+                      StatusStore.bulkInfo({
+                        divCd: 'INT_SRCH',
+                        userSeqs: this.searchUserInfos.map(user => user.seq)
+                      })
+                    );
+                  }
+
+                  console.log(this.searchUserInfos);
+                }
+                break;
+            }
+          }),
+          catchError(error => {
+            this.searchingProcessing = false;
+            return of(this.logger.error(error));
+          })
+        )
+        .subscribe();
+    } else {
+      // clear list.
+      this.searchingProcessing = false;
+      this.searchUserInfos = [];
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.searchSubscription) {
+      this.searchSubscription.unsubscribe();
+    }
+  }
+
+  onChangePage(event: PageEvent) {
+    this.pageCurrent = event.pageIndex + 1;
+    this.pageListCount = event.pageSize;
+
+    this.onSearch(this.currentSearchWord);
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index e67132ad..00d49b63 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -8,6 +8,9 @@
       *ngIf="!!loginRes && !!weblink"
       class="app-layout-native-title-bar-link"
     >
+      <ucap-integrated-search-form (search)="onIntegratedSearch($event)">
+      </ucap-integrated-search-form>
+
       <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
         <button
           mat-icon-button
@@ -230,7 +233,6 @@
         class="button app-layout-native-title-bar-close"
         (click)="onClickClose()"
       >
-        <!--<mat-icon>close</mat-icon>-->
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index f60f6e89..6f037bc0 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -70,6 +70,11 @@ import {
   MessageIndexType,
   MessageUpdateRequest
 } from '@ucap-webmessenger/protocol-status';
+import {
+  IntegratedSearchDialogComponent,
+  IntegratedSearchDialogResult,
+  IntegratedSearchDialogData
+} from '@app/layouts/messenger/dialogs/search/integrated-search.dialog.component';
 
 const zoomFactors = [60, 70, 85, 100, 120, 145, 170, 200];
 
@@ -555,4 +560,16 @@ export class TopBarComponent implements OnInit, OnDestroy {
   onClickApplyUpdate(event: Event) {
     this.nativeService.checkForUpdates(this.checkingUpdateAppVersion);
   }
+
+  onIntegratedSearch(keyword: string) {
+    this.dialogService.open<
+      IntegratedSearchDialogComponent,
+      IntegratedSearchDialogData,
+      IntegratedSearchDialogResult
+    >(IntegratedSearchDialogComponent, {
+      data: {
+        keyword
+      }
+    });
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
index 40e42f6d..5010441f 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@@ -73,6 +73,20 @@
       "failToChangeProfileImage": "Failed to change profile image."
     }
   },
+  "search": {
+    "label": "User search",
+    "searchFormPlaceholder": "Name, department, position, phone number, email",
+    "fieldProfile": "Profile",
+    "fieldName": "Name",
+    "fieldDeptartment": "Department",
+    "fieldCompany": "Company",
+    "fieldGrade": "Grade",
+    "fieldOfficePhoneNumber": "Office",
+    "fieldHandphone": "Mobile",
+    "fieldEmail": "Email",
+    "fieldResponsibilities": "Responsibilities",
+    "fieldWorkPlace": "WorkPlace"
+  },
   "information": {
     "label": "Information",
     "version": "Version",
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
index a5de9e29..b590fbca 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@@ -73,6 +73,20 @@
       "failToChangeProfileImage": "프로필 이미지 변경에 실패 하였습니다."
     }
   },
+  "search": {
+    "label": "사용자 검색",
+    "searchFormPlaceholder": "이름, 부서, 직위, 전화번호, 이메일",
+    "fieldProfile": "프로필",
+    "fieldName": "이름",
+    "fieldDeptartment": "부서",
+    "fieldCompany": "회사",
+    "fieldGrade": "직위",
+    "fieldOfficePhoneNumber": "사무실",
+    "fieldHandphone": "핸드폰",
+    "fieldEmail": "이메일",
+    "fieldResponsibilities": "담당업무",
+    "fieldWorkPlace": "근무지"
+  },
   "information": {
     "label": "정보",
     "version": "버전",
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
new file mode 100644
index 00000000..b53df281
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
@@ -0,0 +1,12 @@
+<div class="search-container">
+  <mat-form-field appearance="outline">
+    <input
+      matInput
+      #searchWordInput
+      placeholder="{{ 'search.searchFormPlaceholder' | translate }}"
+      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
+      [value]="!!searchWord ? searchWord : ''"
+    />
+    <mat-icon matPrefix>search</mat-icon>
+  </mat-form-field>
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss
new file mode 100644
index 00000000..c6e56cc9
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss
@@ -0,0 +1,3 @@
+.search-container {
+  -webkit-app-region: no-drag;
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.spec.ts
new file mode 100644
index 00000000..ae07cad2
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { IntegratedSearchFormComponent } from './integrated-search-form.component';
+
+describe('IntegratedSearchFormComponent', () => {
+  let component: IntegratedSearchFormComponent;
+  let fixture: ComponentFixture<IntegratedSearchFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [IntegratedSearchFormComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntegratedSearchFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts
new file mode 100644
index 00000000..66cd08ed
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts
@@ -0,0 +1,31 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef
+} from '@angular/core';
+import { ucapAnimations } from '../animations';
+
+@Component({
+  selector: 'ucap-integrated-search-form',
+  templateUrl: './integrated-search-form.component.html',
+  styleUrls: ['./integrated-search-form.component.scss'],
+  animations: ucapAnimations
+})
+export class IntegratedSearchFormComponent implements OnInit {
+  @Input()
+  searchWord?: string;
+
+  @Output()
+  search = new EventEmitter<string>();
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  ngOnInit() {}
+
+  onKeyDownEnter(keyword: string) {
+    this.search.emit(keyword);
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
new file mode 100644
index 00000000..13be87ff
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@@ -0,0 +1,221 @@
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div fxLayout="column" class="rightDrawer-notice">
+      <div fxFlex="1 1 80px" class="search-area">
+        <ucap-integrated-search-form
+          [searchWord]="!!searchWord ? searchWord : ''"
+          (search)="onSearch($event)"
+        >
+        </ucap-integrated-search-form>
+      </div>
+      <div style="position: relative;">
+        <div
+          *ngIf="searchingProcessing"
+          style="position: absolute; width: 100%; z-index: 101;"
+        >
+          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </div>
+      </div>
+      <div fxFlex="0 0 auto" class="table-box">
+        <perfect-scrollbar class="search-scrollbar">
+          <table mat-table [dataSource]="searchUserInfos">
+            <ng-container matColumnDef="profile">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="profile"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldProfile' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element">
+                <div class="profile">
+                  {{ element.name }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="name">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="name"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldName' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element">
+                <div class="name">
+                  {{ element.name }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="deptName">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="deptName"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldDeptartment' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element">
+                <div class="deptName">
+                  {{ element.deptName }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="companyName">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="companyName"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldCompany' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element">
+                <div class="companyName">
+                  {{ element.companyName }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="grade">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="grade"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldGrade' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="grade">
+                <div class="grade">
+                  {{ element.grade }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="lineNumber">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="lineNumber"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldOfficePhoneNumber' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="lineNumber">
+                <div class="lineNumber">
+                  {{ element.lineNumber }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="hpNumber">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="hpNumber"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldHandphone' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="hpNumber">
+                <div class="hpNumber">
+                  {{ element.hpNumber }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="email">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="email"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldEmail' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="email">
+                <div class="email">
+                  {{ element.email }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="responsibilities">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="responsibilities"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldResponsibilities' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="responsibilities">
+                <div class="responsibilities">
+                  {{ element.responsibilities }}
+                </div>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="workplace">
+              <th
+                mat-header-cell
+                *matHeaderCellDef
+                #header
+                class="workplace"
+                (mousedown)="resizeTable($event, header)"
+              >
+                {{ 'search.fieldWorkPlace' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let element" class="workplace">
+                <div class="workplace">
+                  {{ element.workplace }}
+                </div>
+              </td>
+            </ng-container>
+            <tr
+              mat-header-row
+              *matHeaderRowDef="displayedColumns; sticky: true"
+            ></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </perfect-scrollbar>
+      </div>
+      <div class="footer-fix">
+        <mat-paginator
+          [length]="totalCount"
+          [pageSize]="pageListCount"
+          [pageSizeOptions]="[10, 20, 30]"
+          (page)="onChangePage($event)"
+          showFirstLastButtons
+        ></mat-paginator>
+      </div>
+    </div>
+  </mat-card-content>
+  <!-- <mat-card-actions *ngIf="!hideAction" class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      {{ 'common.messages.no' | translate }}
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      {{ 'common.messages.yes' | translate }}
+    </button>
+  </mat-card-actions> -->
+</mat-card>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
new file mode 100644
index 00000000..9e25f3fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
@@ -0,0 +1,106 @@
+.search-scrollbar {
+  height: 550px;
+}
+// .search-container {
+//   -webkit-app-region: no-drag;
+// }
+
+// @mixin ellipsis($row) {
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   @if $row == 1 {
+//     display: block;
+//     white-space: nowrap;
+//     word-wrap: normal;
+//   } @else if $row >= 2 {
+//     display: -webkit-box;
+//     -webkit-line-clamp: $row;
+//     -webkit-box-orient: vertical;
+//     word-wrap: break-word;
+//     line-height: 1.2em;
+//   }
+// }
+
+// .rightDrawer-notice {
+//   width: 100%;
+//   height: calc(100% - 60px);
+
+//   .table-box {
+//     height: calc(100% - 111.5px);
+//     overflow: auto;
+//   }
+// }
+
+// .mat-table {
+//   width: 100%;
+//   position: relative;
+//   th.infos {
+//     padding: 10px;
+//     text-align: center;
+//   }
+//   tr.mat-row {
+//     height: 70px;
+//     .notice-info {
+//       padding: 16px;
+//       display: grid;
+//       height: 70px;
+//       .title {
+//         font-weight: 600;
+//         margin-bottom: 2px;
+//         width: 100%;
+//         @include ellipsis(2);
+//         display: flex;
+//         align-items: center;
+//         .important {
+//           color: red;
+//           margin-right: 6px;
+//         }
+//       }
+//     }
+//     .date {
+//       .date {
+//         font-size: 0.8em;
+//         text-align: right;
+//       }
+//     }
+//   }
+// }
+
+// .mat-paginator-container {
+//   display: flex;
+//   flex-flow: column;
+// }
+
+// .mat-row:hover {
+//   background: rgba(0, 0, 0, 0.04);
+//   cursor: pointer;
+// }
+
+// .footer-fix {
+//   position: absolute;
+//   bottom: 0;
+//   flex-direction: column;
+//   box-sizing: border-box;
+//   display: flex;
+//   border-top: 1px solid #dddddd;
+//   .mat-paginator {
+//     .mat-paginator-container {
+//       justify-content: center;
+//     }
+//   }
+//   .btn-box {
+//     height: 50px;
+//     padding-bottom: 10px;
+//     width: 100%;
+//     background-color: #ffffff;
+//     button {
+//       margin: 5px;
+//     }
+//   }
+// }
+
+// .mat-form-field-appearance-legacy {
+//   .mat-form-field-infix {
+//     padding: 6px;
+//   }
+// }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.spec.ts
new file mode 100644
index 00000000..c3fa5ab3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { IntegratedSearchComponent } from './integrated-search.component';
+
+describe('IntegratedSearchComponent', () => {
+  let component: IntegratedSearchComponent;
+  let fixture: ComponentFixture<IntegratedSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [IntegratedSearchComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntegratedSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts
new file mode 100644
index 00000000..ef2bf9bd
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts
@@ -0,0 +1,108 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  ChangeDetectorRef,
+  Renderer2
+} from '@angular/core';
+import { ucapAnimations } from '../animations';
+import { UserInfoSS } from '@ucap-webmessenger/protocol-query';
+import { MatPaginator, PageEvent, MatTabLabel } from '@angular/material';
+
+@Component({
+  selector: 'ucap-integrated-search',
+  templateUrl: './integrated-search.component.html',
+  styleUrls: ['./integrated-search.component.scss'],
+  animations: ucapAnimations
+})
+export class IntegratedSearchComponent implements OnInit {
+  @Input()
+  searchWord?: string;
+  @Input()
+  searchingProcessing: boolean;
+  @Input()
+  searchUserInfos: UserInfoSS[] = [];
+  @Input()
+  totalCount = 0;
+  @Input()
+  pageCurrent = 1;
+  @Input()
+  pageListCount = 20;
+
+  @Output()
+  search = new EventEmitter<string>();
+  @Output()
+  changePage = new EventEmitter<PageEvent>();
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  displayedColumns: string[] = [
+    'profile',
+    'name',
+    'deptName',
+    'companyName',
+    'grade',
+    'lineNumber',
+    'hpNumber',
+    'email',
+    'responsibilities',
+    'workplace'
+  ];
+
+  start: any = undefined;
+  pressed = false;
+  startX: any;
+  startWidth: any;
+  resizableFnMousemove: () => void;
+  resizableFnMouseup: () => void;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit() {}
+
+  onSearch(keyword: string) {
+    this.search.emit(keyword);
+  }
+
+  onChangePage(event: PageEvent) {
+    this.changePage.emit(event);
+  }
+
+  resizeTable(event: any, column: any) {
+    this.start = event.target;
+    this.pressed = true;
+    this.startX = event.pageX;
+    this.startWidth = this.start.clientWidth;
+    this.mouseMove(column);
+  }
+
+  mouseMove(column: any) {
+    this.resizableFnMousemove = this.renderer.listen(
+      'document',
+      'mousemove',
+      event => {
+        if (this.pressed) {
+          let width = this.startWidth + (event.pageX - this.startX);
+          let index = this.start.cellIndex;
+          column.width = width;
+        }
+      }
+    );
+    this.resizableFnMouseup = this.renderer.listen(
+      'document',
+      'mouseup',
+      event => {
+        if (this.pressed) {
+          this.pressed = false;
+          this.resizableFnMousemove();
+          this.resizableFnMouseup();
+        }
+      }
+    );
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index 1510db10..c8d2de5a 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -22,7 +22,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import {
   MatTabsModule,
   MatSelectModule,
-  MatSlideToggleModule
+  MatSlideToggleModule,
+  MatTableModule,
+  MatPaginatorModule
 } from '@angular/material';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -77,6 +79,9 @@ import {
 import { ClickDebounceDirective } from './directives/click-debounce.directive';
 import { TranslationSectionComponent } from './components/translation-section.component';
 import { AlertSnackbarComponent } from './snackbars/alert.snackbar.component';
+import { IntegratedSearchFormComponent } from './components/integrated-search-form.component';
+import { IntegratedSearchComponent } from './components/integrated-search.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 const COMPONENTS = [
   FileUploadQueueComponent,
@@ -90,6 +95,8 @@ const COMPONENTS = [
   StepInputComponent,
   TranslationSectionComponent,
   InlineEditInputComponent,
+  IntegratedSearchComponent,
+  IntegratedSearchFormComponent,
 
   BinaryViewerComponent,
   DocumentViewerComponent,
@@ -153,6 +160,10 @@ const SERVICES = [
     MatDatepickerModule,
     MatSelectModule,
     MatSlideToggleModule,
+    MatTableModule,
+    MatPaginatorModule,
+
+    PerfectScrollbarModule,
     DragDropModule,
     TranslateModule
   ],