Merge branch 'release-5.20.1'

Author: hirokiterashima

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wise",
-  "version": "5.20.0",
+  "version": "5.20.1",
   "description": "Web-based Inquiry Science Environment",
   "main": "app.js",
   "browserslist": [

package.json

@@ -34,7 +34,7 @@
   <artifactId>wise</artifactId>
   <packaging>war</packaging>
   <name>Web-based Inquiry Science Environment</name>
-  <version>5.20.0</version>
+  <version>5.20.1</version>
   <url>http://wise5.org</url>
   <licenses>
     <license>

pom.xml

@@ -1 +1 @@
-5.20.0
+5.20.1

src/main/resources/version.txt

@@ -0,0 +1,16 @@
+<div>
+  <label class='node__label--vertical-alignment' i18n>JSON</label>
+  <button mat-button class='topButton mat-raised-button mat-primary'
+      (click)="toggleJSONView()"
+      matTooltip="Show JSON" i18n-matTooltip matTooltipPosition="above">
+    <mat-icon>code</mat-icon>
+  </button>
+</div>
+<div *ngIf="showJSONAuthoring" fxLayout="column" fxLayoutGap="8px">
+  <span i18n>Close the JSON view to save the changes</span>
+  <mat-form-field fxFlex appearance="outline">
+    <mat-label i18n>Edit Component JSON</mat-label>
+    <textarea class="mat-body-1" matInput cdkTextareaAutosize [(ngModel)]="componentContentJSONString"
+        (ngModelChange)='jsonChanged.next($event)'></textarea>
+  </mat-form-field>
+</div>

src/main/webapp/site/src/app/authoring-tool/edit-component-json/edit-component-json.component.html

@@ -0,0 +1,3 @@
+div {
+  margin-bottom: 10px;
+}

src/main/webapp/site/src/app/authoring-tool/edit-component-json/edit-component-json.component.scss

@@ -0,0 +1,107 @@
+import * as angular from 'angular';
+import { Component, Input } from "@angular/core";
+import { UpgradeModule } from "@angular/upgrade/static";
+import { NotificationService } from "../../../../../wise5/services/notificationService";
+import { TeacherProjectService } from '../../../../../wise5/services/teacherProjectService';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'edit-component-json',
+  templateUrl: 'edit-component-json.component.html',
+  styleUrls: ['edit-component-json.component.scss']
+})
+export class EditComponentJsonComponent {
+
+  validComponentContentJSONString: string;
+  componentContentJSONString: string;
+  @Input()
+  componentId: string;
+  nodeChangedSubscription: Subscription;
+  @Input()
+  nodeId: string;
+  showJSONAuthoring: boolean = false;
+  jsonChanged: Subject<string> = new Subject<string>();
+  jsonChangedSubscription: Subscription;
+
+  constructor(private upgrade: UpgradeModule, private NotificationService: NotificationService,
+      private ProjectService: TeacherProjectService) {
+  }
+
+  ngOnInit() {
+    this.setComponentContentJsonString()
+    this.jsonChangedSubscription = this.jsonChanged
+        .pipe(
+          debounceTime(1000),
+          distinctUntilChanged()
+        )
+        .subscribe(() => {
+          if (this.isJSONValid()) {
+            this.rememberRecentValidJSON();
+            this.NotificationService.showJSONValidMessage();
+          } else {
+            this.NotificationService.showJSONInvalidMessage();
+          }
+        });
+    this.nodeChangedSubscription = this.ProjectService.nodeChanged$.subscribe(() => {
+      this.setComponentContentJsonString();
+    });
+  }
+
+  ngOnDestory() {
+    this.jsonChangedSubscription.unsubscribe();
+    this.nodeChangedSubscription.unsubscribe();
+  }
+
+  setComponentContentJsonString() {
+    const authoringComponentContent = this.ProjectService.getComponentByNodeIdAndComponentId(
+        this.nodeId, this.componentId);
+    this.componentContentJSONString = angular.toJson(authoringComponentContent, 4);
+  }
+
+  toggleJSONView(): void {
+    if (this.showJSONAuthoring) {
+      if (this.isJSONValid()) {
+        this.saveChanges();
+        this.showJSONAuthoring = false;
+      } else {
+        const doRollback =
+            confirm(this.upgrade.$injector.get('$filter')('translate')('jsonInvalidErrorMessage'));
+        if (doRollback) {
+          this.rollbackToRecentValidJSON();
+          this.saveChanges();
+        }
+      }
+    } else {
+      this.showJSONAuthoring = true;
+      this.rememberRecentValidJSON();
+    }
+  }
+
+  isJSONValid(): boolean {
+    try {
+      angular.fromJson(this.componentContentJSONString);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  saveChanges(): void {
+    try {
+      const editedComponentContent = angular.fromJson(this.componentContentJSONString);
+      this.ProjectService.replaceComponent(this.nodeId, this.componentId, editedComponentContent);
+      this.ProjectService.componentChanged();
+    } catch(e) {
+      this.NotificationService.showJSONInvalidMessage();
+    }
+  }
+
+  rememberRecentValidJSON(): void {
+    this.validComponentContentJSONString = this.componentContentJSONString;
+  }
+
+  rollbackToRecentValidJSON(): void {
+    this.componentContentJSONString = this.validComponentContentJSONString;
+  }
+}

src/main/webapp/site/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts

@@ -0,0 +1,7 @@
+<mat-form-field>
+  <mat-label i18n>Max Score</mat-label>
+  <input matInput
+         type='number'
+         [(ngModel)]='authoringComponentContent.maxScore'
+         (ngModelChange)='maxScoreChanged.next($event)'/>
+</mat-form-field>

src/main/webapp/site/src/app/authoring-tool/edit-component-max-score/edit-component-max-score.component.html

@@ -0,0 +1,34 @@
+import { Component, Input } from "@angular/core";
+import { Subject, Subscription } from "rxjs";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
+import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
+
+@Component({
+  selector: 'edit-component-max-score',
+  templateUrl: 'edit-component-max-score.component.html'
+})
+export class EditComponentMaxScoreComponent {
+
+  @Input()
+  authoringComponentContent: any;
+  maxScoreChanged: Subject<string> = new Subject<string>();
+  maxScoreChangedSubscription: Subscription;
+
+  constructor(private ProjectService: TeacherProjectService) {
+  }
+
+  ngOnInit() {
+    this.maxScoreChangedSubscription = this.maxScoreChanged
+        .pipe(
+          debounceTime(1000),
+          distinctUntilChanged()
+        )
+        .subscribe(() => {
+          this.ProjectService.componentChanged();
+        });
+  }
+
+  ngOnDestroy() {
+    this.maxScoreChangedSubscription.unsubscribe();
+  }
+}

src/main/webapp/site/src/app/authoring-tool/edit-component-max-score/edit-component-max-score.component.ts

@@ -0,0 +1,12 @@
+<div>
+  <label class='node__label--vertical-alignment' i18n>Rubric</label>
+  <button mat-button class='topButton mat-raised-button mat-primary'
+      (click)='showRubricAuthoring = !showRubricAuthoring'
+      matTooltip="Edit Component Rubric" i18n-matTooltip matTooltipPosition="above">
+    <mat-icon>message</mat-icon>
+  </button>
+</div>
+<wise-authoring-tinymce-editor *ngIf='showRubricAuthoring'
+    [(model)]='rubric'
+    (modelChange)='rubricChanged()'>
+</wise-authoring-tinymce-editor>