From 25c502b877cc81bc02c6dab09c9531c097024ddb Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Tue, 29 Oct 2019 12:23:40 +0900
Subject: [PATCH] =?UTF-8?q?bugfix=20:=20=EB=8C=80=ED=99=94=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B2=80=EC=83=89=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../left-sidenav/chat.component.html          | 43 ++++++++++++--
 .../components/left-sidenav/chat.component.ts | 59 +++++++++++--------
 .../left-sidenav/organization.component.html  | 13 +++-
 3 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index 2d33ee3f..59968a2d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -10,7 +10,7 @@
         value=""
         formControlName="searchInput"
         [matAutocomplete]="auto"
-        (keydown.enter)="onKeyDownEnter(inputSearch.value)"
+        (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
       />
       <mat-autocomplete #auto="matAutocomplete">
         <mat-option
@@ -26,16 +26,51 @@
         matSuffix
         mat-icon-button
         aria-label="Clear"
-        (click)="inputSearch.value = ''; searchWord = ''; isSearch = false"
+        (click)="inputSearch.value = ''; onClickSearchCancel()"
       >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
   </form>
 </div>
-<div class="app-layout-chat-left-sidenav-chat-list" perfectScrollbar>
+<div
+  *ngIf="!isSearch"
+  class="app-layout-chat-left-sidenav-chat-list"
+  perfectScrollbar
+>
   <ucap-room-list-item
-    *ngFor="let room of getRoomList()"
+    *ngFor="let room of roomList"
+    [loginRes]="loginRes"
+    [roomInfo]="room"
+    [roomUserInfo]="getRoomUserList(room)"
+    [sessionVerinfo]="sessionVerinfo"
+    (click)="onSelectedRoom(room)"
+    (contextmenu)="onContextMenuChat($event, room)"
+  >
+  </ucap-room-list-item>
+  <!-- <cdk-virtual-scroll-viewport
+    itemSize="20"
+    class="app-layout-chat-left-sidenav-chat-list-viewport"
+  >
+    <ucap-room-list-item
+      *cdkVirtualFor="let room of getRoomList()"
+      [loginRes]="loginRes"
+      [roomInfo]="room"
+      [roomUserInfo]="getRoomUserList(room)"
+      [sessionVerinfo]="sessionVerinfo"
+      (click)="onSelectedRoom(room)"
+      (contextmenu)="onContextMenuChat($event, room)"
+    >
+    </ucap-room-list-item>
+  </cdk-virtual-scroll-viewport> -->
+</div>
+<div
+  *ngIf="!!isSearch"
+  class="app-layout-chat-left-sidenav-chat-list search"
+  perfectScrollbar
+>
+  <ucap-room-list-item
+    *ngFor="let room of searchRoomList"
     [loginRes]="loginRes"
     [roomInfo]="room"
     [roomUserInfo]="getRoomUserList(room)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
index 8ba72c76..ace5fe9c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
@@ -12,7 +12,7 @@ import {
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import * as RoomStore from '@app/store/messenger/room';
-import { tap, debounceTime } from 'rxjs/operators';
+import { tap, debounceTime, delay } from 'rxjs/operators';
 import {
   RoomUserDetailData,
   RoomUserData
@@ -45,7 +45,7 @@ export class ChatComponent implements OnInit, OnDestroy {
   roomSubscription: Subscription;
 
   isSearch = false;
-  searchWord = '';
+  searchRoomList: RoomInfo[] = [];
   fgSearch: FormGroup;
   recommendedWordList: string[];
   filteredRecommendedWordList: string[];
@@ -69,7 +69,7 @@ export class ChatComponent implements OnInit, OnDestroy {
 
     this.fgSearch
       .get('searchInput')
-      .valueChanges.pipe(debounceTime(300))
+      .valueChanges.pipe(debounceTime(100))
       .subscribe(value => {
         if (value !== null && value.length > 0) {
           this.filteredRecommendedWordList = this.recommendedWordList.filter(
@@ -96,6 +96,7 @@ export class ChatComponent implements OnInit, OnDestroy {
       .pipe(
         tap(([room, roomUser, roomUserShort]) => {
           this.roomList = room;
+          this.searchRoomList = room;
           this.roomUserList = roomUser;
           this.roomUserShortList = roomUserShort;
 
@@ -148,11 +149,38 @@ export class ChatComponent implements OnInit, OnDestroy {
     }
   }
 
-  onKeyDownEnter(search: string) {
+  onClickSearchCancel() {
+    this.isSearch = false;
+    this.searchRoomList = [];
+    this.filteredRecommendedWordList = [];
+  }
+
+  onKeyDownEnter(event: KeyboardEvent, search: string) {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (search.trim().length > 1) {
       this.isSearch = true;
-      this.searchWord = search;
+      this.searchRoomList = this.roomList.filter(room => {
+        if (room.roomName.indexOf(search) >= 0) {
+          return true;
+        } else if (
+          this.getRoomUserList(room).filter(user =>
+            user.seq !== this.loginRes.userSeq
+              ? user.name.indexOf(search) >= 0
+              : false
+          ).length > 0
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    } else {
+      this.isSearch = false;
+      this.searchRoomList = [];
     }
+    setTimeout(() => (this.filteredRecommendedWordList = []), 200);
   }
 
   onContextMenuChat(event: MouseEvent, roomInfo: RoomInfo) {
@@ -180,27 +208,6 @@ export class ChatComponent implements OnInit, OnDestroy {
     );
   }
 
-  getRoomList() {
-    if (this.isSearch && this.searchWord.trim().length > 0) {
-      return this.roomList.filter(room => {
-        if (room.roomName.indexOf(this.searchWord) >= 0) {
-          return true;
-        }
-        if (
-          this.getRoomUserList(room).filter(user =>
-            user.seq !== this.loginRes.userSeq
-              ? user.name.indexOf(this.searchWord) >= 0
-              : false
-          ).length > 0
-        ) {
-          return true;
-        }
-        return false;
-      });
-    }
-    return this.roomList;
-  }
-
   getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] {
     if (!!this.roomUserList && 0 < this.roomUserList.length) {
       const i = this.roomUserList.findIndex(
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 7e85069c..65ba1626 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -23,8 +23,7 @@
       >
         <ucap-profile-user-list-item
           *cdkVirtualFor="
-            let userInfo of selectedDepartmentUserInfoList$ | async;
-            templateCacheSize: 20
+            let userInfo of selectedDepartmentUserInfoList$ | async
           "
           [userInfo]="userInfo"
           [checkable]="true"
@@ -36,6 +35,16 @@
           Loading...
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>
+      <!-- <ucap-profile-user-list-item
+        *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
+        [userInfo]="userInfo"
+        [checkable]="true"
+        [sessionVerinfo]="sessionVerinfo"
+        [selectedUserList]="selectedUserList"
+        [isChecked]="getCheckedUser(userInfo)"
+        (checkUser)="onCheckUser($event)"
+      >
+      </ucap-profile-user-list-item> -->
     </div>
   </div>
   <div *ngIf="!isUserSelect" class="btn-box">