기능추가 :: 그룹 > 검색

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

@@ -19,6 +19,7 @@
       [companyList]="companyList$ | async"
       [companyCode]="companyCode"
       (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
+      (cancel)="onClickCancel($event)"
     ></ucap-organization-tenant-search>
 
     <mat-menu
@@ -49,7 +50,7 @@
       </button>
     </mat-menu>
   </div>
-  <div>
+  <div *ngIf="!isShowSearch">
     <ucap-group-expansion-panel
       #groupExpansionPanel
       [groupBuddyList]="groupBuddyList$ | async"
@@ -68,6 +69,20 @@
       </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>
   </div>
+  <div *ngIf="isShowSearch">
+    <div *ngIf="searchProcessing">
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+    <div>검색결과({{ searchUserInfos.length }}명)</div>
+    <ucap-profile-user-list-item
+      *ngFor="let userInfo of searchUserInfos"
+      [userInfo]="userInfo"
+      [presence]="getStatusBulkInfo(userInfo) | async"
+      [sessionVerinfo]="sessionVerinfo"
+      (click)="onSelectBuddy(userInfo)"
+    >
+    </ucap-profile-user-list-item>
+  </div>
 </div>
 
 <div

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

@@ -1,15 +1,17 @@
+import { StatusProtocolService } from './../../../../../../../ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service';
 import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
 import { MatMenuTrigger } from '@angular/material';
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 
-import { Observable, combineLatest, Subscription } from 'rxjs';
+import { Observable, combineLatest, Subscription, of } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, tap, catchError, exhaustMap } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import * as QueryStore from '@app/store/messenger/query';
 import * as SyncStore from '@app/store/messenger/sync';
+import * as StatusStore from '@app/store/messenger/status';
 
 import { NGXLogger } from 'ngx-logger';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -25,7 +27,11 @@ import {
   DeptSearchType,
   UserInfoSS,
   UserInfoF,
-  UserInfoDN
+  UserInfoDN,
+  QueryProtocolService,
+  SSVC_TYPE_QUERY_DEPT_USER_DATA,
+  SSVC_TYPE_QUERY_DEPT_USER_RES,
+  DeptUserData
 } from '@ucap-webmessenger/protocol-query';
 
 import {
@@ -76,10 +82,16 @@ export class GroupComponent implements OnInit, OnDestroy {
 
   sessionVerinfo: VersionInfo2Response;
 
+  isShowSearch = false;
+  searchProcessing = false;
+  searchUserInfos: UserInfoSS[] = [];
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
     private dialogService: DialogService,
+    private queryProtocolService: QueryProtocolService,
+    private statusProtocolService: StatusProtocolService,
     private logger: NGXLogger
   ) {}
 
@@ -226,20 +238,64 @@ export class GroupComponent implements OnInit, OnDestroy {
     );
   }
 
+  /** 유저검색 */
   onKeyDownEnterOrganizationTenantSearch(params: {
     companyCode: string;
     searchWord: string;
   }) {
-    this.store.dispatch(
+    if (params.searchWord.trim().length > 1) {
-      QueryStore.deptUser({
+      this.isShowSearch = true;
-        divCd: 'GRP',
+      this.searchProcessing = true;
-        companyCode: params.companyCode,
+
-        searchRange: DeptSearchType.All,
+      const searchUserInfos: UserInfoSS[] = [];
-        search: params.searchWord,
+      this.queryProtocolService
-        senderCompanyCode: params.companyCode,
+        .deptUser({
-        senderEmployeeType: this.loginRes.userInfo.employeeType
+          divCd: 'GRP',
-      })
+          companyCode: params.companyCode,
-    );
+          searchRange: DeptSearchType.All,
+          search: params.searchWord,
+          senderCompanyCode: params.companyCode,
+          senderEmployeeType: this.loginRes.userInfo.employeeType
+        })
+        .pipe(
+          map(res => {
+            switch (res.SSVC_TYPE) {
+              case SSVC_TYPE_QUERY_DEPT_USER_DATA:
+                searchUserInfos.push(...(res as DeptUserData).userInfos);
+                break;
+              case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                {
+                  // 검색 결과 처리.
+                  this.searchUserInfos = searchUserInfos;
+                  this.searchProcessing = false;
+
+                  // 검색 결과에 따른 프레즌스 조회.
+                  const userSeqList: number[] = [];
+                  this.searchUserInfos.map(user => userSeqList.push(user.seq));
+                  if (userSeqList.length > 0) {
+                    this.store.dispatch(
+                      StatusStore.bulkInfo({
+                        divCd: 'groupSrch',
+                        userSeqs: userSeqList
+                      })
+                    );
+                  }
+                }
+                break;
+            }
+          }),
+          catchError(error => {
+            this.searchProcessing = false;
+            return of(this.logger.error(error));
+          })
+        )
+        .subscribe();
+    }
+  }
+  /** 검색 취소 */
+  onClickCancel() {
+    this.isShowSearch = false;
+    this.searchUserInfos = [];
   }
 
   getShowContextMenu(userInfo: UserInfo | UserInfoF) {

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

@@ -31,21 +31,42 @@
               <mat-icon>group</mat-icon>
             </ng-template>
 
-            <ucap-organization-tenant-search
+            <div>
-              [companyList]="companyList$ | async"
+              <ucap-organization-tenant-search
-              [companyCode]="companyCode"
+                [companyList]="companyList$ | async"
-              (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
+                [companyCode]="companyCode"
-            ></ucap-organization-tenant-search>
+                (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-            <ucap-group-expansion-panel
+                (cancel)="onClickCancel($event)"
-              #groupExpansionPanel
+              ></ucap-organization-tenant-search>
-              [groupBuddyList]="groupBuddyList$ | async"
+            </div>
-              [favoritBuddyList]="favoritBuddyList$ | async"
+            <div *ngIf="!isShowSearch">
-              [selectedUserList]="selectedUserList"
+              <ucap-group-expansion-panel
-              [checkable]="true"
+                #groupExpansionPanel
-              (checkGroup)="onCheckGroup($event)"
+                [groupBuddyList]="groupBuddyList$ | async"
-            >
+                [favoritBuddyList]="favoritBuddyList$ | async"
+                [selectedUserList]="selectedUserList"
+                [checkable]="true"
+                (checkGroup)="onCheckGroup($event)"
+              >
+                <ucap-profile-user-list-item
+                  *ucapGroupExpansionPanelItem="let userInfo"
+                  [userInfo]="userInfo"
+                  [sessionVerinfo]="sessionVerinfo"
+                  [selectedUserList]="selectedUserList"
+                  [isChecked]="getCheckedUser(userInfo)"
+                  [checkable]="true"
+                  (checkUser)="onCheckUser($event)"
+                >
+                </ucap-profile-user-list-item>
+              </ucap-group-expansion-panel>
+            </div>
+            <div *ngIf="isShowSearch">
+              <div *ngIf="searchProcessing">
+                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+              </div>
+              <div>검색결과({{ searchUserInfos.length }}명)</div>
               <ucap-profile-user-list-item
-                *ucapGroupExpansionPanelItem="let userInfo"
+                *ngFor="let userInfo of searchUserInfos"
                 [userInfo]="userInfo"
                 [sessionVerinfo]="sessionVerinfo"
                 [selectedUserList]="selectedUserList"
@@ -54,7 +75,7 @@
                 (checkUser)="onCheckUser($event)"
               >
               </ucap-profile-user-list-item>
-            </ucap-group-expansion-panel>
+            </div>
           </mat-tab>
           <mat-tab>
             <ng-template mat-tab-label>

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

@@ -3,12 +3,13 @@ import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
-import { Observable, combineLatest, Subscription } from 'rxjs';
+import { Observable, combineLatest, Subscription, of } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, tap, catchError } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 import * as AppStore from '@app/store';
 import * as QueryStore from '@app/store/messenger/query';
+import * as StatusStore from '@app/store/messenger/status';
 
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -26,7 +27,11 @@ import {
   DeptSearchType,
   UserInfoSS,
   UserInfoF,
-  UserInfoDN
+  UserInfoDN,
+  QueryProtocolService,
+  SSVC_TYPE_QUERY_DEPT_USER_DATA,
+  DeptUserData,
+  SSVC_TYPE_QUERY_DEPT_USER_RES
 } from '@ucap-webmessenger/protocol-query';
 import {
   RoomInfo,
@@ -62,6 +67,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: CreateChatDialogData,
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
+    private queryProtocolService: QueryProtocolService,
     private formBuilder: FormBuilder,
     private logger: NGXLogger
   ) {}
@@ -74,6 +80,12 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     KEY_VER_INFO
   );
 
+  // 검색
+  isShowSearch = false;
+  searchProcessing = false;
+  searchUserInfos: UserInfoSS[] = [];
+
+  // 그룹
   companyList$: Observable<Company[]>;
   companyCode: string;
   groupBuddyList$: Observable<
@@ -81,6 +93,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   >;
   favoritBuddyList$: Observable<UserInfo[]>;
 
+  // 대화방
   roomList: RoomInfo[];
   roomUserList: RoomUserDetailData[];
   roomUserShortList: RoomUserData[];
@@ -207,20 +220,64 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** 유저검색 */
   onKeyDownEnterOrganizationTenantSearch(params: {
     companyCode: string;
     searchWord: string;
   }) {
-    this.store.dispatch(
+    if (params.searchWord.trim().length > 1) {
-      QueryStore.deptUser({
+      this.isShowSearch = true;
-        divCd: 'GRP',
+      this.searchProcessing = true;
-        companyCode: params.companyCode,
+
-        searchRange: DeptSearchType.All,
+      const searchUserInfos: UserInfoSS[] = [];
-        search: params.searchWord,
+      this.queryProtocolService
-        senderCompanyCode: params.companyCode,
+        .deptUser({
-        senderEmployeeType: this.loginRes.userInfo.employeeType
+          divCd: 'GRP',
-      })
+          companyCode: params.companyCode,
-    );
+          searchRange: DeptSearchType.All,
+          search: params.searchWord,
+          senderCompanyCode: params.companyCode,
+          senderEmployeeType: this.loginRes.userInfo.employeeType
+        })
+        .pipe(
+          map(res => {
+            switch (res.SSVC_TYPE) {
+              case SSVC_TYPE_QUERY_DEPT_USER_DATA:
+                searchUserInfos.push(...(res as DeptUserData).userInfos);
+                break;
+              case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                {
+                  // 검색 결과 처리.
+                  this.searchUserInfos = searchUserInfos;
+                  this.searchProcessing = false;
+
+                  // 검색 결과에 따른 프레즌스 조회.
+                  const userSeqList: number[] = [];
+                  this.searchUserInfos.map(user => userSeqList.push(user.seq));
+                  if (userSeqList.length > 0) {
+                    this.store.dispatch(
+                      StatusStore.bulkInfo({
+                        divCd: 'groupSrch',
+                        userSeqs: userSeqList
+                      })
+                    );
+                  }
+                }
+                break;
+            }
+          }),
+          catchError(error => {
+            this.searchProcessing = false;
+            return of(this.logger.error(error));
+          })
+        )
+        .subscribe();
+    }
+  }
+  /** 검색 취소 */
+  onClickCancel() {
+    this.isShowSearch = false;
+    this.searchUserInfos = [];
   }
 
   /** 동료그룹 :: 그룹의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html

@@ -16,7 +16,17 @@
       placeholder="name"
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
     />
-    <div class="btn-search"><i class="material-icons">search</i></div>
+    <div class="btn-search">
+      <button
+        mat-button
+        matSuffix
+        mat-icon-button
+        aria-label="cancel"
+        (click)="searchWordInput.value = ''; onClickCancel()"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
   </div>
 </div>
 

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.ts

@@ -19,6 +19,8 @@ export class TenantSearchComponent implements OnInit {
     companyCode: string;
     searchWord: string;
   }>();
+  @Output()
+  cancel = new EventEmitter<any>();
 
   constructor(private logger: NGXLogger) {}
 
@@ -27,4 +29,8 @@ export class TenantSearchComponent implements OnInit {
   onKeyDownEnter(searchWord: string) {
     this.keyDownEnter.emit({ companyCode: this.companyCode, searchWord });
   }
+
+  onClickCancel() {
+    this.cancel.emit();
+  }
 }