From 50e499540d1be532527479e7f2ebbfcb569adaa6 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 15 Apr 2021 13:10:44 +0200 Subject: [PATCH] Added more fields inside create-account form --- .../create-account.component.html | 161 +++++++++++------- .../create-account.component.scss | 23 +++ .../create-account.component.ts | 65 ++++++- .../create-account/create-account.module.ts | 4 + apps/dafa-web/src/styles/styles.scss | 1 + 5 files changed, 189 insertions(+), 65 deletions(-) diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html index e8fb56b..b6290a5 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html +++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html @@ -6,68 +6,103 @@ rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.

- -
- - - -
+
+ + + + + +
diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss index a264b2c..c36fc74 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss +++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss @@ -9,7 +9,30 @@ } &__input { + display: block; width: 100%; margin-bottom: var(--digi--layout--gutter); } + + &__fieldset { + margin: 0; + margin-bottom: var(--digi--layout--gutter); + padding: 0; + border-width: 0; + + legend { + width: 100%; + display: flex; + align-items: center; + margin: 0; + font-weight: var(--digi--typography--font-weight--bold); + font-size: var(--digi--typography--font-size); + padding-bottom: var(--digi--layout--gutter--s); + } + } + + &__footer { + display: flex; + gap: var(--digi--layout--gutter); + } } diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts index c219c0e..6d0cbd9 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts @@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms'; import { RequiredValidator } from '@dafa-validators/required.validator'; import { SocialSecurityNumberValidator } from '@dafa-validators/social-security-number.validator'; +import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'dafa-create-account', @@ -11,21 +12,27 @@ import { SocialSecurityNumberValidator } from '@dafa-validators/social-security- changeDetection: ChangeDetectionStrategy.OnPush, }) export class CreateAccountComponent { + private _pendingOutOfOfficeDates$ = new BehaviorSubject<{ start: Date; end: Date }[]>([]); formGroup: FormGroup; + todaysDate = new Date(); constructor(private formBuilder: FormBuilder) { this.formGroup = this.formBuilder.group({ firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]), lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]), ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]), + staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]), email: this.formBuilder.control('', [RequiredValidator('Arbetsmejl')]), phone: this.formBuilder.control('', [RequiredValidator('Telefonnummer arbete')]), active: this.formBuilder.control(true), + outOfOfficeStart: this.formBuilder.control(''), + outOfOfficeEnd: this.formBuilder.control(''), }); - - this.formGroup.valueChanges.subscribe(values => console.table(values)); } + get pendingOutOfOfficeDates(): { start: Date; end: Date }[] { + return this._pendingOutOfOfficeDates$.getValue(); + } get activeRadioButtons(): RadiobuttonModel[] { return [ { @@ -48,4 +55,58 @@ export class CreateAccountComponent { get ssnControl(): AbstractControl { return this.formGroup.get('ssn'); } + get staffIdControl(): AbstractControl { + return this.formGroup.get('staffId'); + } + get emailControl(): AbstractControl { + return this.formGroup.get('email'); + } + get phoneControl(): AbstractControl { + return this.formGroup.get('phone'); + } + get outOfOfficeStartControl(): AbstractControl { + return this.formGroup.get('outOfOfficeStart'); + } + get outOfOfficeEndControl(): AbstractControl { + return this.formGroup.get('outOfOfficeEnd'); + } + + addOutOfOfficeDate(): void { + if (this.outOfOfficeStartControl.value && this.outOfOfficeEndControl.value) { + this._pendingOutOfOfficeDates$.next([ + ...this.pendingOutOfOfficeDates, + { start: new Date(this.outOfOfficeStartControl.value), end: new Date(this.outOfOfficeEndControl.value) }, + ]); + + this.outOfOfficeStartControl.patchValue(''); + this.outOfOfficeEndControl.patchValue(''); + } + } + + private _markFormAsDirty(): void { + Object.keys(this.formGroup.controls).forEach(control => { + this.formGroup.get(control).markAsDirty(); + this.formGroup.get(control).markAsTouched(); + }); + } + + submitForm(): void { + if (this.formGroup.valid) { + const submittableValues = { + ...this.formGroup.value, + outOfOffice: this.pendingOutOfOfficeDates, + }; + + delete submittableValues.outOfOfficeStart; + delete submittableValues.outOfOfficeEnd; + + console.warn('Should submit the form...'); + console.table(submittableValues); + + this.formGroup.reset(); + } else { + console.error('Form is invalid, do something...'); + this._markFormAsDirty(); + } + } } diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts index 4926ea5..fc5d6f5 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts @@ -1,9 +1,11 @@ +import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker'; import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input'; import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module'; import { CreateAccountComponent } from './create-account.component'; @NgModule({ @@ -13,8 +15,10 @@ import { CreateAccountComponent } from './create-account.component'; CommonModule, RouterModule.forChild([{ path: '', component: CreateAccountComponent }]), ReactiveFormsModule, + LocalDatePipeModule, DigiNgFormInputModule, DigiNgFormRadiobuttonGroupModule, + DigiNgFormDatepickerModule, ], }) export class CreateAccountModule {} diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss index 424a3ac..db76d0e 100644 --- a/apps/dafa-web/src/styles/styles.scss +++ b/apps/dafa-web/src/styles/styles.scss @@ -20,6 +20,7 @@ body { button { font-family: var(--digi--typography--font-family); + cursor: pointer; } strong {