앨범함 이미지 썸네일 처리 로직 수정.

파일함 나에게 전달, 전달, 삭제 기능 구현.
This commit is contained in:
leejinho 2019-12-09 13:42:40 +09:00
parent 6a3ca4da7b
commit e927163f95
7 changed files with 133 additions and 44 deletions

View File

@ -87,10 +87,7 @@ import {
import { import {
CONST, CONST,
FileUtil, FileUtil,
StickerFilesInfo, StickerFilesInfo
StickerUtil,
StickerInfo,
StickerMap
} from '@ucap-webmessenger/core'; } from '@ucap-webmessenger/core';
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar'; import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
import { StatusCode } from '@ucap-webmessenger/api'; import { StatusCode } from '@ucap-webmessenger/api';

View File

@ -99,25 +99,21 @@
> >
<span class="mdi mdi-spin mdi-loading mdi-48px"></span> <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
</div> </div>
<img <div
#thumbImg
[src]="getThumbnailUrl(fileInfo)"
[matTooltip]="fileInfo.info.name"
(error)="onErrorThumbnail(thumbImg, fileInfo)"
/>
<!-- <div
*ngIf=" *ngIf="
!!fileInfo.eventInfo && !!fileInfo.info &&
!!fileInfo.eventInfo.sentMessageJson && !!fileInfo.info.sentMessageJson &&
!!fileInfo.eventInfo.sentMessageJson.thumbUrl; !!fileInfo.info.sentMessageJson.thumbUrl;
then thumb; then thumb;
else icon else icon
" "
></div> ></div>
<ng-template #thumb> <ng-template #thumb>
<img <img
[src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" #thumbImg
[src]="fileInfo.info.sentMessageJson.thumbUrl"
[matTooltip]="fileInfo.info.name" [matTooltip]="fileInfo.info.name"
(error)="onErrorThumbnail(thumbImg, fileInfo)"
/> />
</ng-template> </ng-template>
<ng-template #icon> <ng-template #icon>
@ -130,7 +126,7 @@
> >
<div class="ico"></div> <div class="ico"></div>
</div> </div>
</ng-template> --> </ng-template>
</dt> </dt>
<dd> <dd>
<span class="checkbox"> <span class="checkbox">

View File

@ -28,7 +28,6 @@ import { _MODULE_CONFIG } from 'projects/ucap-webmessenger-api-common/src/lib/co
export interface FileInfoTotal { export interface FileInfoTotal {
info: FileInfo; info: FileInfo;
checkInfo: FileDownloadInfo[]; checkInfo: FileDownloadInfo[];
eventInfo?: Info<FileEventJson>;
fileDownloadItem: FileDownloadItem; fileDownloadItem: FileDownloadItem;
} }
@ -89,14 +88,11 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
select( select(
AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
) )
),
this.store.pipe(
select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
) )
]) ])
.pipe( .pipe(
tap(() => (this.fileInfoTotal = [])), tap(() => (this.fileInfoTotal = [])),
tap(([roomInfo, fileInfoList, fileInfoCheckList, eventList]) => { tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
this.fileInfoList = fileInfoList.filter(fileInfo => { this.fileInfoList = fileInfoList.filter(fileInfo => {
if ( if (
fileInfo.roomSeq === roomInfo.roomSeq && fileInfo.roomSeq === roomInfo.roomSeq &&
@ -110,17 +106,11 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
}); });
this.fileInfoList.map(fileInfo => { this.fileInfoList.map(fileInfo => {
const events = eventList.filter(
event => event.seq === fileInfo.eventSeq
);
this.fileInfoTotal.push({ this.fileInfoTotal.push({
info: fileInfo, info: fileInfo,
checkInfo: fileInfoCheckList.filter( checkInfo: fileInfoCheckList.filter(
checkInfo => checkInfo.seq === fileInfo.seq checkInfo => checkInfo.seq === fileInfo.seq
), ),
eventInfo:
events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
fileDownloadItem: new FileDownloadItem() fileDownloadItem: new FileDownloadItem()
}); });
}); });
@ -153,21 +143,6 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
); );
} }
getThumbnailUrl(fileInfo: FileInfoTotal): string {
if (
!!fileInfo.eventInfo &&
!!fileInfo.eventInfo.sentMessageJson &&
!!fileInfo.eventInfo.sentMessageJson.thumbUrl
) {
return fileInfo.eventInfo.sentMessageJson.thumbUrl;
} else {
return `${this.thumbBaseUrl}${fileInfo.info.url.replace(
'/AttFile/',
'/WebFile/'
)}.thumb.jpg`;
}
}
onErrorThumbnail(el: HTMLElement, fileInfo: FileInfoTotal): void { onErrorThumbnail(el: HTMLElement, fileInfo: FileInfoTotal): void {
const iconEl = document.createElement('div'); const iconEl = document.createElement('div');
iconEl.setAttribute( iconEl.setAttribute(

View File

@ -103,6 +103,7 @@
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="butt" stroke-linecap="butt"
stroke-linejoin="round" stroke-linejoin="round"
(click)="onClickForwardMe(selectedFile)"
> >
<path <path
d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"
@ -122,6 +123,7 @@
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="butt" stroke-linecap="butt"
stroke-linejoin="round" stroke-linejoin="round"
(click)="onClickForward(selectedFile)"
> >
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<path <path
@ -141,6 +143,7 @@
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="butt" stroke-linecap="butt"
stroke-linejoin="round" stroke-linejoin="round"
(click)="onClickDelete(selectedFile)"
> >
<path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" /> <path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
<path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /> <path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" />

View File

@ -9,6 +9,7 @@ import { Subscription, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store'; import * as AppStore from '@app/store';
import * as EventStore from '@app/store/messenger/event';
import { tap, map, take, finalize } from 'rxjs/operators'; import { tap, map, take, finalize } from 'rxjs/operators';
import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core'; import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@ -17,8 +18,22 @@ import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native'; import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { NGXLogger } from 'ngx-logger'; import { NGXLogger } from 'ngx-logger';
import { FileDownloadItem } from '@ucap-webmessenger/api'; import { FileDownloadItem } from '@ucap-webmessenger/api';
import { SnackBarService } from '@ucap-webmessenger/ui'; import {
SnackBarService,
DialogService,
ConfirmDialogComponent,
ConfirmDialogResult,
ConfirmDialogData
} from '@ucap-webmessenger/ui';
import { CommonApiService } from '@ucap-webmessenger/api-common'; import { CommonApiService } from '@ucap-webmessenger/api-common';
import { EventType } from '@ucap-webmessenger/protocol-event';
import {
CreateChatDialogComponent,
CreateChatDialogResult,
CreateChatDialogData
} from '../../dialogs/chat/create-chat.dialog.component';
import { UserSelectDialogType } from '@app/types';
import { RoomInfo } from '@ucap-webmessenger/protocol-room';
export interface FileInfoTotal { export interface FileInfoTotal {
info: FileInfo; info: FileInfo;
@ -38,6 +53,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
fileInfoTotal: FileInfoTotal[]; fileInfoTotal: FileInfoTotal[];
fileInfoList: FileInfo[]; fileInfoList: FileInfo[];
fileInfoListSubscription: Subscription; fileInfoListSubscription: Subscription;
roomInfo: RoomInfo;
selectedFile: FileInfoTotal; selectedFile: FileInfoTotal;
selectedFileList: FileInfoTotal[] = []; selectedFileList: FileInfoTotal[] = [];
@ -55,6 +71,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
private commonApiService: CommonApiService, private commonApiService: CommonApiService,
private snackBarService: SnackBarService, private snackBarService: SnackBarService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService, @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private dialogService: DialogService,
private logger: NGXLogger private logger: NGXLogger
) { ) {
this.loginRes = this.sessionStorageService.get<LoginResponse>( this.loginRes = this.sessionStorageService.get<LoginResponse>(
@ -77,6 +94,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
.pipe( .pipe(
tap(() => (this.fileInfoTotal = [])), tap(() => (this.fileInfoTotal = [])),
tap(([roomInfo, fileInfoList, fileInfoCheckList]) => { tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
this.roomInfo = roomInfo;
this.fileInfoList = fileInfoList.filter(fileInfo => { this.fileInfoList = fileInfoList.filter(fileInfo => {
if ( if (
fileInfo.roomSeq === roomInfo.roomSeq && fileInfo.roomSeq === roomInfo.roomSeq &&
@ -294,4 +313,88 @@ export class FileBoxComponent implements OnInit, OnDestroy {
this.logger.error(reason); this.logger.error(reason);
}); });
} }
onClickForwardMe(fileInfo: FileInfoTotal) {
this.store.dispatch(
EventStore.forward({
senderSeq: this.loginRes.userSeq,
req: {
roomSeq: '-999',
eventType: EventType.File,
sentMessage: fileInfo.info.sentMessage
},
trgtUserSeqs: [this.loginRes.talkWithMeBotSeq]
})
);
}
async onClickForward(fileInfo: FileInfoTotal) {
const result = await this.dialogService.open<
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
>(CreateChatDialogComponent, {
width: '600px',
data: {
type: UserSelectDialogType.MessageForward,
title: 'MessageForward',
ignoreRoom: [this.roomInfo]
}
});
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));
}
if (!!result.selectedRoom) {
roomSeq = result.selectedRoom.roomSeq;
}
if (userSeqs.length > 0 || roomSeq.trim().length > 0) {
this.store.dispatch(
EventStore.forward({
senderSeq: this.loginRes.userSeq,
req: {
roomSeq: '-999',
eventType: EventType.File,
sentMessage: fileInfo.info.sentMessage
},
trgtUserSeqs: userSeqs,
trgtRoomSeq: roomSeq
})
);
}
}
}
async onClickDelete(fileInfo: FileInfoTotal) {
const result = await this.dialogService.open<
ConfirmDialogComponent,
ConfirmDialogData,
ConfirmDialogResult
>(ConfirmDialogComponent, {
width: '400px',
data: {
title: 'Delete',
html: `선택한 파일(메시지)를 삭제하시겠습니까?<br/>삭제된 파일(메시지)는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`
}
});
if (!!result && !!result.choice && result.choice) {
this.store.dispatch(
EventStore.del({
roomSeq: this.roomInfo.roomSeq,
eventSeq: fileInfo.info.eventSeq
})
);
this.fileInfoTotal = this.fileInfoTotal.filter(
fInfo => fInfo.info.seq !== fileInfo.info.seq
);
this.onSelectedIndexChange(this.currentTabIndex);
}
}
} }

View File

@ -1,4 +1,5 @@
import { FileType } from '../types/file.type'; import { FileType } from '../types/file.type';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
export interface FileInfo { export interface FileInfo {
// 대화방SEQ // 대화방SEQ
@ -23,4 +24,8 @@ export interface FileInfo {
receivedUserCount: number; receivedUserCount: number;
// 수신자수 // 수신자수
receiverCount: number; receiverCount: number;
// 발신내용
sentMessage: string;
// 발신내용 For Json
sentMessageJson?: FileEventJson;
} }

View File

@ -13,6 +13,11 @@ import {
import { FileType } from '../types/file.type'; import { FileType } from '../types/file.type';
import { FileInfo } from '../models/file-info'; import { FileInfo } from '../models/file-info';
import { FileDownloadInfo } from '../models/file-download-info'; import { FileDownloadInfo } from '../models/file-download-info';
import {
decodeEventJson,
EventType,
FileEventJson
} from '@ucap-webmessenger/protocol-event';
export interface InfoRequest extends ProtocolRequest { export interface InfoRequest extends ProtocolRequest {
// 대화방SEQ(s) // 대화방SEQ(s)
@ -65,7 +70,12 @@ export const decodeInfoData: ProtocolDecoder<InfoData> = (
size: info[7], size: info[7],
sendDate: info[8], sendDate: info[8],
receivedUserCount: Number(info[9]), receivedUserCount: Number(info[9]),
receiverCount: Number(info[10]) receiverCount: Number(info[10]),
sentMessage: info[11],
sentMessageJson: decodeEventJson(
EventType.File,
info[11]
) as FileEventJson
}); });
}); });