From a6f1386c98dd743874c17df8a229165d6e5364d4 Mon Sep 17 00:00:00 2001
From: leejinho <lilis7575@gmail.com>
Date: Mon, 9 Mar 2020 10:00:55 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EA=B2=80=EC=83=89=EC=B0=BD?=
 =?UTF-8?q?=20=EC=A0=91=EC=96=B4=EB=91=90=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integrated-search.dialog.component.html   | 12 +----
 .../integrated-search.dialog.component.scss   |  4 ++
 .../integrated-search.dialog.component.ts     | 10 +++-
 .../native/components/top-bar.component.html  |  2 +
 .../native/components/top-bar.component.ts    | 54 +++++++++++++++----
 .../src/assets/scss/partials/_dialogs.scss    |  4 ++
 .../integrated-search-form.component.html     |  8 +++
 .../integrated-search-form.component.ts       | 10 ++++
 .../src/lib/services/dialog.service.ts        | 10 +++-
 9 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
index 6b55bd32..69314fe7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
index dc54373b..679adfc4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
@@ -10,3 +10,7 @@
     color: #444444;
   }
 }
+
+.hideDialog {
+  display: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
index 6dd8c0c4..a8f9e671 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/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 });
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 4b4210f6..518319d4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index b512d0a9..f2121ea9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/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');
+    }
   }
 }
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
index 4ffde06b..ebe8d24b 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
+++ b/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;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
index 304b9f0d..1ef80a41 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts
index 66cd08ed..d1f23e33 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.ts
+++ b/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();
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts
index 12bc3e03..66a049c5 100644
--- a/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts
+++ b/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();
   }