Added language data

apps/dafa-web/src/app/data/models/out-of-office-date.model.ts

@@ -0,0 +1,5 @@
+export interface OutOfOfficeDate {
+  id: number;
+  start: Date;
+  end: Date;
+}

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html

@@ -92,9 +92,13 @@
         </div>
         <digi-button (afOnClick)="addOutOfOfficeDate()">Lägg till</digi-button>
 
-        <ul *ngIf="pendingOutOfOfficeDates.length">
+        <ul class="create-account__pending-out-of-office-list" *ngIf="pendingOutOfOfficeDates.length">
           <li *ngFor="let date of pendingOutOfOfficeDates">
-            start: {{ date.start | localDate }} end: {{ date.end | localDate }}
+            Från {{ date.start | localDate }} till {{ date.end | localDate }}
+            <digi-button af-variation="secondary" af-size="s" (afOnClick)="removeOutOfOfficeDate(date.id)">
+              <digi-icon-x slot="icon"></digi-icon-x>
+              <span>Ta bort</span>
+            </digi-button>
           </li>
         </ul>
       </fieldset>

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss

@@ -1,3 +1,5 @@
+@import 'mixins/list';
+
 .create-account {
   &__block {
     max-width: var(--digi--typography--text--max-width);
@@ -31,6 +33,23 @@
     }
   }
 
+  &__pending-out-of-office-list {
+    @include dafa__reset-list;
+    margin-top: var(--digi--layout--gutter);
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--digi--layout--gutter--s);
+      padding: var(--digi--layout--gutter--s);
+
+      &:nth-child(odd) {
+        background-color: var(--digi--ui--color--background--tertiary);
+      }
+    }
+  }
+
   &__footer {
     display: flex;
     gap: var(--digi--layout--gutter);

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts

@@ -2,6 +2,7 @@ import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { OutOfOfficeDate } from '@dafa-models/out-of-office-date.model';
 import { StaffService } from '@dafa-services/api/staff.service';
 import { RequiredValidator } from '@dafa-validators/required.validator';
 import { SocialSecurityNumberValidator } from '@dafa-validators/social-security-number.validator';
@@ -14,7 +15,18 @@ import { BehaviorSubject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateAccountComponent {
-  private _pendingOutOfOfficeDates$ = new BehaviorSubject<{ start: Date; end: Date }[]>([]);
+  private _pendingOutOfOfficeDates$ = new BehaviorSubject<OutOfOfficeDate[]>([
+    {
+      id: 123456789,
+      start: new Date(),
+      end: new Date(),
+    },
+    {
+      id: 987654321,
+      start: new Date(),
+      end: new Date(),
+    },
+  ]);
   formGroup: FormGroup;
   todaysDate = new Date();
 
@@ -32,7 +44,7 @@ export class CreateAccountComponent {
     });
   }
 
-  get pendingOutOfOfficeDates(): { start: Date; end: Date }[] {
+  get pendingOutOfOfficeDates(): OutOfOfficeDate[] {
     return this._pendingOutOfOfficeDates$.getValue();
   }
   get activeRadioButtons(): RadiobuttonModel[] {
@@ -77,7 +89,11 @@ export class CreateAccountComponent {
     if (this.outOfOfficeStartControl.value && this.outOfOfficeEndControl.value) {
       this._pendingOutOfOfficeDates$.next([
         ...this.pendingOutOfOfficeDates,
-        { start: new Date(this.outOfOfficeStartControl.value), end: new Date(this.outOfOfficeEndControl.value) },
+        {
+          id: Date.now(),
+          start: new Date(this.outOfOfficeStartControl.value),
+          end: new Date(this.outOfOfficeEndControl.value),
+        },
       ]);
 
       this.outOfOfficeStartControl.patchValue('');
@@ -85,6 +101,10 @@ export class CreateAccountComponent {
     }
   }
 
+  removeOutOfOfficeDate(id: number): void {
+    this._pendingOutOfOfficeDates$.next(this.pendingOutOfOfficeDates.filter(date => date.id !== id));
+  }
+
   private _markFormAsDirty(): void {
     Object.keys(this.formGroup.controls).forEach(control => {
       this.formGroup.get(control).markAsDirty();

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

@@ -28,7 +28,8 @@ strong {
 }
 
 // Make all digi icons display inline-flex to make them get the correct height.
-[class^='sc-digi-icon'] {
+[class^='sc-digi-icon'],
+.digi-button__icon {
   display: inline-flex;
 }