Add consortium member

ui/src/app/home/consortium/add-consortium-member.component.scss

@@ -0,0 +1,63 @@
+@use '../../../content/scss/bootstrap-variables' as global;
+
+input {
+  font-size: 14px;
+  letter-spacing: 0.25px;
+}
+
+input,
+select,
+option {
+  height: 40px;
+}
+
+.ng-invalid:not(form) {
+  border: 1px solid #d32f2f;
+  border-radius: 2px;
+}
+
+label {
+  margin-bottom: 0.25rem;
+}
+
+.error-message {
+  img {
+    padding: 0 16px 0 8px !important;
+    margin-top: -1.75rem;
+  }
+  div {
+    font-size: 0.875rem;
+  }
+  border: 2px solid #b71c1c;
+  border-radius: 4px;
+}
+
+.warning-message {
+  img {
+    padding: 0 16px 0 8px !important;
+    margin-top: -3rem;
+  }
+  div {
+    font-size: 0.875rem;
+  }
+  border: 2px solid #ff9c00;
+  border-radius: 4px;
+}
+
+.radio {
+  height: 1.125rem;
+  width: 1.125rem;
+  accent-color: global.$info;
+}
+
+.date-dropdown {
+  width: 7.5rem;
+}
+
+.postcode-input-field {
+  max-width: 180px;
+}
+
+.org-name-input-field {
+  max-width: 400px;
+}

ui/src/app/home/consortium/add-consortium-member.component.spec.ts

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AddConsortiumMemberComponent } from './add-consortium-member.component'
+import { MemberService } from 'src/app/member/service/member.service'
+import { AccountService } from 'src/app/account'
+import { AlertService } from 'src/app/shared/service/alert.service'
+import { ActivatedRoute, Router } from '@angular/router'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { of } from 'rxjs'
+import { AlertType } from 'src/app/app.constants'
+
+describe('AddConsortiumMemberComponent', () => {
+  let component: AddConsortiumMemberComponent
+  let fixture: ComponentFixture<AddConsortiumMemberComponent>
+
+  let memberServiceSpy: jasmine.SpyObj<MemberService>
+  let accountServiceSpy: jasmine.SpyObj<AccountService>
+  let alertServiceSpy: jasmine.SpyObj<AlertService>
+  let activatedRoute: jasmine.SpyObj<ActivatedRoute>
+  let router: jasmine.SpyObj<Router>
+
+  beforeEach(() => {
+    memberServiceSpy = jasmine.createSpyObj('MemberService', ['addConsortiumMember'])
+    accountServiceSpy = jasmine.createSpyObj('AccountService', ['getAccountData'])
+    alertServiceSpy = jasmine.createSpyObj('AlertService', ['broadcast'])
+
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [AddConsortiumMemberComponent],
+      providers: [
+        { provide: MemberService, useValue: memberServiceSpy },
+        { provide: AccountService, useValue: accountServiceSpy },
+        { provide: AlertService, useValue: alertServiceSpy },
+      ],
+    })
+
+    accountServiceSpy = TestBed.inject(AccountService) as jasmine.SpyObj<AccountService>
+    memberServiceSpy = TestBed.inject(MemberService) as jasmine.SpyObj<MemberService>
+    alertServiceSpy = TestBed.inject(AlertService) as jasmine.SpyObj<AlertService>
+    router = TestBed.inject(Router) as jasmine.SpyObj<Router>
+    activatedRoute = TestBed.inject(ActivatedRoute) as jasmine.SpyObj<ActivatedRoute>
+
+    fixture = TestBed.createComponent(AddConsortiumMemberComponent)
+    component = fixture.componentInstance
+
+    spyOn(router, 'navigate').and.returnValue(Promise.resolve(true))
+
+    accountServiceSpy.getAccountData.and.returnValue(
+      of({
+        activated: true,
+        authorities: ['test', 'test'],
+        email: '[email protected]',
+        firstName: 'name',
+        langKey: 'en',
+        lastName: 'surname',
+        imageUrl: 'url',
+        salesforceId: 'sfid',
+        loggedAs: false,
+        loginAs: 'sfid',
+        mainContact: false,
+        mfaEnabled: true,
+      })
+    )
+
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should call memberService.updateContact when saving', () => {
+    memberServiceSpy.addConsortiumMember.and.returnValue(of(true))
+
+    // set form to valid
+    for (const control in component.editForm.controls) {
+      component.editForm.controls[control].clearAsyncValidators()
+      component.editForm.controls[control].clearValidators()
+      component.editForm.controls[control].updateValueAndValidity({ onlySelf: true })
+    }
+    component.editForm.updateValueAndValidity()
+
+    component.save()
+
+    expect(memberServiceSpy.addConsortiumMember).toHaveBeenCalled()
+  })
+
+  it('alert service and router should be called on save success', () => {
+    component.onSaveSuccess()
+    expect(alertServiceSpy.broadcast).toHaveBeenCalledWith(AlertType.CONSORTIUM_MEMBER_ADDED)
+    expect(router.navigate).toHaveBeenCalled()
+  })
+})

ui/src/app/home/consortium/add-consortium-member.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit } from '@angular/core'
+import { FormGroup, FormBuilder, Validators } from '@angular/forms'
+import { Router, ActivatedRoute } from '@angular/router'
+import { combineLatest, take } from 'rxjs'
+import { AccountService } from '../../account'
+import { AlertType, EMAIL_REGEXP } from '../../app.constants'
+import { AlertService } from '../../shared/service/alert.service'
+import { DateUtilService } from '../../shared/service/date-util.service'
+import { ISFCountry } from '../../member/model/salesforce-country.model'
+import { ISFState } from '../../member/model/salesforce-country.model copy'
+import { ISFMemberData } from '../../member/model/salesforce-member-data.model'
+import { ISFNewConsortiumMember } from '../../member/model/salesforce-new-consortium-member.model'
+import { MemberService } from '../../member/service/member.service'
+
+@Component({
+  selector: 'app-add-consortium-member',
+  templateUrl: './add-consortium-member.component.html',
+  styleUrls: ['./add-consortium-member.component.scss'],
+})
+export class AddConsortiumMemberComponent implements OnInit {
+  countries: ISFCountry[] | undefined
+  states: ISFState[] | undefined
+  memberData: ISFMemberData | undefined | null
+  isSaving = false
+  invalidForm = false
+  routeData: any
+  currentMonth: number | undefined
+  currentYear: number | undefined
+  monthList: [number, string][] | undefined
+  yearList: number[] | undefined
+  editForm: FormGroup = this.fb.group({
+    orgName: [null, [Validators.required, Validators.maxLength(41)]],
+    emailDomain: [null, [Validators.maxLength(255)]],
+    street: [null, [Validators.maxLength(255)]],
+    city: [null, [Validators.maxLength(40)]],
+    state: [null, [Validators.maxLength(80)]],
+    country: [null, [Validators.required]],
+    postcode: [null, [Validators.maxLength(20)]],
+    trademarkLicense: [null, [Validators.required]],
+    startMonth: [null, [Validators.required]],
+    startYear: [null, [Validators.required]],
+    contactGivenName: [null, [Validators.required, Validators.maxLength(40)]],
+    contactFamilyName: [null, [Validators.required, Validators.maxLength(80)]],
+    contactJobTitle: [null, [Validators.maxLength(128)]],
+    contactEmail: [null, [Validators.required, Validators.pattern(EMAIL_REGEXP), Validators.maxLength(80)]],
+  })
+
+  rolesData = [
+    { id: 1, selected: false, name: 'Main relationship contact' },
+    { id: 2, selected: false, name: 'Voting contact' },
+    { id: 3, selected: false, name: 'Technical contact' },
+    { id: 4, selected: false, name: 'Invoice contact' },
+    { id: 5, selected: false, name: 'Comms contact' },
+    { id: 6, selected: false, name: 'Product contact' },
+  ]
+
+  constructor(
+    private memberService: MemberService,
+    private fb: FormBuilder,
+    private alertService: AlertService,
+    private router: Router,
+    private dateUtilService: DateUtilService,
+    private accountService: AccountService,
+    protected activatedRoute: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.currentMonth = this.dateUtilService.getCurrentMonthNumber()
+    this.currentYear = this.dateUtilService.getCurrentYear()
+    this.monthList = this.dateUtilService.getMonthsList()
+    this.yearList = this.dateUtilService.getFutureYearsIncludingCurrent(1)
+
+    this.accountService.getAccountData().subscribe((account) => {
+      if (account) {
+        combineLatest([this.memberService.getMemberData(account.salesforceId), this.memberService.getCountries()])
+          .pipe(take(1))
+          .subscribe(([data, countries]) => {
+            this.memberData = data
+            this.countries = countries
+          })
+      }
+    })
+
+    this.editForm.valueChanges.subscribe(() => {
+      if (this.editForm!.status === 'VALID') {
+        this.invalidForm = false
+      }
+    })
+  }
+
+  createNewConsortiumMemberFromForm(): ISFNewConsortiumMember {
+    const consortiumMember: ISFNewConsortiumMember = {
+      orgName: this.editForm!.get('orgName')?.value,
+      trademarkLicense: this.editForm!.get('trademarkLicense')?.value,
+      startMonth: this.editForm!.get('startMonth')?.value,
+      startYear: this.editForm!.get('startYear')?.value,
+      emailDomain: this.editForm!.get('emailDomain')?.value,
+      street: this.editForm!.get('street')?.value,
+      city: this.editForm!.get('city')?.value,
+      state:
+        this.editForm!.get(['state'])?.value == '-- No state or province --'
+          ? null
+          : this.editForm!.get(['state'])?.value,
+      country: this.editForm!.get('country')?.value,
+      postcode: this.editForm!.get('postcode')?.value,
+      contactGivenName: this.editForm!.get('contactGivenName')?.value,
+      contactFamilyName: this.editForm!.get('contactFamilyName')?.value,
+      contactJobTitle: this.editForm!.get('contactJobTitle')?.value,
+      contactEmail: this.editForm!.get('contactEmail')?.value,
+    }
+    return consortiumMember
+  }
+
+  onCountryChange(countryName: string) {
+    this.states = this.countries!.find((country) => country.name === countryName)?.states
+  }
+
+  save() {
+    if (this.editForm!.status === 'INVALID') {
+      Object.keys(this.editForm!.controls).forEach((key) => {
+        this.editForm!.get(key)?.markAsDirty()
+      })
+      this.editForm!.markAllAsTouched()
+      this.invalidForm = true
+    } else {
+      this.invalidForm = false
+      this.isSaving = true
+      const newConsortiumMember = this.createNewConsortiumMemberFromForm()
+
+      this.memberService.addConsortiumMember(newConsortiumMember).subscribe(
+        (res) => {
+          if (res) {
+            this.onSaveSuccess()
+          } else {
+            console.error(res)
+            this.onSaveError()
+          }
+        },
+        (err) => {
+          console.error(err)
+          this.onSaveError()
+        }
+      )
+    }
+  }
+
+  onSaveSuccess() {
+    this.isSaving = false
+    this.alertService.broadcast(AlertType.CONSORTIUM_MEMBER_ADDED)
+    this.router.navigate([''])
+  }
+
+  onSaveError() {
+    this.isSaving = false
+  }
+}