Merge branch 'release-5.20.1'

package.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": [

pom.xml

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

src/main/resources/version.txt

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

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

@@ -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.scss

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

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

@@ -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-max-score/edit-component-max-score.component.html

@@ -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.ts

@@ -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-rubric/edit-component-rubric.component.html

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

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

@@ -0,0 +1,7 @@
+label {
+  margin-right: 10px;
+}
+
+div {
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,35 @@
+import { Component, Input } from "@angular/core";
+import { ConfigService } from "../../../../../wise5/services/configService";
+import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
+
+@Component({
+  selector: 'edit-component-rubric',
+  templateUrl: 'edit-component-rubric.component.html',
+  styleUrls: ['edit-component-rubric.component.scss']
+})
+export class EditComponentRubricComponent {
+
+  @Input()
+  authoringComponentContent: any;
+  rubric: string;
+  showRubricAuthoring: boolean = false;
+
+  constructor(private ConfigService: ConfigService, private ProjectService: TeacherProjectService) {
+  }
+
+  ngOnInit() {
+    const componentContent = this.ConfigService.replaceStudentNames(
+       this.ProjectService.injectAssetPaths(this.authoringComponentContent));
+    if (componentContent.rubric == null) {
+      this.rubric = '';
+    } else {
+      this.rubric = componentContent.rubric;
+    }
+  }
+
+  rubricChanged(): void {
+    this.authoringComponentContent.rubric =
+        this.ConfigService.removeAbsoluteAssetPaths(this.rubric);
+    this.ProjectService.componentChanged();
+  }
+}

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

@@ -0,0 +1,44 @@
+<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <mat-label class="node__label--vertical-alignment" i18n>Tags</mat-label>
+  <button mat-button
+      class="topButton mat-raised-button mat-primary"
+      matTooltip="Add Tag"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="addTag()">
+    <mat-icon>add</mat-icon>
+  </button>
+</div>
+<div *ngFor="let tag of authoringComponentContent.tags; let i = index"
+    fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center" style="margin-top: 16px">
+  <mat-form-field>
+    <mat-label i18n>Tag Name</mat-label>
+    <input matInput
+            [ngModel]="tag"
+            (ngModelChange)="tagChanged.next({tagIndex: i, tag: $event})"/>
+  </mat-form-field>
+  <button mat-button
+      class="moveComponentButton mat-raised-button mat-primary"
+      matTooltip="Move Up"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="moveTagUp(i)">
+    <mat-icon>arrow_upward</mat-icon>
+  </button>
+  <button mat-button
+      class="moveComponentButton mat-raised-button mat-primary"
+      matTooltip="Move Down"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="moveTagDown(i)">
+    <mat-icon>arrow_downward</mat-icon>
+  </button>
+  <button mat-button
+      class="moveComponentButton mat-raised-button mat-primary"
+      matTooltip="Delete"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="deleteTag(i)">
+    <mat-icon>delete</mat-icon>
+  </button>
+</div>

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

@@ -0,0 +1,70 @@
+import { Component, Input } from "@angular/core";
+import { UpgradeModule } from "@angular/upgrade/static";
+import { Subject, Subscription } from "rxjs";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
+import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
+
+@Component({
+  selector: 'edit-component-tags',
+  templateUrl: 'edit-component-tags.component.html'
+})
+export class EditComponentTagsComponent {
+
+  @Input()
+  authoringComponentContent: any;
+  tagChanged: Subject<any> = new Subject<any>();
+  tagChangedSubscription: Subscription;
+
+  constructor(private ProjectService: TeacherProjectService, private upgrade: UpgradeModule) {
+  }
+
+  ngOnInit() {
+    this.tagChangedSubscription = this.tagChanged
+        .pipe(
+          debounceTime(1000),
+          distinctUntilChanged()
+        )
+        .subscribe(({tagIndex, tag}) => {
+          this.authoringComponentContent.tags[tagIndex] = tag;
+          this.ProjectService.componentChanged();
+        });
+  }
+
+  ngOnDestroy() {
+    this.tagChangedSubscription.unsubscribe();
+  }
+
+  addTag() {
+    if (this.authoringComponentContent.tags == null) {
+      this.authoringComponentContent.tags = [];
+    }
+    this.authoringComponentContent.tags.push('');
+    this.ProjectService.componentChanged();
+  }
+
+  moveTagUp(index: number) {
+    if (index > 0) {
+      const tag = this.authoringComponentContent.tags[index];
+      this.authoringComponentContent.tags.splice(index, 1);
+      this.authoringComponentContent.tags.splice(index - 1, 0, tag);
+      this.ProjectService.componentChanged();
+    }
+  }
+
+  moveTagDown(index: number) {
+    if (index < this.authoringComponentContent.tags.length - 1) {
+      const tag = this.authoringComponentContent.tags[index];
+      this.authoringComponentContent.tags.splice(index, 1);
+      this.authoringComponentContent.tags.splice(index + 1, 0, tag);
+      this.ProjectService.componentChanged();
+    }
+  }
+
+  deleteTag(indexOfTagToDelete: number) {
+    if (confirm(
+        this.upgrade.$injector.get('$filter')('translate')('areYouSureYouWantToDeleteThisTag'))) {
+      this.authoringComponentContent.tags.splice(indexOfTagToDelete, 1);
+      this.ProjectService.componentChanged();
+    }
+  }
+}

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

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