Added more fields inside create-account form

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.
     </p>
-
-    <form [formGroup]="formGroup">
-      <div class="create-account__block">
-        <h2>Personuppgifter</h2>
-
-        <div class="create-account__combined-inputs">
-          <digi-ng-form-input
-            class="create-account__input"
-            formControlName="firstName"
-            afLabel="Förnamn"
-            afInvalidMessage="Förnamn är obligatoriskt"
-            [afDisableValidStyle]="true"
-            [afInvalid]="firstNameControl.invalid && firstNameControl.dirty"
-          ></digi-ng-form-input>
-          <digi-ng-form-input
-            class="create-account__input"
-            formControlName="lastName"
-            afLabel="Efternamn"
-            afInvalidMessage="Efternamn är obligatoriskt"
-            [afDisableValidStyle]="true"
-            [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
-          ></digi-ng-form-input>
-        </div>
-        <digi-ng-form-input
-          class="create-account__input"
-          formControlName="ssn"
-          afLabel="Personnummer"
-          [afInvalidMessage]="ssnControl.errors?.message || ''"
-          [afDisableValidStyle]="true"
-          [afInvalid]="ssnControl.invalid && ssnControl.dirty"
-        ></digi-ng-form-input>
-        <digi-ng-form-input
-          class="create-account__input"
-          formControlName="email"
-          afLabel="Arbetsmejl"
-          afType="email"
-          [afInvalidMessage]="ssnControl.errors?.message || ''"
-          [afDisableValidStyle]="true"
-          [afInvalid]="ssnControl.invalid && ssnControl.dirty"
-        ></digi-ng-form-input>
-        <digi-ng-form-input
-          class="create-account__input"
-          formControlName="phone"
-          afLabel="Telefonnummer arbete"
-          afType="tel"
-          [afInvalidMessage]="ssnControl.errors?.message || ''"
-          [afDisableValidStyle]="true"
-          [afInvalid]="ssnControl.invalid && ssnControl.dirty"
-        ></digi-ng-form-input>
-      </div>
-
-      <div class="create-account__block">
-        <h2>Bemanning av personal</h2>
-
-        <fieldset>
-          <legend>Är {{ firstNameControl.value || 'medarbetaren' }} i aktiv tjänst?</legend>
-          <digi-ng-form-radiobutton-group
-            [afRadiobuttons]="activeRadioButtons"
-            formControlName="active"
-          ></digi-ng-form-radiobutton-group>
-        </fieldset>
-      </div>
-    </form>
   </digi-typography>
+  <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
+    <div class="create-account__block">
+      <h2>Personuppgifter</h2>
+
+      <div class="create-account__combined-inputs">
+        <digi-ng-form-input
+          class="create-account__input"
+          formControlName="firstName"
+          afLabel="Förnamn"
+          afInvalidMessage="Förnamn är obligatoriskt"
+          [afDisableValidStyle]="true"
+          [afInvalid]="firstNameControl.invalid && firstNameControl.dirty"
+        ></digi-ng-form-input>
+        <digi-ng-form-input
+          class="create-account__input"
+          formControlName="lastName"
+          afLabel="Efternamn"
+          afInvalidMessage="Efternamn är obligatoriskt"
+          [afDisableValidStyle]="true"
+          [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
+        ></digi-ng-form-input>
+      </div>
+      <digi-ng-form-input
+        class="create-account__input"
+        formControlName="ssn"
+        afLabel="Personnummer"
+        [afInvalidMessage]="ssnControl.errors?.message || ''"
+        [afDisableValidStyle]="true"
+        [afInvalid]="ssnControl.invalid && ssnControl.dirty"
+      ></digi-ng-form-input>
+      <digi-ng-form-input
+        class="create-account__input"
+        formControlName="staffId"
+        afLabel="Personal-ID"
+        [afInvalidMessage]="staffIdControl.errors?.message || ''"
+        [afDisableValidStyle]="true"
+        [afInvalid]="staffIdControl.invalid && staffIdControl.dirty"
+      ></digi-ng-form-input>
+      <digi-ng-form-input
+        class="create-account__input"
+        formControlName="email"
+        afLabel="Arbetsmejl"
+        afType="email"
+        [afInvalidMessage]="emailControl.errors?.message || ''"
+        [afDisableValidStyle]="true"
+        [afInvalid]="emailControl.invalid && emailControl.dirty"
+      ></digi-ng-form-input>
+      <digi-ng-form-input
+        class="create-account__input"
+        formControlName="phone"
+        afLabel="Telefonnummer arbete"
+        afType="tel"
+        [afInvalidMessage]="phoneControl.errors?.message || ''"
+        [afDisableValidStyle]="true"
+        [afInvalid]="phoneControl.invalid && phoneControl.dirty"
+      ></digi-ng-form-input>
+    </div>
+
+    <div class="create-account__block">
+      <h2>Bemanning av personal</h2>
+
+      <fieldset class="create-account__fieldset">
+        <legend>Är {{ firstNameControl.value || 'medarbetaren' }} i aktiv tjänst?</legend>
+        <digi-ng-form-radiobutton-group
+          [afRadiobuttons]="activeRadioButtons"
+          formControlName="active"
+        ></digi-ng-form-radiobutton-group>
+      </fieldset>
+
+      <fieldset class="create-account__fieldset">
+        <legend>Planerad frånvaroperiod</legend>
+        <div class="create-account__combined-inputs">
+          <digi-ng-form-datepicker
+            formControlName="outOfOfficeStart"
+            afLabel="Från"
+            [afMinDate]="todaysDate"
+          ></digi-ng-form-datepicker>
+          <digi-ng-form-datepicker
+            formControlName="outOfOfficeEnd"
+            afLabel="Till"
+            [afMinDate]="todaysDate"
+          ></digi-ng-form-datepicker>
+        </div>
+        <digi-button (afOnClick)="addOutOfOfficeDate()">Lägg till</digi-button>
+
+        <ul *ngIf="pendingOutOfOfficeDates.length">
+          <li *ngFor="let date of pendingOutOfOfficeDates">
+            start: {{ date.start | localDate }} end: {{ date.end | localDate }}
+          </li>
+        </ul>
+      </fieldset>
+    </div>
+
+    <div class="create-account__footer">
+      <digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
+      <digi-button af-type="submit">Registrera konto</digi-button>
+    </div>
+  </form>
 </section>

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);
+  }
 }

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();
+    }
+  }
 }

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 {}

apps/dafa-web/src/styles/styles.scss

@@ -20,6 +20,7 @@ body {
 
 button {
   font-family: var(--digi--typography--font-family);
+  cursor: pointer;
 }
 
 strong {