next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

import {
  Component,
  OnInit,
  OnDestroy,
  AfterViewChecked,
  ViewChild,
  ElementRef
} from '@angular/core';
import {
  ucapAnimations,
  SnackBarService,
  ClipboardService,
  DialogService
} from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
import { Observable, Subscription } from 'rxjs';
import {
  Info,
  EventType,
  isRecalled,
  isCopyable,
  isRecallable
} from '@ucap-webmessenger/protocol-event';

import * as AppStore from '@app/store';
import * as EventStore from '@app/store/messenger/event';
import * as ChatStore from '@app/store/messenger/chat';
import * as RoomStore from '@app/store/messenger/room';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import {
  LoginInfo,
  KEY_LOGIN_INFO,
  EnvironmentsInfo,
  KEY_ENVIRONMENTS_INFO
} from '@app/types';
import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room';
import { tap, take } from 'rxjs/operators';
import { FileInfo } from '@ucap-webmessenger/ui-chat';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { MatMenuTrigger } from '@angular/material';
import { CommonApiService } from '@ucap-webmessenger/api-common';

import {
  DeleteMessageDialogComponent,
  DeleteMessageDialogData,
  DeleteMessageDialogResult
} from '@app/layouts/messenger/dialogs/message/delete-message.dialog.component';
import {
  RelayMessageDialogComponent,
  RelayMessageDialogData,
  RelayMessageDialogResult
} from '@app/layouts/messenger/dialogs/message/relay-message.dialog.component';
import {
  RecallMessageDialogComponent,
  RecallMessageDialogData,
  RecallMessageDialogResult
} from '@app/layouts/messenger/dialogs/message/recall-message.dialog.component';

@Component({
  selector: 'app-layout-messenger-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.scss'],
  animations: ucapAnimations
})
export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
  @ViewChild('messageBoxContainer', { static: true })
  private messageBoxContainer: ElementRef;

  @ViewChild('messageContextMenuTrigger', { static: true })
  messageContextMenuTrigger: MatMenuTrigger;
  messageContextMenuPosition = { x: '0px', y: '0px' };

  environmentsInfo: EnvironmentsInfo;

  loginRes: LoginResponse;
  loginResSubscription: Subscription;
  eventList$: Observable<Info[]>;
  roomInfo: RoomInfo;
  roomInfoSubscription: Subscription;
  userInfoList$: Observable<UserInfo[]>;
  eventListProcessing$: Observable<boolean>;
  sessionVerInfo: VersionInfo2Response;

  isRecalledMessage = isRecalled;
  isCopyableMessage = isCopyable;
  isRecallableMessage = isRecallable;

  fileDragOver = false;
  files: File[];

  constructor(
    private store: Store<any>,
    private sessionStorageService: SessionStorageService,
    private commonApiService: CommonApiService,
    private clipboardService: ClipboardService,
    private dialogService: DialogService,
    private snackBarService: SnackBarService,
    private logger: NGXLogger
  ) {
    this.sessionVerInfo = this.sessionStorageService.get<VersionInfo2Response>(
      KEY_VER_INFO
    );

    this.environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
      KEY_ENVIRONMENTS_INFO
    );
  }

  ngOnInit() {
    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);

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

    this.roomInfoSubscription = this.store
      .pipe(
        select(AppStore.MessengerSelector.RoomSelector.roomInfo),
        tap(roomInfo => {
          this.roomInfo = roomInfo;
        })
      )
      .subscribe();

    this.userInfoList$ = this.store.pipe(
      select(AppStore.MessengerSelector.RoomSelector.userInfoList)
    );

    this.eventListProcessing$ = this.store.pipe(
      select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
    );

    this.eventList$ = this.store.pipe(
      select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
    );

    this.scrollToBottomForMessageBoxContainer();
  }

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

  ngAfterViewChecked(): void {
    this.scrollToBottomForMessageBoxContainer();
  }

  selectContact() {}

  onSendMessage(message: string) {
    this.store.dispatch(
      EventStore.send({
        senderSeq: this.loginRes.userSeq,
        req: {
          roomSeq: this.roomInfo.roomSeq,
          eventType: EventType.Character,
          sentMessage: message
        }
      })
    );
  }

  onClickReceiveAlarm() {
    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo }));
  }

  private scrollToBottomForMessageBoxContainer(): void {
    try {
      this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
    } catch (err) {}
  }

  /** MassText Detail View */
  onMassDetail(value: number) {
    this.store.dispatch(
      ChatStore.selectedMassDetail({
        massEventSeq: value
      })
    );
  }

  onImageViewer(value: FileInfo) {
    this.logger.debug('imageViewer', value);
  }

  /** File Save, Save As */
  onSave(value: { fileInfo: FileInfo; type: string }) {
    this.logger.debug('fileSave', value);
  }

  onFileDragEnter() {
    this.logger.debug('onFileDragEnter');
    this.fileDragOver = true;
  }

  onFileDragOver() {
    this.logger.debug('onFileDragOver');
  }

  onFileDragLeave() {
    this.logger.debug('onFileDragLeave');
    this.fileDragOver = false;
  }

  onFileSelected(files: File[]) {
    this.logger.debug('onFileSelected', files);
    if (!this.files) {
      this.files = [];
    }
    this.files.push(...files);

    this.fileDragOver = false;
  }

  onContextMenuMessage(params: { event: MouseEvent; message: Info }) {
    params.event.preventDefault();
    params.event.stopPropagation();

    this.messageContextMenuPosition.x = params.event.clientX + 'px';
    this.messageContextMenuPosition.y = params.event.clientY + 'px';
    this.messageContextMenuTrigger.menu.focusFirstItem('mouse');
    this.messageContextMenuTrigger.menuData = {
      message: params.message,
      loginRes: this.loginRes
    };
    this.messageContextMenuTrigger.openMenu();
  }

  async onClickMessageContextMenu(menuType: string, message: Info) {
    switch (menuType) {
      case 'COPY':
        {
          switch (message.type) {
            case EventType.Character:
              {
                if (
                  this.clipboardService.copyFromContent(message.sentMessage)
                ) {
                  this.snackBarService.open('클립보드에 복사되었습니다.', '', {
                    duration: 3000,
                    verticalPosition: 'top',
                    horizontalPosition: 'center'
                  });
                }
              }
              break;
            case EventType.MassText:
              {
                this.commonApiService
                  .massTalkDownload({
                    userSeq: this.loginRes.userSeq,
                    deviceType: this.environmentsInfo.deviceType,
                    token: this.loginRes.tokenString,
                    eventMassSeq: message.seq
                  })
                  .pipe(take(1))
                  .subscribe(res => {
                    if (this.clipboardService.copyFromContent(res.content)) {
                      this.snackBarService.open(
                        '클립보드에 복사되었습니다.',
                        '',
                        {
                          duration: 3000,
                          verticalPosition: 'top',
                          horizontalPosition: 'center'
                        }
                      );
                    }
                  });
              }
              break;

            default:
              break;
          }
        }
        break;
      case 'REPLAY':
        {
          const result = await this.dialogService.open<
            RelayMessageDialogComponent,
            RelayMessageDialogData,
            RelayMessageDialogResult
          >(RelayMessageDialogComponent, {
            width: '220px',
            data: {
              title: 'Logout',
              message: 'Logout ?'
            }
          });
        }
        break;
      case 'REPLAY_TO_ME':
        {
        }
        break;
      case 'DELETE':
        {
          const result = await this.dialogService.open<
            DeleteMessageDialogComponent,
            DeleteMessageDialogData,
            DeleteMessageDialogResult
          >(DeleteMessageDialogComponent, {
            width: '220px',
            data: {
              title: 'Logout',
              message: 'Logout ?'
            }
          });
        }
        break;
      case 'RECALL':
        {
          const result = await this.dialogService.open<
            RecallMessageDialogComponent,
            RecallMessageDialogData,
            RecallMessageDialogResult
          >(RecallMessageDialogComponent, {
            width: '220px',
            data: {
              title: 'Logout',
              message: 'Logout ?'
            }
          });
        }
        break;
      default:
        break;
    }
  }
}