grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Add firstname and lastname input fields to account details form.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-06-02 12:10:28 +03:00
parent 4fba6a8383
commit 6904127876
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/pages/accounts/account-details/account-details.component.html
View File

@ -48,10 +48,19 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Name(s): *</mat-label> <mat-label>First Name: *</mat-label>
<input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}" <input matInput type="text" id="firstName" placeholder="{{account?.vcard?.fn[0].value.split(' ')[0]}}"
value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher"> value="{{account?.vcard?.fn[0].value.split(' ')[0]}}" formControlName="firstName" [errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error> <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors">First Name is required.</mat-error>
</mat-form-field>
</div>
<div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline">
<mat-label>Last Name(s): *</mat-label>
<input matInput type="text" id="lastName" placeholder="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}"
value="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}" formControlName="lastName" [errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.lastName.errors">Last Name is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

9
src/app/pages/accounts/account-details/account-details.component.ts
View File

@ -87,7 +87,8 @@ export class AccountDetailsComponent implements OnInit {
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
this.accountInfoForm = this.formBuilder.group({ this.accountInfoForm = this.formBuilder.group({
name: ['', Validators.required], firstName: ['', Validators.required],
lastName: ['', Validators.required],
phoneNumber: ['', Validators.required], phoneNumber: ['', Validators.required],
age: ['', Validators.required], age: ['', Validators.required],
type: ['', Validators.required], type: ['', Validators.required],
@ -109,8 +110,10 @@ export class AccountDetailsComponent implements OnInit {
this.account = res; this.account = res;
this.cdr.detectChanges(); this.cdr.detectChanges();
this.loggingService.sendInfoLevelMessage(this.account); this.loggingService.sendInfoLevelMessage(this.account);
const fullName = this.account.vcard?.fn[0].value.split(' ');
this.accountInfoForm.patchValue({ this.accountInfoForm.patchValue({
name: this.account.vcard?.fn[0].value, firstName: fullName[0],
lastName: fullName.slice(1).join(' '),
phoneNumber: this.account.vcard?.tel[0].value, phoneNumber: this.account.vcard?.tel[0].value,
age: this.account.age, age: this.account.age,
type: this.account.type, type: this.account.type,
@ -199,7 +202,7 @@ export class AccountDetailsComponent implements OnInit {
} }
const accountKey = await this.userService.changeAccountInfo( const accountKey = await this.userService.changeAccountInfo(
this.accountAddress, this.accountAddress,
this.accountInfoFormStub.name.value, this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value,
this.accountInfoFormStub.phoneNumber.value, this.accountInfoFormStub.phoneNumber.value,
this.accountInfoFormStub.age.value, this.accountInfoFormStub.age.value,
this.accountInfoFormStub.type.value, this.accountInfoFormStub.type.value,