mes-9511: text areas standardisation

src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.html

@@ -13,17 +13,27 @@
           id="eco-capture-reason-text"
           formControlName="ecoCaptureReason"
           class="mes-data input-styling-background"
+          [charLimit]="characterLimit"
+          charCount
+          [class.ng-invalid]="invalid"
           [value]="ecoCaptureReason"
-          [maxLength]="1000"
+          (onCharacterCountChanged)="characterCountChanged($event)"
           (change)="ecoCaptureReasonChanged($event.target.value)"
           emojiBlock
           pasteSanitiser
         >
         </textarea>
+        <div class="character-count-standard validation-text" [ngClass]="{'ng-invalid': charactersExceeded()}">
+          {{ getCharacterCountText() }}
+        </div>
       </ion-col>
     </ion-row>
     <ion-row class="validation-message-row ion-align-items-center">
-      <div class="validation-text" [class.ng-invalid]="invalid" *ngIf="invalid" id="eco-capture-reason-validation-text">
+      <div
+        class="validation-text"
+        [class.ng-invalid]="invalid"
+        *ngIf="invalid && !charactersExceeded()"
+        id="eco-capture-reason-validation-text">
         Please provide a reason for ECO capture
       </div>
     </ion-row>

src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.ts

@@ -1,13 +1,14 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { CharacterCountService } from '@providers/character-count/character-count.service';
 
 @Component({
   selector: 'eco-capture-reason',
   templateUrl: 'eco-capture-reason.html',
 })
 export class EcoCaptureReasonComponent implements OnChanges {
   @Input()
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   @Input()
   ecoCaptureReason: string;
@@ -18,20 +19,34 @@ export class EcoCaptureReasonComponent implements OnChanges {
   @Output()
   ecoCaptureReasonChange = new EventEmitter<string>();
 
-  private formControl: FormControl;
+  formControl: UntypedFormControl;
+  charsRemaining: number = null;
+  characterLimit = 1000;
+  static readonly controlName: string = 'ecoCaptureReason';
+
+  constructor(public characterCountService: CharacterCountService) {}
 
   ngOnChanges(): void {
     if (!this.formControl) {
-      this.formControl = new FormControl(null);
-      this.formGroup.addControl('ecoCaptureReason', this.formControl);
+      this.formControl = new UntypedFormControl(null);
+      this.formGroup.addControl(EcoCaptureReasonComponent.controlName, this.formControl);
     }
 
-    this.formControl.setValidators(
-      this.fuelEfficientDriving ? Validators.compose([Validators.required, Validators.maxLength(1000)]) : null
-    );
-    this.formControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    if (this.fuelEfficientDriving) {
+      this.formGroup
+        .get(EcoCaptureReasonComponent.controlName)
+        .setValidators([Validators.required, this.charactersExceededValidator()]);
+    } else {
+      this.formGroup.get(EcoCaptureReasonComponent.controlName).setValidators([this.charactersExceededValidator()]);
+    }
 
-    this.formControl.patchValue(this.ecoCaptureReason, { onlySelf: true, emitEvent: false });
+    this.formControl.patchValue(this.ecoCaptureReason);
+  }
+
+  charactersExceededValidator(): ValidatorFn {
+    return (): ValidationErrors | null => {
+      return this.characterCountService.charactersExceeded(this.charsRemaining) ? { charactersExceeded: true } : null;
+    };
   }
 
   ecoCaptureReasonChanged(ecoCaptureReason: string): void {
@@ -43,4 +58,23 @@ export class EcoCaptureReasonComponent implements OnChanges {
   get invalid(): boolean {
     return !this.formControl.valid && this.formControl.dirty;
   }
+
+  characterCountChanged(charactersRemaining: number) {
+    this.charsRemaining = charactersRemaining;
+    this.formControl.updateValueAndValidity();
+  }
+
+  /**
+   * Request appropriate character count text based upon how many characters are remaining
+   */
+  getCharacterCountText(): string {
+    return this.characterCountService.getCharacterCountText(this.charsRemaining);
+  }
+
+  /**
+   * Request whether the character count has been exceeded
+   */
+  charactersExceeded(): boolean {
+    return this.characterCountService.charactersExceeded(this.charsRemaining);
+  }
 }

src/app/pages/pass-finalisation/cat-adi-part3/components/reason-given/reason-given.component.html

@@ -7,20 +7,22 @@
     <ion-row class="spacing-row"></ion-row>
     <ion-row>
       <textarea
+        id="ordit-reason-for-advice-textarea"
         formControlName="reasonGiven"
         name="reasonGiven"
-        charCount
         class="mes-data input-styling-background"
         [charLimit]="noAdviceMaxLength"
+        charCount
         [value]="reasonGivenText"
-        (change)="adviceReasonChange($event.target.value)"
         (onCharacterCountChanged)="characterCountChanged($event)"
-        id="ordit-reason-for-advice-textarea"
+        (change)="adviceReasonChange($event.target.value)"
         emojiBlock
         pasteSanitiser
       >
       </textarea>
-      <div class="character-count validation-text">{{ getCharacterCountText() }}</div>
+      <div class="character-count-standard validation-text" [ngClass]="{'ng-invalid': charactersExceeded()}">
+        {{ getCharacterCountText() }}
+      </div>
     </ion-row>
     <ion-row class="validation-message-row ion-align-items-center">
       <div class="validation-text" [class.ng-invalid]="invalid" id="reason-given-validation-text">

src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.html

@@ -150,15 +150,15 @@ <h3 id="lesson-theme-card-title" class="des-header-style-3">Lesson theme:</h3>
           <ion-row>
             <ion-col class="textarea-input">
               <textarea
+                id="lesson-theme-text"
+                formControlName="otherReason"
+                class="mes-data input-styling-background"
                 [charLimit]="characterLimit"
-                [maxlength]="characterLimit"
                 charCount
                 [class.ng-invalid]="invalid"
                 [value]="otherReason"
                 (onCharacterCountChanged)="characterCountChanged($event)"
                 (change)="otherReasoningChanged($event.target.value)"
-                formControlName="otherReason"
-                class="mes-data input-styling-background"
                 emojiBlock
                 pasteSanitiser
               >

src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.ts

@@ -24,7 +24,7 @@ export class LessonThemeComponent implements OnChanges {
   otherReasoningChange = new EventEmitter<string>();
 
   formControl: UntypedFormControl;
-  charsRemaining: number;
+  charsRemaining: number = null;
   characterLimit = 1000;
   static readonly fieldName: string = 'otherReason';