수정 :: 새로운 대화 개설용 유저 선택 팝업 > 유저선택 후 확인 버튼 > 대화방 개설

2019-10-17 18:05:44 +09:00 · 2019-10-17 18:05:44 +09:00 · 3b71bd936d
commit 3b71bd936d
parent 96f07a071c
8 changed files with 77 additions and 29 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';

@Component({
  selector: 'app-layout-messenger-left-side',
@ -45,11 +46,14 @@ export class LeftSideComponent implements OnInit {
      }
    });

-    this.logger.debug(result.choice);
-    // if (result.choice) {
+    if (!!result && !!result.choice && result.choice) {
+      this.logger.debug(result.selectedUserList);
+      if (!!result.selectedUserList && result.selectedUserList.length > 0) {
+        const userSeqs: number[] = [];
+        result.selectedUserList.map(user => userSeqs.push(user.seq));

-    // } else {
-
-    // }
+        this.store.dispatch(ChatStore.openRoom({ userSeqList: userSeqs }));
+      }
+    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@ -13,7 +13,7 @@
        [isChecked]="getCheckedUser(userInfo)" (checkUser)="onCheckUser($event)">
      </ucap-profile-user-list-item>
    </div>
-    <div>
+    <div *ngIf="!isUserSelect">
      (하단버튼영역)
    </div>
  </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
@ -29,6 +29,9 @@ import { KEY_VER_INFO } from '@app/types/ver-info.type';
  animations: ucapAnimations
 })
 export class OrganizationComponent implements OnInit {
+  @Input()
+  /** 사용자 선택용으로 사용시 true 로 유입 */
+  isUserSelect = false;
  @Input()
  /** 선택된 사용자의 리스트 */
  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
@ -89,16 +92,6 @@ export class OrganizationComponent implements OnInit {
      .subscribe();
  }

-  getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
-    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
-      return (
-        this.selectedUserList.filter(item => item.seq === userInfo.seq).length >
-        0
-      );
-    }
-    return false;
-  }
-
  onSelectedOrganization(deptInfo: DeptInfo) {
    this.store
      .pipe(
@ -121,6 +114,18 @@ export class OrganizationComponent implements OnInit {
      .subscribe();
  }

+  /** 리스트 checkable 할 경우 checkbox 의 isChecked 를 관장하며 리스트의 전체선택 여부를 판단한다. */
+  getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
+      return (
+        this.selectedUserList.filter(item => item.seq === userInfo.seq).length >
+        0
+      );
+    }
+    return false;
+  }
+
+  /** 리스트가 checkable 할 경우 checkbox 의 change 이벤트를 상위 컴포넌트로 전달한다. */
  onCheckUser(params: {
    isChecked: boolean;
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@ -13,10 +13,11 @@
          <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode"
            (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"></ucap-organization-tenant-search>
          <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
-            [favoritBuddyList]="favoritBuddyList$ | async" [checkable]="true" (checkGroup)="onCheckGroup($event)">
+            [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)" (checkUser)="onCheckUser($event)" [checkable]="true">
+              [isChecked]="getCheckedUser(userInfo)" [checkable]="true" (checkUser)="onCheckUser($event)">
            </ucap-profile-user-list-item>
          </ucap-group-expansion-panel>
        </mat-tab>
@ -24,7 +25,7 @@
          <ng-template mat-tab-label>
            <mat-icon>device_hub</mat-icon>
          </ng-template>
-          <app-layout-chat-left-sidenav-organization [selectedUserList]="selectedUserList"
+          <app-layout-chat-left-sidenav-organization [selectedUserList]="selectedUserList" [isUserSelect]="true"
            (checkUser)="onCheckUser($event)">
          </app-layout-chat-left-sidenav-organization>
        </mat-tab>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
@ -38,6 +38,7 @@ export interface CreateChatDialogData {

 export interface CreateChatDialogResult {
  choice: boolean;
+  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
 }

@Component({
@ -197,6 +198,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    );
  }

+  /** 동료그룹 :: 그룹의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
  onCheckGroup(params: {
    isChecked: boolean;
    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
@ -219,6 +221,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    }
  }

+  /** 동료그룹>부서원, 조직도>부서원 :: 리스트의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
  onCheckUser(params: {
    isChecked: boolean;
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
@ -238,12 +241,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    }
  }

-  onClickChoice(choice: boolean): void {
-    // this.dialogRef.close({
-    //   choice
-    // });
-  }
-
+  /** 그룹>부서원 리스트의 ischecked 를 판단. */
  getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
      return (
@ -253,4 +251,12 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    }
    return false;
  }
+
+  /** 팝업의 선택 이벤트 전달. */
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice,
+      selectedUserList: this.selectedUserList
+    });
+  }
 }
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@ -28,8 +28,8 @@
          (click)="onClickMore($event, groupBuddy.group)">
          <mat-icon>more_vert</mat-icon>
        </button>
-        <mat-checkbox *ngIf="checkable" #checkbox (change)="onChangeCheck(checkbox.checked, groupBuddy)"
-          (click)="$event.stopPropagation()"></mat-checkbox>
+        <mat-checkbox *ngIf="checkable" #checkbox [checked]="getCheckedGroup(groupBuddy)"
+          (change)="onChangeCheck(checkbox.checked, groupBuddy)" (click)="$event.stopPropagation()"></mat-checkbox>
      </mat-panel-description>
    </mat-expansion-panel-header>

--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
@ -14,6 +14,11 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { MatAccordion } from '@angular/material';
 import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';

@Component({
  selector: 'ucap-group-expansion-panel',
@ -24,12 +29,13 @@ import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.
 export class ExpansionPanelComponent implements OnInit {
  @Input()
  groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }[];
-
  @Input()
  favoritBuddyList: UserInfo[];
-
  @Input()
  checkable = false;
+  @Input()
+  /** 선택된 사용자의 리스트 */
+  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];

  @Output()
  more = new EventEmitter<{
@ -67,6 +73,7 @@ export class ExpansionPanelComponent implements OnInit {
    this.more.emit({ event, group });
  }

+  /** 그룹리스트가 checkable 할 경우 checkbox 의 change 이벤트를 상위 컴포넌트로 전달한다. */
  onChangeCheck(
    value: boolean,
    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }
@ -76,4 +83,28 @@ export class ExpansionPanelComponent implements OnInit {
      groupBuddyList
    });
  }
+
+  /** 그룹리스트가 checkable 할 경우 checkbox 의 isChecked 를 관장하며, 하위 부서원들의 전체선택여부를 판단한다. */
+  getCheckedGroup(groupBuddy: {
+    group: GroupDetailData;
+    buddyList: UserInfo[];
+  }) {
+    if (groupBuddy.buddyList.length === 0) {
+      return false;
+    }
+    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
+      let allExist = true;
+      groupBuddy.buddyList.some(groupUser => {
+        if (
+          this.selectedUserList.filter(item => item.seq === groupUser.seq)
+            .length === 0
+        ) {
+          allExist = false;
+          return true;
+        }
+      });
+      return allExist;
+    }
+    return false;
+  }
 }
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
@ -117,6 +117,7 @@ export class UserListItemComponent implements OnInit, OnDestroy {
    return rtnClass;
  }

+  /** 리스트가 checkable 할 경우 checkbox 의 change 이벤트를 상위 컴포넌트로 전달한다. */
  onChangeCheck(
    value: boolean,
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN