next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts

import {
  Component,
  OnInit,
  Inject,
  OnDestroy,
  ChangeDetectorRef
} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { KEY_VER_INFO, MainMenu, KEY_AUTH_INFO } from '@app/types';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';

import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import * as QueryStore from '@app/store/messenger/query';
import * as ChatStore from '@app/store/messenger/chat';
import * as SettingsStore from '@app/store/messenger/settings';
import * as SyncStore from '@app/store/messenger/sync';

import { UserInfoSS, AuthResponse } from '@ucap-webmessenger/protocol-query';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { map, take, tap } from 'rxjs/operators';
import { Subscription, Observable, BehaviorSubject } from 'rxjs';
import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
import { NGXLogger } from 'ngx-logger';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { environment } from '../../../../../environments/environment';
import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { DaesangProtocolService } from '@ucap-webmessenger/daesang';
import { DialogService } from '@ucap-webmessenger/ui';
import {
  ProfileDialogComponent,
  ProfileDialogData,
  ProfileDialogResult
} from '../profile/profile.dialog.component';
import {
  SelectGroupDialogComponent,
  SelectGroupDialogData,
  SelectGroupDialogResult
} from '../group/select-group.dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
import { ConferenceService } from '@ucap-webmessenger/api-prompt';

export interface IntegratedSearchDialogData {
  keyword: string;
}

export interface IntegratedSearchDialogResult {
  clear: boolean;
}

@Component({
  selector: 'app-integrated-search.dialog',
  templateUrl: './integrated-search.dialog.component.html',
  styleUrls: ['./integrated-search.dialog.component.scss']
})
export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
  loginRes: LoginResponse;
  loginResSubscription: Subscription;
  sessionVerinfo: VersionInfo2Response;
  environmentsInfo: EnvironmentsInfo;
  authInfo: AuthResponse;

  searchDepartmentUserInfoListSubscription: Subscription;
  searchingProcessing$: Observable<boolean>;

  departmentUserInfoList: UserInfoSS[] = [];
  originDepartmentUserInfoList: UserInfoSS[] = [];

  selectedUserList: UserInfoSS[] = []; // selected user in departmentUserList detail

  profileImageRoot: string;
  presenceSubscription: Subscription;
  presenceSubject = new BehaviorSubject<StatusBulkInfo[]>(undefined);

  currentSearchWord: string;

  constructor(
    public dialogRef: MatDialogRef<
      IntegratedSearchDialogData,
      IntegratedSearchDialogResult
    >,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    @Inject(MAT_DIALOG_DATA) public data: IntegratedSearchDialogData,
    private sessionStorageService: SessionStorageService,
    private daesangProtocolService: DaesangProtocolService,
    private dialogService: DialogService,
    private translateService: TranslateService,
    private conferenceService: ConferenceService,

    private store: Store<any>,
    private changeDetectorRef: ChangeDetectorRef,
    private logger: NGXLogger
  ) {
    this.environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
      KEY_ENVIRONMENTS_INFO
    );

    this.authInfo = this.sessionStorageService.get<AuthResponse>(KEY_AUTH_INFO);

    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
      KEY_VER_INFO
    );
  }

  ngOnInit() {
    this.profileImageRoot = this.sessionVerinfo.profileRoot;

    this.loginResSubscription = this.store
      .pipe(
        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
        tap(loginRes => {
          this.loginRes = loginRes;
        })
      )
      .subscribe();

    this.searchDepartmentUserInfoListSubscription = this.store
      .pipe(
        select(
          AppStore.MessengerSelector.QuerySelector
            .integrateSearchDepartmentUserInfoList
        )
      )
      .subscribe(list => {
        this.departmentUserInfoList = list;
        this.originDepartmentUserInfoList = list;
      });

    this.searchingProcessing$ = this.store.pipe(
      select(
        AppStore.MessengerSelector.QuerySelector
          .integrateSearchDepartmentProcessing
      )
    );

    this.presenceSubscription = this.store
      .pipe(
        select(
          AppStore.MessengerSelector.StatusSelector.selectAllStatusBulkInfo
        )
      )
      .subscribe(presence => {
        this.presenceSubject.next(presence);
      });

    this.onSearch(this.data.keyword);
  }

  ngOnDestroy(): void {
    if (!!this.loginResSubscription) {
      this.loginResSubscription.unsubscribe();
    }
    if (!!this.searchDepartmentUserInfoListSubscription) {
      this.searchDepartmentUserInfoListSubscription.unsubscribe();
    }
    if (!!this.presenceSubscription) {
      this.presenceSubscription.unsubscribe();
    }
  }

  onSearch(searchWord: string) {
    if (this.currentSearchWord !== searchWord) {
      this.currentSearchWord = searchWord;
    }

    if (searchWord.trim().length > 0) {
      this.store.dispatch(
        QueryStore.integrateSearchDeptUser({
          companyCode: this.loginRes.companyCode,
          search: searchWord.trim()
        })
      );
    } else {
      // clear list.
      this.store.dispatch(QueryStore.integrateClearSearchDeptUser({}));
    }
  }

  /** Selected User Handling */
  onToggleAllUser(params: { isChecked: boolean; userInfos: UserInfoSS[] }) {
    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
        );
      }
    });
  }
  onToggleUser(userInfo: UserInfoSS) {
    if (userInfo.seq === this.loginRes.userSeq) {
      return;
    }

    if (
      this.selectedUserList.filter(user => user.seq === userInfo.seq).length ===
      0
    ) {
      this.selectedUserList = [...this.selectedUserList, userInfo];
    } else {
      this.selectedUserList = this.selectedUserList.filter(
        item => item.seq !== userInfo.seq
      );
    }
    this.changeDetectorRef.detectChanges();
  }

  /** Handling chipset for selectedUserList */
  onClickDeleteUser(userInfo: UserInfoSS) {
    this.selectedUserList = this.selectedUserList.filter(
      item => item.seq !== userInfo.seq
    );
    this.changeDetectorRef.detectChanges();
  }

  /** Handling Button */
  async onClickAddGroup() {
    this.logger.debug('onClickAddGroup', this.selectedUserList);

    const result = await this.dialogService.open<
      SelectGroupDialogComponent,
      SelectGroupDialogData,
      SelectGroupDialogResult
    >(SelectGroupDialogComponent, {
      width: '600px',
      data: {
        title: this.translateService.instant('group.selectTargetGroup')
      }
    });

    if (!!result && !!result.choice && result.choice) {
      if (!!result.group) {
        const oldGroup: GroupDetailData = result.group;
        const trgtUserSeq: number[] = [];
        result.group.userSeqs.map(seq => trgtUserSeq.push(seq));
        this.selectedUserList
          .filter(v => result.group.userSeqs.indexOf(v.seq) < 0)
          .forEach(user => {
            trgtUserSeq.push(user.seq);
          });

        this.store.dispatch(
          SyncStore.updateGroupMember({
            oldGroup,
            trgtUserSeq
          })
        );
      }
    }
  }
  onClickChatOpen() {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
      // Open Room.
      const seq: number[] = [];
      this.selectedUserList.map(user => seq.push(user.seq));
      this.store.dispatch(ChatStore.openRoom({ userSeqList: seq }));

      // GNB Change to Chat
      this.store.dispatch(
        SettingsStore.selectedGnbMenuIndex({
          menuIndex: MainMenu.Chat
        })
      );
    }
  }
  onClickConference() {
    const targetUserSeqs = this.selectedUserList.map(userInfo => userInfo.seq);
    if (!!targetUserSeqs && targetUserSeqs.length > 0) {
      this.conferenceService.conferenceCreate({
        userSeq: this.loginRes.userSeq,
        deviceType: this.environmentsInfo.deviceType,
        tokenKey: this.loginRes.tokenString,
        targetUserSeqs
      });
    }
  }
  onClickOpenProfile(userSeq: number) {
    if (!userSeq || userSeq < 0) {
      return;
    }

    this.daesangProtocolService
      .dataUserDaesang({
        divCd: 'OPENPROF',
        seq: userSeq,
        senderCompanyCode: this.loginRes.userInfo.companyCode,
        senderEmployeeType: this.loginRes.userInfo.employeeType
      })
      .pipe(
        take(1),
        map(async res => {
          if (!!res && !!res.userInfo) {
            const result = await this.dialogService.open<
              ProfileDialogComponent,
              ProfileDialogData,
              ProfileDialogResult
            >(ProfileDialogComponent, {
              data: {
                userInfo: res.userInfo
              }
            });

            if (!!result) {
              if (!!result.closeEvent && result.closeEvent === 'CHAT') {
                this.onCancel();
              }
            }
          }
        })
      )
      .subscribe();
  }

  onClickHide(): void {
    this.dialogRef.addPanelClass('hideDialog');
  }
  onCancel(): void {
    this.dialogRef.close({ clear: true });
  }
}