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

대화방 참여자 목록 보기 기능 구현.

Browse Source
This commit is contained in:
leejinho 2019-11-12 18:10:38 +09:00
parent 2f684ffdb2
commit 3227747a8d
11 changed files with 336 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,6 +92,9 @@
<button mat-menu-item (click)="onClickContextMenu('OPEN_FILE_LIST')">
파일함
</button>
<button mat-menu-item (click)="onClickContextMenu('OPEN_ROOM_USER')">
대화참여자목록
</button>
<button mat-menu-item (click)="onClickContextMenu('ADD_MEMBER')">
대화상대추가
</button>

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

@ -6,7 +6,7 @@ import {
ElementRef,
AfterViewInit,
Output,
EventEmitter
EventEmitter,
} from '@angular/core';
import {
ucapAnimations,
@ -20,7 +20,7 @@ import {
AlertDialogData,
AlertDialogResult,
FileUploadQueueComponent,
StringUtil
StringUtil,
} from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
@ -33,7 +33,7 @@ import {
isRecallable,
InfoResponse,
EventJson,
FileEventJson
FileEventJson,
} from '@ucap-webmessenger/protocol-event';
import * as AppStore from '@app/store';
@ -47,36 +47,36 @@ import {
EnvironmentsInfo,
KEY_ENVIRONMENTS_INFO,
UserSelectDialogType,
RightDrawer
RightDrawer,
} from '@app/types';
import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
import { tap, take, map, catchError } from 'rxjs/operators';
import {
FileInfo,
FormComponent as UCapUiChatFormComponent
FormComponent as UCapUiChatFormComponent,
} from '@ucap-webmessenger/ui-chat';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import {
MatMenuTrigger,
MatSnackBarRef,
SimpleSnackBar
SimpleSnackBar,
} from '@angular/material';
import {
CommonApiService,
FileUploadItem,
FileTalkSaveRequest,
FileTalkSaveResponse
FileTalkSaveResponse,
} from '@ucap-webmessenger/api-common';
import {
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
CreateChatDialogResult,
} from '../dialogs/chat/create-chat.dialog.component';
import {
FileViewerDialogComponent,
FileViewerDialogData,
FileViewerDialogResult
FileViewerDialogResult,
} from '@app/layouts/common/dialogs/file-viewer.dialog.component';
import { CONST, FileUtil } from '@ucap-webmessenger/core';
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
@ -84,12 +84,12 @@ import { StatusCode } from '@ucap-webmessenger/api';
import {
EditChatRoomDialogComponent,
EditChatRoomDialogResult,
EditChatRoomDialogData
EditChatRoomDialogData,
} from '../dialogs/chat/edit-chat-room.dialog.component';
import {
SelectGroupDialogComponent,
SelectGroupDialogResult,
SelectGroupDialogData
SelectGroupDialogData,
} from '../dialogs/group/select-group.dialog.component';
import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
@ -97,7 +97,7 @@ import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
selector: 'app-layout-messenger-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.scss'],
animations: ucapAnimations
animations: ucapAnimations,
})
export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
@Output()
@ -379,7 +379,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
// duration: 3000,
verticalPosition: 'bottom',
horizontalPosition: 'center',
panelClass: ['chat-snackbar-class']
panelClass: ['chat-snackbar-class'],
});
this.snackBarPreviewEvent.onAction().subscribe(() => {
this.setEventMoreInit();
@ -420,7 +420,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
EventStore.info({
roomSeq: this.roomInfo.roomSeq,
baseSeq: seq,
requestCount: CONST.EVENT_INFO_READ_COUNT
requestCount: CONST.EVENT_INFO_READ_COUNT,
})
);
}
@ -438,8 +438,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
width: '360px',
data: {
title: 'Alert',
message: `대화내용을 입력해주세요.`
}
message: `대화내용을 입력해주세요.`,
},
});
return;
}
@ -453,8 +453,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
roomSeq: this.roomInfo.roomSeq,
eventType: EventType.MassText,
// sentMessage: message.replace(/\n/gi, '\r\n')
sentMessage: message
}
sentMessage: message,
},
})
);
} else {
@ -464,8 +464,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
req: {
roomSeq: this.roomInfo.roomSeq,
eventType: EventType.Character,
sentMessage: message
}
sentMessage: message,
},
})
);
}
@ -479,7 +479,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
onMassDetail(value: number) {
this.store.dispatch(
ChatStore.selectedMassDetail({
massEventSeq: value
massEventSeq: value,
})
);
}
@ -492,7 +492,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
FileViewerDialogResult
>(FileViewerDialogComponent, {
position: {
top: '30px'
top: '30px',
},
maxWidth: '100vw',
maxHeight: '100vh',
@ -505,8 +505,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
downloadUrl: this.sessionVerInfo.downloadUrl,
deviceType: this.environmentsInfo.deviceType,
token: this.loginRes.tokenString,
userSeq: this.loginRes.userSeq
}
userSeq: this.loginRes.userSeq,
},
});
}
@ -532,7 +532,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
const info = {
senderSeq: this.loginRes.userSeq,
roomSeq: this.roomInfo.roomSeq
roomSeq: this.roomInfo.roomSeq,
};
const allObservables: Observable<FileTalkSaveResponse>[] = [];
@ -553,7 +553,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
'rv',
'ts',
'webm',
'wmv'
'wmv',
].indexOf(FileUtil.getExtension(fileUploadItem.file.name))
) {
thumbnail = await FileUtil.thumbnail(fileUploadItem.file);
@ -568,7 +568,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
file: fileUploadItem.file,
fileName: fileUploadItem.file.name,
thumb: thumbnail,
fileUploadItem
fileUploadItem,
};
allObservables.push(
@ -600,8 +600,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
req: {
roomSeq: info.roomSeq,
eventType: EventType.File,
sentMessage: res.returnJson
}
sentMessage: res.returnJson,
},
})
);
}
@ -627,7 +627,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
this.messageContextMenuTrigger.menu.focusFirstItem('mouse');
this.messageContextMenuTrigger.menuData = {
message: params.message,
loginRes: this.loginRes
loginRes: this.loginRes,
};
this.messageContextMenuTrigger.openMenu();
}
@ -647,7 +647,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
this.snackBarService.open('클립보드에 복사되었습니다.', '', {
duration: 3000,
verticalPosition: 'top',
horizontalPosition: 'center'
horizontalPosition: 'center',
});
}
}
@ -659,7 +659,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
userSeq: this.loginRes.userSeq,
deviceType: this.environmentsInfo.deviceType,
token: this.loginRes.tokenString,
eventMassSeq: message.seq
eventMassSeq: message.seq,
})
.pipe(take(1))
.subscribe(res => {
@ -670,7 +670,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
{
duration: 3000,
verticalPosition: 'top',
horizontalPosition: 'center'
horizontalPosition: 'center',
}
);
}
@ -694,8 +694,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
data: {
type: UserSelectDialogType.MessageForward,
title: 'MessageForward',
ignoreRoom: [this.roomInfo]
}
ignoreRoom: [this.roomInfo],
},
});
if (!!result && !!result.choice && result.choice) {
@ -719,10 +719,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
req: {
roomSeq: '-999',
eventType: message.type,
sentMessage: message.sentMessage
sentMessage: message.sentMessage,
},
trgtUserSeqs: userSeqs,
trgtRoomSeq: roomSeq
trgtRoomSeq: roomSeq,
})
);
}
@ -738,9 +738,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
req: {
roomSeq: '-999',
eventType: message.type,
sentMessage: message.sentMessage
sentMessage: message.sentMessage,
},
trgtUserSeqs: [this.loginRes.talkWithMeBotSeq]
trgtUserSeqs: [this.loginRes.talkWithMeBotSeq],
})
);
}
@ -756,15 +756,15 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
width: '220px',
data: {
title: 'Delete',
html: `선택한 메시지를 삭제하시겠습니까?<br/>삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`
}
html: `선택한 메시지를 삭제하시겠습니까?<br/>삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`,
},
});
if (!!result && !!result.choice && result.choice) {
this.store.dispatch(
EventStore.del({
roomSeq: this.roomInfo.roomSeq,
eventSeq: message.seq
eventSeq: message.seq,
})
);
}
@ -780,8 +780,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
width: '220px',
data: {
title: 'ReCall',
html: `해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.`
}
html: `해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.`,
},
});
if (!!result && !!result.choice && result.choice) {
@ -789,7 +789,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
EventStore.cancel({
roomSeq: this.roomInfo.roomSeq,
eventSeq: message.seq,
deviceType: this.environmentsInfo.deviceType
deviceType: this.environmentsInfo.deviceType,
})
);
}
@ -806,7 +806,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
{
this.store.dispatch(
ChatStore.selectedRightDrawer({
req: RightDrawer.AlbumBox
req: RightDrawer.AlbumBox,
})
);
}
@ -815,7 +815,16 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
{
this.store.dispatch(
ChatStore.selectedRightDrawer({
req: RightDrawer.FileBox
req: RightDrawer.FileBox,
})
);
}
break;
case 'OPEN_ROOM_USER':
{
this.store.dispatch(
ChatStore.selectedRightDrawer({
req: RightDrawer.RoomUser,
})
);
}
@ -833,8 +842,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
title: 'Edit Chat Member',
curRoomUser: this.userInfoList.filter(
user => user.seq !== this.loginRes.userSeq
)
}
),
},
});
if (!!result && !!result.choice && result.choice) {
@ -856,8 +865,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
RoomStore.inviteOrOpen({
req: {
divCd: 'Invite',
userSeqs
}
userSeqs,
},
})
);
}
@ -873,8 +882,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
>(SelectGroupDialogComponent, {
width: '600px',
data: {
title: 'Group Select'
}
title: 'Group Select',
},
});
if (!!result && !!result.choice && result.choice) {
@ -891,7 +900,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
this.store.dispatch(
SyncStore.updateGroupMember({
oldGroup,
trgtUserSeq
trgtUserSeq,
})
);
}
@ -908,8 +917,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
width: '600px',
data: {
title: 'Edit Chat Room',
roomInfo: this.roomInfo
}
roomInfo: this.roomInfo,
},
});
if (!!result && !!result.choice && result.choice) {
@ -926,8 +935,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
roomName,
receiveAlarm: roomInfo.receiveAlarm,
syncAll:
roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false
}
roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false,
},
})
);
@ -939,7 +948,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
this.store.dispatch(
RoomStore.updateTimeRoomInterval({
roomSeq: roomInfo.roomSeq,
timerInterval: timeRoomInterval
timerInterval: timeRoomInterval,
})
);
}

6
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
View File

@ -4,4 +4,10 @@
<app-layout-chat-right-drawer-album-box *ngSwitchCase="RightDrawer.AlbumBox">
</app-layout-chat-right-drawer-album-box>
<app-layout-chat-right-drawer-room-user-list
*ngSwitchCase="RightDrawer.RoomUser"
(openProfile)="onClickOpenProfile($event)"
>
</app-layout-chat-right-drawer-room-user-list>
</ng-container>

19
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
View File

@ -1,18 +1,33 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { RightDrawer } from '@app/types';
import { UserInfo } from '@ucap-webmessenger/protocol-room';
import {
UserInfoSS,
UserInfoF,
UserInfoDN,
} from '@ucap-webmessenger/protocol-query';
@Component({
selector: 'app-layout-messenger-right-drawer',
templateUrl: './right-drawer.component.html',
styleUrls: ['./right-drawer.component.scss']
styleUrls: ['./right-drawer.component.scss'],
})
export class RightDrawerComponent implements OnInit {
@Input()
selectedRightDrawer: RightDrawer;
@Output()
openProfile = new EventEmitter<
UserInfo | UserInfoSS | UserInfoF | UserInfoDN
>();
RightDrawer = RightDrawer;
constructor() {}
ngOnInit() {}
onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
this.openProfile.emit(userInfo);
}
}

7
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
View File

@ -1,4 +1,9 @@
import { FileBoxComponent } from './file-box.component';
import { AlbumBoxComponent } from './album-box.component';
import { RoomUserListComponent } from './room-user-list.component';
export const RIGHT_DRAWER_COMPONENTS = [FileBoxComponent, AlbumBoxComponent];
export const RIGHT_DRAWER_COMPONENTS = [
FileBoxComponent,
AlbumBoxComponent,
RoomUserListComponent,
];

25
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html Normal file
View File

@ -0,0 +1,25 @@
<div fxLayout="column" class="list">
<div class="search-list">
<ucap-profile-user-list-item
*ngFor="let userInfo of userInfoList"
[userInfo]="userInfo"
[presence]="getStatusBulkInfo(userInfo) | async"
[sessionVerinfo]="sessionVerinfo"
(openProfile)="onClickOpenProfile($event)"
>
</ucap-profile-user-list-item>
</div>
<div
fxFlex="1 1 50px"
fxLayout="row"
fxLayoutAlign="center center"
class="btn-box"
>
<button mat-flat-button class="mat-primary" (click)="onClickAddMember()">
대화상대추가
</button>
<button mat-flat-button class="mat-primary" (click)="onClickAddGroup()">
그룹멤버로추가
</button>
</div>
</div>

15
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss Normal file
View File

@ -0,0 +1,15 @@
.list {
width: 300px;
height: 100%;
overflow: hidden;
.search-list {
overflow: auto;
}
}
.btn-box {
button {
margin: 5px;
}
}

25
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RoomUserListComponent } from './room-user-list.component';
describe('RoomUserListComponent', () => {
let component: RoomUserListComponent;
let fixture: ComponentFixture<RoomUserListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RoomUserListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RoomUserListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

168
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts Normal file
View File

@ -0,0 +1,168 @@
import {
Component,
OnInit,
OnDestroy,
Output,
EventEmitter,
} from '@angular/core';
import { Subscription } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { tap, map } from 'rxjs/operators';
import * as AppStore from '@app/store';
import * as SyncStore from '@app/store/messenger/sync';
import * as RoomStore from '@app/store/messenger/room';
import { UserInfo } from '@ucap-webmessenger/protocol-room';
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 { DialogService } from '@ucap-webmessenger/ui';
import {
SelectGroupDialogComponent,
SelectGroupDialogResult,
SelectGroupDialogData,
} from '../../dialogs/group/select-group.dialog.component';
import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
import {
CreateChatDialogComponent,
CreateChatDialogResult,
CreateChatDialogData,
} from '../../dialogs/chat/create-chat.dialog.component';
import { UserSelectDialogType } from '@app/types';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
@Component({
selector: 'app-layout-chat-right-drawer-room-user-list',
templateUrl: './room-user-list.component.html',
styleUrls: ['./room-user-list.component.scss'],
})
export class RoomUserListComponent implements OnInit, OnDestroy {
@Output()
openProfile = new EventEmitter<UserInfo>();
userInfoList: UserInfo[];
userInfoListSubscription: Subscription;
loginRes: LoginResponse;
sessionVerinfo: VersionInfo2Response;
constructor(
private store: Store<any>,
private sessionStorageService: SessionStorageService,
private dialogService: DialogService
) {
this.loginRes = this.sessionStorageService.get<LoginResponse>(
KEY_LOGIN_RES_INFO
);
this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
KEY_VER_INFO
);
}
ngOnInit() {
this.userInfoListSubscription = this.store
.pipe(
select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist),
tap(userInfoList => {
this.userInfoList = userInfoList;
})
)
.subscribe();
}
ngOnDestroy(): void {
if (!!this.userInfoListSubscription) {
this.userInfoListSubscription.unsubscribe();
}
}
getStatusBulkInfo(buddy: UserInfo) {
return this.store.pipe(
select(
AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo
),
map(statusBulkInfo =>
!!statusBulkInfo ? statusBulkInfo[buddy.seq] : undefined
)
);
}
onClickOpenProfile(userInfo: UserInfo) {
this.openProfile.emit(userInfo);
}
async onClickAddMember() {
const result = await this.dialogService.open<
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
>(CreateChatDialogComponent, {
width: '600px',
data: {
type: UserSelectDialogType.EditChatMember,
title: 'Edit Chat Member',
curRoomUser: this.userInfoList.filter(
user => user.seq !== this.loginRes.userSeq
),
},
});
if (!!result && !!result.choice && result.choice) {
const userSeqs: number[] = [];
if (!!result.selectedUserList && result.selectedUserList.length > 0) {
result.selectedUserList.map(user => {
userSeqs.push(user.seq);
});
}
if (userSeqs.length > 0) {
// include me
userSeqs.push(this.loginRes.userSeq);
this.store.dispatch(
RoomStore.inviteOrOpen({
req: {
divCd: 'Invite',
userSeqs,
},
})
);
}
}
}
async onClickAddGroup() {
const result = await this.dialogService.open<
SelectGroupDialogComponent,
SelectGroupDialogData,
SelectGroupDialogResult
>(SelectGroupDialogComponent, {
width: '600px',
data: {
title: 'Group Select',
},
});
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.userInfoList
.filter(v => result.group.userSeqs.indexOf(v.seq) < 0)
.forEach(user => {
trgtUserSeq.push(user.seq);
});
this.store.dispatch(
SyncStore.updateGroupMember({
oldGroup,
trgtUserSeq,
})
);
}
}
}
}

1
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -28,6 +28,7 @@
>
<app-layout-messenger-right-drawer
[selectedRightDrawer]="selectedRightDrawer$ | async"
(openProfile)="onClickOpenProfile($event)"
>
</app-layout-messenger-right-drawer>
</mat-drawer>

3
projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
View File

@ -1,4 +1,5 @@
export enum RightDrawer {
RoomUser = 'ROOM_USER',
FileBox = 'FILE_BOX',
AlbumBox = 'ALBUM_BOX'
AlbumBox = 'ALBUM_BOX',
}