파일함 정리 / 앨범함 데이터 연동.

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

@@ -1 +1,7 @@
-<p>album-box works!</p>
+<div>
+  <ul>
+    <li *ngFor="let fileInfo of fileInfoTotal">
+      {{ fileInfo.info.name }} / {{ fileInfo.info.size }}
+    </li>
+  </ul>
+</div>

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

@@ -1,12 +1,77 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
+import {
+  FileInfo,
+  FileDownloadInfo,
+  FileType
+} from '@ucap-webmessenger/protocol-file';
+import { Subscription, combineLatest } from 'rxjs';
+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';
+
+export interface FileInfoTotal {
+  info: FileInfo;
+  checkInfo: FileDownloadInfo[];
+}
 
 @Component({
   selector: 'app-layout-chat-right-drawer-album-box',
   templateUrl: './album-box.component.html',
   styleUrls: ['./album-box.component.scss']
 })
-export class AlbumBoxComponent implements OnInit {
+export class AlbumBoxComponent implements OnInit, OnDestroy {
-  constructor() {}
+  fileInfoTotal: FileInfoTotal[];
+  fileInfoList: FileInfo[];
+  fileInfoListSubscription: Subscription;
 
-  ngOnInit() {}
+  constructor(private store: Store<any>) {}
+
+  ngOnInit() {
+    this.fileInfoListSubscription = combineLatest([
+      this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
+        )
+      )
+    ])
+      .pipe(
+        tap(() => (this.fileInfoTotal = [])),
+        tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
+          this.fileInfoList = fileInfoList.filter(fileInfo => {
+            if (
+              fileInfo.roomSeq === roomInfo.roomSeq &&
+              (fileInfo.type === FileType.Image ||
+                fileInfo.type === FileType.Video)
+            ) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          this.fileInfoList.map(fileInfo => {
+            this.fileInfoTotal.push({
+              info: fileInfo,
+              checkInfo: fileInfoCheckList.filter(
+                checkInfo => checkInfo.seq === fileInfo.seq
+              )
+            });
+          });
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.fileInfoListSubscription) {
+      this.fileInfoListSubscription.unsubscribe();
+    }
+  }
 }

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

@@ -1 +1,102 @@
-<p>file-box works!</p>
+<div fxLayout="column">
+  <div fxFlex="1 1 300px">
+    <ng-container *ngIf="!selectedFile">
+      Select File.
+    </ng-container>
+    <ng-container *ngIf="selectedFile">
+      <div
+        [ngClass]="[
+          'mime-icon',
+          'light',
+          'ico-' + getExtention(selectedFile.info.name)
+        ]"
+      >
+        <div class="ico"></div>
+      </div>
+      <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 fxFlex="1 1 auto">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="check">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            #checkboxAll
+            [checked]="getCheckAllUser()"
+            (change)="onCheckAllkUser(checkboxAll.checked)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox
+            #checkbox
+            [checked]="getCheckUser(element)"
+            (change)="onCheckUser(checkbox.checked, element)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let element">{{ element.info.name }}</td>
+      </ng-container>
+      <ng-container matColumnDef="size">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Size</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.size | ucapBytes }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="sendDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="receivedUserCount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>receivedUser</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.receivedUserCount }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="onClickRow(row)"
+      ></tr>
+    </table>
+
+    <mat-paginator
+      [pageSize]="10"
+      [pageSizeOptions]="[5, 10, 20]"
+      showFirstLastButtons
+    ></mat-paginator>
+  </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/file-box.component.scss

@@ -0,0 +1,14 @@
+table {
+  width: 100%;
+}
+
+.mat-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}

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

@@ -1,12 +1,188 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
+import {
+  FileInfo,
+  FileDownloadInfo,
+  FileType,
+} from '@ucap-webmessenger/protocol-file';
+import { Subscription, combineLatest } from 'rxjs';
+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 { FileUtil } from '@ucap-webmessenger/core';
+
+export interface FileInfoTotal {
+  info: FileInfo;
+  checkInfo: FileDownloadInfo[];
+}
 
 @Component({
   selector: 'app-layout-chat-right-drawer-file-box',
   templateUrl: './file-box.component.html',
-  styleUrls: ['./file-box.component.scss']
+  styleUrls: ['./file-box.component.scss'],
 })
-export class FileBoxComponent implements OnInit {
+export class FileBoxComponent implements OnInit, OnDestroy {
-  constructor() {}
+  displayedColumns: string[] = [
+    'check',
+    'name',
+    'size',
+    'sendDate',
+    'receivedUserCount',
+  ];
+  dataSource = new MatTableDataSource<FileInfoTotal>();
 
-  ngOnInit() {}
+  fileInfoTotal: FileInfoTotal[];
+  fileInfoList: FileInfo[];
+  fileInfoListSubscription: Subscription;
+
+  selectedFile: FileInfoTotal;
+  selectedFileList: FileInfoTotal[] = [];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(private store: Store<any>) {}
+
+  ngOnInit() {
+    this.fileInfoListSubscription = combineLatest([
+      this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
+        )
+      ),
+    ])
+      .pipe(
+        tap(() => (this.fileInfoTotal = [])),
+        tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
+          this.fileInfoList = fileInfoList.filter(fileInfo => {
+            if (
+              fileInfo.roomSeq === roomInfo.roomSeq &&
+              (fileInfo.type === FileType.File ||
+                fileInfo.type === FileType.Sound)
+            ) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          this.fileInfoList.map(fileInfo => {
+            this.fileInfoTotal.push({
+              info: fileInfo,
+              checkInfo: fileInfoCheckList.filter(
+                checkInfo => checkInfo.seq === fileInfo.seq
+              ),
+            });
+          });
+
+          this.dataSource.data = this.fileInfoTotal;
+        })
+      )
+      .subscribe();
+
+    this.dataSource.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'name':
+          return item.info.name;
+        case 'size':
+          return item.info.size;
+        case 'sendDate':
+          return item.info.sendDate;
+        case 'receivedUserCount':
+          return item.info.receivedUserCount;
+        default:
+          return item[property];
+      }
+    };
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.fileInfoListSubscription) {
+      this.fileInfoListSubscription.unsubscribe();
+    }
+  }
+
+  getExtention(name: string): string {
+    return FileUtil.getExtension(name);
+  }
+
+  getCheckAllUser() {
+    const data = this.dataSource
+      .sortData(this.dataSource.data, this.sort)
+      .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
+      .filter((u, i) => i < this.paginator.pageSize);
+    if (
+      data.filter(
+        dInfo =>
+          this.selectedFileList.filter(
+            fileInfo => fileInfo.info.seq === dInfo.info.seq
+          ).length === 0
+      ).length > 0
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  onCheckAllkUser(value: boolean) {
+    const data = this.dataSource
+      .sortData(this.dataSource.data, this.sort)
+      .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
+      .filter((u, i) => i < this.paginator.pageSize);
+
+    if (!!data && data.length > 0) {
+      if (value) {
+        this.selectedFileList.push(
+          ...data.filter(dInfo =>
+            this.selectedFileList.filter(
+              fileInfo => fileInfo.info.seq !== dInfo.info.seq
+            )
+          )
+        );
+      } else {
+        this.selectedFileList = this.selectedFileList.filter(
+          fileInfo =>
+            !(
+              data.filter(dInfo => dInfo.info.seq === fileInfo.info.seq)
+                .length > 0
+            )
+        );
+      }
+    }
+  }
+  getCheckUser(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;
+    }
+  }
+  onCheckUser(value: boolean, fileInfo: FileInfoTotal) {
+    if (value) {
+      this.selectedFileList.push(fileInfo);
+    } else {
+      this.selectedFileList = this.selectedFileList.filter(
+        info => info.info.seq !== fileInfo.info.seq
+      );
+    }
+  }
+  onClickRow(row: FileInfoTotal) {
+    this.selectedFile = row;
+  }
 }

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

@@ -22,7 +22,13 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material';
+import {
+  MatCheckboxModule,
+  MatTableModule,
+  MatPaginatorModule,
+  MatRippleModule,
+  MatSortModule,
+} from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
 
@@ -70,6 +76,10 @@ import { DIALOGS } from './dialogs';
     MatCheckboxModule,
     MatRadioModule,
     MatSelectModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatRippleModule,
 
     PerfectScrollbarModule,
 
@@ -80,10 +90,10 @@ import { DIALOGS } from './dialogs';
     UCapUiGroupModule,
     UCapUiOrganizationModule,
 
-    AppCommonLayoutModule
+    AppCommonLayoutModule,
   ],
   exports: [...COMPONENTS, ...DIALOGS],
   declarations: [...COMPONENTS, ...DIALOGS],
-  entryComponents: [...DIALOGS]
+  entryComponents: [...DIALOGS],
 })
 export class AppMessengerLayoutModule {}

projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts

@@ -1,11 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async } from '@angular/core/testing';
-import { DatesPipe } from './dates.pipe';
-
-describe('Pipe: Datese', () => {
-  it('create an instance', () => {
-    let pipe = new DatesPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { StringUtil } from '../utils/string.util';
 
 @Pipe({
-  name: 'dateToStringChatList'
+  name: 'dateToStringChatList',
 })
 export class DateToStringForChatRoomListPipe implements PipeTransform {
   transform(value: any): string {
@@ -36,3 +36,18 @@ export class DateToStringForChatRoomListPipe implements PipeTransform {
     }
   }
 }
+
+@Pipe({
+  name: 'dateToStringFormat',
+})
+export class DateToStringFormatPipe implements PipeTransform {
+  transform(value: any, format?: string): string {
+    const date = new Date(value.toString());
+
+    if (!!format) {
+      return StringUtil.dateFormat(date, format);
+    } else {
+      return StringUtil.dateFormat(date, 'YYYY.MM.DD');
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts

@@ -1,11 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async } from '@angular/core/testing';
-import { LinefeedPipe } from './linefeed.pipe';
-
-describe('Pipe: Linefeede', () => {
-  it('create an instance', () => {
-    let pipe = new LinefeedPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

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

@@ -39,7 +39,10 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
 
 import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
-import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
+import {
+  DateToStringForChatRoomListPipe,
+  DateToStringFormatPipe,
+} from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 
 const COMPONENTS = [
@@ -51,26 +54,27 @@ const COMPONENTS = [
   DocumentViewerComponent,
   ImageViewerComponent,
   SoundViewerComponent,
-  VideoViewerComponent
+  VideoViewerComponent,
 ];
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 const DIRECTIVES = [
   ClickOutsideDirective,
   FileUploadForDirective,
-  ImageDirective
+  ImageDirective,
 ];
 const PIPES = [
   BytesPipe,
   LinefeedToHtmlPipe,
   HtmlToLinefeedPipe,
   DateToStringForChatRoomListPipe,
-  SecondsToMinutesPipe
+  DateToStringFormatPipe,
+  SecondsToMinutesPipe,
 ];
 const SERVICES = [
   BottomSheetService,
   ClipboardService,
   DialogService,
-  SnackBarService
+  SnackBarService,
 ];
 
 @NgModule({
@@ -86,17 +90,17 @@ const SERVICES = [
     MatSnackBarModule,
     MatToolbarModule,
     MatTooltipModule,
-    DragDropModule
+    DragDropModule,
   ],
   exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
   declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES],
-  entryComponents: [...DIALOGS]
+  entryComponents: [...DIALOGS],
 })
 export class UCapUiModule {
   public static forRoot(): ModuleWithProviders<UCapUiModule> {
     return {
       ngModule: UCapUiModule,
-      providers: [...SERVICES]
+      providers: [...SERVICES],
     };
   }
 }

projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts

@@ -2,7 +2,7 @@ import {
   EventType,
   EventJson,
   FileEventJson,
-  MassTextEventJson
+  MassTextEventJson,
 } from '@ucap-webmessenger/protocol-event';
 import { FileType } from '@ucap-webmessenger/protocol-file';
 
@@ -79,7 +79,7 @@ export class StringUtil {
       '수요일',
       '목요일',
       '금요일',
-      '토요일'
+      '토요일',
     ];
 
     const weekKorShortName = ['일', '월', '화', '수', '목', '금', '토'];
@@ -91,56 +91,62 @@ export class StringUtil {
       'Wednesday',
       'Thursday',
       'Friday',
-      'Saturday'
+      'Saturday',
     ];
 
     const weekEngShortName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
-    return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, $1 => {
+    return f.replace(
-      switch ($1) {
+      /(YYYY|yyyy|YY|yy|MM|DD|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi,
-        case 'yyyy':
+      $1 => {
-          return date.getFullYear().toString(); // 년 (4자리)
+        switch ($1) {
+          case 'YYYY':
+          case 'yyyy':
+            return date.getFullYear().toString(); // 년 (4자리)
 
-        case 'yy':
+          case 'YY':
-          return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
+          case 'yy':
+            return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
 
-        case 'MM':
+          case 'MM':
-          return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
+            return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
 
-        case 'dd':
+          case 'DD':
-          return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
+          case 'dd':
+            return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
 
-        case 'KS':
+          case 'KS':
-          return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)
+            return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)
 
-        case 'KL':
+          case 'KL':
-          return weekKorName[date.getDay()]; // 요일 (긴 한글)
+            return weekKorName[date.getDay()]; // 요일 (긴 한글)
 
-        case 'ES':
+          case 'ES':
-          return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)
+            return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)
 
-        case 'EL':
+          case 'EL':
-          return weekEngName[date.getDay()]; // 요일 (긴 영어)
+            return weekEngName[date.getDay()]; // 요일 (긴 영어)
 
-        case 'HH':
+          case 'HH':
-          return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)
+            return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)
 
-        case 'hh':
+          case 'hh':
-          return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)
+            return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)
 
-        case 'mm':
+          case 'mm':
-          return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)
+            return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)
 
-        case 'ss':
+          case 'ss':
-          return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)
+            return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)
 
-        case 'a/p':
+          case 'a/p':
-          return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분
+            return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분
 
-        default:
+          default:
-          return $1;
+            return $1;
+        }
       }
-    });
+    );
   }
 
   public static convertFinalEventMessage(