build:web-storage
api all
pi
protocol

result.selectGroupList.forEach((g) => {
  targetGroup = g;
  targetUserSeqs = [];

  g.userSeqs.map((seq) => {
    targetUserSeqs.push(seq);

    
    result.selelctUserList.filter(info => {
      info.seq === seq
    })
  });

  console.log(targetUserSeqs);
});

group.userSeqs.forEach(seq => {
  selelctUserList
})

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Input,
  Output,
  EventEmitter
} from '@angular/core';

import { Subject, of } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { takeUntil, take, map, catchError } from 'rxjs/operators';
import {
  LoginSelector,
  AuthorizationSelector
} from '@ucap/ng-store-authentication';
import { LoginResponse } from '@ucap/protocol-authentication';
import { QueryProtocolService } from '@ucap/ng-protocol-query';
import {
  UserInfoSS,
  AuthResponse,
  DeptSearchType,
  UserInfoF,
  UserInfoDN
} from '@ucap/protocol-query';
import { GroupSelector } from '@ucap/ng-store-group';
import { GroupDetailData, UserInfo } from '@ucap/protocol-sync';
import { PresenceActions } from '@ucap/ng-store-organization';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
import { MatDialog } from '@angular/material/dialog';
import {
  AlertDialogComponent,
  AlertDialogData,
  AlertDialogResult
} from '@ucap/ng-ui';
import { MatCheckbox } from '@angular/material/checkbox';

export type UserInfoTypes =
  | UserInfo
  | UserInfoSS
  | UserInfoF
  | UserInfoDN
  | RoomUserInfo;

@Component({
  selector: 'app-sections-select-group',
  templateUrl: './select-group.section.component.html',
  styleUrls: ['./select-group.section.component.scss'],

  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectGroupSectionComponent implements OnInit, OnDestroy {
  @Input()
  title: string;

  @Input()
  isMemberMove: boolean;

  @Input()
  curGroup: GroupDetailData;

  @Output()
  changeUserList: EventEmitter<UserInfoTypes[]> = new EventEmitter();

  @Output()
  changeGroupList: EventEmitter<GroupDetailData[]> = new EventEmitter();

  @Output()
  changeGroupName: EventEmitter<string> = new EventEmitter();

  private ngOnDestroySubject = new Subject<boolean>();

  constructor(
    private store: Store<any>,
    private queryProtocolService: QueryProtocolService,
    private changeDetectorRef: ChangeDetectorRef,
    private formBuilder: FormBuilder,
    public dialog: MatDialog
  ) {}

  loginRes: LoginResponse;
  isSearch = false;
  searchWord: string;
  searchUserInfos: UserInfoSS[] = [];
  groupList: GroupDetailData[];
  selectedUserList: UserInfoTypes[] = [];
  selectedGroupList: GroupDetailData[] = [];
  inputForm: FormGroup;
  isChecked = false;
  groupName: string;

  ngOnInit(): void {
    this.store
      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
      .subscribe((loginRes) => {
        this.loginRes = loginRes;
      });

    this.store
      .pipe(takeUntil(this.ngOnDestroySubject), select(GroupSelector.groups))
      .subscribe((groups) => {
        this.groupList = groups;
      });

    this.inputForm = this.formBuilder.group({
      groupName: [
        this.groupName,
        [
          // Validators.required
          // StringUtil.includes(, CharactorType.Special),
          // this.checkBanWords(),
          // this.checkSameName()
        ]
      ]
    });
  }

  ngOnDestroy(): void {
    if (!!this.ngOnDestroySubject) {
      this.ngOnDestroySubject.complete();
    }
  }

  onKeyupGroupName() {
    this.inputForm.get('groupName').markAsTouched();
    this.changeGroupName.emit(this.inputForm.get('groupName').value);
  }

  onCheckForGroup(checbox: MatCheckbox, group: GroupDetailData) {
    if (
      this.isMemberMove &&
      !!this.selectedGroupList &&
      this.selectedGroupList.length > 0
    ) {
      this.dialog.open<
        AlertDialogComponent,
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
        data: {
          title: '멤버이동',
          html: '멤버이동은 그룹 여러개를 선택할 수 없습니다.'
        }
      });

      checbox.checked = false;
      return;
    }
    if (
      this.selectedGroupList.filter((g) => g.seq === group.seq).length === 0
    ) {
      this.selectedGroupList = [...this.selectedGroupList, group];
    } else {
      this.selectedGroupList = this.selectedGroupList.filter(
        (g) => g.seq !== group.seq
      );
    }

    this.changeGroupList.emit(this.selectedGroupList);
  }

  onCheckForUser(params: { isChecked: boolean; userInfo: UserInfoTypes }) {
    if (
      this.selectedUserList.filter((user) => user.seq === params.userInfo.seq)
        .length === 0
    ) {
      this.selectedUserList = [...this.selectedUserList, params.userInfo];
    } else {
      this.selectedUserList = this.selectedUserList.filter(
        (item) => item.seq !== params.userInfo.seq
      );
    }

    this.changeUserList.emit(this.selectedUserList);
  }

  onChanged(data: { companyCode: string; searchWord: string }) {
    this.isSearch = true;
    this.searchWord = data.searchWord;

    const searchUserInfos: UserInfoSS[] = [];

    this.queryProtocolService
      .deptUser({
        divCd: 'GRP',
        companyCode: data.companyCode,
        searchRange: DeptSearchType.All,
        search: data.searchWord,
        senderCompanyCode: this.loginRes.userInfo.companyCode,
        senderEmployeeType: this.loginRes.userInfo.employeeType
      })
      .pipe(
        map((resObj) => {
          const userInfos = resObj.userInfos;

          searchUserInfos.push(...userInfos);
          // 검색 결과 처리.
          this.searchUserInfos = searchUserInfos.sort((a, b) =>
            a.name < b.name ? -1 : a.name > b.name ? 1 : 0
          );
          // this.searchProcessing = false;

          // 검색 결과에 따른 프레즌스 조회.

          const userSeqList: string[] = [];
          this.searchUserInfos.map((user) => userSeqList.push(user.seq));
          this.changeDetectorRef.markForCheck();

          if (userSeqList.length > 0) {
            this.store.dispatch(
              PresenceActions.bulkInfo({
                divCd: 'groupSrch',
                userSeqs: userSeqList
              })
            );
          }
        }),
        catchError((error) => {
          // this.searchProcessing = false;
          return of(error);
        })
      )
      .subscribe();
  }

  onCanceled() {
    this.isSearch = false;
  }

  getCheckedUser(userInfo: UserInfoTypes) {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
      return (
        this.selectedUserList.filter((item) => item.seq === userInfo.seq)
          .length > 0
      );
    }
    return false;
  }
  checkVisible(group: GroupDetailData): boolean {
    if (!!this.curGroup && this.curGroup.seq === group.seq) {
      return false;
    }
    return true;
  }
}