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

modify message-box for file, attach-file, image, video

Browse Source
This commit is contained in:
leejh 2019-10-14 13:53:22 +09:00
parent c270e40621
commit b4823bfd9c
19 changed files with 208 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,7 @@
<div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
<!-- CHAT MESSAGES -->
<ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
(massDetail)="onMassDetail($event)">
(massDetail)="onMassDetail($event)" (save)="onSave($event)" (imageViewer)="onImageViewer($event)">
</ucap-chat-messages>
<!-- CHAT MESSAGES -->
</div>

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

@ -21,6 +21,7 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room';
import { tap } from 'rxjs/operators';
import { FileInfo } from '@ucap-webmessenger/ui-chat';
@Component({
selector: 'app-layout-messenger-messages',
@ -128,4 +129,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
})
);
}
onImageViewer(value: FileInfo) {
this.logger.debug('imageViewer', value);
}
/** File Save, Save As */
onSave(value: { fileInfo: FileInfo; type: string }) {
this.logger.debug('fileSave', value);
}
}

21
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html Normal file
View File

@ -0,0 +1,21 @@
<ul>
<li>
{{ fileInfo.FileName }}
</li>
<li>
{{ fileInfo.AttSize }}
</li>
<li>
{{ fileInfo.FileExt }}
</li>
</ul>
<span *ngIf="fileInfo && fileInfo.AttSEQ">
<ul>
<li>
<button mat-button (click)="onClickSave()">Save</button>
</li>
<li>
<button mat-button (click)="onClickSaveAs()">Save As</button>
</li>
</ul>
</span>

0
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss Normal file
View File

28
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.spec.ts Normal file
View File

@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AttachFileComponent } from './attach-file.component';
describe('AttachFileComponent', () => {
let component: AttachFileComponent;
let fixture: ComponentFixture<AttachFileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AttachFileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AttachFileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FileInfo } from '../../models/file-info.json';
import { NGXLogger } from 'ngx-logger';
@Component({
selector: 'ucap-chat-message-box-attach-file',
templateUrl: './attach-file.component.html',
styleUrls: ['./attach-file.component.scss']
})
export class AttachFileComponent implements OnInit {
@Input()
fileInfo: FileInfo;
@Output()
save = new EventEmitter<string>();
constructor(private logger: NGXLogger) {}
ngOnInit() {}
onClickSave() {
this.save.emit('save');
}
onClickSaveAs() {
this.save.emit('saveAs');
}
}

12
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.html
View File

@ -1,3 +1,9 @@
<p>
file
</p>
<ng-container *ngIf="fileInfo && fileInfo.FileType" [ngSwitch]="fileInfo.FileType">
<ucap-chat-message-box-attach-file *ngSwitchCase="FileType.File" [fileInfo]="fileInfo" (save)="onSave($event)">
</ucap-chat-message-box-attach-file>
<ucap-chat-message-box-image *ngSwitchCase="FileType.Image" [fileInfo]="fileInfo"
(click)="onClickImageViewer(fileInfo)"></ucap-chat-message-box-image>
<ucap-chat-message-box-video *ngSwitchCase="FileType.Video" [fileInfo]="fileInfo"
(click)="onClickImageViewer(fileInfo)"></ucap-chat-message-box-video>
<ucap-chat-message-box-text *ngSwitchDefault [message]="message"></ucap-chat-message-box-text>
</ng-container>

38
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts
View File

@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import { Info } from '@ucap-webmessenger/protocol-event';
import { StatusCode } from '@ucap-webmessenger/api';
import { FileType } from '@ucap-webmessenger/protocol-file';
import { NGXLogger } from 'ngx-logger';
import { FileInfo } from '../../models/file-info.json';
@Component({
selector: 'ucap-chat-message-box-file',
@ -6,7 +11,34 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./file.component.scss']
})
export class FileComponent implements OnInit {
constructor() {}
@Input()
message: Info;
ngOnInit() {}
@Output()
save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
@Output()
imageViewer = new EventEmitter<FileInfo>();
fileInfo?: FileInfo;
errorMessage?: string;
FileType = FileType;
constructor(private logger: NGXLogger) {}
ngOnInit() {
const contentJson: FileInfo = JSON.parse(this.message.sentMessage);
if (contentJson.StatusCode === StatusCode.Success) {
this.fileInfo = contentJson;
} else {
this.errorMessage = contentJson.ErrorMessage || '[Error] System Error!!';
}
}
onClickImageViewer(fileInfo: FileInfo) {
this.imageViewer.emit(this.fileInfo);
}
onSave(value: string) {
this.save.emit({ fileInfo: this.fileInfo, type: value });
}
}

1
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html
View File

@ -0,0 +1 @@
<img [src]="fileInfo.ThumbURL">

9
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { FileInfo } from '../../models/file-info.json';
@Component({
selector: 'ucap-chat-message-box-image',
@ -6,7 +8,10 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {
constructor() {}
@Input()
fileInfo: FileInfo;
constructor(private logger: NGXLogger) {}
ngOnInit() {}
}

10
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts
View File

@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Info } from '@ucap-webmessenger/protocol-event';
import { NGXLogger } from 'ngx-logger';
import { StatusCode } from '@ucap-webmessenger/api';
import { MassTextInfo } from '../../models/mass-talk-info.json';
@Component({
selector: 'ucap-chat-message-box-mass',
@ -46,12 +47,3 @@ export class MassComponent implements OnInit {
this.massDetail.emit(this.eventMassSeq);
}
}
export interface MassTextInfo {
StatusCode?: StatusCode;
ErrorMessage?: string;
EventMassSeq?: number;
RoomID?: string;
RegDate?: Date;
Content?: string;
}

11
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
View File

@ -0,0 +1,11 @@
<ul>
<li>
{{ fileInfo.FileName }}
</li>
<li>
{{ fileInfo.AttSize }}
</li>
<li>
{{ fileInfo.FileExt }}
</li>
</ul>

9
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { FileInfo } from '../../models/file-info.json';
@Component({
selector: 'ucap-chat-message-box-video',
@ -6,7 +8,10 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
constructor() {}
@Input()
fileInfo: FileInfo;
constructor(private logger: NGXLogger) {}
ngOnInit() {}
}

9
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -20,14 +20,13 @@
<ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
(massDetail)="onMassDetail($event)">
</ucap-chat-message-box-mass>
<ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
(imageViewer)="onImageViewer($event)">
</ucap-chat-message-box-file>
<div *ngSwitchCase="EventType.Join">Join</div>
<div *ngSwitchDefault>
date splitter
<ucap-chat-message-box-date-splitter></ucap-chat-message-box-date-splitter>
file
<ucap-chat-message-box-file></ucap-chat-message-box-file>
image
<ucap-chat-message-box-image></ucap-chat-message-box-image>
information
<ucap-chat-message-box-information></ucap-chat-message-box-information>
mass-translation
@ -41,8 +40,6 @@
<ucap-chat-message-box-sticker></ucap-chat-message-box-sticker>
translation
<ucap-chat-message-box-translation></ucap-chat-message-box-translation>
video
<ucap-chat-message-box-video></ucap-chat-message-box-video>
video-conference
<ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>

13
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -8,6 +8,7 @@ import {
import { NGXLogger } from 'ngx-logger';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type';
import { FileInfo } from '../models/file-info.json';
@Component({
selector: 'ucap-chat-messages',
@ -24,6 +25,10 @@ export class MessagesComponent implements OnInit {
@Output()
massDetail = new EventEmitter<number>();
@Output()
imageViewer = new EventEmitter<FileInfo>();
@Output()
save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
EventType = EventType;
profileImageRoot: string;
@ -68,4 +73,12 @@ export class MessagesComponent implements OnInit {
onMassDetail(value: number) {
this.massDetail.emit(value);
}
onImageViewer(value: FileInfo) {
this.imageViewer.emit(value);
}
onSave(value: { fileInfo: FileInfo; type: string }) {
this.save.emit(value);
}
}

20
projects/ucap-webmessenger-ui-chat/src/lib/models/file-info.json.ts Normal file
View File

@ -0,0 +1,20 @@
import { StatusCode } from '@ucap-webmessenger/api';
import { FileType } from '@ucap-webmessenger/protocol-file';
export interface FileInfo {
StatusCode?: StatusCode;
ErrorMessage?: string;
RoomID?: number;
FileName?: string;
FileExt?: string;
FileType?: FileType;
ThumbURL?: string;
AttSEQ?: number;
AttSize?: number;
AttRegDate?: Date;
ImageWidth?: number;
ImageHeight?: number;
CompanyCode?: string;
VoiceTime?: string;
SynappKey?: string;
}

10
projects/ucap-webmessenger-ui-chat/src/lib/models/mass-talk-info.json.ts Normal file
View File

@ -0,0 +1,10 @@
import { StatusCode } from '@ucap-webmessenger/api';
export interface MassTextInfo {
StatusCode?: StatusCode;
ErrorMessage?: string;
EventMassSeq?: number;
RoomID?: string;
RegDate?: Date;
Content?: string;
}

2
projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
View File

@ -14,6 +14,7 @@ import { MessagesComponent } from './components/messages.component';
import { DateSplitterComponent as MBDateSplitterComponent } from './components/message-box/date-splitter.component';
import { FileComponent as MBFileComponent } from './components/message-box/file.component';
import { AttachFileComponent as MAttachFileComponent } from './components/message-box/attach-file.component';
import { ImageComponent as MBImageComponent } from './components/message-box/image.component';
import { InformationComponent as MBInformationComponent } from './components/message-box/information.component';
import { MassTranslationComponent as MBMassTranslationComponent } from './components/message-box/mass-translation.component';
@ -33,6 +34,7 @@ const COMPONENTS = [
MBDateSplitterComponent,
MBFileComponent,
MAttachFileComponent,
MBImageComponent,
MBInformationComponent,
MBMassTranslationComponent,

3
projects/ucap-webmessenger-ui-chat/src/public-api.ts
View File

@ -20,4 +20,7 @@ export * from './lib/components/message-box/video.component';
export * from './lib/components/form.component';
export * from './lib/components/messages.component';
export * from './lib/models/mass-talk-info.json';
export * from './lib/models/file-info.json';
export * from './lib/ucap-ui-chat.module';