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-21 15:35:06 +09:00
parent c59ef5eb49
commit d81141b3b5
6 changed files with 204 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
<mat-tab [aria-label]="MainMenu.Group"> <mat-tab [aria-label]="MainMenu.Group">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!--<mat-icon>group</mat-icon>--> <!--<mat-icon>group</mat-icon>-->
<div class="icon-item"> <div class="icon-item" matTooltip="Group" matTooltipPosition="after">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -43,6 +43,8 @@
matBadgeDescription="확인하지 않은 메시지가 있습니다." matBadgeDescription="확인하지 않은 메시지가 있습니다."
matBadgeColor="accent" matBadgeColor="accent"
matBadgePosition="above after" matBadgePosition="above after"
matTooltip="Chat"
matTooltipPosition="after"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -65,7 +67,11 @@
<mat-tab [aria-label]="MainMenu.Organization"> <mat-tab [aria-label]="MainMenu.Organization">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!--<mat-icon>device_hub</mat-icon>--> <!--<mat-icon>device_hub</mat-icon>-->
<div class="icon-item"> <div
class="icon-item"
matTooltip="Organization"
matTooltipPosition="after"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -90,7 +96,7 @@
<mat-tab [aria-label]="MainMenu.Call"> <mat-tab [aria-label]="MainMenu.Call">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!--<mat-icon>phone</mat-icon>--> <!--<mat-icon>phone</mat-icon>-->
<div class="icon-item"> <div class="icon-item" matTooltip="Call" matTooltipPosition="after">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"

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

@ -81,56 +81,58 @@
</ng-container> </ng-container>
</div> </div>
<div class="search-list"> <div class="search-list">
<div <perfect-scrollbar>
*ngFor="let fileInfo of filteredList" <div
class="img-item" *ngFor="let fileInfo of filteredList"
matTooltip="fileInfo.info.name" class="img-item"
(click)="onClickImage($event, fileInfo)" matTooltip="fileInfo.info.name"
> (click)="onClickImage($event, fileInfo)"
<dl> >
<dt> <dl>
<div <dt>
*ngIf="
!!fileInfo.eventInfo &&
!!fileInfo.eventInfo.sentMessageJson &&
!!fileInfo.eventInfo.sentMessageJson.thumbUrl;
then thumb;
else icon
"
></div>
<ng-template #thumb>
<img [src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" />
</ng-template>
<ng-template #icon>
<div <div
[ngClass]="[ *ngIf="
'mime-icon', !!fileInfo.eventInfo &&
'light', !!fileInfo.eventInfo.sentMessageJson &&
'ico-' + getExtention(fileInfo.info.name) !!fileInfo.eventInfo.sentMessageJson.thumbUrl;
]" then thumb;
> else icon
<div class="ico"></div> "
</div> ></div>
</ng-template> <ng-template #thumb>
</dt> <img [src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" />
<dd> </ng-template>
<span class="checkbox"> <ng-template #icon>
<mat-checkbox <div
#checkbox [ngClass]="[
[checked]="getCheckItem(fileInfo)" 'mime-icon',
(change)="onCheckItem(checkbox.checked, fileInfo)" 'light',
(click)="$event.stopPropagation()" 'ico-' + getExtention(fileInfo.info.name)
> ]"
</mat-checkbox> >
</span> <div class="ico"></div>
<span class="btn-download"> </div>
<button mat-button (click)="onClickDownload(fileInfo)"> </ng-template>
<mat-icon>vertical_align_bottom</mat-icon> </dt>
</button> <dd>
</span> <span class="checkbox">
</dd> <mat-checkbox
</dl> #checkbox
</div> [checked]="getCheckItem(fileInfo)"
(change)="onCheckItem(checkbox.checked, fileInfo)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</span>
<span class="btn-download">
<button mat-button (click)="onClickDownload(fileInfo)">
<mat-icon>vertical_align_bottom</mat-icon>
</button>
</span>
</dd>
</dl>
</div>
</perfect-scrollbar>
</div> </div>
<div <div
fxFlex="1 1 50px" fxFlex="1 1 50px"

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

@ -6,13 +6,25 @@
</mat-tab-group> </mat-tab-group>
</div> </div>
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest"> <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
<ng-container *ngIf="!selectedFile" > <ng-container *ngIf="!selectedFile">
<div class="empty-msg"> <div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
<path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" /> width="36"
<path d="M13 3v6h6" /></svg> height="36"
<span>Select File.</span> viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
<path
d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z"
/>
<path d="M13 3v6h6" />
</svg>
<span>Select File.</span>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="selectedFile"> <ng-container *ngIf="selectedFile">
@ -27,7 +39,7 @@
<div class="ico"></div> <div class="ico"></div>
</div> </div>
<ul> <ul>
<li class="name"> {{ selectedFile.info.name }}</li> <li class="name">{{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li> <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li> <li>
date : date :
@ -36,34 +48,77 @@
</ul> </ul>
</div> </div>
<div class="select-file-option"> <div class="select-file-option">
<!--툴팁 부탁해요 --> <span matTooltip="다운로드" class="text-accent-darkest">
<span matTooltip="다운로드" class="text-accent-darkest"> <svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> width="20"
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg> height="20"
</span> viewBox="0 0 24 24"
<span matTooltip="나에게전달" class="text-accent-darkest"> fill="none"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> stroke-width="1.5"
<path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" /> stroke-linecap="butt"
<circle cx="12" cy="10" r="3" /> stroke-linejoin="round"
<circle cx="12" cy="12" r="10" /></svg> >
</span> <path
<span matTooltip="파일전달" class="text-accent-darkest"> d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" />
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> </svg>
<g fill="none" fill-rule="evenodd"> </span>
<path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" /> <span matTooltip="나에게전달" class="text-accent-darkest">
</g> <svg
</svg> xmlns="http://www.w3.org/2000/svg"
</span> width="20"
<span matTooltip="파일삭제" class="text-accent-darkest"> height="20"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> fill="none"
<path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" /> stroke="currentColor"
<path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /></svg> stroke-width="1.5"
</span> stroke-linecap="butt"
stroke-linejoin="round"
>
<path
d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"
/>
<circle cx="12" cy="10" r="3" />
<circle cx="12" cy="12" r="10" />
</svg>
</span>
<span matTooltip="파일전달" class="text-accent-darkest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
<g fill="none" fill-rule="evenodd">
<path
d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"
/>
</g>
</svg>
</span>
<span matTooltip="파일삭제" class="text-accent-darkest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
<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" />
</svg>
</span>
</div> </div>
</ng-container> </ng-container>
</div> </div>
@ -99,7 +154,8 @@
</div> </div>
<div class="download-period text-accent-color"> <div class="download-period text-accent-color">
<!--{{ element.info.size | ucapBytes }}--> <!--{{ element.info.size | ucapBytes }}-->
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23 {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
2020.01.23
</div> </div>
</td> </td>
</ng-container> </ng-container>
@ -142,5 +198,5 @@
Open Folder Open Folder
</button> </button>
</div> </div>
</div> </div>
</div> </div>

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

@ -141,6 +141,11 @@ export class FileBoxComponent implements OnInit, OnDestroy {
.sortData(this.dataSource.data, this.sort) .sortData(this.dataSource.data, this.sort)
.filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex) .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
.filter((u, i) => i < this.paginator.pageSize); .filter((u, i) => i < this.paginator.pageSize);
if (data.length === 0) {
return false;
}
if ( if (
data.filter( data.filter(
dInfo => dInfo =>

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
View File

@ -27,7 +27,8 @@ import {
MatTableModule, MatTableModule,
MatPaginatorModule, MatPaginatorModule,
MatRippleModule, MatRippleModule,
MatSortModule MatSortModule,
MatTooltipModule
} from '@angular/material'; } from '@angular/material';
import { MatListModule } from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
@ -80,6 +81,7 @@ import { DIALOGS } from './dialogs';
MatSortModule, MatSortModule,
MatPaginatorModule, MatPaginatorModule,
MatRippleModule, MatRippleModule,
MatTooltipModule,
PerfectScrollbarModule, PerfectScrollbarModule,

71
projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
View File

@ -1,6 +1,6 @@
import { import {
CommonApiService, CommonApiService,
MassTalkSaveRequest, MassTalkSaveRequest
} from '@ucap-webmessenger/api-common'; } from '@ucap-webmessenger/api-common';
import { KEY_ENVIRONMENTS_INFO } from './../../../types/environment.type'; import { KEY_ENVIRONMENTS_INFO } from './../../../types/environment.type';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
@ -19,7 +19,7 @@ import {
catchError, catchError,
exhaustMap, exhaustMap,
withLatestFrom, withLatestFrom,
concatMap, concatMap
} from 'rxjs/operators'; } from 'rxjs/operators';
import moment from 'moment'; import moment from 'moment';
import { import {
@ -38,7 +38,7 @@ import {
ReadNotification, ReadNotification,
SSVC_TYPE_EVENT_SEND_RES, SSVC_TYPE_EVENT_SEND_RES,
SSVC_TYPE_EVENT_SEND_NOTI, SSVC_TYPE_EVENT_SEND_NOTI,
EventJson, EventJson
} from '@ucap-webmessenger/protocol-event'; } from '@ucap-webmessenger/protocol-event';
import * as ChatStore from '@app/store/messenger/chat'; import * as ChatStore from '@app/store/messenger/chat';
@ -74,13 +74,13 @@ import {
infoIntervalClear, infoIntervalClear,
fileInfo, fileInfo,
fileInfoSuccess, fileInfoSuccess,
fileInfoFailure, fileInfoFailure
} from './actions'; } from './actions';
import { SessionStorageService } from '@ucap-webmessenger/web-storage'; import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { import {
RoomInfo, RoomInfo,
RoomProtocolService, RoomProtocolService,
OpenResponse, OpenResponse
} from '@ucap-webmessenger/protocol-room'; } from '@ucap-webmessenger/protocol-room';
import { LoginInfo, KEY_LOGIN_INFO, EnvironmentsInfo } from '@app/types'; import { LoginInfo, KEY_LOGIN_INFO, EnvironmentsInfo } from '@app/types';
import { Dictionary } from '@ngrx/entity'; import { Dictionary } from '@ngrx/entity';
@ -99,7 +99,7 @@ import {
InfoData as FileInfoData, InfoData as FileInfoData,
InfoCheckData as FileInfoCheckData, InfoCheckData as FileInfoCheckData,
InfoResponse as FileInfoResponse, InfoResponse as FileInfoResponse,
FileType, FileType
} from '@ucap-webmessenger/protocol-file'; } from '@ucap-webmessenger/protocol-file';
@Injectable() @Injectable()
@ -111,7 +111,7 @@ export class Effects {
return info({ return info({
roomSeq: action.roomSeq, roomSeq: action.roomSeq,
baseSeq: 0, baseSeq: 0,
requestCount: CONST.EVENT_INFO_READ_COUNT, requestCount: CONST.EVENT_INFO_READ_COUNT
}); });
}) })
) )
@ -139,14 +139,14 @@ export class Effects {
this.store.dispatch( this.store.dispatch(
infoSuccess({ infoSuccess({
infoList, infoList,
res: res as InfoResponse, res: res as InfoResponse
}) })
); );
} else { } else {
this.store.dispatch( this.store.dispatch(
infoMoreSuccess({ infoMoreSuccess({
infoList, infoList,
res: res as InfoResponse, res: res as InfoResponse
}) })
); );
} }
@ -161,7 +161,7 @@ export class Effects {
this.store.dispatch( this.store.dispatch(
read({ read({
roomSeq: req.roomSeq, roomSeq: req.roomSeq,
lastReadSeq: Number(maxSeq), lastReadSeq: Number(maxSeq)
}) })
); );
@ -171,8 +171,8 @@ export class Effects {
req: { req: {
roomSeq: req.roomSeq, roomSeq: req.roomSeq,
// { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌 // { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌
type: FileType.All, type: FileType.All
}, }
}) })
); );
} }
@ -217,7 +217,7 @@ export class Effects {
fileInfoSuccess({ fileInfoSuccess({
fileInfoList, fileInfoList,
fileInfoCheckList, fileInfoCheckList,
res: res as FileInfoResponse, res: res as FileInfoResponse
}) })
); );
} }
@ -321,7 +321,7 @@ export class Effects {
this.store.dispatch( this.store.dispatch(
SyncStore.updateUnreadCount({ SyncStore.updateUnreadCount({
roomSeq: action.roomSeq, roomSeq: action.roomSeq,
noReadCnt: 0, noReadCnt: 0
}) })
); );
} }
@ -339,7 +339,7 @@ export class Effects {
map((res: SendResponse) => { map((res: SendResponse) => {
return sendSuccess({ return sendSuccess({
senderSeq: action.senderSeq, senderSeq: action.senderSeq,
res, res
}); });
}), }),
catchError(error => of(sendFailure({ error }))) catchError(error => of(sendFailure({ error })))
@ -360,7 +360,7 @@ export class Effects {
roomSeq: res.roomSeq, roomSeq: res.roomSeq,
info: res.info, info: res.info,
SVC_TYPE: res.SVC_TYPE, SVC_TYPE: res.SVC_TYPE,
SSVC_TYPE: res.SSVC_TYPE, SSVC_TYPE: res.SSVC_TYPE
}) })
); );
}) })
@ -380,7 +380,7 @@ export class Effects {
roomSeq: noti.roomSeq, roomSeq: noti.roomSeq,
info: noti.info, info: noti.info,
SVC_TYPE: noti.SVC_TYPE, SVC_TYPE: noti.SVC_TYPE,
SSVC_TYPE: noti.SSVC_TYPE, SSVC_TYPE: noti.SSVC_TYPE
}) })
); );
}) })
@ -404,8 +404,8 @@ export class Effects {
req: { req: {
roomSeq: action.trgtRoomSeq, roomSeq: action.trgtRoomSeq,
eventType: action.req.eventType, eventType: action.req.eventType,
sentMessage: action.req.sentMessage, sentMessage: action.req.sentMessage
}, }
}) })
); );
} else if (!!action.trgtUserSeqs && action.trgtUserSeqs.length > 0) { } else if (!!action.trgtUserSeqs && action.trgtUserSeqs.length > 0) {
@ -425,7 +425,7 @@ export class Effects {
return this.roomProtocolService return this.roomProtocolService
.open({ .open({
divCd: 'forwardOpen', divCd: 'forwardOpen',
userSeqs: action.trgtUserSeqs, userSeqs: action.trgtUserSeqs
}) })
.pipe( .pipe(
map((res: OpenResponse) => { map((res: OpenResponse) => {
@ -438,8 +438,8 @@ export class Effects {
req: { req: {
roomSeq: res.res.roomSeq, roomSeq: res.res.roomSeq,
eventType: action.req.eventType, eventType: action.req.eventType,
sentMessage: action.req.sentMessage, sentMessage: action.req.sentMessage
}, }
}) })
); );
return res; return res;
@ -468,7 +468,7 @@ export class Effects {
deviceType: environmentsInfo.deviceType, deviceType: environmentsInfo.deviceType,
token: loginResInfo.tokenString, token: loginResInfo.tokenString,
content: action.req.sentMessage, content: action.req.sentMessage,
roomSeq: action.req.roomSeq, roomSeq: action.req.roomSeq
}; };
return this.commonApiService.massTalkSave(req).pipe( return this.commonApiService.massTalkSave(req).pipe(
@ -480,8 +480,8 @@ export class Effects {
req: { req: {
roomSeq: res.roomSeq, roomSeq: res.roomSeq,
eventType: EventType.MassText, eventType: EventType.MassText,
sentMessage: res.returnJson, sentMessage: res.returnJson
}, }
}) })
); );
} else { } else {
@ -523,7 +523,7 @@ export class Effects {
this.store.dispatch( this.store.dispatch(
read({ read({
roomSeq: action.roomSeq, roomSeq: action.roomSeq,
lastReadSeq: action.info.seq, lastReadSeq: action.info.seq
}) })
); );
} }
@ -545,13 +545,26 @@ export class Effects {
this.store.dispatch( this.store.dispatch(
SyncStore.updateUnreadCount({ SyncStore.updateUnreadCount({
roomSeq: action.roomSeq, roomSeq: action.roomSeq,
noReadCnt: noReadCnt + 1, noReadCnt: noReadCnt + 1
}) })
); );
} }
} }
} }
if (action.info.type === EventType.File) {
// File 정보 수집.
this.store.dispatch(
fileInfo({
req: {
roomSeq: action.roomSeq,
// { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌
type: FileType.All
}
})
);
}
// 대화 > 리스트 :: finalEventMessage refresh // 대화 > 리스트 :: finalEventMessage refresh
this.store.dispatch(ChatStore.newEventMessage(action)); this.store.dispatch(ChatStore.newEventMessage(action));
}) })
@ -598,7 +611,7 @@ export class Effects {
SyncStore.refreshRoom({ SyncStore.refreshRoom({
roomSeq: action.noti.roomSeq, roomSeq: action.noti.roomSeq,
isDetail: true, isDetail: true,
localeCode: loginInfo.localeCode, localeCode: loginInfo.localeCode
}) })
); );
}) })
@ -645,7 +658,7 @@ export class Effects {
SyncStore.refreshRoom({ SyncStore.refreshRoom({
roomSeq: noti.roomSeq, roomSeq: noti.roomSeq,
isDetail: true, isDetail: true,
localeCode: loginInfo.localeCode, localeCode: loginInfo.localeCode
}) })
); );
}) })