chore(VLE): Convert Node Controller to Angular (#551)

- Remove Hopscotch. Use popup instead to show rubric - Add private modifier to some functions - Remove unused functions. #531
WISE-Community · Mar 24, 2022 · 204c3cf · 204c3cf
1 parent 0ef0e94
commit 204c3cf
Show file tree

Hide file tree

Showing 38 changed files with 889 additions and 1,740 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "fabric": "^3.6.6",
     "highcharts": "^9.0.1",
     "highcharts-angular": "^2.10.0",
-    "hopscotch": "^0.3.1",
     "html2canvas": "^0.5.0-beta4",
     "iframe-resizer": "^3.5.3",
     "jquery": "^3.4.1",

diff --git a/src/app/common-hybrid-angular.module.ts b/src/app/common-hybrid-angular.module.ts
@@ -48,7 +48,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSelectModule } from '@angular/material/select';
-import { HelpIconComponent } from '../assets/wise5/themes/default/themeComponents/helpIcon/help-icon.component';
 import { NodeStatusIcon } from '../assets/wise5/themes/default/themeComponents/nodeStatusIcon/node-status-icon.component';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -84,7 +83,6 @@ export class EmptyComponent {}
     DialogResponseComponent,
     DialogResponsesComponent,
     EmptyComponent,
-    HelpIconComponent,
     NodeIconComponent,
     NodeStatusIcon
   ],

diff --git a/src/app/student-hybrid-angular.module.ts b/src/app/student-hybrid-angular.module.ts
@@ -24,6 +24,7 @@ import { GenerateImageDialogComponent } from '../assets/wise5/directives/generat
 import { TopBarModule } from './student/top-bar/top-bar.module';
 import { StudentAssetsDialogModule } from '../assets/wise5/vle/studentAsset/student-assets-dialog/student-assets-dialog.module';
 import { ComponentStudentModule } from '../assets/wise5/components/component/component-student.module';
+import { NodeModule } from '../assets/wise5/vle/node/node.module';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { ComponentStudentModule } from '../assets/wise5/components/component/com
   imports: [
     AngularJSModule,
     ComponentStudentModule,
+    NodeModule,
     StudentAssetsDialogModule,
     StudentComponentModule,
     SummaryDisplayModule,

diff --git a/src/assets/wise5/authoringTool/main/mainAuthoring.html b/src/assets/wise5/authoringTool/main/mainAuthoring.html
@@ -2,7 +2,7 @@
   <div class="l-constrained" layout="column">
     <md-content
         class="node-content md-whiteframe-1dp"
-        style="border-color: {{nodeController.nodeStatus.icon.color}}; position: relative;"
+        style="position: relative;"
         layout="row" layout-wrap>
       <style>
         .projectItem:hover {

diff --git a/src/assets/wise5/authoringTool/project/projectAuthoring.html b/src/assets/wise5/authoringTool/project/projectAuthoring.html
@@ -1,7 +1,7 @@
 <div id="top" class="view-content view-content--with-sidemenu">
   <div class="l-constrained" layout="column">
     <md-content class="node-content md-whiteframe-1dp"
-        style="padding: 0 16px; border-color: {{::nodeController.nodeStatus.icon.color}}; position: relative;"
+        style="padding: 0 16px; position: relative;"
         layout="row" layout-wrap>
       <div style="margin-bottom: 20px; width: 100%">
         <div style='text-align: right; background-color: white; position: sticky; top: 0px; z-index: 2;'>

diff --git a/src/assets/wise5/common-angular-js-module.ts b/src/assets/wise5/common-angular-js-module.ts
@@ -41,8 +41,6 @@ window['Highcharts'] = Highcharts;
 window['HighchartsExporting'] = HighchartsExporting;
 window['covariance'] = covariance;
 import './components/graph/graphComponentModule';
-import * as hopscotch from 'hopscotch';
-window['hopscotch'] = hopscotch;
 import './components/html/htmlComponentModule';
 import HttpInterceptor from './services/httpInterceptor';
 import './components/label/labelComponentModule';

diff --git a/src/assets/wise5/components/component-student.component.ts b/src/assets/wise5/components/component-student.component.ts
@@ -33,6 +33,9 @@ export abstract class ComponentStudent {
   @Input()
   workgroupId: number;
 
+  @Output()
+  saveComponentStateEvent: EventEmitter<any> = new EventEmitter<any>();
+
   @Output()
   starterStateChangedEvent = new EventEmitter<any>();
 
@@ -103,6 +106,14 @@ export abstract class ComponentStudent {
   }
 
   ngOnDestroy(): void {
+    if (this.isDirty) {
+      const request = {
+        componentId: this.componentId,
+        isSubmit: false,
+        nodeId: this.nodeId
+      };
+      this.saveComponentStateEvent.emit(this.getComponentStateWrapper(request));
+    }
     this.subscriptions.unsubscribe();
   }
 

diff --git a/src/assets/wise5/components/component/component-student.module.ts b/src/assets/wise5/components/component/component-student.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentComponentModule } from '../../../../app/student/student.component.module';
+import { HelpIconModule } from '../../themes/default/themeComponents/helpIcon/help-icon.module';
 import { PreviewComponentComponent } from '../../authoringTool/components/preview-component/preview-component.component';
 import { StudentAssetsDialogModule } from '../../vle/studentAsset/student-assets-dialog/student-assets-dialog.module';
 import { AnimationStudentModule } from '../animation/animation-student/animation-student.module';
@@ -34,6 +35,7 @@ import { ComponentComponent } from './component.component';
     DrawStudentModule,
     EmbeddedStudentModule,
     GraphStudentModule,
+    HelpIconModule,
     HighchartsChartModule,
     HtmlStudentModule,
     LabelStudentModule,

diff --git a/src/assets/wise5/components/component/component.component.html b/src/assets/wise5/components/component/component.component.html
@@ -4,20 +4,23 @@
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </animation-student>
   <audio-oscillator-student *ngSwitchCase="'AudioOscillator'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </audio-oscillator-student>
   <concept-map-student *ngSwitchCase="'ConceptMap'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </concept-map-student>
   <dialog-guidance-student *ngSwitchCase="'DialogGuidance'"
@@ -39,20 +42,23 @@
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </draw-student>
   <embedded-student *ngSwitchCase="'Embedded'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </embedded-student>
   <graph-student *ngSwitchCase="'Graph'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </graph-student>
   <html-student *ngSwitchCase="'HTML'"
@@ -65,27 +71,31 @@
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </label-student>
   <match-student *ngSwitchCase="'Match'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </match-student>
   <multiple-choice-student *ngSwitchCase="'MultipleChoice'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </multiple-choice-student>
   <open-response-student *ngSwitchCase="'OpenResponse'"
       [nodeId]="nodeId"
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </open-response-student>
   <outside-url-student *ngSwitchCase="'OutsideURL'"
@@ -105,6 +115,7 @@
       [componentContent]="componentContent"
       [componentState]="componentState"
       [workgroupId]="workgroupId"
+      (saveComponentStateEvent)="saveComponentState($event)"
       mode="student">
   </table-student>
 </div>
diff --git a/src/assets/wise5/components/component/component.component.ts b/src/assets/wise5/components/component/component.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ConfigService } from '../../services/configService';
 import { NotebookService } from '../../services/notebookService';
 import { ProjectService } from '../../services/projectService';
@@ -27,6 +27,9 @@ export class ComponentComponent {
   @Input()
   workgroupId: number;
 
+  @Output()
+  saveComponentStateEvent: EventEmitter<any> = new EventEmitter<any>();
+
   constructor(
     private configService: ConfigService,
     private notebookService: NotebookService,
@@ -63,4 +66,8 @@ export class ComponentComponent {
     }
     this.componentContent = componentContent;
   }
+
+  saveComponentState($event: any): void {
+    this.saveComponentStateEvent.emit($event);
+  }
 }