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

2019-10-29 17:07:45 +09:00 · 2019-10-29 17:07:45 +09:00 · 566109eadf
commit 566109eadf
parent fb94b5480a
7 changed files with 108 additions and 12 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/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>
--- 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
@ -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 &&
-        params.userInfo
+          .length === 0
      ) {
        this.selectedUserList = [...this.selectedUserList, params.userInfo];
      }
    } else {
      this.selectedUserList = this.selectedUserList.filter(
-        item => item.seq !== params.userInfo.seq
+        user => user.seq !== params.userInfo.seq
      );
    }
  }
--- 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
@ -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="
-            let userInfo of selectedDepartmentUserInfoList$ | async
-          "
+          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
          [userInfo]="userInfo"
          [checkable]="true"
          [sessionVerinfo]="sessionVerinfo"
--- 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
@ -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(
-      select(
-        AppStore.MessengerSelector.QuerySelector.selectedDepartmentUserInfoList
+    this.selectedDepartmentUserInfoListSubscription = this.store
+      .pipe(
+        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;
--- 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
@ -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>
--- 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
@ -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;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/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,