clipboard now works across tabs

Author: abainczyk

frontend/src/main/javascript/src/js/components/views/symbol-view/symbol-view.component.js

@@ -18,6 +18,7 @@ import remove from 'lodash/remove';
 import uniqueId from 'lodash/uniqueId';
 import {AlphabetSymbol} from '../../../entities/alphabet-symbol';
 import {ParametrizedSymbol} from '../../../entities/parametrized-symbol';
+import {ClipboardService} from '../../../services/clipboard.service';
 import {Selectable} from '../../../utils/selectable';
 
 /**
@@ -222,7 +223,7 @@ class SymbolViewComponent {
             steps.forEach(step => {
                 delete step._id;
             });
-            this.ClipboardService.copy('symbolSteps', steps);
+            this.ClipboardService.copy(this.project.id, 'symbolSteps', steps);
             this.ToastService.info(steps.length + ' steps copied to clipboard');
         }
     }
@@ -231,7 +232,7 @@ class SymbolViewComponent {
         const s = AlphabetSymbol.stepsToJson(step);
         delete s._id;
 
-        this.ClipboardService.copy('symbolSteps', [s]);
+        this.ClipboardService.copy(this.project.id, 'symbolSteps', [s]);
         this.ToastService.info('The action has been copied to the clipboard.');
     }
 
@@ -243,7 +244,7 @@ class SymbolViewComponent {
             cpy.forEach(step => {
                 delete step._id;
             });
-            this.ClipboardService.cut('symbolSteps', cpy);
+            this.ClipboardService.copy(this.project.id, 'symbolSteps', cpy, ClipboardService.Mode.CUT);
             this.deleteSteps(steps);
             this.ToastService.info(steps.length + ' steps cut to clipboard');
         }
@@ -253,7 +254,7 @@ class SymbolViewComponent {
         const s = AlphabetSymbol.stepsToJson(step);
         delete s._id;
 
-        this.ClipboardService.cut('symbolSteps', [s]);
+        this.ClipboardService.copy(this.project.id, 'symbolSteps', [s], ClipboardService.Mode.CUT);
         this.deleteSteps([step]);
         this.ToastService.info('The action has been copied to the clipboard.');
     }
@@ -262,7 +263,7 @@ class SymbolViewComponent {
      * Pastes the actions from the clipboard to the end of of the action list.
      */
     pasteSteps() {
-        let steps = this.ClipboardService.paste('symbolSteps');
+        let steps = this.ClipboardService.paste(this.project.id, 'symbolSteps');
         if (steps != null) {
             steps.forEach(step => {
                 step._id = uniqueId();

frontend/src/main/javascript/src/js/components/views/test-suite-view/test-suite-view.component.js

@@ -386,15 +386,15 @@ export const testSuiteViewComponent = {
             if (tests.length > 0) {
                 tests = JSON.parse(JSON.stringify(tests));
                 tests = this.TestService.exportTests(tests);
-                this.ClipboardService.copy('tests', tests);
+                this.ClipboardService.copy(this.project.id, 'tests', tests);
                 this.ToastService.info('Tests copied to clipboard.');
             } else {
                 this.ToastService.info('You have to select at least one test');
             }
         }
 
         pasteTests() {
-            const tests = this.ClipboardService.paste('tests');
+            const tests = this.ClipboardService.paste(this.project.id, 'tests');
             if (tests != null) {
                 this.TestService.importTests(this.project.id, tests, this.testSuite.id)
                     .then((importedTests) => {

frontend/src/main/javascript/src/js/services/clipboard.service.js

@@ -19,59 +19,65 @@
  */
 export class ClipboardService {
 
-    /**
-     * Constructor.
-     */
+    /** Constructor. */
     constructor() {
-
-        /**
-         * The map of clipboard entries.
-         * @type {Object}
-         */
-        this.entries = {};
+        // initialize clipboard
+        const clipboard = localStorage.getItem('clipboard');
+        if (clipboard == null) {
+            localStorage.setItem('clipboard', JSON.stringify({}));
+        }
     }
 
     /**
      * Copies an item to the Clipboard.
      *
-     * @param {string} key - The key the data is saved under.
-     * @param {any} data - the data to copy to the clipboard.
+     * @param {number} projectId The ID of the project.
+     * @param {string} key The key the data is saved under.
+     * @param {any} data The data to copy to the clipboard.
+     * @param {string} mode The mode for copying.
      */
-    copy(key, data) {
-        this.entries[key] = {
-            data,
-            mode: 'copy'
-        };
-    }
+    copy(projectId, key, data, mode = ClipboardService.Mode.COPY) {
+        const clipboard = JSON.parse(localStorage.getItem('clipboard'));
+        if (clipboard[projectId] == null) {
+            clipboard[projectId] = {};
+        }
 
-    /**
-     * Cuts an item to the clipboard.
-     *
-     * @param {string} key - The key under which the data is accessed.
-     * @param {any} data - The data to store.
-     */
-    cut(key, data) {
-        this.entries[key] = {
+        clipboard[projectId][key] = {
             data,
-            mode: 'cut'
+            mode
         };
+
+        localStorage.setItem('clipboard', JSON.stringify(clipboard));
     }
 
     /**
      * Pastes an item from the clipboard. Deletes the item if mode has been 'cut'.
      *
-     * @param {string} key - The key whose data to get.
-     * @returns {any|null}
+     * @param {number} projectId The ID of the project.
+     * @param {string} key The key whose data to get.
+     * @returns {?any}
      */
-    paste(key) {
-        if (this.entries[key]) {
-            const item = this.entries[key];
-            if (item.mode === 'cut') {
-                delete this.entries[key];
+    paste(projectId, key) {
+        const clipboard = JSON.parse(localStorage.getItem('clipboard'));
+        const entry = clipboard[projectId][key];
+        if (entry) {
+            if (entry.mode === ClipboardService.Mode.CUT) {
+                delete clipboard[projectId][key];
+                localStorage.setItem('clipboard', JSON.stringify(clipboard));
             }
-            return item.data;
+            return entry.data;
         } else {
             return null;
         }
     }
+
+    /** Clear the clipboard. */
+    clear() {
+        localStorage.setItem('clipboard', JSON.stringify({}));
+    }
 }
+
+ClipboardService.Mode = {
+    COPY: 'copy',
+    CUT: 'cut'
+};

frontend/src/main/javascript/src/js/services/user.service.js

@@ -22,10 +22,12 @@ export class UserService {
      * Constructor.
      *
      * @param {ProjectService} ProjectService
+     * @param {ClipboardService} ClipboardService
      */
     // @ngInject
-    constructor(ProjectService) {
+    constructor(ProjectService, ClipboardService) {
         this.projectService = ProjectService;
+        this.clipboardService = ClipboardService;
 
         /**
          * The store.
@@ -48,6 +50,7 @@ export class UserService {
     }
 
     login(user, jwt = null) {
+        this.clipboardService.clear();
         localStorage.setItem('user', JSON.stringify(user));
         this.store.currentUser = user;
         if (jwt) {
@@ -62,5 +65,6 @@ export class UserService {
         this.store.currentUser = null;
         this.store.jwt = null;
         this.projectService.reset();
+        this.clipboardService.clear();
     }
 }