ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

Browse Source 
# Conflicts:
#	projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
This commit is contained in:
leejh 2019-10-16 17:50:15 +09:00
commit ac196f5053
23 changed files with 495 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
View File

@ -10,33 +10,25 @@
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>phone</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
View File

@ -142,7 +142,7 @@
>
그룹 멤버 변경
</button>
<button mat-menu-item (click)="onClickGroupContextMenu('REMOVE', group)">
<button mat-menu-item (click)="onClickGroupContextMenu('DELETE', group)">
그룹 삭제
</button>
</ng-template>

79
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
View File

@ -31,6 +31,22 @@ import {
import { MatMenuTrigger } from '@angular/material';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import {
DeleteGroupDialogComponent,
DeleteGroupDialogData,
DeleteGroupDialogResult
} from '@app/layouts/messenger/dialogs/delete-group.dialog.component';
import {
EditGroupDialogComponent,
EditGroupDialogData,
EditGroupDialogResult
} from '@app/layouts/messenger/dialogs/edit-group.dialog.component';
import {
EditGroupMemberDialogComponent,
EditGroupMemberDialogData,
EditGroupMemberDialogResult
} from '@app/layouts/messenger/dialogs/edit-group-member.dialog.component';
@Component({
selector: 'app-layout-chat-left-sidenav-group',
@ -44,11 +60,10 @@ export class GroupComponent implements OnInit, OnDestroy {
@ViewChild('profileContextMenuTrigger', { static: true })
profileContextMenuTrigger: MatMenuTrigger;
profileContextMenuPosition = { x: '0px', y: '0px' };
@ViewChild('groupContextMenuTrigger', { static: true })
groupContextMenuTrigger: MatMenuTrigger;
profileContextMenuPosition = { x: '0px', y: '0px' };
groupContextMenuPosition = { x: '0px', y: '0px' };
groupBuddyList$: Observable<
@ -171,8 +186,8 @@ export class GroupComponent implements OnInit, OnDestroy {
}
onSelectBuddy(buddy: UserInfo) {
// this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
this.logger.debug('onSelectBuddy', buddy);
this.store.dispatch(ChatStore.openRoom({ userSeqList: [buddy.seq] }));
}
getStatusBulkInfo(buddy: UserInfo) {
@ -229,7 +244,7 @@ export class GroupComponent implements OnInit, OnDestroy {
this.profileContextMenuTrigger.openMenu();
}
onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
async onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
this.logger.debug(
'onClickGroupContextMenu',
'menuType',
@ -246,10 +261,64 @@ export class GroupComponent implements OnInit, OnDestroy {
case 'SEND_NOTE':
break;
case 'RENAME':
{
const result = await this.dialogService.open<
EditGroupDialogComponent,
EditGroupDialogData,
EditGroupDialogResult
>(EditGroupDialogComponent, {
width: '220px',
data: {
title: 'Logout',
message: 'Logout ?'
}
});
}
break;
case 'EDIT_MEMBER':
{
const result = await this.dialogService.open<
EditGroupMemberDialogComponent,
EditGroupMemberDialogData,
EditGroupMemberDialogResult
>(EditGroupMemberDialogComponent, {
width: '220px',
data: {
title: 'Logout',
message: 'Logout ?'
}
});
}
break;
case 'REMOVE':
case 'DELETE':
{
const result = await this.dialogService.open<
DeleteGroupDialogComponent,
DeleteGroupDialogData,
DeleteGroupDialogResult
>(DeleteGroupDialogComponent, {
width: '220px',
data: {
title: 'Logout',
message: 'Logout ?'
}
});
}
break;
case 'EDIT_MEMBER':
{
const result = await this.dialogService.open<
EditGroupMemberDialogComponent,
EditGroupMemberDialogData,
EditGroupMemberDialogResult
>(EditGroupMemberDialogComponent, {
width: '220px',
data: {
title: 'Logout',
message: 'Logout ?'
}
});
}
break;
default:
break;

20
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
View File

@ -1,15 +1,25 @@
<div class="oraganization-tab" fxLayout="column">
<div
class="oraganization-tab"
fxLayout="column"
*ngIf="departmentInfoList$ | async"
>
<div class="oraganization-tab-tree" fxFlex="50" style="overflow: scroll">
<ucap-organization-tree [oraganizationList]="departmentInfoList$ | async"
(selected)="onSelectedOrganization($event)"></ucap-organization-tree>
<ucap-organization-tree
[oraganizationList]="departmentInfoList$ | async"
(selected)="onSelectedOrganization($event)"
></ucap-organization-tree>
</div>
<div fxFlex="50" style="overflow: scroll">
<div>
(선택된부서명)
</div>
<div>
<ucap-profile-user-list-item *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
[userInfo]="userInfo" [checkable]="true" [sessionVerinfo]="sessionVerinfo">
<ucap-profile-user-list-item
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
>
</ucap-profile-user-list-item>
</div>
<div>

93
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -5,20 +5,37 @@
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<!-- RESPONSIVE CHATS BUTTON-->
<button mat-icon-button aria-label="chats button" fxHide.gt-md class="responsive-chats-button">
<button
mat-icon-button
aria-label="chats button"
fxHide.gt-md
class="responsive-chats-button"
>
<mat-icon>chat</mat-icon>
</button>
<!-- / RESPONSIVE CHATS BUTTON-->
</div>
<div>
<button *ngIf="!!roomInfo" mat-icon-button (click)="onClickReceiveAlarm($event)"
aria-label="Toggle Receive Alarm">
<mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm">notifications_active</mat-icon>
<mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm">notifications_off</mat-icon>
<button
*ngIf="!!roomInfo"
mat-icon-button
(click)="onClickReceiveAlarm($event)"
aria-label="Toggle Receive Alarm"
>
<mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
>notifications_active</mat-icon
>
<mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm"
>notifications_off</mat-icon
>
</button>
<button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
<button
mat-icon-button
[matMenuTriggerFor]="contactMenu"
aria-label="more"
>
<mat-icon>more_vert</mat-icon>
</button>
@ -31,7 +48,10 @@
</div>
</mat-toolbar>
<!-- / CHAT TOOLBAR -->
<mat-progress-bar *ngIf="eventListProcessing$ | async" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar
*ngIf="eventListProcessing$ | async"
mode="indeterminate"
></mat-progress-bar>
<!-- CHAT CONTENT -->
<div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
<!-- Timer Room Info -->
@ -39,9 +59,16 @@
<!-- Timer Room Info -->
<!-- CHAT MESSAGES -->
<ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
[sessionVerInfo]="sessionVerInfo" (massDetail)="onMassDetail($event)" (save)="onSave($event)"
(imageViewer)="onImageViewer($event)">
<ucap-chat-messages
[messages]="eventList$ | async"
[userInfos]="userInfoList$ | async"
[loginRes]="loginRes"
[sessionVerInfo]="sessionVerInfo"
(massDetail)="onMassDetail($event)"
(save)="onSave($event)"
(imageViewer)="onImageViewer($event)"
(contextMenu)="onContextMenuMessage($event)"
>
</ucap-chat-messages>
<!-- CHAT MESSAGES -->
</div>
@ -56,3 +83,49 @@
<!-- / CHAT FOOTER-->
</div>
<!-- / CHAT -->
<div
style="visibility: hidden; position: fixed"
[style.left]="messageContextMenuPosition.x"
[style.top]="messageContextMenuPosition.y"
#messageContextMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="messageContextMenu"
></div>
<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
<ng-template matMenuContent let-message="message" let-loginRes="loginRes">
<ng-container *ngIf="!isRecalledMessage(message.type)">
<button
mat-menu-item
*ngIf="isCopyableMessage(message.type)"
(click)="onClickMessageContextMenu('COPY', message)"
>
대화 복사
</button>
<button
mat-menu-item
(click)="onClickMessageContextMenu('REPLAY', message)"
>
대화 전달
</button>
<button
mat-menu-item
(click)="onClickMessageContextMenu('REPLAY_TO_ME', message)"
>
대화 나에게 전달
</button>
<button
mat-menu-item
(click)="onClickMessageContextMenu('DELETE', message)"
>
대화 삭제
</button>
<button
mat-menu-item
*ngIf="isRecallableMessage(message, loginRes.userSeq)"
(click)="onClickMessageContextMenu('RECALL', message)"
>
대화 회수
</button>
</ng-container>
</ng-template>
</mat-menu>

59
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
View File

@ -10,7 +10,13 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
import { Observable, Subscription } from 'rxjs';
import { Info, EventType } from '@ucap-webmessenger/protocol-event';
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';
@ -24,6 +30,7 @@ import { tap } 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';
@Component({
selector: 'app-layout-messenger-messages',
@ -35,6 +42,10 @@ 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' };
loginRes: LoginResponse;
loginResSubscription: Subscription;
eventList$: Observable<Info[]>;
@ -46,6 +57,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
KEY_VER_INFO
);
isRecalledMessage = isRecalled;
isCopyableMessage = isCopyable;
isRecallableMessage = isRecallable;
constructor(
private store: Store<any>,
private sessionStorageService: SessionStorageService,
@ -143,4 +158,46 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
onSave(value: { fileInfo: FileInfo; type: string }) {
this.logger.debug('fileSave', value);
}
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();
}
onClickMessageContextMenu(menuType: string, message: Info) {
switch (menuType) {
case 'COPY':
{
this.logger.debug('onClickMessageContextMenu', menuType, message);
}
break;
case 'REPLAY':
{
}
break;
case 'REPLAY_TO_ME':
{
}
break;
case 'DELETE':
{
}
break;
case 'RECALL':
{
}
break;
default:
break;
}
}
}

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
View File

@ -1,5 +1,5 @@
<mat-card class="confirm-card">
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
<mat-card-header>
<mat-card-title>새 그룹 추가</mat-card-title>
</mat-card-header>
<mat-card-content> </mat-card-content>

18
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<mat-card class="confirm-card">
<mat-card-header>
<mat-card-title>그룹 삭제</mat-card-title>
</mat-card-header>
<mat-card-content> </mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>

0
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.scss Normal file
View File

24
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditGroupDialogComponent } from './edit-group.dialog.component';
describe('app::layouts::messenger::EditGroupDialogComponent', () => {
let component: EditGroupDialogComponent;
let fixture: ComponentFixture<EditGroupDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditGroupDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditGroupDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

34
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.ts Normal file
View File

@ -0,0 +1,34 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export interface DeleteGroupDialogData {
title: string;
message?: string;
}
export interface DeleteGroupDialogResult {
choice: boolean;
}
@Component({
selector: 'app-layout-messenger-delete-group',
templateUrl: './delete-group.dialog.component.html',
styleUrls: ['./delete-group.dialog.component.scss']
})
export class DeleteGroupDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<
DeleteGroupDialogData,
DeleteGroupDialogResult
>,
@Inject(MAT_DIALOG_DATA) public data: DeleteGroupDialogData
) {}
ngOnInit(): void {}
onClickChoice(choice: boolean): void {
this.dialogRef.close({
choice
});
}
}

18
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<mat-card class="confirm-card">
<mat-card-header>
<mat-card-title>그룹 맴버 수정</mat-card-title>
</mat-card-header>
<mat-card-content> </mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>

0
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.scss Normal file
View File

24
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditGroupMemberDialogComponent } from './edit-group-member.dialog.component';
describe('app::layouts::messenger::EditGroupMemberDialogComponent', () => {
let component: EditGroupMemberDialogComponent;
let fixture: ComponentFixture<EditGroupMemberDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditGroupMemberDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditGroupMemberDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

34
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.ts Normal file
View File

@ -0,0 +1,34 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export interface EditGroupMemberDialogData {
title: string;
message?: string;
}
export interface EditGroupMemberDialogResult {
choice: boolean;
}
@Component({
selector: 'app-layout-messenger-edit-group-member',
templateUrl: './edit-group-member.dialog.component.html',
styleUrls: ['./edit-group-member.dialog.component.scss']
})
export class EditGroupMemberDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<
EditGroupMemberDialogData,
EditGroupMemberDialogResult
>,
@Inject(MAT_DIALOG_DATA) public data: EditGroupMemberDialogData
) {}
ngOnInit(): void {}
onClickChoice(choice: boolean): void {
this.dialogRef.close({
choice
});
}
}

18
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<mat-card class="confirm-card">
<mat-card-header>
<mat-card-title>그룹 이름 수정</mat-card-title>
</mat-card-header>
<mat-card-content> </mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>

0
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.scss Normal file
View File

24
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditGroupDialogComponent } from './edit-group.dialog.component';
describe('app::layouts::messenger::EditGroupDialogComponent', () => {
let component: EditGroupDialogComponent;
let fixture: ComponentFixture<EditGroupDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditGroupDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditGroupDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

31
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export interface EditGroupDialogData {
title: string;
message?: string;
}
export interface EditGroupDialogResult {
choice: boolean;
}
@Component({
selector: 'app-layout-messenger-edit-group',
templateUrl: './edit-group.dialog.component.html',
styleUrls: ['./edit-group.dialog.component.scss']
})
export class EditGroupDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<EditGroupDialogData, EditGroupDialogResult>,
@Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData
) {}
ngOnInit(): void {}
onClickChoice(choice: boolean): void {
this.dialogRef.close({
choice
});
}
}

11
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
View File

@ -1,4 +1,13 @@
import { CreateGroupDialogComponent } from './create-group.dialog.component';
import { CreateChatDialogComponent } from './create-chat.dialog.component';
import { DeleteGroupDialogComponent } from './delete-group.dialog.component';
import { EditGroupDialogComponent } from './edit-group.dialog.component';
import { EditGroupMemberDialogComponent } from './edit-group-member.dialog.component';
export const DIALOGS = [CreateGroupDialogComponent, CreateChatDialogComponent];
export const DIALOGS = [
CreateChatDialogComponent,
CreateGroupDialogComponent,
DeleteGroupDialogComponent,
EditGroupDialogComponent,
EditGroupMemberDialogComponent
];

16
projects/ucap-webmessenger-protocol-event/src/lib/models/info.ts
View File

@ -14,3 +14,19 @@ export interface Info {
// 수신자수
receiverCount: number;
}
export function isCopyable(eventType: EventType): boolean {
return (
EventType.Character === eventType || EventType.Translation === eventType
);
}
export function isRecalled(eventType: EventType): boolean {
return EventType.RecalledMessage === eventType;
}
export function isRecallable(event: Info, userSeq: number): boolean {
return (
event.senderSeq === userSeq && event.type !== EventType.RecalledMessage
);
}

24
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -92,9 +92,7 @@
<ucap-chat-message-box-text
*ngSwitchCase="EventType.Character"
[message]="message"
(contextmenu)="
onContextMenuMessage($event, EventType.Character, message)
"
(contextmenu)="onContextMenuMessage($event, message)"
>
</ucap-chat-message-box-text>
<div *ngSwitchDefault>
@ -120,23 +118,3 @@
</ng-template>
</div>
</div>
<div
style="visibility: hidden; position: fixed"
[style.left]="messageContextMenuPosition.x"
[style.top]="messageContextMenuPosition.y"
[matMenuTriggerFor]="messageContextMenu"
></div>
<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
<ng-template matMenuContent let-eventType="eventType" let-message="message">
<ng-container *ngIf="!isRecalledMessage(eventType)">
<button mat-menu-item *ngIf="isCopyableMessage(eventType)">
대화 복사
</button>
<button mat-menu-item>대화 전달</button>
<button mat-menu-item>대화 나에게 전달</button>
<button mat-menu-item>대화 삭제</button>
<button mat-menu-item *ngIf="isRecallable(message)">대화 회수</button>
</ng-container>
</ng-template>
</mat-menu>

38
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -43,10 +43,11 @@ export class MessagesComponent implements OnInit {
@Output()
save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
@ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
@ViewChild('messageContextMenu', { static: true })
messageContextMenu: MatMenu;
messageContextMenuPosition = { x: '0px', y: '0px' };
@Output()
contextMenu = new EventEmitter<{
event: MouseEvent;
message: Info;
}>();
EventType = EventType;
profileImageRoot: string;
@ -126,23 +127,6 @@ export class MessagesComponent implements OnInit {
return false;
}
isCopyableMessage(eventType: EventType): boolean {
return (
EventType.Character === eventType || EventType.Translation === eventType
);
}
isRecalledMessage(eventType: EventType): boolean {
return EventType.RecalledMessage === eventType;
}
isRecallable(message: Info): boolean {
return (
message.senderSeq === this.loginRes.userSeq &&
message.type !== EventType.RecalledMessage
);
}
/** [Event] MassTalk Detail View */
onMassDetail(value: number) {
this.massDetail.emit(value);
@ -158,15 +142,7 @@ export class MessagesComponent implements OnInit {
this.save.emit(value);
}
onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
event.preventDefault();
this.messageContextMenu.focusFirstItem('mouse');
this.messageContextMenuPosition.x = event.clientX + 'px';
this.messageContextMenuPosition.y = event.clientY + 'px';
const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];
messageContextMenuTrigger.menuData = { eventType, message };
messageContextMenuTrigger.openMenu();
onContextMenuMessage(event: MouseEvent, message: Info) {
this.contextMenu.emit({ event, message });
}
}