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] 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);
+        }
+    }
 }