This commit is contained in:
병준 박 2019-10-21 18:26:26 +09:00
commit 8fdfb528f5
10 changed files with 160 additions and 124 deletions

View File

@ -3,10 +3,14 @@
<div class="current-head"> <div class="current-head">
<h3>그룹</h3> <h3>그룹</h3>
<div class="btn-box"> <div class="btn-box">
<button mat-icon-button > <button mat-icon-button>
<mat-icon>person_add</mat-icon> <mat-icon>person_add</mat-icon>
</button> </button>
<button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="group menu"> <button
mat-icon-button
[matMenuTriggerFor]="groupMenu"
aria-label="group menu"
>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -84,7 +88,7 @@
mat-menu-item mat-menu-item
(click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)" (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
> >
즐겨찾기 등록 즐겨찾기 {{ userInfo.isFavorit ? '해제' : '등록' }}
</button> </button>
<button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)"> <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
대화하기 대화하기

View File

@ -1,16 +1,33 @@
import { UserSelectDialogType } from './../../../../types/userselect.dialog.type'; import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
import { import { MatMenuTrigger } from '@angular/material';
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
} from './../../dialogs/chat/create-chat.dialog.component';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Observable, combineLatest, Subscription } from 'rxjs'; import { Observable, combineLatest, Subscription } from 'rxjs';
import { map, tap } from 'rxjs/operators'; import { map, tap } from 'rxjs/operators';
import { Store, select } from '@ngrx/store'; 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 { 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 { 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 {
DeptSearchType,
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { import {
ucapAnimations, ucapAnimations,
DialogService, DialogService,
@ -18,48 +35,16 @@ import {
ConfirmDialogComponent, ConfirmDialogComponent,
ConfirmDialogResult ConfirmDialogResult
} from '@ucap-webmessenger/ui'; } from '@ucap-webmessenger/ui';
import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
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 { NGXLogger } from 'ngx-logger';
import { Company } from '@ucap-webmessenger/api-external';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
import { import {
CreateGroupDialogComponent, CreateChatDialogComponent,
CreateGroupDialogData, CreateChatDialogData,
CreateGroupDialogResult CreateChatDialogResult
} from '@app/layouts/messenger/dialogs/group/create-group.dialog.component'; } from './../../dialogs/chat/create-chat.dialog.component';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import {
DeptSearchType,
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
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/group/delete-group.dialog.component';
import { import {
EditGroupDialogComponent, EditGroupDialogComponent,
EditGroupDialogData, EditGroupDialogData,
EditGroupDialogResult EditGroupDialogResult
} from '@app/layouts/messenger/dialogs/group/edit-group.dialog.component'; } from '@app/layouts/messenger/dialogs/group/edit-group.dialog.component';
import {
EditGroupMemberDialogComponent,
EditGroupMemberDialogData,
EditGroupMemberDialogResult
} from '@app/layouts/messenger/dialogs/group/edit-group-member.dialog.component';
@Component({ @Component({
selector: 'app-layout-chat-left-sidenav-group', selector: 'app-layout-chat-left-sidenav-group',
@ -251,10 +236,7 @@ export class GroupComponent implements OnInit, OnDestroy {
); );
} }
onClickProfileContextMenu( onClickProfileContextMenu(menuType: string, userInfo: UserInfo | UserInfoF) {
menuType: string,
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
) {
this.logger.debug( this.logger.debug(
'onClickProfileContextMenu', 'onClickProfileContextMenu',
'menuType', 'menuType',
@ -262,6 +244,16 @@ export class GroupComponent implements OnInit, OnDestroy {
'userInfo', 'userInfo',
userInfo userInfo
); );
switch (menuType) {
case 'REGISTER_FAVORITE':
this.store.dispatch(
SyncStore.updateBuddy({
seq: userInfo.seq,
isFavorit: !userInfo.isFavorit
})
);
break;
}
} }
onContextMenuProfile( onContextMenuProfile(

View File

@ -31,19 +31,21 @@ import {
refreshRoom, refreshRoom,
refreshRoomFailure, refreshRoomFailure,
refreshRoomSuccess, refreshRoomSuccess,
createGroup,
createGroupSuccess,
createGroupFailure,
createGroupAndBuddy, createGroupAndBuddy,
addBuddy, addBuddy,
addBuddyFailure, addBuddyFailure,
delBuddy, delBuddy,
delBuddyFailure, delBuddyFailure,
delBuddySuccess,
updateBuddy,
updateBuddySuccess,
updateBuddyFailure,
createGroup,
createGroupSuccess,
createGroupFailure,
updateGroup, updateGroup,
updateGroupFailure, updateGroupFailure,
updateGroupMember, updateGroupMember,
updateBuddy,
delBuddySuccess,
delGroup, delGroup,
delGroupFailure, delGroupFailure,
delGroupSuccess delGroupSuccess
@ -92,7 +94,8 @@ import {
import { import {
BuddyProtocolService, BuddyProtocolService,
AddResponse as BuddyAddResponse, AddResponse as BuddyAddResponse,
DelResponse as BuddyDelResponse DelResponse as BuddyDelResponse,
UpdateResponse as BuddyUpdateResponse
} from '@ucap-webmessenger/protocol-buddy'; } from '@ucap-webmessenger/protocol-buddy';
import * as ChatStore from '@app/store/messenger/chat'; import * as ChatStore from '@app/store/messenger/chat';
@ -682,6 +685,20 @@ export class Effects {
) )
); );
updateBuddy$ = createEffect(() =>
this.actions$.pipe(
ofType(updateBuddy),
exhaustMap(req =>
this.buddyProtocolService.update(req).pipe(
map((res: BuddyUpdateResponse) => {
return updateBuddySuccess(res);
}),
catchError(error => of(updateBuddyFailure({ error })))
)
)
)
);
updateGroup$ = createEffect(() => updateGroup$ = createEffect(() =>
this.actions$.pipe( this.actions$.pipe(
ofType(updateGroup), ofType(updateGroup),

View File

@ -17,17 +17,20 @@ import {
createGroupSuccess, createGroupSuccess,
addBuddySuccess, addBuddySuccess,
delBuddySuccess, delBuddySuccess,
delGroupSuccess delGroupSuccess,
updateBuddySuccess
} from './actions'; } from './actions';
import { import {
RoomUserDetailData, RoomUserDetailData,
RoomUserData, RoomUserData,
GroupDetailData GroupDetailData,
UserInfo
} from '@ucap-webmessenger/protocol-sync'; } from '@ucap-webmessenger/protocol-sync';
import * as AuthenticationStore from '@app/store/account/authentication'; import * as AuthenticationStore from '@app/store/account/authentication';
import * as RoomStore from '@app/store/messenger/room'; import * as RoomStore from '@app/store/messenger/room';
import { RoomInfo } from '@ucap-webmessenger/protocol-room'; import { RoomInfo } from '@ucap-webmessenger/protocol-room';
import { UpdateResponse } from '@ucap-webmessenger/protocol-buddy';
export const reducer = createReducer( export const reducer = createReducer(
initialState, initialState,
@ -222,5 +225,17 @@ export const reducer = createReducer(
...state.buddy2 ...state.buddy2
}) })
}; };
}),
on(updateBuddySuccess, (state, action) => {
const userInfo: UserInfo = {
...state.buddy2.entities[action.seq],
isFavorit: action.isFavorit
};
return {
...state,
buddy2: adapterBuddy2.upsertOne(userInfo, { ...state.buddy2 })
};
}) })
); );

View File

@ -1,6 +1,5 @@
<div class="date-split"> <div class="date-split">
<span class="line"></span> <span class="line"></span>
<!-- {{ message.sendDate | date: 'short' }} --> <span class="date">{{ dateInfo }}</span>
<span class="date">{{ dateInfo }}2019.10.3</span>
<span class="line"></span> <span class="line"></span>
</div> </div>

View File

@ -18,7 +18,7 @@ export class DateSplitterComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.dateInfo = this.datePipe.transform( this.dateInfo = this.datePipe.transform(
this.message.sendDate, this.message.sendDate,
'yyyy-MM-dd EEE' 'yyyy.MM.dd EEE'
); );
} }
} }

View File

@ -1,3 +1,3 @@
<p> <div>
{{ contents }} {{ contents }}
</p> </div>

View File

@ -1,12 +1,11 @@
<div class="bubble-main"> <div class="bubble-main">
<span> <span class="content">
{{ content }} {{ content }}
</span> </span>
<span> <span>
{{ message.sendDate | date: 'short' }} {{ message.sendDate | date: 'short' }}
</span> </span>
</div> </div>
{{detailButteonShow}}
<div *ngIf="detailButteonShow" class="btn-box"> <div *ngIf="detailButteonShow" class="btn-box">
<button mat-button (click)="onClickDetailView()">Detail View</button> <button mat-button (click)="onClickDetailView()">Detail View</button>
</div> </div>

View File

@ -1,6 +1,12 @@
@charset 'utf-8';
@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
.bubble-main { .bubble-main {
padding: 14px; padding: 14px;
text-align: left; text-align: left;
.content {
max-width: 250px;
@include ellipsis(1);
}
} }
.btn-box { .btn-box {

View File

@ -1,8 +1,5 @@
<div class="chat-messages"> <div class="chat-messages">
<!-- MESSAGE --> <!-- MESSAGE -->
<ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
</ucap-chat-message-box-date-splitter>
<div <div
*ngFor="let message of messages; let i = index" *ngFor="let message of messages; let i = index"
class="message-row" class="message-row"
@ -11,6 +8,13 @@
contact: message.senderSeq !== loginRes.userSeq contact: message.senderSeq !== loginRes.userSeq
}" }"
> >
<div>
<ucap-chat-message-box-date-splitter
*ngIf="getDateSplitter(i)"
[message]="message"
>
</ucap-chat-message-box-date-splitter>
</div>
<div <div
*ngIf="getIsInformation(message); then information; else contents" *ngIf="getIsInformation(message); then information; else contents"
@ -46,7 +50,7 @@
</ng-template> </ng-template>
<ng-template #contents> <ng-template #contents>
<div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img"> <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
<!-- <img <!-- <img
class="avatar" class="avatar"
style="width: 50px; height: 50px;" style="width: 50px; height: 50px;"
[src]=" [src]="
@ -59,71 +63,71 @@
| async | async
" "
/> --> /> -->
<ucap-ui-imaage <ucap-ui-imaage
[style]="'width: 50px; height: 50px;'" [style]="'width: 50px; height: 50px;'"
[imageClass]="'avatar'" [imageClass]="'avatar'"
[base]="profileImageRoot" [base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)" [path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'" [default]="'assets/images/img_nophoto_50.png'"
></ucap-ui-imaage> ></ucap-ui-imaage>
</div> </div>
<div class="message-main"> <div class="message-main">
<div class="chat-name"> <div class="chat-name">
{{ getUserName(message.senderSeq) }} {{ getUserName(message.senderSeq) }}
</div> </div>
<div class="bubble"> <div class="bubble">
<ng-container <ng-container
class="bubble" class="bubble"
*ngIf="message.type !== EventType.NotificationForTimerRoom" *ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type" [ngSwitch]="message.type"
>
<ucap-chat-message-box-mass
*ngSwitchCase="EventType.MassText"
[message]="message"
(massDetail)="onMassDetail($event)"
> >
</ucap-chat-message-box-mass> <ucap-chat-message-box-mass
<ucap-chat-message-box-file *ngSwitchCase="EventType.MassText"
*ngSwitchCase="EventType.File" [message]="message"
[message]="message" (massDetail)="onMassDetail($event)"
(save)="onSave($event)" >
(imageViewer)="onImageViewer($event)" </ucap-chat-message-box-mass>
> <ucap-chat-message-box-file
</ucap-chat-message-box-file> *ngSwitchCase="EventType.File"
<ucap-chat-message-box-sticker [message]="message"
*ngSwitchCase="EventType.Sticker" (save)="onSave($event)"
[message]="message" (imageViewer)="onImageViewer($event)"
> >
</ucap-chat-message-box-sticker> </ucap-chat-message-box-file>
<ucap-chat-message-box-recall <ucap-chat-message-box-sticker
*ngSwitchCase="EventType.RecalledMessage" *ngSwitchCase="EventType.Sticker"
></ucap-chat-message-box-recall> [message]="message"
<ucap-chat-message-box-text >
*ngSwitchCase="EventType.Character" </ucap-chat-message-box-sticker>
[message]="message" <ucap-chat-message-box-recall
(contextmenu)="onContextMenuMessage($event, message)" *ngSwitchCase="EventType.RecalledMessage"
> ></ucap-chat-message-box-recall>
</ucap-chat-message-box-text> <ucap-chat-message-box-text
<div *ngSwitchDefault> *ngSwitchCase="EventType.Character"
mass-translation [message]="message"
<ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation> (contextmenu)="onContextMenuMessage($event, message)"
notice >
<ucap-chat-message-box-notice></ucap-chat-message-box-notice> </ucap-chat-message-box-text>
<ucap-chat-message-box-schedule></ucap-chat-message-box-schedule> <div *ngSwitchDefault>
translation mass-translation
<ucap-chat-message-box-translation></ucap-chat-message-box-translation> <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
video-conference notice
<ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference> <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
<ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
translation
<ucap-chat-message-box-translation></ucap-chat-message-box-translation>
video-conference
<ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
<div class="message"> <div class="message">
{{ message.sentMessage }} {{ message.sentMessage }}
</div>
</div> </div>
</div> </ng-container>
</ng-container> </div>
</div> </div>
</div>
<div class="time secondary-text"> <div class="time secondary-text">
{{ message.sendDate | date: 'a hh:mm' }} {{ message.sendDate | date: 'a hh:mm' }}