Tinymce fix notifications

.wvr/build-config.js

@@ -70,24 +70,6 @@ const config = {
       from: './node_modules/bootstrap/dist/css/bootstrap.min.css.map',
       to: './resources/styles/bootstrap/dist/css/bootstrap.min.css.map',
     },
-    {
-      from: './node_modules/tinymce/plugins/**/plugin.js',
-      to({ context, absoluteFilename }) {
-        return `${absoluteFilename.replace(/^.*\/node_modules\/tinymce\/plugins\//, "plugins/")}`;
-      },
-    },
-    {
-      from: './node_modules/tinymce/themes/**/theme.js',
-      to({ context, absoluteFilename }) {
-        return `${absoluteFilename.replace(/^.*\/node_modules\/tinymce\/themes\//, "themes/")}`;
-      },
-    },
-    {
-      from: './node_modules/tinymce/skins/**/*.css',
-      to({ context, absoluteFilename }) {
-        return `${absoluteFilename.replace(/^.*\/node_modules\/tinymce\/skins\//, "skins/")}`;
-      },
-    },
   ],
   entry: {
     app: [

app/controllers/notificationController.js

@@ -1,4 +1,4 @@
-app.controller('NotificationController', function ($controller, $scope, Notification, NotificationRepo, NgTableParams) {
+app.controller('NotificationController', function ($controller, $scope, $timeout, Notification, NotificationRepo, NgTableParams) {
 
     angular.extend(this, $controller('AbstractScheduleController', {
         $scope: $scope
@@ -27,24 +27,27 @@ app.controller('NotificationController', function ($controller, $scope, Notifica
 
     $scope.forms = {};
 
-    $scope.notificationToDelete = {};
+    var emptyNotification = {
+        name: '',
+        body: '',
+        active: false,
+        locations: []
+    };
+
+    $scope.notificationToDelete = new Notification(emptyNotification);
+
+    $scope.notificationData = new Notification(emptyNotification);
 
     $scope.resetNotifications = function () {
-        if ($scope.notificationData) {
-            $scope.notificationData.refresh();
-            $scope.notificationData.clearValidationResults();
-        }
+        $scope.notificationData.refresh();
+        $scope.notificationData.clearValidationResults();
+
         for (var key in $scope.forms) {
             if (!$scope.forms[key].$pristine) {
                 $scope.forms[key].$setPristine();
             }
         }
-        $scope.notificationData = new Notification({
-            name: '',
-            body: '',
-            active: false,
-            locations: []
-        });
+        Object.assign($scope.notificationData, emptyNotification);
         $scope.closeModal();
     };
 
@@ -59,8 +62,17 @@ app.controller('NotificationController', function ($controller, $scope, Notifica
     };
 
     $scope.editNotification = function (notification) {
-        $scope.notificationData = notification;
-        $scope.openModal('#editNotificationModal');
+        Object.assign($scope.notificationData, notification);
+        $timeout(function () {
+            $scope.openModal('#editNotificationModal');
+            var modal = angular.element('#editNotificationModal');
+            if (modal) {
+                var iframe = modal.find("iframe");
+                if (iframe && iframe.length >= 1) {
+                    iframe[0].contentDocument.body.innerHTML = notification.body;
+                }
+            }
+        });
     };
 
     $scope.updateNotification = function () {
@@ -73,8 +85,10 @@ app.controller('NotificationController', function ($controller, $scope, Notifica
     };
 
     $scope.confirmDelete = function (notification) {
-        $scope.openModal('#deleteNotificationModal');
-        $scope.notificationToDelete = notification;
+        Object.assign($scope.notificationToDelete, notification);
+        $timeout(function() {
+            $scope.openModal('#deleteNotificationModal');
+        });
     };
 
     $scope.deleteNotification = function () {
@@ -83,7 +97,7 @@ app.controller('NotificationController', function ($controller, $scope, Notifica
             if (angular.fromJson(res.body).meta.status === 'SUCCESS') {
                 $scope.closeModal();
                 $scope.deleting = false;
-                $scope.notificationToDelete = {};
+                Object.assign($scope.notificationToDelete, emptyNotification);
                 $scope.tableParams.reload();
             }
         });
@@ -111,17 +125,19 @@ app.controller('NotificationController', function ($controller, $scope, Notifica
 
     NotificationRepo.ready().then(function () {
         buildTable();
+
+        document.addEventListener("contentSave", function (e) {
+            $scope.notificationData.body = e.detail.data;
+            $scope.save();
+        });
+
+        $scope.save = function () {
+            $scope.notificationData.body = encodeURIComponent($scope.notificationData.body);
+            $scope.notificationData.update($scope.notificationData);
+            $scope.notificationData.body = decodeURIComponent($scope.notificationData.body);
+        };
+
         $scope.tableParams.reload();
     });
 
-    $scope.tinymceOptions = {
-        selector: 'textarea',
-        theme: "modern",
-        plugins: "link lists",
-        toolbar: "undo redo | formatselect bold italic separator | alignleft aligncenter alignright | numlist bullist | forecolor backcolor",
-        relative_urls: false,
-        remove_script_host : false,
-        convert_urls : true
-    };
-
 });

app/views/modals/addNotificationModal.html

@@ -14,7 +14,7 @@ <h3 class="modal-title">Add Notification</h3>
 
     <label>Notification Body</label>
     <div class="alert alert-wrapper alert-danger" ng-if="notificationRepo.getValidationResults().messages.body.minlength">{{ notificationRepo.getValidationResults().messages.body.minlength }}</div>
-    <textarea ui-tinymce="tinymceOptions" ng-model="notificationData.body"></textarea>
+    <tl-wysiwyg initial-value="{{notificationData.body}}" emit-event="contentSave"></tl-wysiwyg>
     <br />
 
     <label for="locationSelect">Locations</label>

app/views/modals/editNotificationModal.html

@@ -13,7 +13,8 @@ <h3 class="modal-title">Edit Notification</h3>
     <validatedinput model="notificationData" property="name" label="Name" placeholder="Name of the Notification" form="forms.update" validations="notificationRepo.getValidations()" results="notificationRepo.getValidationResults()"></validatedinput>
 
     <label>Notification Body</label>
-    <textarea ui-tinymce="tinymceOptions" ng-model="notificationData.body"></textarea>
+    <tl-wysiwyg class="edit-notification-wysiwyg" initial-value="{{notificationData.body}}" emit-event="contentSave"></tl-wysiwyg>
+
     <br />
 
     <label for="locationSelect">Locations</label>

package.json

@@ -27,8 +27,7 @@
     "@wvr/core": "2.2.6",
     "angular-ui-tinymce": "0.0.19",
     "ng-csv": "0.3.6",
-    "ng-table": "3.0.1",
-    "tinymce": "7.0.0"
+    "ng-table": "3.0.1"
   },
   "devDependencies": {
   },

tests/unit/controllers/notificationControllerTest.js

@@ -9,10 +9,11 @@ describe('controller: NotificationController', function () {
         module('mock.notification');
         module('mock.notificationRepo');
 
-        inject(function ($controller, $q, $rootScope, _NgTableParams_, _Notification_, _NotificationRepo_) {
+        inject(function ($controller, $q, $rootScope, $timeout, _NgTableParams_, _Notification_, _NotificationRepo_) {
             installPromiseMatchers();
             q = $q;
             scope = $rootScope.$new();
+            timeout = $timeout;
 
             controller = $controller('NotificationController', {
                 $scope: scope,
@@ -72,13 +73,14 @@ describe('controller: NotificationController', function () {
 
     describe('Are the scope methods working as expected', function () {
         it('resetNotifications should reset notifications', function () {
-            var notification;
-            scope.notificationData = null;
+            var notification = new Notification();
+            scope.notificationData = notification;
             scope.closeModal = function() {};
 
             spyOn(scope, 'closeModal');
 
             scope.resetNotifications();
+            scope.$digest();
 
             expect(scope.closeModal).toHaveBeenCalled();
             expect(scope.ideaData).not.toEqual(null);
@@ -109,14 +111,14 @@ describe('controller: NotificationController', function () {
             expect(notification.clearValidationResults).toHaveBeenCalled();
         });
         it('editNotification should open a modal', function () {
-            scope.notificationData = null;
             scope.openModal = function(name) { };
 
             spyOn(scope, 'openModal');
 
             scope.editNotification(mockNotification1);
+            timeout.flush();
+            scope.$digest();
 
-            expect(scope.notificationData).toEqual(mockNotification1);
             expect(scope.openModal).toHaveBeenCalled();
         });
 
@@ -133,14 +135,14 @@ describe('controller: NotificationController', function () {
             expect(scope.notificationRepo.update).toHaveBeenCalled();
         });
         it('confirmDelete should should open a modal', function () {
-            scope.notificationToDelete = null;
             scope.openModal = function(name) { };
 
             spyOn(scope, 'openModal');
 
             scope.confirmDelete(mockNotification1);
+            timeout.flush();
+            scope.$digest();
 
-            expect(scope.notificationToDelete).toEqual(mockNotification1);
             expect(scope.openModal).toHaveBeenCalled();
         });
         it('deleteNotification should delete a notification', function () {