refactor(Grading,Forgot Password): Use component binding to clean up …

…code (#1509)
WISE-Community · Nov 9, 2023 · 07d3ef6 · 07d3ef6
1 parent ee98c7e
commit 07d3ef6
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 101 deletions.
diff --git a/...forgot/student/forgot-student-password-change/forgot-student-password-change.component.ts b/...forgot/student/forgot-student-password-change/forgot-student-password-change.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { StudentService } from '../../../student/student.service';
 import { finalize } from 'rxjs/operators';
 import { NewPasswordAndConfirmComponent } from '../../../password/new-password-and-confirm/new-password-and-confirm.component';
@@ -12,28 +12,21 @@ import { PasswordErrors } from '../../../domain/password/password-errors';
   templateUrl: './forgot-student-password-change.component.html',
   styleUrls: ['./forgot-student-password-change.component.scss']
 })
-export class ForgotStudentPasswordChangeComponent implements OnInit {
-  answer: string;
+export class ForgotStudentPasswordChangeComponent {
+  @Input() answer: string;
   changePasswordFormGroup: FormGroup = this.fb.group({});
   message: string = '';
   processing: boolean = false;
-  questionKey: string;
-  username: string;
+  @Input() questionKey: string;
+  @Input() username: string;
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private fb: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute,
     private studentService: StudentService
   ) {}
 
-  ngOnInit(): void {
-    this.username = this.route.snapshot.queryParamMap.get('username');
-    this.questionKey = this.route.snapshot.queryParamMap.get('questionKey');
-    this.answer = this.route.snapshot.queryParamMap.get('answer');
-  }
-
   ngAfterViewChecked(): void {
     this.changeDetectorRef.detectChanges();
   }

diff --git a/...ot/student/forgot-student-password-complete/forgot-student-password-complete.component.ts b/...ot/student/forgot-student-password-complete/forgot-student-password-complete.component.ts
@@ -1,28 +1,17 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-forgot-student-password-complete',
   templateUrl: './forgot-student-password-complete.component.html',
   styleUrls: ['./forgot-student-password-complete.component.scss']
 })
-export class ForgotStudentPasswordCompleteComponent implements OnInit {
-  username: string = null;
+export class ForgotStudentPasswordCompleteComponent {
+  @Input() username: string;
 
-  constructor(private router: Router, private route: ActivatedRoute) {}
-
-  ngOnInit() {
-    const username = this.route.snapshot.queryParamMap.get('username');
-    if (username != null) {
-      this.username = username;
-    }
-  }
+  constructor(private router: Router) {}
 
   goToLoginPage() {
-    const params: any = {};
-    if (this.username != null) {
-      params.username = this.username;
-    }
-    this.router.navigate(['/login', params]);
+    this.router.navigate(['/login', { username: this.username }]);
   }
 }
diff --git a/...ot/student/forgot-student-password-security/forgot-student-password-security.component.ts b/...ot/student/forgot-student-password-security/forgot-student-password-security.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { StudentService } from '../../../student/student.service';
 import { finalize } from 'rxjs/operators';
@@ -11,33 +11,26 @@ import { ConfigService } from '../../../services/config.service';
   templateUrl: './forgot-student-password-security.component.html',
   styleUrls: ['./forgot-student-password-security.component.scss']
 })
-export class ForgotStudentPasswordSecurityComponent implements OnInit {
+export class ForgotStudentPasswordSecurityComponent {
   answer: string;
   answerSecurityQuestionFormGroup: FormGroup = this.fb.group({
     answer: new FormControl('', [Validators.required])
   });
   isRecaptchaEnabled: boolean = this.configService.isRecaptchaEnabled();
   message: string;
   processing: boolean = false;
-  question: string;
-  questionKey: string;
-  username: string;
+  @Input() question: string;
+  @Input() questionKey: string;
+  @Input() username: string;
 
   constructor(
     private configService: ConfigService,
     private fb: FormBuilder,
     private recaptchaV3Service: ReCaptchaV3Service,
     private router: Router,
-    private route: ActivatedRoute,
     private studentService: StudentService
   ) {}
 
-  ngOnInit() {
-    this.username = this.route.snapshot.queryParamMap.get('username');
-    this.questionKey = this.route.snapshot.queryParamMap.get('questionKey');
-    this.question = this.route.snapshot.queryParamMap.get('question');
-  }
-
   async submit() {
     this.processing = true;
     this.clearMessage();

diff --git a/...forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts b/...forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { finalize } from 'rxjs/operators';
@@ -12,28 +12,22 @@ import { PasswordErrors } from '../../../domain/password/password-errors';
   templateUrl: './forgot-teacher-password-change.component.html',
   styleUrls: ['./forgot-teacher-password-change.component.scss']
 })
-export class ForgotTeacherPasswordChangeComponent implements OnInit {
+export class ForgotTeacherPasswordChangeComponent {
   changePasswordFormGroup: FormGroup = this.fb.group({});
   isSubmitButtonEnabled: boolean = true;
   message: string = '';
   processing: boolean = false;
   showForgotPasswordLink = false;
-  username: string;
-  verificationCode: string;
+  @Input() username: string = null;
+  @Input() verificationCode: string;
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private fb: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute,
     private teacherService: TeacherService
   ) {}
 
-  ngOnInit(): void {
-    this.username = this.route.snapshot.queryParamMap.get('username');
-    this.verificationCode = this.route.snapshot.queryParamMap.get('verificationCode');
-  }
-
   ngAfterViewChecked(): void {
     this.changeDetectorRef.detectChanges();
   }

diff --git a/...ot/teacher/forgot-teacher-password-complete/forgot-teacher-password-complete.component.ts b/...ot/teacher/forgot-teacher-password-complete/forgot-teacher-password-complete.component.ts
@@ -1,28 +1,17 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-forgot-teacher-password-complete',
   templateUrl: './forgot-teacher-password-complete.component.html',
   styleUrls: ['./forgot-teacher-password-complete.component.scss']
 })
-export class ForgotTeacherPasswordCompleteComponent implements OnInit {
-  username: string = null;
+export class ForgotTeacherPasswordCompleteComponent {
+  @Input() username: string;
 
-  constructor(private router: Router, private route: ActivatedRoute) {}
-
-  ngOnInit() {
-    const username = this.route.snapshot.queryParamMap.get('username');
-    if (username != null) {
-      this.username = username;
-    }
-  }
+  constructor(private router: Router) {}
 
   goToLoginPage() {
-    const params: any = {};
-    if (this.username != null) {
-      params.username = this.username;
-    }
-    this.router.navigate(['/login', params]);
+    this.router.navigate(['/login', { username: this.username }]);
   }
 }
diff --git a/...forgot/teacher/forgot-teacher-password-verify/forgot-teacher-password-verify.component.ts b/...forgot/teacher/forgot-teacher-password-verify/forgot-teacher-password-verify.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { finalize } from 'rxjs/operators';
 
@@ -9,8 +9,8 @@ import { finalize } from 'rxjs/operators';
   templateUrl: './forgot-teacher-password-verify.component.html',
   styleUrls: ['./forgot-teacher-password-verify.component.scss']
 })
-export class ForgotTeacherPasswordVerifyComponent implements OnInit {
-  username: string;
+export class ForgotTeacherPasswordVerifyComponent {
+  @Input() username: string = null;
   verificationCodeFormGroup: FormGroup = this.fb.group({
     verificationCode: new FormControl('', [Validators.required])
   });
@@ -23,14 +23,9 @@ export class ForgotTeacherPasswordVerifyComponent implements OnInit {
   constructor(
     private fb: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute,
     private teacherService: TeacherService
   ) {}
 
-  ngOnInit() {
-    this.username = this.route.snapshot.queryParamMap.get('username');
-  }
-
   getControlField(fieldName) {
     return this.verificationCodeFormGroup.get(fieldName);
   }

diff --git a/...lassroomMonitorComponents/nodeProgress/node-progress-view/node-progress-view.component.ts b/...lassroomMonitorComponents/nodeProgress/node-progress-view/node-progress-view.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { TeacherDataService } from '../../../../services/teacherDataService';
 import { Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogWithOpenInNewWindowComponent } from '../../../../directives/dialog-with-open-in-new-window/dialog-with-open-in-new-window.component';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { ConfigService } from '../../../../services/configService';
 
 @Component({
@@ -13,7 +13,7 @@ import { ConfigService } from '../../../../services/configService';
   styleUrls: ['./node-progress-view.component.scss']
 })
 export class NodeProgressViewComponent implements OnInit {
-  protected nodeId: string;
+  @Input() protected nodeId: string;
   nodeIdToExpanded: any = {};
   protected rootNode: any;
   protected showRubricButton: boolean;
@@ -24,13 +24,12 @@ export class NodeProgressViewComponent implements OnInit {
     private configService: ConfigService,
     private dialog: MatDialog,
     private projectService: TeacherProjectService,
-    private route: ActivatedRoute,
     private router: Router,
     private dataService: TeacherDataService
   ) {}
 
   ngOnInit(): void {
-    this.nodeId = this.route.snapshot.paramMap.get('nodeId') || this.projectService.rootNode.id;
+    this.nodeId = this.nodeId || this.projectService.rootNode.id;
     this.dataService.setCurrentNodeByNodeId(this.nodeId);
     const startNodeId = this.projectService.getStartNodeId();
     this.rootNode = this.projectService.getRootNode(startNodeId);

diff --git a/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts b/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts
@@ -7,7 +7,6 @@ import { ConfigService } from '../../services/configService';
 import { NotificationService } from '../../services/notificationService';
 import { TeacherDataService } from '../../services/teacherDataService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
-import { ActivatedRoute } from '@angular/router';
 import { Annotation } from '../../common/Annotation';
 
 @Component({
@@ -38,8 +37,7 @@ export class StudentGradingComponent implements OnInit {
     private configService: ConfigService,
     private dataService: TeacherDataService,
     private notificationService: NotificationService,
-    private projectService: TeacherProjectService,
-    private route: ActivatedRoute
+    private projectService: TeacherProjectService
   ) {}
 
   ngOnInit(): void {
@@ -49,7 +47,7 @@ export class StudentGradingComponent implements OnInit {
     this.subscribeToStudentWorkReceived();
     this.subscribeToCurrentWorkgroupChanged();
     this.subscribeToCurrentPeriodChanged();
-    this.workgroupId = parseInt(this.route.snapshot.params['workgroupId']);
+    this.workgroupId = Number(this.workgroupId);
     this.initialize();
   }
 

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -1849,11 +1849,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/student/forgot-student-password-change/forgot-student-password-change.component.ts</context>
-          <context context-type="linenumber">92</context>
+          <context context-type="linenumber">85</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts</context>
-          <context context-type="linenumber">148</context>
+          <context context-type="linenumber">142</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts</context>
@@ -2753,14 +2753,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Incorrect answer, please try again. If you can&apos;t remember the answer to your security question, please ask your teacher to change your password or contact us for assistance.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/student/forgot-student-password-security/forgot-student-password-security.component.ts</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">73</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2665717943411228451" datatype="html">
         <source>Recaptcha failed. Please reload the page and try again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/student/forgot-student-password-security/forgot-student-password-security.component.ts</context>
-          <context context-type="linenumber">83</context>
+          <context context-type="linenumber">76</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password/forgot-teacher-password.component.ts</context>
@@ -3237,40 +3237,40 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>The verification code has expired. Verification codes are valid for 10 minutes. Please go back to the Teacher Forgot Password page to generate a new one.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts</context>
-          <context context-type="linenumber">129</context>
+          <context context-type="linenumber">123</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-verify/forgot-teacher-password-verify.component.ts</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">75</context>
         </context-group>
       </trans-unit>
       <trans-unit id="861030852489811059" datatype="html">
         <source>The verification code is invalid. Please try again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">128</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-verify/forgot-teacher-password-verify.component.ts</context>
-          <context context-type="linenumber">85</context>
+          <context context-type="linenumber">80</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2199576463342303449" datatype="html">
         <source>You have submitted an invalid verification code too many times. For security reasons, we will lock the ability to change your password for 10 minutes. After 10 minutes, please go back to the Teacher Forgot Password page to generate a new verification code.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts</context>
-          <context context-type="linenumber">139</context>
+          <context context-type="linenumber">133</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-verify/forgot-teacher-password-verify.component.ts</context>
-          <context context-type="linenumber">90</context>
+          <context context-type="linenumber">85</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4839293263479159850" datatype="html">
         <source>Passwords do not match, please try again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts</context>
-          <context context-type="linenumber">144</context>
+          <context context-type="linenumber">138</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a4d0068934144e3f61b8e981a62e014ab0a90ebe" datatype="html">
@@ -9881,7 +9881,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
             )"/>. Be careful not to overwrite each other&apos;s work!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts</context>
-          <context context-type="linenumber">37,39</context>
+          <context context-type="linenumber">43,45</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5763042719559545946" datatype="html">