Merge pull request #89 from WISE-Community/issue-88-refactor-similar-…

…code-component-authoring

Created common parent class for editing advanced component field

src/app/authoring-tool/edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component.html

@@ -1,7 +1,7 @@
 <mat-checkbox class="mat-primary"
     color="primary"
     [(ngModel)]="authoringComponentContent.excludeFromTotalScore"
-    (change)="excludeFromTotalScoreChanged.next($event)"
+    (change)="inputChanged.next($event)"
     i18n>
   Do not count score on this activity towards the total score
 </mat-checkbox>

src/app/authoring-tool/edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component.ts

@@ -1,29 +1,8 @@
-import { Component, Input } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { Component } from '@angular/core';
+import { EditComponentFieldComponent } from '../edit-component-field.component';
 
 @Component({
   selector: 'edit-component-exclude-from-total-score',
   templateUrl: 'edit-component-exclude-from-total-score.component.html'
 })
-export class EditComponentExcludeFromTotalScoreComponent {
-  @Input()
-  authoringComponentContent: any;
-  excludeFromTotalScoreChanged: Subject<string> = new Subject<string>();
-  excludeFromTotalScoreChangedSubscription: Subscription;
-
-  constructor(private ProjectService: TeacherProjectService) {}
-
-  ngOnInit() {
-    this.excludeFromTotalScoreChangedSubscription = this.excludeFromTotalScoreChanged
-      .pipe(debounceTime(1000), distinctUntilChanged())
-      .subscribe(() => {
-        this.ProjectService.componentChanged();
-      });
-  }
-
-  ngOnDestroy() {
-    this.excludeFromTotalScoreChangedSubscription.unsubscribe();
-  }
-}
+export class EditComponentExcludeFromTotalScoreComponent extends EditComponentFieldComponent {}

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

@@ -0,0 +1,26 @@
+import { Directive, Input } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { TeacherProjectService } from '../../assets/wise5/services/teacherProjectService';
+
+@Directive()
+export abstract class EditComponentFieldComponent {
+  @Input()
+  authoringComponentContent: any;
+  inputChanged: Subject<string> = new Subject<string>();
+  inputChangedSubscription: Subscription;
+
+  constructor(private ProjectService: TeacherProjectService) {}
+
+  ngOnInit() {
+    this.inputChangedSubscription = this.inputChanged
+      .pipe(debounceTime(1000), distinctUntilChanged())
+      .subscribe(() => {
+        this.ProjectService.componentChanged();
+      });
+  }
+
+  ngOnDestroy() {
+    this.inputChangedSubscription.unsubscribe();
+  }
+}

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

@@ -3,5 +3,5 @@
   <input matInput
          type='number'
          [(ngModel)]='authoringComponentContent.maxScore'
-         (ngModelChange)='maxScoreChanged.next($event)'/>
+         (ngModelChange)='inputChanged.next($event)'/>
 </mat-form-field>

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

@@ -1,29 +1,8 @@
-import { Component, Input } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { Component } from '@angular/core';
+import { EditComponentFieldComponent } from '../edit-component-field.component';
 
 @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();
-  }
-}
+export class EditComponentMaxScoreComponent extends EditComponentFieldComponent {}

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

@@ -3,5 +3,5 @@
   <input matInput
          type='number'
          [(ngModel)]='authoringComponentContent.componentWidth'
-         (ngModelChange)='widthChanged.next($event)'/>
+         (ngModelChange)='inputChanged.next($event)'/>
 </mat-form-field>

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

@@ -1,29 +1,8 @@
-import { Component, Input } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { Component } from '@angular/core';
+import { EditComponentFieldComponent } from '../edit-component-field.component';
 
 @Component({
   selector: 'edit-component-width',
   templateUrl: 'edit-component-width.component.html'
 })
-export class EditComponentWidthComponent {
-  @Input()
-  authoringComponentContent: any;
-  widthChanged: Subject<string> = new Subject<string>();
-  widthChangedSubscription: Subscription;
-
-  constructor(private ProjectService: TeacherProjectService) {}
-
-  ngOnInit() {
-    this.widthChangedSubscription = this.widthChanged
-      .pipe(debounceTime(1000), distinctUntilChanged())
-      .subscribe(() => {
-        this.ProjectService.componentChanged();
-      });
-  }
-
-  ngOnDestroy() {
-    this.widthChangedSubscription.unsubscribe();
-  }
-}
+export class EditComponentWidthComponent extends EditComponentFieldComponent {}