파일함 / 앨범함 레이아웃 정리

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

@@ -1,7 +1,104 @@
-<div>
+<div fxLayout="column" style="width: 600px;" class="album-box">
-  <ul>
+  <div>
-    <li *ngFor="let fileInfo of fileInfoTotal">
+    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
-      {{ fileInfo.info.name }} / {{ fileInfo.info.size }}
+      <mat-tab label="Image"></mat-tab>
-    </li>
+      <mat-tab label="Video"></mat-tab>
-  </ul>
+    </mat-tab-group>
+  </div>
+  <div fxFlex="0 0 400px">
+    <ng-container *ngIf="!selectedFile">
+      Select File.
+    </ng-container>
+    <ng-container *ngIf="selectedFile">
+      <img
+        *ngIf="selectedFile.info.type === FileType.Image"
+        [src]="getImageUrl(selectedFile)"
+        class="preview-image"
+      />
+      <video
+        controls
+        *ngIf="selectedFile.info.type === FileType.Video"
+        class="preview-image"
+      >
+        <source [src]="getImageUrl(selectedFile)" />
+      </video>
+      <ul>
+        <li>name : {{ selectedFile.info.name }}</li>
+        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+        <li>
+          date :
+          {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+        </li>
+      </ul>
+    </ng-container>
+  </div>
+  <div class="search-list">
+    <div
+      *ngFor="let fileInfo of filteredList"
+      class="img-item"
+      matTooltip="fileInfo.info.name"
+      (click)="onClickImage($event, fileInfo)"
+    >
+      <dl>
+        <dt>
+          <div
+            *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
+              [ngClass]="[
+                'mime-icon',
+                'light',
+                'ico-' + getExtention(fileInfo.info.name)
+              ]"
+            >
+              <div class="ico"></div>
+            </div>
+          </ng-template>
+        </dt>
+        <dd>
+          <span>
+            <mat-checkbox
+              #checkbox
+              [checked]="getCheckItem(fileInfo)"
+              (change)="onCheckItem(checkbox.checked, fileInfo)"
+              (click)="$event.stopPropagation()"
+            >
+            </mat-checkbox>
+          </span>
+          <span>
+            <button mat-button (click)="onClickDownload(fileInfo)">
+              <mat-icon>vertical_align_bottom</mat-icon>
+            </button>
+          </span>
+        </dd>
+      </dl>
+    </div>
+  </div>
+  <div
+    fxFlex="1 1 50px"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    class="btn-box"
+  >
+    <button
+      mat-flat-button
+      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
+      class="mat-primary"
+    >
+      Download All
+    </button>
+    <button mat-flat-button class="mat-primary">
+      Open Folder
+    </button>
+  </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -0,0 +1,24 @@
+.album-box {
+  height: 100%;
+  overflow: hidden;
+
+  .search-list {
+    overflow: auto;
+  }
+}
+
+.img-item {
+  cursor: pointer;
+  max-width: 150px;
+  min-width: 150px;
+}
+
+.preview-image {
+  max-height: 300px;
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts

@@ -3,7 +3,7 @@ import { MatPaginator, MatTableDataSource } from '@angular/material';
 import {
   FileInfo,
   FileDownloadInfo,
-  FileType
+  FileType,
 } from '@ucap-webmessenger/protocol-file';
 import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';
@@ -11,23 +11,62 @@ import { Store, select } from '@ngrx/store';
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import { tap, map } from 'rxjs/operators';
+import {
+  Info,
+  EventJson,
+  FileEventJson,
+} from '@ucap-webmessenger/protocol-event';
+import { FileUtil } from '@ucap-webmessenger/core';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
 
 export interface FileInfoTotal {
   info: FileInfo;
   checkInfo: FileDownloadInfo[];
+  eventInfo?: Info<FileEventJson>;
 }
 
 @Component({
   selector: 'app-layout-chat-right-drawer-album-box',
   templateUrl: './album-box.component.html',
-  styleUrls: ['./album-box.component.scss']
+  styleUrls: ['./album-box.component.scss'],
 })
 export class AlbumBoxComponent implements OnInit, OnDestroy {
+  filteredList: FileInfoTotal[] = [];
   fileInfoTotal: FileInfoTotal[];
   fileInfoList: FileInfo[];
   fileInfoListSubscription: Subscription;
 
-  constructor(private store: Store<any>) {}
+  selectedFile: FileInfoTotal;
+  selectedFileList: FileInfoTotal[] = [];
+
+  loginRes: LoginResponse;
+  environmentsInfo: EnvironmentsInfo;
+  sessionVerinfo: VersionInfo2Response;
+
+  FileType = FileType;
+  currentTabIndex = 0;
+
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private commonApiService: CommonApiService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
+      KEY_ENVIRONMENTS_INFO
+    );
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+  }
 
   ngOnInit() {
     this.fileInfoListSubscription = combineLatest([
@@ -39,11 +78,14 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
         select(
           AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
         )
-      )
+      ),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
+      ),
     ])
       .pipe(
         tap(() => (this.fileInfoTotal = [])),
-        tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
+        tap(([roomInfo, fileInfoList, fileInfoCheckList, eventList]) => {
           this.fileInfoList = fileInfoList.filter(fileInfo => {
             if (
               fileInfo.roomSeq === roomInfo.roomSeq &&
@@ -57,13 +99,21 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
           });
 
           this.fileInfoList.map(fileInfo => {
+            const events = eventList.filter(
+              event => event.seq === fileInfo.eventSeq
+            );
+
             this.fileInfoTotal.push({
               info: fileInfo,
               checkInfo: fileInfoCheckList.filter(
                 checkInfo => checkInfo.seq === fileInfo.seq
-              )
+              ),
+              eventInfo:
+                events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
             });
           });
+
+          this.onSelectedIndexChange(this.currentTabIndex);
         })
       )
       .subscribe();
@@ -74,4 +124,75 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
       this.fileInfoListSubscription.unsubscribe();
     }
   }
+
+  getExtention(name: string): string {
+    return FileUtil.getExtension(name);
+  }
+
+  getImageUrl(fileInfo: FileInfoTotal): string {
+    return this.commonApiService.urlForFileTalkDownload(
+      {
+        userSeq: this.loginRes.userSeq,
+        deviceType: this.environmentsInfo.deviceType,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+      },
+      this.sessionVerinfo.downloadUrl
+    );
+  }
+
+  onSelectedIndexChange(index: number) {
+    this.selectedFile = null;
+    this.currentTabIndex = index;
+    if (this.currentTabIndex === 0) {
+      // Image
+      this.filteredList = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.type === FileType.Image
+      );
+    } else {
+      // Video
+      this.filteredList = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.type === FileType.Video
+      );
+    }
+  }
+
+  onClickImage(event: MouseEvent, fileInfo: FileInfoTotal) {
+    if (!!event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    this.selectedFile = fileInfo;
+  }
+
+  getCheckItem(fileInfo: FileInfoTotal) {
+    if (this.selectedFileList) {
+      if (
+        this.selectedFileList.filter(
+          info => info.info.seq === fileInfo.info.seq
+        ).length > 0
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  onCheckItem(value: boolean, fileInfo: FileInfoTotal) {
+    if (value) {
+      this.onClickImage(undefined, fileInfo);
+      this.selectedFileList.push(fileInfo);
+    } else {
+      this.selectedFileList = this.selectedFileList.filter(
+        info => info.info.seq !== fileInfo.info.seq
+      );
+    }
+  }
+
+  onClickDownload(fileInfo: FileInfoTotal) {
+    console.log(fileInfo);
+  }
 }

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

@@ -1,4 +1,10 @@
 <div fxLayout="column">
+  <div>
+    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+      <mat-tab label="Receive"></mat-tab>
+      <mat-tab label="Send"></mat-tab>
+    </mat-tab-group>
+  </div>
   <div fxFlex="1 1 300px">
     <ng-container *ngIf="!selectedFile">
       Select File.

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

@@ -12,6 +12,9 @@ import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import { tap, map } from 'rxjs/operators';
 import { FileUtil } from '@ucap-webmessenger/core';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 
 export interface FileInfoTotal {
   info: FileInfo;
@@ -40,10 +43,21 @@ export class FileBoxComponent implements OnInit, OnDestroy {
   selectedFile: FileInfoTotal;
   selectedFileList: FileInfoTotal[] = [];
 
+  loginRes: LoginResponse;
+
+  currentTabIndex = 0;
+
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor(private store: Store<any>) {}
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+  }
 
   ngOnInit() {
     this.fileInfoListSubscription = combineLatest([
@@ -81,7 +95,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
             });
           });
 
-          this.dataSource.data = this.fileInfoTotal;
+          this.onSelectedIndexChange(this.currentTabIndex);
         })
       )
       .subscribe();
@@ -114,6 +128,22 @@ export class FileBoxComponent implements OnInit, OnDestroy {
     return FileUtil.getExtension(name);
   }
 
+  onSelectedIndexChange(index: number) {
+    this.selectedFile = null;
+    this.currentTabIndex = index;
+    if (this.currentTabIndex === 0) {
+      // Receive
+      this.dataSource.data = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.senderSeq !== this.loginRes.userSeq
+      );
+    } else {
+      // send
+      this.dataSource.data = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.senderSeq === this.loginRes.userSeq
+      );
+    }
+  }
+
   getCheckAllUser() {
     const data = this.dataSource
       .sortData(this.dataSource.data, this.sort)