Merge pull request #1207 from WISE-Community/issue-920-malformed-json…

…-warning

Improved the JSON authoring view

src/main/webapp/wise5/authoringTool/authoringToolController.es6

@@ -266,6 +266,11 @@ class AuthoringToolController {
     } else {
       this.projectTitle = null;
     }
+    this.turnOffJSONValidMessage();
+  }
+
+  turnOffJSONValidMessage() {
+    this.$rootScope.$broadcast('setIsJSONValid', { isJSONValid: null });
   }
 
   /**

src/main/webapp/wise5/authoringTool/components/shared/toolbar/toolbar.es6

@@ -11,6 +11,9 @@ class ToolbarController {
       }
       this.globalMessage = params.globalMessage;
     });
+    this.$rootScope.$on('setIsJSONValid', (event, params) => {
+      this.isJSONValid = params.isJSONValid;
+    });
   }
 
   toggleMenu() {
@@ -39,6 +42,8 @@ const Toolbar = {
         <span class="toolbar__title" ng-if="!$ctrl.showStepTools">{{ $ctrl.viewName }}</span>
         <step-tools ng-if="$ctrl.showStepTools" show-position="$ctrl.numberProject"></step-tools>
         <div flex></div>
+        <span ng-if="$ctrl.isJSONValid === true" style="color: green; font-size: 16px"><md-icon style="color:green; margin-top: -4px;">done</md-icon><span>{{ 'jsonValid' | translate }}</span></span>
+        <span ng-if="$ctrl.isJSONValid === false" style="color: red; font-size: 16px"><md-icon style="color:red; margin-top: -4px;">clear</md-icon><span>{{ 'jsonInvalid' | translate }}</span></span>
         <div style="width: 40px; height: 40px;">
           <md-progress-circular ng-if="$ctrl.isProgressIndicatorVisible"
               md-mode="indeterminate"

src/main/webapp/wise5/authoringTool/i18n/i18n_en.json

@@ -161,6 +161,8 @@
     "isVisitable": "Is Visitable",
     "isVisited": "Is Visited",
     "json": "JSON",
+    "jsonInvalid": "JSON Invalid",
+    "jsonValid": "JSON Valid",
     "labelLink": "Label (Link)",
     "labelPlural": "Label (Plural)",
     "labelSingular": "Label (Singular)",
@@ -225,6 +227,7 @@
     "projectCreatedOn": "Project created on ",
     "projectHome": "Project Home",
     "projectJSON": "Project JSON",
+    "jsonInvalidErrorMessage": "The JSON is invalid. Invalid JSON will not be saved.\nClick \"OK\" to revert back to the last valid JSON.\nClick \"Cancel\" to keep the invalid JSON open so you can fix it.",
     "projectsList": "Projects List",
     "projectStyles": "Project Styles",
     "projectStructure": "Project Structure",

src/main/webapp/wise5/authoringTool/node/node.html

@@ -795,7 +795,9 @@ <h6 ng-if='projectController.isGroupNode(nodeAuthoringController.nodeId)'>{{ 'ed
       <h6 ng-if='!projectController.isGroupNode(nodeAuthoringController.nodeId)'>{{ 'editStepJSON' | translate }}</h6>
       <md-input-container style='width: 100%;'>
         <textarea ng-model='nodeAuthoringController.authoringNodeContentJSONString'
-              style='width: 90%; border: 1px solid black;'></textarea>
+            ng-change='nodeAuthoringController.autoSaveJSON()'
+            ng-model-options='{ debounce: 1000 }'
+            style='width: 90%; border: 1px solid black;'></textarea>
       </md-input-container>
     </div>
   </div>