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

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

@@ -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>

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

@@ -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);
+  }
 }

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

@@ -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>

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

@@ -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();
+  });
+});

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

@@ -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');
+  }
+}

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

@@ -1,3 +1,9 @@
-<p>
+<ng-container *ngIf="fileInfo && fileInfo.FileType" [ngSwitch]="fileInfo.FileType">
-  file
+  <ucap-chat-message-box-attach-file *ngSwitchCase="FileType.File" [fileInfo]="fileInfo" (save)="onSave($event)">
-</p>
+  </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>

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

@@ -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 });
+  }
 }

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

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

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

@@ -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() {}
 }

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

@@ -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;
-}

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

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

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

@@ -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() {}
 }

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

@@ -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>
 

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

@@ -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);
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/models/file-info.json.ts

@@ -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;
+}

projects/ucap-webmessenger-ui-chat/src/lib/models/mass-talk-info.json.ts

@@ -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;
+}

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

@@ -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,

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

@@ -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';