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

import { exit } from './../../../../store/messenger/room/actions';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { NGXLogger } from 'ngx-logger';
import { Store, select } from '@ngrx/store';
import { Subscription, combineLatest, Observable } from 'rxjs';
import {
  RoomInfo,
  UserInfoShort,
  UserInfo as RoomUserInfo
} from '@ucap-webmessenger/protocol-room';
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as RoomStore from '@app/store/messenger/room';
import { tap } from 'rxjs/operators';
import {
  RoomUserDetailData,
  RoomUserData
} from '@ucap-webmessenger/protocol-sync';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'app-layout-chat-left-sidenav-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
  animations: ucapAnimations
})
export class ChatComponent implements OnInit, OnDestroy {
  @ViewChild('chatContextMenuTrigger', { static: true })
  chatContextMenuTrigger: MatMenuTrigger;
  chatContextMenuPosition = { x: '0px', y: '0px' };

  roomList: RoomInfo[];
  roomUserList: RoomUserDetailData[];
  roomUserShortList: RoomUserData[];
  sessionVerinfo: VersionInfo2Response;

  loginRes: LoginResponse;
  loginResSubscription: Subscription;
  roomSubscription: Subscription;

  constructor(
    private store: Store<any>,
    private logger: NGXLogger,
    private sessionStorageService: SessionStorageService
  ) {
    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
      KEY_VER_INFO
    );
  }

  isSearch = false;
  searchWord = '';

  ngOnInit() {
    this.roomSubscription = combineLatest([
      this.store.pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectAllRoom)
      ),
      this.store.pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectAllRoomUser)
      ),
      this.store.pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectAllRoomUserShort)
      )
    ])
      .pipe(
        tap(([room, roomUser, roomUserShort]) => {
          this.roomList = room;
          this.roomUserList = roomUser;
          this.roomUserShortList = roomUserShort;
        })
      )
      .subscribe();

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

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

  onKeyDownEnter(search: string) {
    if (search.trim().length > 1) {
      this.isSearch = true;
      this.searchWord = search;
    }
  }

  onContextMenuChat(event: MouseEvent, roomInfo: RoomInfo) {
    event.preventDefault();
    event.stopPropagation();

    this.chatContextMenuPosition.x = event.clientX + 'px';
    this.chatContextMenuPosition.y = event.clientY + 'px';
    this.chatContextMenuTrigger.menu.focusFirstItem('mouse');
    this.chatContextMenuTrigger.menuData = { roomInfo };
    this.chatContextMenuTrigger.openMenu();
  }

  onSelectedRoom(roomInfo: RoomInfo) {
    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
  }
  onClickToggleAlarm(roomInfo: RoomInfo) {
    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
  }
  onClickExit(roomInfo: RoomInfo) {
    this.store.dispatch(
      RoomStore.exit({
        roomSeq: roomInfo.roomSeq
      })
    );
  }

  getRoomList() {
    if (this.isSearch && this.searchWord.trim().length > 0) {
      return this.roomList.filter(room => {
        if (room.roomName.indexOf(this.searchWord) >= 0) {
          return true;
        }
        if (
          this.getRoomUserList(room).filter(user =>
            user.seq !== this.loginRes.userSeq
              ? user.name.indexOf(this.searchWord) >= 0
              : false
          ).length > 0
        ) {
          return true;
        }
        return false;
      });
    }
    return this.roomList;
  }

  getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] {
    if (!!this.roomUserList && 0 < this.roomUserList.length) {
      const i = this.roomUserList.findIndex(
        value => roomInfo.roomSeq === value.roomSeq
      );
      if (-1 < i) {
        return this.roomUserList[i].userInfos;
      }
    }

    if (!!this.roomUserShortList && 0 < this.roomUserShortList.length) {
      const i = this.roomUserShortList.findIndex(
        value => roomInfo.roomSeq === value.roomSeq
      );
      if (-1 < i) {
        return this.roomUserShortList[i].userInfos;
      }
    }
  }
}