조직도 부서원 전체선택 기능 추가.

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

@@ -32,6 +32,7 @@
       </ng-template>
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
+        (checkAllUser)="onCheckAllUser($event)"
         (checkUser)="onCheckUser($event)"
       ></app-layout-chat-left-sidenav-organization>
     </mat-tab>

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

@@ -67,6 +67,26 @@ export class LeftSideComponent implements OnInit {
     }
   }
 
+  onCheckAllUser(params: {
+    isChecked: boolean;
+    userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  }) {
+    params.userInfos.forEach(userInfo => {
+      if (params.isChecked) {
+        if (
+          this.selectedUserList.filter(user => user.seq === userInfo.seq)
+            .length === 0
+        ) {
+          this.selectedUserList = [...this.selectedUserList, userInfo];
+        }
+      } else {
+        this.selectedUserList = this.selectedUserList.filter(
+          user => user.seq !== userInfo.seq
+        );
+      }
+    });
+  }
+
   /** 조직도>부서원 :: 리스트의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
   onCheckUser(params: {
     isChecked: boolean;
@@ -74,15 +94,15 @@ export class LeftSideComponent implements OnInit {
   }) {
     if (params.isChecked) {
       if (
+        params.userInfo &&
         this.selectedUserList.filter(user => user.seq === params.userInfo.seq)
-          .length === 0 &&
+          .length === 0
-        params.userInfo
       ) {
         this.selectedUserList = [...this.selectedUserList, params.userInfo];
       }
     } else {
       this.selectedUserList = this.selectedUserList.filter(
-        item => item.seq !== params.userInfo.seq
+        user => user.seq !== params.userInfo.seq
       );
     }
   }

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

@@ -11,7 +11,20 @@
   </div>
   <div fxFlex="60">
     <div class="select-dept">
-      {{ getSelectedDepartmentName() }}
+      <dl>
+        <dt>
+          {{ getSelectedDepartmentName() }}
+        </dt>
+        <dd>
+          <mat-checkbox
+            #checkbox
+            [checked]="getCheckedAllUser()"
+            (change)="onCheckAllUser(checkbox.checked)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+        </dd>
+      </dl>
     </div>
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
@@ -22,9 +35,7 @@
         style="height: calc(100% - 20px);"
       >
         <ucap-profile-user-list-item
-          *cdkVirtualFor="
+          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
-            let userInfo of selectedDepartmentUserInfoList$ | async
-          "
           [userInfo]="userInfo"
           [checkable]="true"
           [sessionVerinfo]="sessionVerinfo"

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

@@ -55,9 +55,16 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     isChecked: boolean;
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
   }>();
+  @Output()
+  checkAllUser = new EventEmitter<{
+    isChecked: boolean;
+    userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  }>();
 
   departmentInfoList$: Observable<DeptInfo[]>;
   selectedDepartmentUserInfoList$: Observable<UserInfoSS[]>;
+  selectedDepartmentUserInfoList: UserInfoSS[] = [];
+  selectedDepartmentUserInfoListSubscription: Subscription;
   selectedDepartmentStatus$: Observable<DeptUserResponse>;
   selectedDepartmentProcessing = false;
   selectedDepartmentProcessingSubscription: Subscription;
@@ -68,7 +75,6 @@ export class OrganizationComponent implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<any>,
-    private queryProtocolService: QueryProtocolService,
     private sessionStorageService: SessionStorageService,
     private dialogService: DialogService,
     private logger: NGXLogger
@@ -96,11 +102,18 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
-    this.selectedDepartmentUserInfoList$ = this.store.pipe(
+    this.selectedDepartmentUserInfoListSubscription = this.store
-      select(
+      .pipe(
-        AppStore.MessengerSelector.QuerySelector.selectedDepartmentUserInfoList
+        select(
+          AppStore.MessengerSelector.QuerySelector
+            .selectedDepartmentUserInfoList
+        ),
+        map(list => {
+          this.selectedDepartmentUserInfoList = list;
+        })
       )
-    );
+      .subscribe();
+
     this.selectedDepartmentStatus$ = this.store.pipe(
       select(AppStore.MessengerSelector.QuerySelector.selectedDepartmentStatus)
     );
@@ -131,6 +144,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (!!this.selectedDepartmentUserInfoListSubscription) {
+      this.selectedDepartmentUserInfoListSubscription.unsubscribe();
+    }
     if (!!this.selectedDepartmentProcessingSubscription) {
       this.selectedDepartmentProcessingSubscription.unsubscribe();
     }
@@ -173,6 +189,23 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** 전체 체크여부 */
+  getCheckedAllUser() {
+    if (
+      this.selectedDepartmentUserInfoList &&
+      this.selectedDepartmentUserInfoList.filter(
+        item =>
+          !(
+            this.selectedUserList.filter(user => user.seq === item.seq).length >
+            0
+          )
+      ).length > 0
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
   /** 리스트 checkable 할 경우 checkbox 의 isChecked 를 관장하며 리스트의 전체선택 여부를 판단한다. */
   getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     if (!!this.selectedUserList && this.selectedUserList.length > 0) {
@@ -184,6 +217,14 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     return false;
   }
 
+  /** 전체선택 이벤트 */
+  onCheckAllUser(value: boolean) {
+    this.checkAllUser.emit({
+      isChecked: value,
+      userInfos: this.selectedDepartmentUserInfoList
+    });
+  }
+
   /** 리스트가 checkable 할 경우 checkbox 의 change 이벤트를 상위 컴포넌트로 전달한다. */
   onCheckUser(params: {
     isChecked: boolean;

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

@@ -91,6 +91,7 @@
               <app-layout-chat-left-sidenav-organization
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
+                (checkAllUser)="onCheckAllUser($event)"
                 (checkUser)="onCheckUser($event)"
               >
               </app-layout-chat-left-sidenav-organization>

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

@@ -330,6 +330,26 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  onCheckAllUser(params: {
+    isChecked: boolean;
+    userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  }) {
+    params.userInfos.forEach(userInfo => {
+      if (params.isChecked) {
+        if (
+          this.selectedUserList.filter(user => user.seq === userInfo.seq)
+            .length === 0
+        ) {
+          this.selectedUserList = [...this.selectedUserList, userInfo];
+        }
+      } else {
+        this.selectedUserList = this.selectedUserList.filter(
+          user => user.seq !== userInfo.seq
+        );
+      }
+    });
+  }
+
   /** 동료그룹>부서원, 조직도>부서원 :: 리스트의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
   onCheckUser(params: {
     isChecked: boolean;

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -21,6 +21,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -63,6 +64,7 @@ import { DIALOGS } from './dialogs';
     MatTabsModule,
     MatToolbarModule,
     MatChipsModule,
+    MatCheckboxModule,
 
     PerfectScrollbarModule,