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

merged

Browse Source
This commit is contained in:
병준 박 2019-11-05 13:49:14 +09:00
commit fd4561f965
14 changed files with 287 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,16 +6,22 @@
</button>
</div>-->
<!-- <div class="logo">로고</div> -->
<mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
<mat-tab>
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)"
class="global-menu"
>
<mat-tab [aria-label]="MainMenu.Group">
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<app-layout-chat-left-sidenav-group
class="left-group-side"
(newGroupAndMember)="onClickNewGroupAndMember($event)"
></app-layout-chat-left-sidenav-group>
</mat-tab>
<mat-tab>
<mat-tab [aria-label]="MainMenu.Chat">
<ng-template mat-tab-label>
<mat-icon
[matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
@ -28,7 +34,7 @@
</ng-template>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</mat-tab>
<mat-tab>
<mat-tab [aria-label]="MainMenu.Organization">
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
@ -39,7 +45,7 @@
class="organization-side"
></app-layout-chat-left-sidenav-organization>
</mat-tab>
<mat-tab>
<mat-tab [aria-label]="MainMenu.Call">
<ng-template mat-tab-label>
<mat-icon>phone</mat-icon>
</ng-template>
@ -47,6 +53,7 @@
</mat-tab>
</mat-tab-group>
<ucap-float-action-button
*ngIf="fabButtonShow"
[fabButtons]="fabButtons"
(buttonClick)="onClickFab($event)"
></ucap-float-action-button>

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

@ -12,13 +12,22 @@ import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as SyncStore from '@app/store/messenger/sync';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { BuiltinType } from '@angular/compiler';
import { MatTabChangeEvent, MatTabGroup } from '@angular/material';
export enum MainMenu {
Group = 'GROUP',
Chat = 'CAHT',
Organization = 'ORGANIZATION',
Call = 'CALL',
Conversation = 'CONVERSATION'
}
@Component({
selector: 'app-layout-messenger-left-side',
@ -33,8 +42,11 @@ export class LeftSideComponent implements OnInit {
selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
/** FAB */
fabButtonShow = true;
fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
MainMenu = MainMenu;
constructor(
private store: Store<any>,
private dialogService: DialogService,
@ -45,18 +57,8 @@ export class LeftSideComponent implements OnInit {
this.badgeChatUnReadCount$ = this.store.pipe(
select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
);
this.fabButtons = [
{
icon: 'timer',
tooltip: 'New Timer Chat',
divisionType: 'NEW_TIMER_CHAT'
},
{
icon: 'chat',
tooltip: 'New Chat',
divisionType: 'NEW_CHAT'
}
];
this.setFabInitial(MainMenu.Group);
}
async onClickNewChat(type: string = 'NORMAL') {
@ -88,6 +90,89 @@ export class LeftSideComponent implements OnInit {
}
}
async onClickNewGroupAndMember() {
const result = await this.dialogService.open<
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
>(CreateChatDialogComponent, {
width: '600px',
data: {
type: UserSelectDialogType.NewGroup,
title: 'New Group'
}
});
if (!!result && !!result.choice && result.choice) {
if (
!!result.selectedUserList &&
result.selectedUserList.length > 0 &&
result.groupName.trim().length > 0
) {
const userSeqs: number[] = [];
result.selectedUserList.map(user => userSeqs.push(user.seq));
this.store.dispatch(
SyncStore.createGroupAndBuddy({
groupName: result.groupName,
trgtUserSeq: userSeqs
})
);
}
}
}
onSelectedTabChange(event: MatTabChangeEvent) {
this.setFabInitial(event.tab.ariaLabel);
}
setFabInitial(type: string) {
switch (type) {
case MainMenu.Group:
{
this.fabButtonShow = true;
this.fabButtons = [
{
icon: 'add',
tooltip: 'New Group Add',
divisionType: 'GROUP_NEW_ADD'
}
];
}
break;
case MainMenu.Chat:
{
this.fabButtonShow = true;
this.fabButtons = [
{
icon: 'timer',
tooltip: 'New Timer Chat',
divisionType: 'CHAT_NEW_TIMER_ADD'
},
{
icon: 'chat',
tooltip: 'New Chat',
divisionType: 'CAHT_NEW_ADD'
}
];
}
break;
// case MainMenu.Organization:
// {
// }
// break;
// case MainMenu.Call:
// {
// }
// break;
default: {
this.fabButtonShow = false;
}
}
}
onCheckAllUser(params: {
isChecked: boolean;
userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
@ -137,12 +222,18 @@ export class LeftSideComponent implements OnInit {
};
switch (btn.divisionType) {
case 'NEW_CHAT':
case 'GROUP_NEW_ADD':
{
this.onClickNewGroupAndMember();
}
break;
case 'CAHT_NEW_ADD':
{
this.onClickNewChat('NORMAL');
}
break;
case 'NEW_TIMER_CHAT':
case 'CHAT_NEW_TIMER_ADD':
{
this.onClickNewChat('TIMER');
}

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

@ -1,7 +1,12 @@
import { StatusProtocolService } from './../../../../../../../ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service';
import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
import { MatMenuTrigger } from '@angular/material';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import {
Component,
OnInit,
ViewChild,
OnDestroy,
EventEmitter,
Output
} from '@angular/core';
import { Observable, combineLatest, Subscription, of } from 'rxjs';
import { map, tap, catchError, exhaustMap } from 'rxjs/operators';
@ -9,7 +14,6 @@ import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as QueryStore from '@app/store/messenger/query';
import * as SyncStore from '@app/store/messenger/sync';
import * as StatusStore from '@app/store/messenger/status';
@ -17,12 +21,13 @@ import { NGXLogger } from 'ngx-logger';
import { Company } from '@ucap-webmessenger/api-external';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { LoginInfo, KEY_LOGIN_INFO, UserSelectDialogType } from '@app/types';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
import {
DeptSearchType,
UserInfoSS,
@ -59,6 +64,9 @@ import {
animations: ucapAnimations
})
export class GroupComponent implements OnInit, OnDestroy {
@Output()
newGroupAndMember = new EventEmitter();
@ViewChild('groupExpansionPanel', { static: true })
groupExpansionPanel: GroupExpansionPanelComponent;
@ -164,35 +172,7 @@ export class GroupComponent implements OnInit, OnDestroy {
switch (menuType) {
case 'GROUP_NEW':
{
const result = await this.dialogService.open<
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
>(CreateChatDialogComponent, {
width: '600px',
data: {
type: UserSelectDialogType.NewGroup,
title: 'New Group'
}
});
if (!!result && !!result.choice && result.choice) {
if (
!!result.selectedUserList &&
result.selectedUserList.length > 0 &&
result.groupName.trim().length > 0
) {
const userSeqs: number[] = [];
result.selectedUserList.map(user => userSeqs.push(user.seq));
this.store.dispatch(
SyncStore.createGroupAndBuddy({
groupName: result.groupName,
trgtUserSeq: userSeqs
})
);
}
}
this.newGroupAndMember.emit();
}
break;
case 'GROUP_EXPAND_MORE':
@ -361,7 +341,6 @@ export class GroupComponent implements OnInit, OnDestroy {
EditGroupDialogData,
EditGroupDialogResult
>(EditGroupDialogComponent, {
data: {
title: 'Group Name Edit',
group

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

@ -195,7 +195,8 @@ export class OrganizationComponent implements OnInit, OnDestroy {
/** 전체 체크여부 */
getCheckedAllUser() {
if (
this.selectedDepartmentUserInfoList &&
!this.selectedDepartmentUserInfoList ||
this.selectedDepartmentUserInfoList.length === 0 ||
this.selectedDepartmentUserInfoList.filter(
item =>
!(
@ -249,7 +250,6 @@ export class OrganizationComponent implements OnInit, OnDestroy {
SelectGroupDialogResult
>(SelectGroupDialogComponent, {
width: '600px',
height: '500px',
data: {
title: 'Group Select'
}

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

@ -625,9 +625,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
switch (menuType) {
case 'ADD_MEMBER':
{
console.log(this.roomInfo);
console.log(this.userInfoList);
const result = await this.dialogService.open<
CreateChatDialogComponent,
CreateChatDialogData,
@ -636,39 +633,36 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
width: '600px',
data: {
type: UserSelectDialogType.EditChatMember,
title: 'Edit Chat Member'
// ,
// curRoomUser: this.userInfoList
title: 'Edit Chat Member',
curRoomUser: this.userInfoList.filter(
user => user.seq !== this.loginRes.userSeq
)
}
});
if (!!result && !!result.choice && result.choice) {
const userSeqs: number[] = [];
let roomSeq = '';
if (
!!result.selectedUserList &&
result.selectedUserList.length > 0
) {
result.selectedUserList.map(user => userSeqs.push(user.seq));
result.selectedUserList.map(user => {
userSeqs.push(user.seq);
});
}
if (!!result.selectedRoom) {
roomSeq = result.selectedRoom.roomSeq;
}
if (userSeqs.length > 0) {
// include me
userSeqs.push(this.loginRes.userSeq);
if (userSeqs.length > 0 || roomSeq.trim().length > 0) {
// this.store.dispatch(
// EventStore.forward({
// senderSeq: this.loginRes.userSeq,
// req: {
// roomSeq: '-999',
// eventType: message.type,
// sentMessage: message.sentMessage
// },
// trgtUserSeqs: userSeqs,
// trgtRoomSeq: roomSeq
// })
// );
this.store.dispatch(
RoomStore.inviteOrOpen({
req: {
divCd: 'Invite',
userSeqs
}
})
);
}
}
}

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

@ -73,7 +73,12 @@
<div *ngIf="searchProcessing">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div class="result-num">검색결과 <span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
<div class="result-num">
검색결과
<span class="text-accent-color"
>({{ searchUserInfos.length }}명)</span
>
</div>
<ucap-profile-user-list-item
*ngFor="let userInfo of searchUserInfos"
[userInfo]="userInfo"
@ -141,15 +146,17 @@
<mat-chip-list aria-label="User selection">
<mat-chip
*ngFor="let userInfo of selectedUserList"
color="primary"
selected
[selected]="getChipsRemoveYn(userInfo)"
(removed)="onClickDeleteUser(userInfo)"
>
{{ userInfo.name }}
<mat-icon matChipRemove>clear</mat-icon>
<mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
>clear</mat-icon
>
</mat-chip>
</mat-chip-list>
</div>
<span>{{ selectedUserList.length }}명</span>
</div>
</mat-card-content>
<mat-card-actions class="button-farm flex-row">

40
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
View File

@ -57,12 +57,22 @@ export interface CreateChatDialogData {
/** CASE :: EventForward */
ignoreRoom?: RoomInfo[];
/** CASE :: EditCharMember */
curRoomUser?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
curRoomUser?: (
| UserInfo
| UserInfoSS
| UserInfoF
| UserInfoDN
| RoomUserInfo)[];
}
export interface CreateChatDialogResult {
choice: boolean;
selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
selectedUserList?: (
| UserInfo
| UserInfoSS
| UserInfoF
| UserInfoDN
| RoomUserInfo)[];
selectedRoom?: RoomInfo;
groupName?: string;
oldGroup?: GroupDetailData;
@ -117,7 +127,12 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
roomSubscription: Subscription;
// 수집 데이터
selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
selectedUserList: (
| UserInfo
| UserInfoSS
| UserInfoF
| UserInfoDN
| RoomUserInfo)[] = [];
isShowSelectedUserList = true;
selectedRoom: RoomInfo;
@ -208,6 +223,10 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
this.inputForm = this.formBuilder.group({
groupName: ['', [Validators.required]]
});
if (this.data.type === UserSelectDialogType.EditChatMember) {
this.selectedUserList = this.data.curRoomUser;
}
}
ngOnDestroy(): void {
@ -239,6 +258,21 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
}
}
getChipsRemoveYn(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
if (
this.data.type === UserSelectDialogType.EditChatMember &&
!!this.data.curRoomUser &&
this.data.curRoomUser.length > 0
) {
return !(
this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
0
);
} else {
return true;
}
}
onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
if (tabChangeEvent.index === 2) {
this.selectedUserList = [];

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

@ -4,9 +4,12 @@
</div>
<mat-drawer-container class="contents" autosize>
<div class="messages">
<app-layout-messenger-intro
<!-- <app-layout-messenger-intro
(click)="drawer.toggle()"
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro> -->
<app-layout-messenger-intro
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro>
<app-layout-messenger-messages
*ngIf="!!(this.selectedChat$ | async)"
@ -17,7 +20,7 @@
</mat-drawer>
</mat-drawer-container>
<div class="right-side">
<!-- <div class="right-side">
<app-layout-messenger-right-side></app-layout-messenger-right-side>
</div>
</div> -->
</div>

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

@ -8,6 +8,7 @@
width: 380px;
height: 100%;
flex: 0 0 auto;
position: relative;
}
.contents {
flex: 1 1 auto;

17
projects/ucap-webmessenger-app/src/app/store/messenger/room/actions.ts
View File

@ -15,7 +15,9 @@ import {
ExitRequest,
ExitResponse,
Open3Request,
Open3Response
Open3Response,
InviteRequest,
InviteResponse
} from '@ucap-webmessenger/protocol-room';
import { ReadNotification } from '@ucap-webmessenger/protocol-event';
@ -115,6 +117,19 @@ export const openTimerFailure = createAction(
props<{ error: any }>()
);
export const inviteOrOpen = createAction(
'[Messenger::Room] Invite or Open',
props<{ req: OpenRequest }>()
);
export const inviteSuccess = createAction(
'[Messenger::Room] Invite Success',
props<InviteResponse>()
);
export const inviteFailure = createAction(
'[Messenger::Room] Invite Failure',
props<{ error: any }>()
);
export const exit = createAction(
'[Messenger::Room] Exit',
props<ExitRequest>()

62
projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts
View File

@ -30,7 +30,9 @@ import {
UpdateResponse,
OpenResponse,
ExitResponse,
Open3Response
Open3Response,
RoomType,
InviteResponse
} from '@ucap-webmessenger/protocol-room';
import * as ChatStore from '@app/store/messenger/chat';
@ -55,7 +57,10 @@ import {
exitFailure,
openTimer,
openTimerSuccess,
openTimerFailure
openTimerFailure,
inviteOrOpen,
inviteSuccess,
inviteFailure
} from './actions';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@ -204,6 +209,59 @@ export class Effects {
)
);
inviteOrOpen$ = createEffect(() =>
this.actions$.pipe(
ofType(inviteOrOpen),
withLatestFrom(
this.store.pipe(
select((state: any) => state.messenger.room.roomInfo as RoomInfo)
)
),
exhaustMap(([action, roomInfo]) => {
if (roomInfo.roomType === RoomType.Single) {
// Re Open
return this.roomProtocolService.open(action.req).pipe(
map((res: OpenResponse) => {
return openSuccess({ res });
}),
catchError(error => of(openFailure({ error })))
);
} else if (roomInfo.roomType === RoomType.Multi) {
// Invite
return this.roomProtocolService
.invite({
roomSeq: roomInfo.roomSeq,
inviteUserSeqs: action.req.userSeqs
})
.pipe(
map((res: InviteResponse) => {
return inviteSuccess(res);
}),
catchError(error => of(inviteFailure({ error })))
);
} else {
return of(inviteFailure({ error: 'room type is error!!' }));
}
})
)
);
inviteSuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(inviteSuccess),
map(action => {
return ChatStore.selectedRoom({ roomSeq: action.roomSeq });
// const loginInfo = this.sessionStorageService.get<LoginInfo>(
// KEY_LOGIN_INFO
// );
// return info({
// roomSeq: action.roomSeq,
// isDetail: true,
// localeCode: loginInfo.localeCode
// });
})
)
);
exit$ = createEffect(() =>
this.actions$.pipe(
ofType(exit),

2
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
View File

@ -1,4 +1,4 @@
<div class="list-item">
<div class="list-item" matRipple>
<dl class="item-default">
<dt>
<img

3
projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts
View File

@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { ListItemComponent } from './components/list-item.component';
import { MatBadgeModule, MatCheckboxModule } from '@angular/material';
import { MatBadgeModule, MatCheckboxModule, MatRippleModule } from '@angular/material';
import { UCapUiModule } from '@ucap-webmessenger/ui';
@ -25,6 +25,7 @@ const SERVICES = [];
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatRippleModule,
MatBadgeModule,
MatCheckboxModule,

2
projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss
View File

@ -1,5 +1,5 @@
.fab-container {
position: fixed;
position: absolute;
bottom: 15px;
right: 15px;
z-index: 100;