image viewer added

projects/ucap-webmessenger-app/src/app/layouts/common/common.layout.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+
+import { COMPONENTS } from './components';
+import { DIALOGS } from './dialogs';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatIconModule,
+    MatToolbarModule,
+    UCapUiModule
+  ],
+  exports: [...COMPONENTS, ...DIALOGS],
+  declarations: [...COMPONENTS, ...DIALOGS],
+  entryComponents: [...DIALOGS]
+})
+export class AppCommonLayoutModule {}

projects/ucap-webmessenger-app/src/app/layouts/common/components/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.spec.ts

@@ -0,0 +1,27 @@
+/* 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 { ImageViewerDialogComponent } from './image-viewer.dialog.component';
+
+describe('ImageViewerDialogComponent', () => {
+  let component: ImageViewerDialogComponent;
+  let fixture: ComponentFixture<ImageViewerDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageViewerDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageViewerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.ts

@@ -0,0 +1,34 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Inject,
+  EventEmitter
+} from '@angular/core';
+
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { NGXLogger } from 'ngx-logger';
+
+export interface ImageViewerDialogData {}
+
+export interface ImageViewerDialogResult {}
+
+@Component({
+  selector: 'app-layout-common-image-viewer',
+  templateUrl: './image-viewer.dialog.component.html',
+  styleUrls: ['./image-viewer.dialog.component.scss']
+})
+export class ImageViewerDialogComponent implements OnInit, OnDestroy {
+  constructor(
+    public dialogRef: MatDialogRef<
+      ImageViewerDialogData,
+      ImageViewerDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: ImageViewerDialogData,
+    private logger: NGXLogger
+  ) {}
+
+  ngOnInit() {}
+
+  ngOnDestroy(): void {}
+}

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/index.ts

@@ -0,0 +1,3 @@
+import { ImageViewerDialogComponent } from './image-viewer.dialog.component';
+
+export const DIALOGS = [ImageViewerDialogComponent];

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

@@ -50,6 +50,11 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '../dialogs/chat/create-chat.dialog.component';
+import {
+  ImageViewerDialogComponent,
+  ImageViewerDialogData,
+  ImageViewerDialogResult
+} from '@app/layouts/common/dialogs/image-viewer.dialog.component';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -215,8 +220,20 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     );
   }
 
-  onImageViewer(value: FileInfo) {
+  async onImageViewer(value: FileInfo) {
     this.logger.debug('imageViewer', value);
+    const result = await this.dialogService.open<
+      ImageViewerDialogComponent,
+      ImageViewerDialogData,
+      ImageViewerDialogResult
+    >(ImageViewerDialogComponent, {
+      position: {
+        top: '10px'
+      },
+      width: '100%',
+      height: '98%',
+      data: {}
+    });
   }
 
   /** File Save, Save As */

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

@@ -2,6 +2,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -32,9 +33,10 @@ import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 
+import { AppCommonLayoutModule } from '@app/layouts/common/common.layout.module';
+
 import { COMPONENTS } from './components';
 import { DIALOGS } from './dialogs';
-import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -66,7 +68,9 @@ import { ReactiveFormsModule } from '@angular/forms';
     UCapUiRoomModule,
     UCapUiProfileModule,
     UCapUiGroupModule,
-    UCapUiOrganizationModule
+    UCapUiOrganizationModule,
+
+    AppCommonLayoutModule
   ],
   exports: [...COMPONENTS, ...DIALOGS],
   declarations: [...COMPONENTS, ...DIALOGS],

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -9,18 +9,6 @@
   </span>
   <dl class="item-default">
     <dt>
-      <!-- <img
-        class="thumbnail"
-        [src]="
-          profileImageRoot
-            | ucapUiImaage
-              : {
-                  path: userInfo.profileImageFile,
-                  default: 'assets/images/img_nophoto_50.png'
-                }
-            | async
-        "
-      /> -->
       <img
         class="thumbnail"
         ucapUiImage
@@ -28,13 +16,6 @@
         [path]="userInfo.profileImageFile"
         [default]="'assets/images/img_nophoto_50.png'"
       />
-
-      <!-- <ucap-ui-imaage
-        [imageClass]="'thumbnail'"
-        [base]="profileImageRoot"
-        [path]="userInfo.profileImageFile"
-        [default]="'assets/images/img_nophoto_50.png'"
-      ></ucap-ui-imaage> -->
     </dt>
     <dd class="info">
       <div class="detail">