autocomplete of room search is added

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

@@ -1,24 +1,37 @@
 <div class="app-layout-chat-left-sidenav-chat-header">
-  <mat-form-field class="w-100-p" floatLabel="never">
+  <form [formGroup]="fgSearch">
-    <input
+    <mat-form-field class="w-100-p" floatLabel="never">
-      matInput
+      <input
-      #inputSearch
+        matInput
-      type="text"
+        #inputSearch
-      maxlength="20"
+        type="text"
-      placeholder="대화방 이름 검색"
+        maxlength="20"
-      value=""
+        placeholder="대화방 이름 검색"
-      (keydown.enter)="onKeyDownEnter(inputSearch.value)"
+        value=""
-    />
+        formControlName="searchInput"
-    <button
+        [matAutocomplete]="auto"
-      mat-button
+        (keydown.enter)="onKeyDownEnter(inputSearch.value)"
-      matSuffix
+      />
-      mat-icon-button
+      <mat-autocomplete #auto="matAutocomplete">
-      aria-label="Clear"
+        <mat-option
-      (click)="inputSearch.value = ''; searchWord = ''; isSearch = false"
+          *ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
-    >
+          [value]="filteredRecommendedWord"
-      <mat-icon>close</mat-icon>
+        >
-    </button>
+          {{ filteredRecommendedWord }}
-  </mat-form-field>
+        </mat-option>
+      </mat-autocomplete>
+
+      <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>
+  </form>
 </div>
 <div class="app-layout-chat-left-sidenav-chat-list" perfectScrollbar>
   <ucap-room-list-item

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 } from 'rxjs/operators';
+import { tap, debounceTime } from 'rxjs/operators';
 import {
   RoomUserDetailData,
   RoomUserData
@@ -22,6 +22,7 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { MatMenuTrigger } from '@angular/material';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-chat',
@@ -43,20 +44,44 @@ export class ChatComponent implements OnInit, OnDestroy {
   loginResSubscription: Subscription;
   roomSubscription: Subscription;
 
+  isSearch = false;
+  searchWord = '';
+  fgSearch: FormGroup;
+  recommendedWordList: string[];
+  filteredRecommendedWordList: string[];
+
   constructor(
     private store: Store<any>,
+    private formBuilder: FormBuilder,
     private logger: NGXLogger,
     private sessionStorageService: SessionStorageService
   ) {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
       KEY_VER_INFO
     );
+    this.recommendedWordList = [];
   }
 
-  isSearch = false;
-  searchWord = '';
-
   ngOnInit() {
+    this.fgSearch = this.formBuilder.group({
+      searchInput: null
+    });
+
+    this.fgSearch
+      .get('searchInput')
+      .valueChanges.pipe(debounceTime(300))
+      .subscribe(value => {
+        if (value !== null && value.length > 0) {
+          this.filteredRecommendedWordList = this.recommendedWordList.filter(
+            v => {
+              return v.includes(value);
+            }
+          );
+        } else {
+          this.filteredRecommendedWordList = [];
+        }
+      });
+
     this.roomSubscription = combineLatest([
       this.store.pipe(
         select(AppStore.MessengerSelector.SyncSelector.selectAllRoom)
@@ -73,6 +98,33 @@ export class ChatComponent implements OnInit, OnDestroy {
           this.roomList = room;
           this.roomUserList = roomUser;
           this.roomUserShortList = roomUserShort;
+
+          const recommendedWordList = [];
+          for (const r of room) {
+            if (!!r.roomName && '' !== r.roomName.trim()) {
+              recommendedWordList.push(r.roomName);
+            }
+          }
+          for (const ru of roomUser) {
+            for (const u of ru.userInfos) {
+              if (u.seq !== this.loginRes.userSeq) {
+                if (!!u.name && '' !== u.name.trim()) {
+                  recommendedWordList.push(u.name);
+                }
+              }
+            }
+          }
+          for (const ru of roomUserShort) {
+            for (const u of ru.userInfos) {
+              if (u.seq !== this.loginRes.userSeq) {
+                if (!!u.name && '' !== u.name.trim()) {
+                  recommendedWordList.push(u.name);
+                }
+              }
+            }
+          }
+
+          this.recommendedWordList = [...recommendedWordList];
         })
       )
       .subscribe();

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -8,6 +8,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -46,6 +47,8 @@ import { DIALOGS } from './dialogs';
     ReactiveFormsModule,
     OverlayModule,
     ScrollingModule,
+
+    MatAutocompleteModule,
     MatFormFieldModule,
     MatInputModule,
     MatBadgeModule,