기능추가 :: 대화 > 검색기능

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -1,3 +1,33 @@
-<ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
-  [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo" (click)="onSelectedRoom(room)">
-</ucap-room-list-item>
+<div>
+  <mat-form-field>
+    <input
+      matInput
+      #inputSearch
+      type="text"
+      maxlength="20"
+      placeholder="대화방 이름 검색"
+      value=""
+      (keydown.enter)="onKeyDownEnter(inputSearch.value)"
+    />
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Clear"
+      (click)="inputSearch.value = ''; searchWord = ''; isSearch = false"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+</div>
+<div>
+  <ucap-room-list-item
+    *ngFor="let room of getRoomList()"
+    [loginRes]="loginRes"
+    [roomInfo]="room"
+    [roomUserInfo]="getRoomUserList(room)"
+    [sessionVerinfo]="sessionVerinfo"
+    (click)="onSelectedRoom(room)"
+  >
+  </ucap-room-list-item>
+</div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts

@@ -46,6 +46,9 @@ export class ChatComponent implements OnInit, OnDestroy {
     );
   }
 
+  isSearch = false;
+  searchWord = '';
+
   ngOnInit() {
     this.roomSubscription = combineLatest([
       this.store.pipe(
@@ -90,11 +93,39 @@ export class ChatComponent implements OnInit, OnDestroy {
     }
   }
 
+  onKeyDownEnter(search: string) {
+    if (search.trim().length > 1) {
+      this.isSearch = true;
+      this.searchWord = search;
+    }
+  }
+
   onSelectedRoom(roomInfo: RoomInfo) {
     this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
   }
 
-  getRoomUserList(roomInfo: RoomInfo): RoomUserInfo[] | UserInfoShort[] {
+  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(
         value => roomInfo.roomSeq === value.roomSeq