layout 정리

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

@@ -1,4 +1,4 @@
-<div>
+<div *ngIf="showTitle">
   <div class="current-head">
     <h3>조직도</h3>
   </div>

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

@@ -4,7 +4,7 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
-  Input,
+  Input
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import { Observable, Subscription, of } from 'rxjs';
@@ -18,7 +18,7 @@ import {
   UserInfoDN,
   SSVC_TYPE_QUERY_DEPT_USER_DATA,
   SSVC_TYPE_QUERY_DEPT_USER_RES,
-  DeptUserData,
+  DeptUserData
 } from '@ucap-webmessenger/protocol-query';
 import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 import { Store, select } from '@ngrx/store';
@@ -37,7 +37,7 @@ import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import {
   SelectGroupDialogComponent,
   SelectGroupDialogData,
-  SelectGroupDialogResult,
+  SelectGroupDialogResult
 } from '../../dialogs/group/select-group.dialog.component';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -46,9 +46,11 @@ import { Company } from '@ucap-webmessenger/api-external';
   selector: 'app-layout-chat-left-sidenav-organization',
   templateUrl: './organization.component.html',
   styleUrls: ['./organization.component.scss'],
-  animations: ucapAnimations,
+  animations: ucapAnimations
 })
 export class OrganizationComponent implements OnInit, OnDestroy {
+  @Input()
+  showTitle = true;
   @Input()
   /** 사용자 선택용으로 사용시 true 로 유입 */
   isUserSelect = false;
@@ -150,7 +152,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
               search: '',
               searchRange: DeptSearchType.All,
               senderCompanyCode: this.loginInfo.companyCode,
-              senderEmployeeType: loginRes.userInfo.employeeType,
+              senderEmployeeType: loginRes.userInfo.employeeType
             })
           );
           return loginRes;
@@ -188,7 +190,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
           searchRange: DeptSearchType.All,
           search: params.searchWord,
           senderCompanyCode: params.companyCode,
-          senderEmployeeType: this.loginRes.userInfo.employeeType,
+          senderEmployeeType: this.loginRes.userInfo.employeeType
         })
         .pipe(
           map(res => {
@@ -208,7 +210,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
                     this.store.dispatch(
                       StatusStore.bulkInfo({
                         divCd: 'orgSrch',
-                        userSeqs: userSeqList,
+                        userSeqs: userSeqList
                       })
                     );
                   }
@@ -246,7 +248,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
               search: '',
               searchRange: DeptSearchType.All,
               senderCompanyCode: this.loginInfo.companyCode,
-              senderEmployeeType: loginRes.userInfo.employeeType,
+              senderEmployeeType: loginRes.userInfo.employeeType
             })
           );
         }),
@@ -308,7 +310,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       isChecked: value,
       userInfos: this.isShowSearch
         ? this.searchUserInfos
-        : this.selectedDepartmentUserInfoList,
+        : this.selectedDepartmentUserInfoList
     });
   }
 
@@ -334,8 +336,8 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     >(SelectGroupDialogComponent, {
       width: '600px',
       data: {
-        title: 'Group Select',
+        title: 'Group Select'
-      },
+      }
     });
 
     if (!!result && !!result.choice && result.choice) {
@@ -352,7 +354,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
         this.store.dispatch(
           SyncStore.updateGroupMember({
             oldGroup,
-            trgtUserSeq,
+            trgtUserSeq
           })
         );
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html

@@ -1,6 +1,30 @@
 <div class="message-box container">
-  <div>
+  <div class="list-search">
-    search Area.
+    <div class="searchbox">
+      <form [formGroup]="fgSearch" class="w-100-p">
+        <mat-form-field floatLabel="never">
+          <input
+            matInput
+            #inputSearch
+            type="text"
+            maxlength="20"
+            placeholder="이름, 제목, 내용 검색"
+            value=""
+            formControlName="searchInput"
+            (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
+          />
+          <button
+            mat-button
+            matSuffix
+            mat-icon-button
+            aria-label="Clear"
+            (click)="inputSearch.value = ''; onClickSearchCancel()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-form-field>
+      </form>
+    </div>
   </div>
   <div class="container">
     <mat-tab-group

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts

@@ -27,6 +27,7 @@ import {
 import { DeviceType } from '@ucap-webmessenger/core';
 import { MessageStatusCode } from '@ucap-webmessenger/api';
 import { ContentType } from '@ucap-webmessenger/api-message';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-layout-chat-right-drawer-message-box',
@@ -34,6 +35,8 @@ import { ContentType } from '@ucap-webmessenger/api-message';
   styleUrls: ['./message-box.component.scss']
 })
 export class MessageBoxComponent implements OnInit, OnDestroy {
+  fgSearch: FormGroup;
+
   userInfoList: UserInfo[];
   userInfoListSubscription: Subscription;
 
@@ -60,6 +63,7 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<any>,
+    private formBuilder: FormBuilder,
     private sessionStorageService: SessionStorageService,
     private dialogService: DialogService,
     private messageApiService: MessageApiService
@@ -73,6 +77,10 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.fgSearch = this.formBuilder.group({
+      searchInput: null
+    });
+
     this.userInfoListSubscription = this.store
       .pipe(
         select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist),
@@ -130,6 +138,13 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
     }
   }
 
+  onKeyDownEnter(event: KeyboardEvent, search: string) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  onClickSearchCancel() {}
+
   getRetrieveMessage(type: MessageType, trgtPageIndex: number) {
     switch (type) {
       case MessageType.Receive:

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -98,6 +98,7 @@
             </ng-template>
             <div>
               <app-layout-chat-left-sidenav-organization
+                [showTitle]="false"
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
                 (checkAllUser)="onCheckAllUser($event)"