Download rules and dictionary

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"
             >

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

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>

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

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",