Skip to content

Commit

Permalink
gh-442 - update registration page with new properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@abwilson23
abwilson23 committed Nov 21, 2024
1 parent 462e880 commit 1e50d43
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 68 deletions.
197 changes: 166 additions & 31 deletions src/app/pages/user-registration/user-registration-form/user-registration-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,113 @@ <h2>Personal details</h2>
</div>
</div>
</div>
<div class="row">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Job Title</mat-label>
<input
matInput
type="text"
name="jobTitle"
formControlName="jobTitle"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.jobTitle.errors?.required">
Job title is required
</mat-error>
</mat-form-field>
</div>
</div>
<h2>Licenses and Accreditations</h2>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>ORCID Id</mat-label>
<input
matInput
type="text"
name="orcidId"
formControlName="orcidId"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.orcidId.errors?.required">
OrcidId is required
</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>GMC Number</mat-label>
<input
matInput
type="text"
name="gmcNumber"
formControlName="gmcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.gmcNumber.errors?.required">
GMC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>NMC Number</mat-label>
<input
matInput
type="text"
name="nmcNumber"
formControlName="nmcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.nmcNumber.errors?.required">
NMC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>HCPC Number</mat-label>
<input
matInput
type="text"
name="hcpcNumber"
formControlName="hcpcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.hcpcNumber.errors?.required">
HCPC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>AR Number</mat-label>
<input
matInput
type="text"
name="arNumber"
formControlName="arNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.arNumber.errors?.required">
AR Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>

<!-- Organisation section -->
Expand Down Expand Up @@ -127,45 +234,71 @@ <h2>Organisation</h2>
</div>

<div *ngIf="isCreatingNewOrganisation">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Name</mat-label>
<input matInput type="text" formControlName="orgName" required />
<mat-error *ngIf="organisationDetails.orgName.errors?.required"
>Organisation name is required</mat-error
>
</mat-form-field>
</div>
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Website</mat-label>
<input matInput type="url" formControlName="orgWebsite" required />
<mat-error *ngIf="organisationDetails.orgWebsite.errors?.required"
>Website is required</mat-error
>
</mat-form-field>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Name</mat-label>
<input matInput type="text" formControlName="organisationName" required />
<mat-error *ngIf="organisationDetails.organisationName.errors?.required"
>Organisation name is required</mat-error
>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Legal Name</mat-label>
<input matInput type="text" formControlName="organisationLegalName" required />
<mat-error *ngIf="organisationDetails.organisationLegalName.errors?.required"
>Organisation legal name is required</mat-error
>
</mat-form-field>
</div>
</div>
</div>
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Country of Registration</mat-label>
<input matInput type="text" formControlName="orgCountryOfRegistration" required />
<mat-error *ngIf="organisationDetails.orgCountryOfRegistration.errors?.required"
>Country of registration is required</mat-error
>
</mat-form-field>

<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Website</mat-label>
<input matInput type="url" formControlName="organisationWebsite" required />
<mat-error *ngIf="organisationDetails.organisationWebsite.errors?.required"
>Website is required</mat-error
>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisations country of origin</mat-label>
<input matInput type="text" formControlName="organisationCountryOfOrigin" required />
<mat-error *ngIf="organisationDetails.organisationCountryOfOrigin.errors?.required"
>Country of origin is required</mat-error
>
</mat-form-field>
</div>
</div>
</div>
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Type</mat-label>
<input matInput type="text" formControlName="orgType" required />
<mat-error *ngIf="organisationDetails.orgType.errors?.required"
<mat-select formControlName="organisationType">
<mat-option *ngFor="let type of organisationTypeOptions" [value]="type.value">
{{ type.displayName }}
</mat-option>
</mat-select>
<mat-error *ngIf="organisationDetails.organisationType.errors?.required"
>Organisation type is required</mat-error
>
</mat-form-field>
</div>
<div class="form-input mb-2">
<mat-checkbox formControlName="smallMediumBusinessStatus"
>Does you company have Small/Medium Business status?</mat-checkbox
<mat-checkbox formControlName="organisationIsSmb"
>Does your company have Small/Medium Business status?</mat-checkbox
>
</div>
</div>
Expand All @@ -181,8 +314,10 @@ <h2>Department</h2>
<div formGroupName="departmentDetails">
<mat-form-field *ngIf="isCreatingNewOrganisation" [appearance]="formFieldAppearance">
<mat-label>Department Name</mat-label>
<input matInput formControlName="deptName" />
<mat-error *ngIf="departmentDetails.deptName.invalid">Department Name is required</mat-error>
<input matInput formControlName="departmentName" />
<mat-error *ngIf="departmentDetails.departmentName.invalid"
>Department Name is required</mat-error
>
</mat-form-field>
<mat-form-field *ngIf="!isCreatingNewOrganisation" [appearance]="formFieldAppearance">
<mat-label>Department</mat-label>
Expand Down
111 changes: 75 additions & 36 deletions src/app/pages/user-registration/user-registration-form/user-registration-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,34 @@ export interface UserRegistrationFormData {
lastName: string;
email: string;
phoneNumber: string;
additionalInfo: string;
confirmations: boolean;
organisation: string;
orgName: string;
positionAtOrganisation: string;
orgWebsite: string;
orgCountryOfRegistration: string;
orgType: string;
smallMediumBusinessStatus: string;
deptName: string;
jobTitle: string;
orcidId: string;
gmcNumber: string;
nmcNumber: string;
hcpcNumber: string;
arNumber: string;
organisationId: string;
organisationName: string;
organisationLegalName: string;
organisationWebsite: string;
organisationCountryOfOrigin: string;
organisationType: OrganisationType;
organisationIsSmb: boolean;
departmentId: string;
departmentName: string;
}

export type OrganisationType = 'NOT_SELECTED' | 'UNIVERSITY' | 'HEALTHTECH';
export interface OrganisationTypeOption {
value: OrganisationType;
displayName: 'University' | 'Healthcare technology company';
}

export const ORGANISATION_TYPE_OPTIONS: OrganisationTypeOption[] = [
{ value: 'UNIVERSITY', displayName: 'University' },
{ value: 'HEALTHTECH', displayName: 'Healthcare technology company' },
];

@Component({
selector: 'mdm-user-registration-form',
templateUrl: './user-registration-form.component.html',
Expand All @@ -54,26 +70,36 @@ export class UserRegistrationFormComponent {
formFieldAppearance: MatFormFieldAppearance = 'outline';
isCreatingNewOrganisation = false;

organisationTypeOptions = ORGANISATION_TYPE_OPTIONS;

registrationForm: FormGroup = this.formBuilder.group({
personalDetails: this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.compose([Validators.required, Validators.email])],
phoneNumber: ['', Validators.pattern('^[- +()0-9]+$')],
additionalInfo: null,
confirmations: false,
jobTitle: ['', Validators.required],
orcidId: null,
gmcNumber: null,
nmcNumber: null,
hcpcNumber: null,
arNumber: null,

// TODO: Unconfirmed field.
// confirmations: false,
}),
organisationDetails: this.formBuilder.group({
organisation: ['', Validators.required],
orgName: null,
orgWebsite: null,
orgCountryOfRegistration: null,
orgType: null,
smallMediumBusinessStatus: null,
organisationName: null,
organisationLegalName: null,
organisationWebsite: null,
organisationCountryOfOrigin: null,
organisationType: null,
organisationIsSmb: null,
}),
departmentDetails: this.formBuilder.group({
department: ['', Validators.required],
deptName: null,
departmentName: null,
}),
});

Expand Down Expand Up @@ -148,42 +174,55 @@ export class UserRegistrationFormComponent {
if (this.isCreatingNewOrganisation) {
this.registrationForm.get('organisationDetails.organisation')?.clearValidators();
this.registrationForm.get('departmentDetails.department')?.clearValidators();
this.registrationForm.get('organisationDetails.orgName')?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.orgWebsite')
.get('organisationDetails.organisationName')
?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.orgCountryOfRegistration')
.get('organisationDetails.organisationLegalName')
?.setValidators(Validators.required);
this.registrationForm.get('organisationDetails.orgType')?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.smallMediumBusinessStatus')
.get('organisationDetails.organisationWebsite')
?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.organisationCountryOfOrigin')
?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.organisationType')
?.setValidators(Validators.required);
this.registrationForm
.get('organisationDetails.organisationIsSmb')
?.setValidators(Validators.required);
this.registrationForm
.get('departmentDetails.departmentName')
?.setValidators(Validators.required);
this.registrationForm.get('departmentDetails.deptName')?.setValidators(Validators.required);
} else {
this.registrationForm
.get('organisationDetails.organisation')
?.setValidators(Validators.required);
this.registrationForm.get('organisationDetails.orgName')?.clearValidators();
this.registrationForm.get('organisationDetails.orgWebsite')?.clearValidators();
this.registrationForm.get('organisationDetails.orgCountryOfRegistration')?.clearValidators();
this.registrationForm.get('organisationDetails.orgType')?.clearValidators();
this.registrationForm.get('organisationDetails.smallMediumBusinessStatus')?.clearValidators();
this.registrationForm.get('organisationDetails.organisationName')?.clearValidators();
this.registrationForm.get('organisationDetails.organisationLegalName')?.clearValidators();
this.registrationForm.get('organisationDetails.organisationWebsite')?.clearValidators();
this.registrationForm
.get('organisationDetails.organisationCountryOfOrigin')
?.clearValidators();
this.registrationForm.get('organisationDetails.organisationType')?.clearValidators();
this.registrationForm.get('organisationDetails.organisationIsSmb')?.clearValidators();
this.registrationForm.get('departmentDetails.department')?.setValidators(Validators.required);
this.registrationForm.get('departmentDetails.deptName')?.clearValidators();
this.registrationForm.get('departmentDetails.departmentName')?.clearValidators();
}

this.registrationForm.get('organisationDetails.organisation')?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.orgName')?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.orgWebsite')?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.organisationName')?.updateValueAndValidity();
this.registrationForm
.get('organisationDetails.orgCountryOfRegistration')
.get('organisationDetails.organisationLegalName')
?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.orgType')?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.organisationWebsite')?.updateValueAndValidity();
this.registrationForm
.get('organisationDetails.smallMediumBusinessStatus')
.get('organisationDetails.organisationCountryOfOrigin')
?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.organisationType')?.updateValueAndValidity();
this.registrationForm.get('organisationDetails.organisationIsSmb')?.updateValueAndValidity();
this.registrationForm.get('departmentDetails.department')?.updateValueAndValidity();
this.registrationForm.get('departmentDetails.deptName')?.updateValueAndValidity();
this.registrationForm.get('departmentDetails.departmentName')?.updateValueAndValidity();
}
}
Loading

0 comments on commit 1e50d43

Please sign in to comment.