upload btn and watermark fixes

apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts

@@ -9,6 +9,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { debounce } from '../../../utils/debounce';
 import { WatermarkControllerService, WatermarkModel } from '@redaction/red-ui-http';
 import { NotificationService, NotificationType } from '../../../notification/notification.service';
+import { TranslateService } from '@ngx-translate/core';
 
 export const DEFAULT_WATERMARK: WatermarkModel = {
     text:
@@ -40,6 +41,9 @@ export class WatermarkScreenComponent implements OnInit {
     public configForm: FormGroup;
 
     get changed(): boolean {
+        if (this._watermark === DEFAULT_WATERMARK) {
+            return true;
+        }
         for (const key of Object.keys(this._watermark)) {
             if (this._watermark[key] !== this.configForm.get(key).value) {
                 return true;
@@ -51,6 +55,7 @@ export class WatermarkScreenComponent implements OnInit {
     constructor(
         public readonly permissionsService: PermissionsService,
         public readonly appStateService: AppStateService,
+        private readonly _translateService: TranslateService,
         private readonly _watermarkControllerService: WatermarkControllerService,
         private readonly _notificationService: NotificationService,
         private readonly _fileDownloadService: FileDownloadService,
@@ -62,6 +67,10 @@ export class WatermarkScreenComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        this._loadWatermark();
+    }
+
+    private _loadWatermark() {
         this._watermarkControllerService.getWatermark().subscribe(
             (watermark) => {
                 this._watermark = watermark;
@@ -87,10 +96,15 @@ export class WatermarkScreenComponent implements OnInit {
         };
         this._watermarkControllerService.saveWatermark(watermark).subscribe(
             () => {
-                this._notificationService.showToastNotification('Watermark Saved', null, NotificationType.SUCCESS);
+                this._loadWatermark();
+                this._notificationService.showToastNotification(
+                    this._translateService.instant('watermark-screen.action.success'),
+                    null,
+                    NotificationType.SUCCESS
+                );
             },
             () => {
-                this._notificationService.showToastNotification('Failed to update Watermark', null, NotificationType.ERROR);
+                this._notificationService.showToastNotification(this._translateService.instant('watermark-screen.action.error'), null, NotificationType.ERROR);
             }
         );
     }

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts

@@ -26,7 +26,7 @@ import { StatusSorter } from '../../common/sorters/status-sorter';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { debounce } from '../../utils/debounce';
 import { download } from '../../utils/file-download-utils';
-import { handleFileDrop } from '../../utils/file-drop-utils';
+import { convertFiles, handleFileDrop } from '../../utils/file-drop-utils';
 
 @Component({
     selector: 'redaction-project-overview-screen',
@@ -185,7 +185,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
     @HostListener('drop', ['$event'])
     onDrop(event: DragEvent) {
-        handleFileDrop(event, this.uploadFiles.bind(this));
+        handleFileDrop(event, this._uploadFiles.bind(this));
     }
 
     @HostListener('dragover', ['$event'])
@@ -194,7 +194,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         event.preventDefault();
     }
 
-    uploadFiles(files: FileUploadModel[]) {
+    uploadFiles(files: File[] | FileList) {
+        this._uploadFiles(convertFiles(files));
+    }
+
+    private _uploadFiles(files: FileUploadModel[]) {
         this._fileUploadService.uploadFiles(files);
         this._uploadStatusOverlayService.openStatusOverlay();
         this._changeDetectorRef.detectChanges();

apps/red-ui/src/app/utils/file-drop-utils.ts

@@ -13,15 +13,15 @@ export function handleFileDrop(event: DragEvent, uploadFiles: (files: FileUpload
             }
         }
         dataTransfer.items.clear();
-        uploadFiles(convert(files));
+        uploadFiles(convertFiles(files));
     } else {
         const files = dataTransfer.files;
         dataTransfer.clearData();
-        uploadFiles(convert(files));
+        uploadFiles(convertFiles(files));
     }
 }
 
-function convert(files: FileList | File[]): FileUploadModel[] {
+export function convertFiles(files: FileList | File[]): FileUploadModel[] {
     const uploadFiles: FileUploadModel[] = [];
     for (let i = 0; i < files.length; i++) {
         const file = files[i];

apps/red-ui/src/assets/i18n/en.json

@@ -621,7 +621,9 @@
         },
         "action": {
             "save": "Save",
-            "revert": "Revert"
+            "revert": "Revert",
+            "success": "Watermark updated!",
+            "error": "Failed to update Watermark"
         },
         "title": "Configure Watermark"
     },