통합검색창 접어두기 기능 구현.

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

@@ -114,20 +114,12 @@
       <div class="footer-fix search-result-footer">
         <ul>
           <li>
-            <button
-              mat-flat-button
-              (click)="onClickAddGroup()"
-              class="mat-primary"
-            >
+            <button mat-flat-button (click)="onCancel()" class="mat-primary">
               검색 초기화 & 닫기
             </button>
           </li>
           <li>
-            <button
-              mat-flat-button
-              (click)="onClickChatOpen()"
-              class="mat-primary"
-            >
+            <button mat-flat-button (click)="onClickHide()" class="mat-primary">
               접어두기
             </button>
           </li>

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

@@ -10,3 +10,7 @@
     color: #444444;
   }
 }
+
+.hideDialog {
+  display: none;
+}

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

@@ -46,7 +46,9 @@ export interface IntegratedSearchDialogData {
   keyword: string;
 }
 
-export interface IntegratedSearchDialogResult {}
+export interface IntegratedSearchDialogResult {
+  clear: boolean;
+}
 
 @Component({
   selector: 'app-integrated-search.dialog',
@@ -316,7 +318,11 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
       )
       .subscribe();
   }
+
+  onClickHide(): void {
+    this.dialogRef.addPanelClass('hideDialog');
+  }
   onCancel(): void {
-    this.dialogRef.close({});
+    this.dialogRef.close({ clear: true });
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -9,7 +9,9 @@
     <ucap-integrated-search-form
       *ngIf="!!loginRes"
       [searchWord]="integratedSearchWord"
+      [isShowOpenIcon]="integratedIsShowOpenIcon"
       (search)="onIntegratedSearch($event)"
+      (showDialog)="onIntegratedDialogOpen()"
       class="input-lineless integrated-search"
     >
     </ucap-integrated-search-form>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts

@@ -77,6 +77,7 @@ import {
   IntegratedSearchDialogData
 } from '@app/layouts/messenger/dialogs/search/integrated-search.dialog.component';
 import { MatRadioChange } from '@angular/material/radio';
+import { MatDialogRef } from '@angular/material/dialog';
 
 const zoomFactors = [60, 70, 85, 100, 120, 145, 170, 200];
 
@@ -128,6 +129,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
   profileMenu: MatMenu;
 
   integratedSearchWord = '';
+  integratedIsShowOpenIcon = false;
 
   constructor(
     private store: Store<any>,
@@ -636,24 +638,56 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
-  async onIntegratedSearch(keyword: string) {
+  onIntegratedSearch(keyword: string) {
     if (!keyword || keyword.trim().length === 0) {
       return;
     }
 
     this.integratedSearchWord = keyword;
+    this.integratedIsShowOpenIcon = true;
+    let interval = 0;
+    let reopen = false;
 
-    const result = await this.dialogService.open<
+    const matDialogRef: MatDialogRef<
       IntegratedSearchDialogComponent,
-      IntegratedSearchDialogData,
       IntegratedSearchDialogResult
-    >(IntegratedSearchDialogComponent, {
-      data: {
-        keyword
-      },
-      restoreFocus: false
-    });
+    > = this.dialogService.getDialogById('IntegratedSearchDialog');
 
-    this.integratedSearchWord = '';
+    if (!!matDialogRef) {
+      matDialogRef.close({ clear: false });
+      interval = 500;
+    }
+
+    setTimeout(async () => {
+      const result = await this.dialogService.open<
+        IntegratedSearchDialogComponent,
+        IntegratedSearchDialogData,
+        IntegratedSearchDialogResult
+      >(IntegratedSearchDialogComponent, {
+        data: {
+          keyword
+        },
+        restoreFocus: false,
+        hasBackdrop: false,
+        id: 'IntegratedSearchDialog'
+      });
+
+      if (!!result) {
+        this.integratedIsShowOpenIcon = false;
+        if (!!result.clear) {
+          this.integratedSearchWord = '';
+        }
+      }
+    }, interval);
+  }
+  onIntegratedDialogOpen() {
+    const matDialogRef: MatDialogRef<
+      IntegratedSearchDialogComponent,
+      IntegratedSearchDialogResult
+    > = this.dialogService.getDialogById('IntegratedSearchDialog');
+
+    if (!!matDialogRef) {
+      matDialogRef.removePanelClass('hideDialog');
+    }
   }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss

@@ -1,5 +1,9 @@
 //mat-snack-bar-container
 .cdk-global-overlay-wrapper {
+  .hideDialog {
+    display: none;
+  }
+
   .mat-snack-bar-container {
     margin: 0;
     padding: 30px;

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

@@ -11,5 +11,13 @@
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
       [value]="!!searchWord ? searchWord : ''"
     />
+    <span
+      class="icon-img"
+      *ngIf="isShowOpenIcon"
+      matSuffix
+      (click)="onClickShowDialog()"
+    >
+      <i class="mid mdi-open-in-new"></i>
+    </span>
   </mat-form-field>
 </div>

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

@@ -18,9 +18,15 @@ export class IntegratedSearchFormComponent implements OnInit {
   @Input()
   searchWord?: string;
 
+  @Input()
+  isShowOpenIcon = false;
+
   @Output()
   search = new EventEmitter<string>();
 
+  @Output()
+  showDialog = new EventEmitter<void>();
+
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {}
@@ -28,4 +34,8 @@ export class IntegratedSearchFormComponent implements OnInit {
   onKeyDownEnter(keyword: string) {
     this.search.emit(keyword);
   }
+
+  onClickShowDialog() {
+    this.showDialog.emit();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts

@@ -1,6 +1,10 @@
 import { TemplateRef, Injectable } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import {
+  MatDialog,
+  MatDialogConfig,
+  MatDialogRef
+} from '@angular/material/dialog';
 
 import { of } from 'rxjs';
 import { take, map, catchError } from 'rxjs/operators';
@@ -38,6 +42,10 @@ export class DialogService {
     });
   }
 
+  getDialogById(id: string): MatDialogRef<any, any> {
+    return this.matDialog.getDialogById(id);
+  }
+
   closeAll() {
     this.matDialog.closeAll();
   }