feat(Multilingual Unit): Authoring and Student

package.json

@@ -145,7 +145,7 @@
     "test-coverage": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng test wise --source-map=false --browsers ChromeHeadlessNoSandbox --watch=false --code-coverage",
     "test-e2e-comment": "test-e2e assumes wise is already running.",
     "test-e2e": "node ./node_modules/protractor/bin/protractor src/assets/wise5/test-e2e/conf.js",
-    "extract-i18n": "ng extract-i18n --output-path=src"
+    "extract-i18n": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng extract-i18n --output-path=src"
   },
   "repository": {
     "type": "git",
@@ -224,4 +224,4 @@
       ]
     ]
   }
-}
+}

src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts

@@ -21,6 +21,7 @@ export abstract class EditAdvancedComponentComponent {
   ngOnInit() {
     this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
     this.component = new Component(this.componentContent, this.nodeId);
+    this.teacherProjectService.uiChanged();
   }
 
   setShowSubmitButtonValue(show: boolean = false): void {

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html

@@ -108,5 +108,7 @@ <h2 mat-dialog-title i18n>Advanced Settings</h2>
 </div>
 <mat-divider></mat-divider>
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close cdkFocusRegionstart i18n>Close</button>
+  <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
+    Close
+  </button>
 </mat-dialog-actions>

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Component as WiseComponent } from '../../../assets/wise5/common/Component';
 
@@ -7,8 +7,6 @@ import { Component as WiseComponent } from '../../../assets/wise5/common/Compone
   templateUrl: './edit-component-advanced.component.html',
   styleUrls: ['./edit-component-advanced.component.scss']
 })
-export class EditComponentAdvancedComponent implements OnInit {
+export class EditComponentAdvancedComponent {
   constructor(@Inject(MAT_DIALOG_DATA) protected component: WiseComponent) {}
-
-  ngOnInit(): void {}
 }

src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html

@@ -1,12 +1,11 @@
-<mat-form-field class="prompt" appearance="fill">
-  <mat-label i18n>Prompt</mat-label>
-  <textarea
-    matInput
-    [(ngModel)]="prompt"
-    (ngModelChange)="promptChangedEvent.next($event)"
-    placeholder="Enter Prompt Here"
-    i18n-placeholder
-    cdkTextareaAutosize
-  >
-  </textarea>
-</mat-form-field>
+<translatable-textarea
+  [content]="componentContent"
+  key="prompt"
+  label="Prompt"
+  i18n-label
+  placeholder="Enter Prompt Here"
+  i18n-placeholder
+  (defaultLanguageTextChanged)="promptChangedEvent.next($event)"
+  class="prompt"
+  appearance="fill"
+/>

src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts

@@ -1,14 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 
 @Component({
   selector: 'edit-component-prompt',
-  styles: ['.prompt {width: 100%; }'],
+  styles: ['.prompt {width: 100%; mat-form-field { width:100%} }'],
   templateUrl: 'edit-component-prompt.component.html'
 })
 export class EditComponentPrompt {
-  @Input()
-  prompt: string;
-
-  @Output()
-  promptChangedEvent = new EventEmitter<string>();
+  @Input() componentContent: ComponentContent;
+  @Output() promptChangedEvent = new EventEmitter<string>();
 }

src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.html

@@ -3,7 +3,7 @@
   <button
     mat-raised-button
     color="primary"
-    class="topButton"
+    class="topButton enable-in-translation"
     (click)="showRubricAuthoring = !showRubricAuthoring"
     matTooltip="Edit Component Rubric"
     i18n-matTooltip
@@ -12,9 +12,9 @@
     <mat-icon>message</mat-icon>
   </button>
 </div>
-<wise-authoring-tinymce-editor
+<translatable-rich-text-editor
   *ngIf="showRubricAuthoring"
-  [(model)]="rubric"
-  (modelChange)="rubricChanged()"
->
-</wise-authoring-tinymce-editor>
+  [content]="componentContent"
+  key="rubric"
+  (defaultLanguageTextChanged)="rubricChanged()"
+/>

src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts

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

src/app/authoring-tool/edit-dynamic-prompt-rules/edit-dynamic-prompt-rules.component.html

@@ -43,16 +43,14 @@ <h5 fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
                 (ngModelChange)="inputChanged.next($event)"
               />
             </mat-form-field>
-            <mat-form-field class="rule-input form-field-no-hint" appearance="fill">
-              <mat-label i18n>Prompt</mat-label>
-              <textarea
-                matInput
-                [(ngModel)]="rule.prompt"
-                (ngModelChange)="inputChanged.next($event)"
-                cdkTextareaAutosize
-              >
-              </textarea>
-            </mat-form-field>
+            <translatable-textarea
+              [content]="rule"
+              key="prompt"
+              label="Prompt"
+              i18n-label
+              (defaultLanguageTextChanged)="inputChanged.next($event)"
+              class="rule-input"
+            />
           </div>
           <div fxLayout="column" fxLayoutAlign="start center">
             <button

src/app/authoring-tool/edit-dynamic-prompt/edit-dynamic-prompt.component.html

@@ -28,37 +28,23 @@
       <edit-component-peer-grouping-tag [componentContent]="componentContent.dynamicPrompt">
       </edit-component-peer-grouping-tag>
     </div>
-    <div class="pre-prompt-div">
-      <mat-form-field class="prompt" appearance="fill">
-        <mat-label i18n>Pre Prompt (Optional)</mat-label>
-        <textarea
-          matInput
-          [(ngModel)]="componentContent.dynamicPrompt.prePrompt"
-          (ngModelChange)="dynamicPromptChangedEvent.next()"
-          placeholder="Enter Pre Prompt Here"
-          i18n-placeholder
-          cdkTextareaAutosize
-        >
-        </textarea>
-      </mat-form-field>
-    </div>
+    <translatable-textarea
+      [content]="componentContent.dynamicPrompt"
+      key="prePrompt"
+      label="Pre Prompt (Optional)"
+      i18n-label
+      (defaultLanguageTextChanged)="dynamicPromptChangedEvent.next()"
+    />
     <div class="feedback-rules-div">
       <edit-dynamic-prompt-rules [feedbackRules]="componentContent.dynamicPrompt.rules">
       </edit-dynamic-prompt-rules>
     </div>
-    <div>
-      <mat-form-field class="prompt" appearance="fill">
-        <mat-label i18n>Post Prompt (Optional)</mat-label>
-        <textarea
-          matInput
-          [(ngModel)]="componentContent.dynamicPrompt.postPrompt"
-          (ngModelChange)="dynamicPromptChangedEvent.next()"
-          placeholder="Enter Post Prompt Here"
-          i18n-placeholder
-          cdkTextareaAutosize
-        >
-        </textarea>
-      </mat-form-field>
-    </div>
+    <translatable-textarea
+      [content]="componentContent.dynamicPrompt"
+      key="postPrompt"
+      label="Post Prompt (Optional)"
+      i18n-label
+      (defaultLanguageTextChanged)="dynamicPromptChangedEvent.next()"
+    />
   </div>
 </div>

src/app/authoring-tool/edit-dynamic-prompt/edit-dynamic-prompt.component.scss

@@ -1,9 +1,5 @@
 @import 'style/abstracts/variables';
 
-.prompt {
-  width: 100%;
-}
-
 .section-container {
   padding: 16px;
   border: 2px solid #dddddd;

src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html

@@ -56,32 +56,21 @@ <h5 fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
               fxLayoutGap="8px"
             >
               <mat-form-field
+                *ngIf="version === 1"
                 class="rule-input form-field-no-hint question-input"
                 appearance="fill"
               >
                 <mat-label *ngIf="rule.questions.length === 1" i18n>Question</mat-label>
                 <mat-label *ngIf="rule.questions.length > 1" i18n
                   >Question #{{ questionIndex + 1 }}</mat-label
                 >
-                <ng-container *ngIf="version === 2; then version2; else version1"></ng-container>
-                <ng-template #version2>
-                  <textarea
-                    matInput
-                    [(ngModel)]="rule.questions[questionIndex].text"
-                    (ngModelChange)="inputChanged.next($event)"
-                    cdkTextareaAutosize
-                  >
-                  </textarea>
-                </ng-template>
-                <ng-template #version1>
-                  <textarea
-                    matInput
-                    [(ngModel)]="rule.questions[questionIndex]"
-                    (ngModelChange)="inputChanged.next($event)"
-                    cdkTextareaAutosize
-                  >
-                  </textarea>
-                </ng-template>
+                <textarea
+                  matInput
+                  [(ngModel)]="rule.questions[questionIndex]"
+                  (ngModelChange)="inputChanged.next($event)"
+                  cdkTextareaAutosize
+                >
+                </textarea>
                 <button
                   mat-icon-button
                   matSuffix
@@ -94,17 +83,41 @@ <h5 fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
                   <mat-icon>clear</mat-icon>
                 </button>
               </mat-form-field>
-              <button
-                *ngIf="last"
-                mat-icon-button
-                matTooltip="Add new question"
-                matTooltipPosition="above"
-                i18n-matTooltip
-                (click)="addNewFeedbackToRule(rule)"
-                i18n
-              >
-                <mat-icon>add_circle</mat-icon>
-              </button>
+              <ng-container *ngIf="version === 2">
+                <translatable-textarea
+                  [content]="rule.questions[questionIndex]"
+                  key="text"
+                  [label]="getQuestionLabel(rule, questionIndex)"
+                  (defaultLanguageTextChanged)="inputChanged.next($event)"
+                  class="rule-input question-input"
+                />
+                <div class="question-button-div" fxLayout="row" fxLayoutAlign="center start">
+                  <button
+                    mat-icon-button
+                    matSuffix
+                    *ngIf="rule.questions.length > 1"
+                    matTooltip="Delete question"
+                    i18n-matTooltip
+                    matTooltipPosition="before"
+                    (click)="deleteFeedbackInRule(rule, questionIndex)"
+                  >
+                    <mat-icon>clear</mat-icon>
+                  </button>
+                </div>
+              </ng-container>
+              <div class="question-button-div" fxLayout="row" fxLayoutAlign="center start">
+                <button
+                  *ngIf="last"
+                  mat-icon-button
+                  matTooltip="Add new question"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                  (click)="addNewFeedbackToRule(rule)"
+                  i18n
+                >
+                  <mat-icon>add_circle</mat-icon>
+                </button>
+              </div>
             </div>
           </div>
           <div fxLayout="column" fxLayoutAlign="start center">

src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.scss

@@ -48,3 +48,7 @@ li {
 .question-input {
   width: 100%;
 }
+
+.question-button-div {
+  height: 100%;
+}

src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts

@@ -54,4 +54,10 @@ export class EditQuestionBankRulesComponent extends EditFeedbackRulesComponent {
   customTrackBy(index: number): number {
     return index;
   }
+
+  protected getQuestionLabel(rule: QuestionBankRule, questionIndex: number): string {
+    return rule.questions.length === 1
+      ? $localize`Question`
+      : $localize`Question #${questionIndex + 1}`;
+  }
 }

src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html

@@ -11,16 +11,13 @@
   </div>
   <div *ngIf="componentContent.questionBank?.enabled">
     <div class="custom-label">
-      <mat-form-field appearance="fill">
-        <mat-label i18n>Custom Label</mat-label>
-        <input
-          matInput
-          [(ngModel)]="componentContent.questionBank.label"
-          (ngModelChange)="inputChanged.next($event)"
-          placeholder="Question Bank"
-          i18n-placeholder
-        />
-      </mat-form-field>
+      <translatable-input
+        [content]="componentContent.questionBank"
+        key="label"
+        label="Custom Label"
+        i18n-label
+        (defaultLanguageTextChanged)="inputChanged.next($event)"
+      />
     </div>
     <div *ngIf="componentContent.questionBank.version === 2">
       <mat-checkbox

src/app/authoring-tool/edit-question-bank/edit-question-bank.component.scss

@@ -16,6 +16,10 @@
   margin-top: 16px;
 }
 
+.custom-label {
+  width: 280px;
+}
+
 .feedback-rules {
   margin-bottom: 16px;
 }