Abstract methods out into question-edit-details-form

TEAMMATES · Sep 24, 2023 · d8cc747 · d8cc747
1 parent e9498e4
commit d8cc747
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 41 deletions.
diff --git a/...pes/question-edit-details-form/constsum-options-question-edit-details-form.component.html b/...pes/question-edit-details-form/constsum-options-question-edit-details-form.component.html
@@ -34,7 +34,7 @@
             <div class="col-sm-6">
               <input id="total-points-radio" class="form-check-input" type="radio" [ngModel]="model.pointsPerOption" [value]="false"
                      (ngModelChange)="triggerModelChange('pointsPerOption', $event)" [disabled]="!isEditable" aria-label="Use Total Points Checkbox">
-              <input id="total-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, false, false)"
+              <input id="total-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'points')"
                      [ngModel]="!model.pointsPerOption ? model.points : ''" (ngModelChange)="triggerModelChange('points', $event)" [disabled]="!isEditable || model.pointsPerOption" aria-label="Total Points Input">
             </div>
             <div class="col-sm-6 text-start">
@@ -47,7 +47,7 @@
             <div class="col-sm-6">
               <input id="per-option-points-radio" class="form-check-input" type="radio" [ngModel]="model.pointsPerOption" [value]="true"
                      (ngModelChange)="triggerModelChange('pointsPerOption', $event)" [disabled]="!isEditable" aria-label="Use Total Points Times Number of Options Checkbox">
-              <input id="per-option-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, false, false)"
+              <input id="per-option-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'points')"
                      [ngModel]="model.pointsPerOption ? model.points : ''" (ngModelChange)="triggerModelChange('points', $event)" [disabled]="!isEditable || !model.pointsPerOption" aria-label="Points Input">
             </div>
             <div class="col-sm-6 text-start">
@@ -64,7 +64,7 @@
                 <input id="min-point-checkbox" class="form-check-input" type="checkbox"
                        [ngModel]="hasMinPoint"
                        (ngModelChange)="resetMinPoint($event)" [disabled]="!isEditable" aria-label="Minimum Value Checkbox">
-                <input id="min-point" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, true, false)"
+                <input id="min-point" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'minPoint')"
                        [ngModel]="hasMinPoint ? model.minPoint : ''" (ngModelChange)="triggerModelChange('minPoint', $event)" [disabled]="!isEditable || !hasMinPoint" aria-label="Minimum Value Input">
                 <b class="ngb-tooltip-class" ngbTooltip="The minimum allocation of the points to an option, e.g if you specify 5 points here, the user must input a value larger than or equal to 5 for each option.">minimum per option</b>
               </label>
@@ -76,7 +76,7 @@
                 <input id="max-point-checkbox" class="form-check-input" type="checkbox"
                        [ngModel]="hasMaxPoint"
                        (ngModelChange)="resetMaxPoint($event)"  [disabled]="!isEditable" aria-label="Maximum Value Checkbox">
-                <input id="max-point" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, false, true)"
+                <input id="max-point" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'maxPoint')"
                        [ngModel]="hasMaxPoint ? model.maxPoint : ''" (ngModelChange)="triggerModelChange('maxPoint', $event)" [disabled]="!isEditable || !hasMaxPoint" aria-label="Maximum Value Input">
                 <b class="ngb-tooltip-class" ngbTooltip="The maximum allocation of the points to an option, e.g if you specify 30 points here, the user must input a value smaller than or equal to 30 for each option.">maximum per option</b>
               </label>

diff --git a/.../question-edit-details-form/constsum-options-question-edit-details-form.component.spec.ts b/.../question-edit-details-form/constsum-options-question-edit-details-form.component.spec.ts
@@ -1,6 +1,7 @@
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { ConstsumOptionsFieldComponent } from './constsum-options-field/constsum-options-field.component';
 import {
   ConstsumOptionsQuestionEditDetailsFormComponent,
@@ -63,4 +64,22 @@ describe('ConstsumOptionsQuestionEditDetailsFormComponent', () => {
     component.onPointsInput(event);
     expect(eventSpy).not.toHaveBeenCalled();
   });
+
+  it('should allow a 5 digit number input', () => {
+    const inputElement = fixture.debugElement.query(By.css('#max-point')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '12345';
+    component.restrictPointsLength(inputEvent, 'points');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('12345');
+  });
+
+  it('should restrict a 15 digit number input', () => {
+    const inputElement = fixture.debugElement.query(By.css('#max-point')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '123456789012345';
+    component.restrictPointsLength(inputEvent, 'points');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('123456789');
+  });
 });
diff --git a/...types/question-edit-details-form/constsum-options-question-edit-details-form.component.ts b/...types/question-edit-details-form/constsum-options-question-edit-details-form.component.ts
@@ -127,18 +127,4 @@ export class ConstsumOptionsQuestionEditDetailsFormComponent
       this.triggerModelChange('minPoint', undefined);
     }
   }
-
-  restrictPointsLength(event : InputEvent, isMin : boolean, isMax : boolean) : void {
-    const target : HTMLInputElement = event.target as HTMLInputElement;
-    if (target.value != null && target.value.length > 9 && !isMin && !isMax) {
-      this.triggerModelChange('points', this.model.points);
-      target.value = target.value.substring(0, 9);
-    } else if (target.value != null && target.value.length > 9 && isMin) {
-      this.triggerModelChange('minPoint', this.model.minPoint);
-      target.value = target.value.substring(0, 9);
-    } else if (target.value != null && target.value.length > 9 && isMax) {
-      this.triggerModelChange('maxPoint', this.model.maxPoint);
-      target.value = target.value.substring(0, 9);
-    }
-  }
 }
diff --git a/.../question-edit-details-form/constsum-recipients-question-edit-details-form.component.html b/.../question-edit-details-form/constsum-recipients-question-edit-details-form.component.html
@@ -9,7 +9,7 @@
         <div class="col-sm-3">
           <input id="total-points-radio" class="form-check-input" type="radio" [ngModel]="model.pointsPerOption" [value]="false"
                  (ngModelChange)="triggerModelChange('pointsPerOption', $event)" [disabled]="!isEditable" aria-label="Use Total Points Checkbox">
-          <input id="total-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event)"
+          <input id="total-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'points')"
                  [ngModel]="!model.pointsPerOption ? model.points : ''" (ngModelChange)="triggerModelChange('points', $event)" [disabled]="!isEditable || model.pointsPerOption" aria-label="Total Points Input">
         </div>
         <div class="col-sm-9 text-start">
@@ -22,7 +22,7 @@
         <div class="col-sm-3">
           <input id="per-option-points-radio" class="form-check-input" type="radio" [ngModel]="model.pointsPerOption" [value]="true"
                  (ngModelChange)="triggerModelChange('pointsPerOption', $event)" [disabled]="!isEditable" aria-label="Use Total Points Times Number of Recipients Checkbox">
-          <input id="per-option-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event)"
+          <input id="per-option-points" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'points')"
                  [ngModel]="model.pointsPerOption ? model.points : ''" (ngModelChange)="triggerModelChange('points', $event)" [disabled]="!isEditable || !model.pointsPerOption" aria-label="Points Input">
         </div>
         <div class="col-sm-9 text-start">

diff --git a/...estion-edit-details-form/constsum-recipients-question-edit-details-form.component.spec.ts b/...estion-edit-details-form/constsum-recipients-question-edit-details-form.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import {
   ConstsumRecipientsQuestionEditDetailsFormComponent,
 } from './constsum-recipients-question-edit-details-form.component';
@@ -58,4 +59,22 @@ describe('ConstsumRecipientsQuestionEditDetailsFormComponent', () => {
     component.onPointsInput(event);
     expect(eventSpy).not.toHaveBeenCalled();
   });
+
+  it('should allow a 5 digit number input', () => {
+    const inputElement = fixture.debugElement.query(By.css('#total-points')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '12345';
+    component.restrictPointsLength(inputEvent, 'points');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('12345');
+  });
+
+  it('should restrict a 15 digit number input', () => {
+    const inputElement = fixture.debugElement.query(By.css('#total-points')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '123456789012345';
+    component.restrictPointsLength(inputEvent, 'points');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('123456789');
+  });
 });
diff --git a/...es/question-edit-details-form/constsum-recipients-question-edit-details-form.component.ts b/...es/question-edit-details-form/constsum-recipients-question-edit-details-form.component.ts
@@ -37,12 +37,4 @@ export class ConstsumRecipientsQuestionEditDetailsFormComponent
           : FeedbackConstantSumDistributePointsType.NONE,
     });
   }
-
-  restrictPointsLength(event : InputEvent) : void {
-    const target : HTMLInputElement = event.target as HTMLInputElement;
-    if (target.value != null && target.value.length > 9) {
-      this.triggerModelChange('points', this.model.points);
-      target.value = target.value.substring(0, 9);
-    }
-  }
 }
diff --git a/...tion-types/question-edit-details-form/num-scale-question-edit-details-form.component.html b/...tion-types/question-edit-details-form/num-scale-question-edit-details-form.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-sm-4">
     <span class="ngb-tooltip-class" ngbTooltip="Minimum acceptable response value">Minimum value:</span>
-    <input id="min-value" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, true)"
+    <input id="min-value" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'minScale')"
            [ngModel]="model.minScale" (ngModelChange)="triggerModelChange('minScale', $event)" [disabled]="!isEditable" aria-label="Minimum Value Input">
   </div>
   <div class="col-sm-4">
@@ -11,7 +11,7 @@
   </div>
   <div class="col-sm-4">
     <span class="ngb-tooltip-class" ngbTooltip="Maximum acceptable response value">Maximum value:</span>
-    <input id="max-value" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, false)"
+    <input id="max-value" type="number" class="form-control" (keypress)="onPointsInput($event)" (paste)="onPaste($event)" min="1" max="999999999" (input)="restrictPointsLength($event, 'maxScale')"
            [ngModel]="model.maxScale" (ngModelChange)="triggerModelChange('maxScale', $event)" [disabled]="!isEditable" min="{{ Math.ceil(model.minScale + model.step) }}" aria-label="Maximum Value Input">
   </div>
 </div>

diff --git a/...n-types/question-edit-details-form/num-scale-question-edit-details-form.component.spec.ts b/...n-types/question-edit-details-form/num-scale-question-edit-details-form.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { NumScaleQuestionEditDetailsFormComponent } from './num-scale-question-edit-details-form.component';
 
 describe('NumScaleQuestionEditDetailsFormComponent', () => {
@@ -56,4 +57,22 @@ describe('NumScaleQuestionEditDetailsFormComponent', () => {
     expect(eventSpy).not.toHaveBeenCalled();
   });
 
+  it('should allow a 5 digit number input', () => {
+    const inputElement = fixture.debugElement.query(By.css('#max-value')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '12345';
+    component.restrictPointsLength(inputEvent, 'minScale');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('12345');
+  });
+
+  it('should restrict a 15 digit number input to 9 characters', () => {
+    const inputElement = fixture.debugElement.query(By.css('#max-value')).nativeElement as HTMLInputElement;
+    const inputEvent = new InputEvent('input');
+    inputElement.dispatchEvent(inputEvent);
+    (inputEvent.target as HTMLInputElement).value = '123456789012345';
+    component.restrictPointsLength(inputEvent, 'minScale');
+    expect((inputEvent.target as HTMLInputElement).value).toEqual('123456789');
+  });
+
 });
diff --git a/...estion-types/question-edit-details-form/num-scale-question-edit-details-form.component.ts b/...estion-types/question-edit-details-form/num-scale-question-edit-details-form.component.ts
@@ -56,15 +56,4 @@ export class NumScaleQuestionEditDetailsFormComponent
     }
     return `[${possibleValuesString}]`;
   }
-
-  restrictPointsLength(event : InputEvent, isMin : boolean) : void {
-    const target : HTMLInputElement = event.target as HTMLInputElement;
-    if (target.value != null && target.value.length > 9 && isMin) {
-      this.triggerModelChange('minScale', this.model.minScale);
-      target.value = target.value.substring(0, 9);
-    } else if (target.value != null && target.value.length > 9) {
-      this.triggerModelChange('maxScale', this.model.maxScale);
-      target.value = target.value.substring(0, 9);
-    }
-  }
 }
diff --git a/...ponents/question-types/question-edit-details-form/question-edit-details-form.component.ts b/...ponents/question-types/question-edit-details-form/question-edit-details-form.component.ts
@@ -58,6 +58,13 @@ export abstract class QuestionEditDetailsFormComponent<D extends FeedbackQuestio
     if (!isDigit) {
       event.preventDefault();
     }
+  }
 
+  restrictPointsLength(event : InputEvent, field: keyof D) : void {
+    const target : HTMLInputElement = event.target as HTMLInputElement;
+    if (target.value != null && target.value.length > 9) {
+      target.value = target.value.substring(0, 9);
+      this.triggerModelChange(field, parseInt(target.value, 10) as any);
+    }
   }
 }