파일 뷰어에 다른이름 저장 기능 추가.

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html

@@ -4,5 +4,6 @@
   [imageOnly]="imageOnly"
   [imageOnlyData]="imageOnlyData"
   (download)="onDownload($event)"
+  (saveAs)="onSaveAs($event)"
   (closed)="onClosedViewer()"
 ></ucap-file-viewer>

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

@@ -7,7 +7,9 @@ import { DeviceType } from '@ucap-webmessenger/core';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { AppFileService } from '@app/services/file.service';
-import { ImageOnlyDataInfo } from '@ucap-webmessenger/ui';
+import { ImageOnlyDataInfo, SnackBarService } from '@ucap-webmessenger/ui';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
+import { TranslateService } from '@ngx-translate/core';
 
 export interface FileViewerDialogData {
   fileInfo: FileEventJson;
@@ -46,6 +48,9 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: FileViewerDialogData,
     private commonApiService: CommonApiService,
     private appFileService: AppFileService,
+    private translateService: TranslateService,
+    private snackBarService: SnackBarService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private logger: NGXLogger
   ) {
     this.fileInfo = data.fileInfo;
@@ -91,6 +96,47 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
       fileDownloadUrl: this.downloadUrl
     });
   }
+  onSaveAs(fileDownloadItem: FileDownloadItem): void {
+    this.nativeService
+      .selectSaveFilePath(this.fileInfo.fileName)
+      .then(result => {
+        if (!result) {
+          return;
+        }
+
+        if (result.canceled) {
+          // this.snackBarService.open(
+          //   this.translateService.instant('common.file.results.canceled'),
+          //   this.translateService.instant('common.file.errors.label'),
+          //   {
+          //     duration: 1000
+          //   }
+          // );
+        } else {
+          this.saveFile(fileDownloadItem, result.filePath);
+        }
+      })
+      .catch(reason => {
+        this.snackBarService.open(
+          this.translateService.instant('common.file.errors.failToSpecifyPath'),
+          this.translateService.instant('common.file.errors.label')
+        );
+      });
+  }
+
+  saveFile(fileDownloadItem: FileDownloadItem, savePath?: string) {
+    this.appFileService.fileTalkDownlod({
+      req: {
+        userSeq: this.userSeq,
+        deviceType: this.deviceType,
+        token: this.token,
+        attachmentsSeq: this.fileInfo.attachmentSeq,
+        fileDownloadItem
+      },
+      fileName: this.fileInfo.fileName,
+      savePath
+    });
+  }
 
   onClosedViewer(): void {
     this.dialogRef.close();

projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html

@@ -16,6 +16,7 @@
     [imageOnly]="imageOnly"
     [imageOnlyData]="imageOnlyData"
     (download)="onDownload($event)"
+    (saveAs)="onSaveAs($event)"
     (closed)="onClosedViewer()"
   ></ucap-image-viewer>
   <ucap-sound-viewer
@@ -30,6 +31,7 @@
     [fileInfo]="fileInfo"
     [fileDownloadUrl]="fileDownloadUrl"
     (download)="onDownload($event)"
+    (saveAs)="onSaveAs($event)"
     (closed)="onClosedViewer()"
   ></ucap-video-viewer>
   <ucap-binary-viewer
@@ -37,6 +39,7 @@
     [fileInfo]="fileInfo"
     [fileDownloadUrl]="fileDownloadUrl"
     (download)="onDownload($event)"
+    (saveAs)="onSaveAs($event)"
     (closed)="onClosedViewer()"
   ></ucap-binary-viewer>
 </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts

@@ -26,6 +26,8 @@ export class FileViewerComponent implements OnInit {
 
   @Output()
   download = new EventEmitter<FileDownloadItem>();
+  @Output()
+  saveAs = new EventEmitter<FileDownloadItem>();
 
   @Output()
   closed = new EventEmitter<void>();
@@ -58,6 +60,9 @@ export class FileViewerComponent implements OnInit {
   onDownload(fileDownloadItem: FileDownloadItem): void {
     this.download.emit(fileDownloadItem);
   }
+  onSaveAs(fileDownloadItem: FileDownloadItem): void {
+    this.saveAs.emit(fileDownloadItem);
+  }
 
   onClosedViewer(): void {
     this.closed.emit();

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html

@@ -44,6 +44,31 @@
         />
       </svg>
     </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
+      </svg>
+    </button>
     <span class="stroke-bar"></span>
     <button
       mat-icon-button
@@ -94,7 +119,7 @@
       <div class="guide-msg">
         {{ 'common.file.errors.noPreview' | translate }}
       </div>
-      <div>
+      <div class="btn-group">
         <button
           colori
           mat-raised-button
@@ -103,6 +128,14 @@
         >
           {{ 'common.file.download' | translate }}
         </button>
+        <button
+          colori
+          mat-raised-button
+          aria-label=""
+          (click)="onClickSaveAs()"
+        >
+          {{ 'common.file.saveAs' | translate }}
+        </button>
       </div>
     </div>
   </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss

@@ -60,5 +60,10 @@
       margin: 30px;
       color: #ffffff;
     }
+    .btn-group {
+      button {
+        margin: 0 5px;
+      }
+    }
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts

@@ -18,6 +18,8 @@ export class BinaryViewerComponent implements OnInit {
 
   @Output()
   download = new EventEmitter<FileDownloadItem>();
+  @Output()
+  saveAs = new EventEmitter<FileDownloadItem>();
 
   @Output()
   closed = new EventEmitter<void>();
@@ -33,6 +35,11 @@ export class BinaryViewerComponent implements OnInit {
     this.download.emit(this.fileDownloadItem);
   }
 
+  onClickSaveAs(): void {
+    this.fileDownloadItem = new FileDownloadItem();
+    this.saveAs.emit(this.fileDownloadItem);
+  }
+
   onClickClose(): void {
     this.closed.emit();
   }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -136,6 +136,32 @@
         />
       </svg>
     </button>
+    <button
+      *ngIf="!imageOnly"
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
+      </svg>
+    </button>
     <span class="stroke-bar"></span>
     <button
       mat-icon-button

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts

@@ -39,6 +39,8 @@ export class ImageViewerComponent implements OnInit {
 
   @Output()
   download = new EventEmitter<FileDownloadItem>();
+  @Output()
+  saveAs = new EventEmitter<FileDownloadItem>();
 
   @ViewChild('imageContainer', { static: false })
   imageContainer: ElementRef<HTMLElement>;
@@ -73,6 +75,11 @@ export class ImageViewerComponent implements OnInit {
     this.download.emit(this.fileDownloadItem);
   }
 
+  onClickSaveAs(): void {
+    this.fileDownloadItem = new FileDownloadItem();
+    this.saveAs.emit(this.fileDownloadItem);
+  }
+
   onClickClose(): void {
     this.closed.emit();
   }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html

@@ -28,6 +28,31 @@
         />
       </svg>
     </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
+      </svg>
+    </button>
     <span class="stroke-bar"></span>
     <button
       mat-icon-button

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts

@@ -27,6 +27,8 @@ export class SoundViewerComponent implements OnInit {
 
   @Output()
   download = new EventEmitter<FileDownloadItem>();
+  @Output()
+  saveAs = new EventEmitter<FileDownloadItem>();
 
   @Output()
   closed = new EventEmitter<void>();
@@ -95,6 +97,11 @@ export class SoundViewerComponent implements OnInit {
     this.download.emit(this.fileDownloadItem);
   }
 
+  onClickSaveAs(): void {
+    this.fileDownloadItem = new FileDownloadItem();
+    this.saveAs.emit(this.fileDownloadItem);
+  }
+
   onClickClose(): void {
     this.closed.emit();
   }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html

@@ -49,6 +49,31 @@
         />
       </svg>
     </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
+      </svg>
+    </button>
     <span class="stroke-bar"></span>
     <button
       mat-icon-button

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts

@@ -30,6 +30,8 @@ export class VideoViewerComponent implements OnInit {
 
   @Output()
   download = new EventEmitter<FileDownloadItem>();
+  @Output()
+  saveAs = new EventEmitter<FileDownloadItem>();
 
   @Output()
   closed = new EventEmitter<void>();
@@ -116,6 +118,11 @@ export class VideoViewerComponent implements OnInit {
     this.download.emit(this.fileDownloadItem);
   }
 
+  onClickSaveAs(): void {
+    this.fileDownloadItem = new FileDownloadItem();
+    this.saveAs.emit(this.fileDownloadItem);
+  }
+
   onClickClose(): void {
     this.closed.emit();
   }