From 3b4dfd07d95650252978a0445ed742ef87893a80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 9 Dec 2020 13:29:25 +0200
Subject: [PATCH 1/2] Download rules and dictionary

---
 .../dictionary-overview-screen.component.html      | 13 +++++++++++--
 .../dictionary-overview-screen.component.ts        |  9 +++++++++
 .../admin/rules-screen/rules-screen.component.html | 10 ++++++++--
 .../admin/rules-screen/rules-screen.component.ts   |  9 +++++++++
 apps/red-ui/src/assets/i18n/en.json                | 14 +++++++++++++-
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index 0f59ab022..93f51e490 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -6,16 +6,25 @@
             <redaction-circle-button
                 (action)="openDeleteDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
-                tooltip="dictionary-listing.action.delete"
+                tooltip="dictionary-overview.action.delete"
+                tooltipPosition="below"
                 type="dark-bg"
                 icon="red:trash"
             >
             </redaction-circle-button>
 
+            <redaction-circle-button
+                (action)="download()"
+                tooltip="dictionary-overview.action.download"
+                tooltipPosition="below"
+                icon="red:download"
+            ></redaction-circle-button>
+
             <redaction-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
-                tooltip="dictionary-listing.action.edit"
+                tooltip="dictionary-overview.action.edit"
+                tooltipPosition="below"
                 type="dark-bg"
                 icon="red:edit"
             >
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
index 0ab7998f2..f1f6dca33 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
@@ -9,6 +9,7 @@ import { debounce } from '../../../utils/debounce';
 import { NotificationService, NotificationType } from '../../../notification/notification.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
+import { saveAs } from 'file-saver';
 
 declare var ace;
 
@@ -240,4 +241,12 @@ export class DictionaryOverviewScreenComponent {
         this.editorComponent.getEditor().scrollToLine(position.row, true, true, () => {});
         this.editorComponent.getEditor().gotoLine(position.row + 1, position.column, true);
     }
+
+    public download(): void {
+        const content = this.editorComponent.getEditor().getValue();
+        const blob = new Blob([content], {
+            type: 'text/plain;charset=utf-8'
+        });
+        saveAs(blob, `${this.dictionary.label}.txt`);
+    }
 }
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index c9f25d3b3..9268b4b28 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -2,6 +2,12 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
         <div class="actions">
+            <redaction-circle-button
+                (action)="download()"
+                tooltip="rules-screen.action.download"
+                tooltipPosition="before"
+                icon="red:download"
+            ></redaction-circle-button>
             <redaction-circle-button
                 class="ml-6"
                 *ngIf="permissionsService.isUser()"
@@ -33,13 +39,13 @@
                 *ngIf="permissionsService.isAdmin()"
                 icon="red:check"
                 (action)="save()"
-                text="dictionary-overview.save-changes"
+                text="rules-screen.save-changes"
                 [primary]="true"
             ></redaction-icon-button>
             <redaction-icon-button
                 *ngIf="permissionsService.isAdmin()"
                 (action)="revert()"
-                text="dictionary-overview.revert-changes"
+                text="rules-screen.revert-changes"
                 [linkButton]="true"
             ></redaction-icon-button>
         </div>
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
index a0070adf5..31fdcb670 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
@@ -4,6 +4,7 @@ import { AceEditorComponent } from 'ng2-ace-editor';
 import { RulesControllerService } from '@redaction/red-ui-http';
 import { NotificationService, NotificationType } from '../../../notification/notification.service';
 import { TranslateService } from '@ngx-translate/core';
+import { saveAs } from 'file-saver';
 
 declare var ace;
 
@@ -95,4 +96,12 @@ export class RulesScreenComponent {
         this.editorComponent.getEditor().clearSelection();
         this.processing = false;
     }
+
+    public download(): void {
+        const content = this.editorComponent.getEditor().getValue();
+        const blob = new Blob([content], {
+            type: 'text/plain;charset=utf-8'
+        });
+        saveAs(blob, 'rules.txt');
+    }
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index c6eb0f74f..6ebd3bb9d 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -503,6 +503,12 @@
         "save": "Save Dictionary"
     },
     "dictionary-overview": {
+        "action": {
+            "delete": "Delete Dictionary",
+            "edit": "Edit Dictionary",
+            "download": "Download Dictionary",
+            "upload": "Upload Dictionary"
+        },
         "error": {
             "entries-too-short": "Some entries of the dictionary are below the minimum length of 2. These are highlighted with red!",
             "generic": "Something went wrong... Dictionary update failed!"
@@ -552,7 +558,13 @@
         },
         "success": {
             "generic": "Rules updated!"
-        }
+        },
+        "action": {
+            "download": "Download Rules",
+            "upload": "Upload Rules"
+        },
+        "save-changes": "Save Changes",
+        "revert-changes": "Revert"
     },
     "dictionaries": "Dictionaries",
     "user-management": "User Management",

From fdd551f361bb810ac62b1ba71373676061dfa471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 9 Dec 2020 14:38:26 +0200
Subject: [PATCH 2/2] Upload rules and dictionary

---
 .../dictionary-overview-screen.component.html | 24 +++++++++++++------
 .../dictionary-overview-screen.component.ts   | 18 +++++++++++++-
 .../rules-screen/rules-screen.component.html  | 14 ++++++++++-
 .../rules-screen/rules-screen.component.ts    | 18 +++++++++++++-
 4 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index 93f51e490..a745b3f31 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -13,13 +13,6 @@
             >
             </redaction-circle-button>
 
-            <redaction-circle-button
-                (action)="download()"
-                tooltip="dictionary-overview.action.download"
-                tooltipPosition="below"
-                icon="red:download"
-            ></redaction-circle-button>
-
             <redaction-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
@@ -30,6 +23,23 @@
             >
             </redaction-circle-button>
 
+            <redaction-circle-button
+                (action)="download()"
+                tooltip="dictionary-overview.action.download"
+                tooltipPosition="below"
+                icon="red:download"
+            ></redaction-circle-button>
+
+            <redaction-circle-button
+                *ngIf="permissionsService.isAdmin()"
+                (action)="fileInput.click()"
+                tooltip="dictionary-overview.action.upload"
+                tooltipPosition="below"
+                icon="red:upload"
+            ></redaction-circle-button>
+
+            <input #fileInput (change)="upload($event)" hidden class="file-upload-input" type="file" accept="text/plain" />
+
             <redaction-circle-button
                 class="ml-6"
                 [routerLink]="['/ui/admin/dictionaries/']"
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
index f1f6dca33..d396d207d 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { DictionaryControllerService, TypeValue } from '@redaction/red-ui-http';
 import { DialogService } from '../../../dialogs/dialog.service';
 import { AppStateService } from '../../../state/app-state.service';
@@ -42,6 +42,9 @@ export class DictionaryOverviewScreenComponent {
 
     processing = true;
 
+    @ViewChild('fileInput')
+    private _fileInput: ElementRef;
+
     constructor(
         public readonly permissionsService: PermissionsService,
         private readonly _notificationService: NotificationService,
@@ -249,4 +252,17 @@ export class DictionaryOverviewScreenComponent {
         });
         saveAs(blob, `${this.dictionary.label}.txt`);
     }
+
+    public upload($event): void {
+        const file = $event.target.files[0];
+        const fileReader = new FileReader();
+
+        if (file) {
+            fileReader.onload = () => {
+                this.editorComponent.getEditor().setValue(fileReader.result);
+                this._fileInput.nativeElement.value = null;
+            };
+            fileReader.readAsText(file);
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index 9268b4b28..b8f9f38a3 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -5,9 +5,21 @@
             <redaction-circle-button
                 (action)="download()"
                 tooltip="rules-screen.action.download"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:download"
             ></redaction-circle-button>
+
+            <redaction-circle-button
+                (action)="fileInput.click()"
+                *ngIf="permissionsService.isAdmin()"
+                tooltip="rules-screen.action.upload"
+                tooltipPosition="below"
+                icon="red:upload"
+            >
+            </redaction-circle-button>
+
+            <input #fileInput (change)="upload($event)" hidden class="file-upload-input" type="file" accept="text/plain" />
+
             <redaction-circle-button
                 class="ml-6"
                 *ngIf="permissionsService.isUser()"
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
index 31fdcb670..bb35a74f0 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { PermissionsService } from '../../../common/service/permissions.service';
 import { AceEditorComponent } from 'ng2-ace-editor';
 import { RulesControllerService } from '@redaction/red-ui-http';
@@ -26,6 +26,9 @@ export class RulesScreenComponent {
     @ViewChild('editorComponent', { static: true })
     editorComponent: AceEditorComponent;
 
+    @ViewChild('fileInput')
+    private _fileInput: ElementRef;
+
     constructor(
         public readonly permissionsService: PermissionsService,
         private readonly _rulesControllerService: RulesControllerService,
@@ -104,4 +107,17 @@ export class RulesScreenComponent {
         });
         saveAs(blob, 'rules.txt');
     }
+
+    public upload($event): void {
+        const file = $event.target.files[0];
+        const fileReader = new FileReader();
+
+        if (file) {
+            fileReader.onload = () => {
+                this.editorComponent.getEditor().setValue(fileReader.result);
+                this._fileInput.nativeElement.value = null;
+            };
+            fileReader.readAsText(file);
+        }
+    }
 }