VIH-10367 Add Judicial Office Holder Validation display

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/add-judicial-office-holders/add-judicial-office-holders.component.html

@@ -44,7 +44,9 @@ <h2 class="govuk-heading-m">Add a Judicial Office Holder</h2>
       </div>
 
       <div class="vh-top govuk-grid-column-full">
-        <button id="nextButtonToParticipants" class="govuk-button" data-module="govuk-button" (click)="continueToNextStep()">Next</button>
+        <button id="nextButtonToParticipants" class="govuk-button" data-module="govuk-button" (click)="continueToNextStep()">
+          {{ judiciaryMembersAdded ? 'Next' : 'Continue Without Judiciary' }}
+        </button>
       </div>
     </div>
   </div>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/add-judicial-office-holders/add-judicial-office-holders.component.spec.ts

@@ -173,5 +173,11 @@ describe('AddJudicialOfficeHoldersComponent', () => {
             expect(component.editingPanelMember).toBeFalse();
             expect(component.showAddPanelMember).toBeFalse();
         });
+
+        it('judiciaryMembersAdded should be true when there are judiciary members', () => {
+            // Arrange
+            component.hearing.judiciaryParticipants = [{} as any];
+            expect(component.judiciaryMembersAdded).toBeTrue();
+        });
     });
 });

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/add-judicial-office-holders/add-judicial-office-holders.component.ts

@@ -133,4 +133,8 @@ export class AddJudicialOfficeHoldersComponent implements OnInit, OnDestroy {
             this.addPanelMemberText = this.noPanelMemberText;
         }
     }
+
+    get judiciaryMembersAdded(): boolean {
+        return this.hearing.judiciaryParticipants.length > 0;
+    }
 }

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.html

@@ -1,5 +1,8 @@
 <form [formGroup]="form">
   <div class="govuk-form-group">
+    <div *ngIf="judiciaryEmailFieldHasError" class="alert alert-danger">
+      <span id="judiciaryEmailInputError" class="govuk-error-message">Email Invalid</span>
+    </div>
     <label class="govuk-label" for="judiciaryEmailInput">Email</label>
     <input id="judiciaryEmailInput" class="govuk-input" type="email" autocomplete="off" formControlName="judiciaryEmail" tabindex="1" />
     <ul id="search-results-list" *ngIf="showResult && searchResult?.length > 0" class="vh-li-email govuk-body">
@@ -10,6 +13,9 @@
   </div>
 
   <div class="govuk-form-group">
+    <div *ngIf="displayNameFieldHasError" class="alert alert-danger">
+      <span id="judiciaryDisplayNameInputError" class="govuk-error-message">Display Name Invalid</span>
+    </div>
     <label class="govuk-label" for="judiciaryDisplayNameInput">Display Name</label>
     <input id="judiciaryDisplayNameInput" class="govuk-input" type="text" formControlName="displayName" tabindex="2" />
   </div>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.spec.ts

@@ -215,5 +215,31 @@ describe('SearchForJudicialMemberComponent', () => {
             expect(component.showResult).toBeTrue();
             expect(judicialServiceSpy.getJudicialUsers).toHaveBeenCalledWith('[email protected]');
         }));
+
+        it('judiciaryEmailFieldHasError should return true when judiciaryEmail is invalid, then show false for a valid one', () => {
+            const invalidEmails = ['te ##d##1#4#14 232 ', 'test', 'test@', 'test@test', 'test@test.'];
+            invalidEmails.forEach(email => {
+                component.form.controls.judiciaryEmail.markAsDirty();
+                component.form.controls.judiciaryEmail.setValue(email);
+                component.form.controls.judiciaryEmail.updateValueAndValidity();
+                expect(component.judiciaryEmailFieldHasError).toBeTrue();
+            });
+            component.form.controls.judiciaryEmail.setValue('[email protected]');
+            fixture.detectChanges();
+            expect(component.judiciaryEmailFieldHasError).toBeFalse();
+        });
+
+        it('displayNameFieldHasError should return true when displayName is invalid, then show false for a valid one', () => {
+            const invalidDisplayNames = ['!', 'Test//User ', 'Test#####'];
+            invalidDisplayNames.forEach(displayName => {
+                component.form.controls.displayName.markAsDirty();
+                component.form.controls.displayName.setValue(displayName);
+                component.form.controls.displayName.updateValueAndValidity();
+                expect(component.displayNameFieldHasError).toBeTrue();
+            });
+            component.form.controls.displayName.setValue('Test User');
+            fixture.detectChanges();
+            expect(component.displayNameFieldHasError).toBeFalse();
+        });
     });
 });

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.ts

@@ -4,6 +4,7 @@ import { JudicialService } from '../../services/judicial.service';
 import { JudiciaryPerson } from 'src/app/services/clients/api-client';
 import { debounceTime, tap } from 'rxjs';
 import { JudicialMemberDto } from '../models/add-judicial-member.model';
+import { Constants } from '../../../common/constants';
 
 @Component({
     selector: 'app-search-for-judicial-member',
@@ -44,8 +45,12 @@ export class SearchForJudicialMemberComponent {
 
     createForm() {
         this.form = new FormGroup<SearchForJudicialMemberForm>({
-            judiciaryEmail: new FormControl<string>('', [Validators.required, Validators.minLength(3)]),
-            displayName: new FormControl<string>('')
+            judiciaryEmail: new FormControl<string>('', [
+                Validators.required,
+                Validators.pattern(Constants.EmailPattern),
+                Validators.maxLength(255)
+            ]),
+            displayName: new FormControl<string>('', [Validators.pattern(Constants.TextInputPatternDisplayName), Validators.maxLength(255)])
         });
 
         this.form.controls.judiciaryEmail.valueChanges
@@ -112,6 +117,14 @@ export class SearchForJudicialMemberComponent {
         });
         this.form.controls.displayName.removeValidators(Validators.required);
     }
+
+    get judiciaryEmailFieldHasError(): boolean {
+        return this.form.controls.judiciaryEmail.invalid && this.form.controls.judiciaryEmail.dirty;
+    }
+
+    get displayNameFieldHasError(): boolean {
+        return this.form.controls.displayName.invalid && this.form.controls.displayName.dirty;
+    }
 }
 
 interface SearchForJudicialMemberForm {