팝업에 닫기 버튼 생성.

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html

@@ -1,7 +1,10 @@
 <mat-card class="confirm-card mat-elevation-z">
+  <!-- 이용시 주의사항 항목 -->
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss

@@ -1,22 +1,29 @@
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div *ngIf="data.type === UserSelectDialogType.NewGroup">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .mat-card-header {
-  margin: 0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 
 //조직도 레이아웃 변경

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .mat-card-header {
-  margin: 0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <perfect-scrollbar>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .mat-card-header {
-  margin: 0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss

@@ -1,26 +1,35 @@
-::ng-deep .mat-card-header-tex{
+::ng-deep .mat-card-header {
-  margin:0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.confirm-card{
+.confirm-card {
-  min-width:500px;
+  min-width: 500px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-header-text{
+    .mat-card-header-text {
-       .mat-card-title{
+      .mat-card-title {
-         margin:0 -16px;
+        margin: 0 -16px;
-       }
+      }
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
-}
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

@@ -1,7 +1,7 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <button class="icon-button btn-dialog-close">
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
       <i class="mdi mdi-window-close"></i>
     </button>
   </mat-card-header>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss

@@ -1,5 +1,5 @@
 ::ng-deep .mat-card-header {
-  .mat-card-header-tex {
+  .mat-card-header-text {
     margin: 0;
   }
   .btn-dialog-close {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

@@ -13,6 +13,9 @@
         }}</span>
       </ng-container>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <mat-drawer-container

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .mat-card-header {
-  margin: 0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-content {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html

@@ -3,6 +3,9 @@
     <mat-card-title>
       {{ (isModify ? 'message.modify' : 'message.sendTo') | translate }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <ucap-message-write

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss

@@ -1,3 +1,16 @@
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
+}
+
 .confirm-card {
   min-width: 500px;
   height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html

@@ -6,6 +6,9 @@
       </span>
       {{ data.notice.title }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss

@@ -19,6 +19,13 @@
     width: 480px;
     @include ellipsis(1);
   }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 .confirm-card {
   min-width: 500px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html

@@ -18,6 +18,9 @@
         {{ 'common.messages.selectAll' | translate }}
       </mat-checkbox>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div class="item-list">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss

@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .mat-card-header {
-  margin: 0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 
 .confirm-card {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -1,13 +1,28 @@
-<ucap-integrated-search
+<mat-card class="confirm-card mat-elevation-z">
-  [sessionVerinfo]="sessionVerinfo"
+  <mat-card-header
-  [presence]="presence$ | async"
+    cdkDrag
-  [searchWord]="!!data.keyword ? data.keyword : ''"
+    cdkDragRootElement=".cdk-overlay-pane"
-  [searchingProcessing]="searchingProcessing"
+    cdkDragHandle
-  [searchUserInfos]="searchUserInfos"
+    class="card-header"
-  [totalCount]="totalCount"
+  >
-  [pageCurrent]="pageCurrent"
+    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
-  [pageListCount]="pageListCount"
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
-  (search)="onSearch($event)"
+      <i class="mdi mdi-window-close"></i>
-  (changePage)="onChangePage($event)"
+    </button>
->
+  </mat-card-header>
-</ucap-integrated-search>
+  <mat-card-content>
+    <ucap-integrated-search
+      [sessionVerinfo]="sessionVerinfo"
+      [presence]="presence$ | async"
+      [searchWord]="!!data.keyword ? data.keyword : ''"
+      [searchingProcessing]="searchingProcessing"
+      [searchUserInfos]="searchUserInfos"
+      [totalCount]="totalCount"
+      [pageCurrent]="pageCurrent"
+      [pageListCount]="pageListCount"
+      (search)="onSearch($event)"
+      (changePage)="onChangePage($event)"
+    >
+    </ucap-integrated-search>
+  </mat-card-content>
+</mat-card>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss

@@ -0,0 +1,12 @@
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts

@@ -154,6 +154,10 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  onCancel(): void {
+    this.dialogRef.close({});
+  }
+
   onChangePage(event: PageEvent) {
     this.pageCurrent = event.pageIndex + 1;
     this.pageListCount = event.pageSize;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z setting-frame">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ 'settings.label' | translate }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div fxFlex class="setting-tab">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss

@@ -13,6 +13,14 @@
     width: 100%;
     border-bottom: 1px solid #dddddd;
     margin-bottom: 12px;
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
   }
 
   .mat-card-content {

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html

@@ -1,231 +1,207 @@
-<mat-card class="confirm-card mat-elevation-z">
+<div fxLayout="column" class="rightDrawer-notice">
-  <mat-card-header
+  <div fxFlex="1 1 80px" class="search-area">
-    cdkDrag
+    <ucap-integrated-search-form
-    cdkDragRootElement=".cdk-overlay-pane"
+      [searchWord]="!!searchWord ? searchWord : ''"
-    cdkDragHandle
+      (search)="onSearch($event)"
-    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">
-                  {{ getPresence(element, PresenceType.PC) }} /
-                  {{ getPresence(element, PresenceType.MOBILE) }} /
-                  {{ getWorkstatus(element) }} /
-                  <img
-                    class="thumbnail"
-                    ucapImage
-                    [base]="profileImageRoot"
-                    [path]="element.profileImageFile"
-                    [default]="'assets/images/img_nophoto_50.png'"
-                    (click)="onClickOpenProfile($event, element.seq)"
-                  />
-                </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 }}
+    </ucap-integrated-search-form>
-    </button>
+  </div>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+  <div style="position: relative;">
-      {{ 'common.messages.yes' | translate }}
+    <div
-    </button>
+      *ngIf="searchingProcessing"
-  </mat-card-actions> -->
+      style="position: absolute; width: 100%; z-index: 101;"
-</mat-card>
+    >
+      <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">
+              {{ getPresence(element, PresenceType.PC) }} /
+              {{ getPresence(element, PresenceType.MOBILE) }} /
+              {{ getWorkstatus(element) }} /
+              <img
+                class="thumbnail"
+                ucapImage
+                [base]="profileImageRoot"
+                [path]="element.profileImageFile"
+                [default]="'assets/images/img_nophoto_50.png'"
+                (click)="onClickOpenProfile($event, element.seq)"
+              />
+            </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>

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html

@@ -1,7 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header *ngIf="data.title">
+  <mat-card-header>
-    <mat-card-title>{{ data.title }}</mat-card-title>
+    <mat-card-title *ngIf="data.title">{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss

@@ -1,22 +1,30 @@
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
+    }
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }

projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html

@@ -6,7 +6,9 @@
     class="card-header"
   >
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss

@@ -1,25 +1,34 @@
-::ng-deep .mat-card-header-tex{
+::ng-deep .mat-card-header {
-  margin:0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }