feat(participant-page): Added routing and page for single participants. (TV-267)

Squashed commit of the following:

commit e59f80b44e8169fb1a02c505b261b38bef2f0913
Merge: ecf97a3 88c68e1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Jun 18 12:10:45 2021 +0200

    Merged develop and resolved conflicts

commit ecf97a3fe6ad78b6250b46cdaec5169ee4106df8
Merge: 10bc25e ba34b20
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Jun 15 15:44:41 2021 +0200

    Merge branch 'develop' into feature/TV-267-participant-page

commit 10bc25e77822724c469e8002fb00653eab7bf938
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Jun 15 15:42:18 2021 +0200

    Added back-link

commit a45228d0adfa20eb4ee5407c0bc6fea9ea07b8f1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Jun 15 14:53:54 2021 +0200

    Added page to routing and fetched some data

apps/dafa-web/src/app/app-routing.module.ts

@@ -6,76 +6,75 @@ const routes: Routes = [
   {
     path: '',
     data: { title: '' },
-    loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule)
+    loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule),
   },
   {
     path: 'administration',
     data: { title: 'Administration' },
-    loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule)
+    loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule),
   },
   {
-    path: 'mina-deltagare',
+    path: 'deltagare',
-    data: { title: 'Mina deltagare' },
+    data: { title: 'Deltagare' },
-    loadChildren: () => import('./pages/participants/participants.module').then(m => m.ParticipantsModule)
+    loadChildren: () => import('./pages/participants/participants.module').then(m => m.ParticipantsModule),
   },
   {
     path: 'avrop',
     data: { title: 'Avrop' },
-    loadChildren: () => import('./pages/call-off/call-off.module').then(m => m.CallOffModule)
+    loadChildren: () => import('./pages/call-off/call-off.module').then(m => m.CallOffModule),
   },
   {
     path: 'meddelanden',
     data: { title: 'Meddelanden' },
-    loadChildren: () => import('./pages/messages/messages.module').then(m => m.MessagesModule)
+    loadChildren: () => import('./pages/messages/messages.module').then(m => m.MessagesModule),
   },
   {
     path: 'statistik',
     data: { title: 'Statistik' },
-    loadChildren: () => import('./pages/statistics/statistics.module').then(m => m.StatisticsModule)
+    loadChildren: () => import('./pages/statistics/statistics.module').then(m => m.StatisticsModule),
   },
   {
     path: 'installningar',
     data: { title: 'Inställningar' },
-    loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsModule)
+    loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsModule),
   },
   {
     path: 'releases',
     data: { title: 'Releases' },
-    loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule)
+    loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule),
   },
   {
     path: 'ciam-landing',
     data: { title: 'Ciam landing page' },
-    loadChildren: () => import('./pages/ciam-landing/ciam-landing.module').then(m => m.CiamLandingModule)
+    loadChildren: () => import('./pages/ciam-landing/ciam-landing.module').then(m => m.CiamLandingModule),
   },
   {
     path: 'logout',
     data: { title: 'Ciam landing page' },
-    loadChildren: () => import('./pages/logout/logout.module').then(m => m.LogoutModule)
+    loadChildren: () => import('./pages/logout/logout.module').then(m => m.LogoutModule),
-  }
+  },
 ];
 
 if (!environment.production) {
   routes.push({
     path: 'mock-login',
     data: { title: 'Mock login' },
-    loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule)
+    loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule),
   });
 }
 
 routes.push({
   path: '**',
   data: { title: 'Sidan hittas inte' },
-  loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
+  loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule),
 });
 
 const options: ExtraOptions = {
-  useHash: false
+  useHash: false,
 };
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, options)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule {
+export class AppRoutingModule {}
-}

apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.scss

@@ -31,6 +31,7 @@
 
   &__content {
     grid-area: content;
+    max-width: $digi--layout--breakpoint--l;
     padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
   }
 

apps/dafa-web/src/app/components/sidebar/sidebar.component.html

@@ -18,7 +18,7 @@
       </a>
     </li>
     <li class="sidebar__item">
-      <a [routerLink]="['/mina-deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+      <a [routerLink]="['/deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
         <dafa-icon class="sidebar__icon" [icon]="iconType.USERS"></dafa-icon>
         Mina deltagare
       </a>

apps/dafa-web/src/app/data/constants/navigation.ts

@@ -2,7 +2,7 @@ export const Navigation = {
   administration: 'Administration',
   'skapa-konto': 'Skapa nytt konto',
   personal: 'Hantera personal',
-  'mina-deltagare': 'Mina deltagare',
+  deltagare: 'Deltagare',
   avrop: 'Avrop',
   meddelanden: 'Meddelanden',
   statistik: 'Statistik',

apps/dafa-web/src/app/data/enums/icon-type.enum.ts

@@ -13,6 +13,8 @@ export enum IconType {
   WARNING = 'warning',
   APPROVED = 'approved',
   X = 'x',
+  ARROW_LEFT = 'arrow-left',
+  ARROW_RIGHT = 'arrow-right',
   EYE = 'eye',
   EYESLASH = 'eyeslash',
 }

apps/dafa-web/src/app/pages/administration/administration-routing.module.ts

@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AdministrationComponent } from './administration.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: AdministrationComponent,
     redirectTo: 'personal',
     pathMatch: 'full',
   },

apps/dafa-web/src/app/pages/administration/administration.module.ts

@@ -1,12 +1,10 @@
-import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { AdministrationRoutingModule } from './administration-routing.module';
 import { AdministrationComponent } from './administration.component';
 
 @NgModule({
   declarations: [AdministrationComponent],
-  imports: [CommonModule, AdministrationRoutingModule, RouterModule, DigiNgLinkInternalModule],
+  imports: [CommonModule, AdministrationRoutingModule],
 })
 export class AdministrationModule {}

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html

@@ -96,7 +96,11 @@
     </thead>
     <tbody>
       <tr *ngFor="let participant of pagedParticipants">
-        <th scope="row">{{ participant.firstName }} {{ participant.lastName }}</th>
+        <th scope="row">
+          <a [routerLink]="participant.id" class="participants-list__link">
+            {{ participant.fullName }}
+          </a>
+        </th>
         <td>{{ participant.errandNumber }}</td>
         <td>{{ participant.service }}</td>
         <td>{{ participant.startDate | date: 'yyyy-MM-dd' }}</td>

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.module.ts

@@ -1,12 +1,13 @@
 import { DigiNgTableModule } from '@af/digi-ng/_table/table';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { ParticipantsListComponent } from './participants-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsListComponent],
-  imports: [CommonModule, DigiNgTableModule],
+  imports: [CommonModule, RouterModule, DigiNgTableModule],
   exports: [ParticipantsListComponent],
 })
 export class ParticipantsListModule {}

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html

@@ -0,0 +1,57 @@
+<dafa-logged-in-shell>
+  <section class="participant-card">
+    <digi-typography *ngIf="detailedParticipantData$ | async as detailedParticipantData; else loadingRef">
+      <header class="participant-card__header">
+        <dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
+        <h1>{{ detailedParticipantData.fullName }}</h1>
+      </header>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
+        quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
+        perferendis commodi.
+      </p>
+
+      <div class="participant-card__contents">
+        <div class="participant-card__column">
+          <h2>Personuppgifter</h2>
+
+          <dl>
+            <dt>Namn</dt>
+            <dd *ngIf="detailedParticipantData.fullName; else emptyDD">{{ detailedParticipantData.fullName }}</dd>
+            <dt>Personnummer</dt>
+            <dd *ngIf="detailedParticipantData.ssn; else emptyDD">{{ detailedParticipantData.ssn }}</dd>
+          </dl>
+
+          <h3>Särskilda behov</h3>
+          <p>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, voluptatum quibusdam repellendus animi,
+            quidem, commodi quos porro quia incidunt saepe veritatis voluptatem. Cupiditate, accusamus atque! Illum,
+            quisquam esse? Omnis, quasi!
+          </p>
+        </div>
+
+        <div class="participant-card__column">
+          <h2>Om tjänsten</h2>
+        </div>
+
+        <div class="participant-card__column">
+          <h2>Matchningsuppgifter</h2>
+        </div>
+      </div>
+
+      <footer class="participant-card__footer">
+        <dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
+      </footer>
+    </digi-typography>
+  </section>
+
+  <ng-template #loadingRef>
+    <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
+  </ng-template>
+  <ng-template #emptyDD>
+    <dd>
+      <span aria-hidden="true">-</span>
+      <span class="dafa__a11y-sr-only">Info saknas</span>
+    </dd>
+  </ng-template>
+</dafa-logged-in-shell>

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.scss

@@ -0,0 +1,45 @@
+@import 'variables/gutters';
+
+.participant-card {
+  &__contents {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
+
+    h2 {
+      margin-top: 0;
+    }
+  }
+
+  &__column {
+    width: 100%;
+    max-width: var(--digi--typography--text--max-width);
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem 2rem;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dt {
+    grid-column: 1;
+    font-weight: var(--digi--typography--font-weight--semibold);
+  }
+
+  dd {
+    grid-column: 2;
+  }
+
+  &__header,
+  &__footer {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+}

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.spec.ts

@@ -0,0 +1,28 @@
+import { DigiNgTableModule } from '@af/digi-ng/_table/table';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ParticipantCardComponent } from './participant-card.component';
+
+describe('ParticipantCardComponent', () => {
+  let component: ParticipantCardComponent;
+  let fixture: ComponentFixture<ParticipantCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ParticipantCardComponent],
+      imports: [RouterTestingModule, DigiNgTableModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParticipantCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IconType } from '@dafa-enums/icon-type.enum';
+import { Participant } from '@dafa-models/participant.model';
+import { ParticipantsService } from '@dafa-services/api/participants.service';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'dafa-participant-card',
+  templateUrl: './participant-card.component.html',
+  styleUrls: ['./participant-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParticipantCardComponent {
+  private _participantId$: Observable<string> = this.activatedRoute.params.pipe(
+    map(({ participantId }) => participantId)
+  );
+  detailedParticipantData$: Observable<Participant> = this._participantId$.pipe(
+    switchMap(participantId => this.participantsService.fetchDetailedParticipantData$(participantId))
+  );
+  iconType = IconType;
+
+  constructor(private activatedRoute: ActivatedRoute, private participantsService: ParticipantsService) {}
+}

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts

@@ -0,0 +1,23 @@
+import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BackLinkModule } from '@dafa-shared/components/back-link/back-link.module';
+import { IconModule } from '@dafa-shared/components/icon/icon.module';
+import { LoggedInShellModule } from 'apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.module';
+import { ParticipantCardComponent } from './participant-card.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ParticipantCardComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: ParticipantCardComponent }]),
+    LoggedInShellModule,
+    DigiNgLinkInternalModule,
+    IconModule,
+    BackLinkModule,
+  ],
+  exports: [ParticipantCardComponent],
+})
+export class ParticipantCardModule {}

apps/dafa-web/src/app/pages/participants/participants-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ParticipantsComponent } from './participants.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ParticipantsComponent,
+  },
+  {
+    path: ':participantId',
+    loadChildren: () => import('./pages/participant-card/participant-card.module').then(m => m.ParticipantCardModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ParticipantsRoutingModule {}

apps/dafa-web/src/app/pages/participants/participants.module.ts

@@ -2,21 +2,21 @@ import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { ParticipantsListModule } from './components/participants-list/participants-list.module';
-import { ParticipantsComponent } from './participants.component';
 import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
+import { ParticipantsListModule } from './components/participants-list/participants-list.module';
+import { ParticipantsRoutingModule } from './participants-routing.module';
+import { ParticipantsComponent } from './participants.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsComponent],
   imports: [
     CommonModule,
-    RouterModule.forChild([{ path: '', component: ParticipantsComponent }]),
+    ParticipantsRoutingModule,
     FormsModule,
     DigiNgSkeletonBaseModule,
     ParticipantsListModule,
-    LoggedInShellModule
+    LoggedInShellModule,
-  ]
+  ],
 })
 export class ParticipantsModule {}

apps/dafa-web/src/app/pages/start/start.component.html

@@ -1,36 +1,36 @@
 <dafa-logged-in-shell>
-<section class="start">
+  <section class="start">
-  <digi-typography>
+    <digi-typography>
-    <h1>Välkommen till Mina Sidor FA</h1>
+      <h1>Välkommen till Mina Sidor FA</h1>
-    <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
+      <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
-  </digi-typography>
+    </digi-typography>
-  <div class="start__wrapper">
+    <div class="start__wrapper">
-    <div class="start__notifications">
+      <div class="start__notifications">
-      <digi-info-card af-heading="Notiser" af-heading-level="h1" af-type="info" af-link-text="Deltagare">
+        <digi-info-card af-heading="Notiser" af-heading-level="h1" af-type="info" af-link-text="Deltagare">
-        <p>
+          <p>
-          Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också
+            Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den
-          i vänster menyn på sidan
+            också i vänster menyn på sidan
-        </p>
+          </p>
 
-        <digi-ng-link-internal afText="Deltagare" afRoute="/mina-deltagare"></digi-ng-link-internal>
+          <digi-ng-link-internal afText="Deltagare" afRoute="/deltagare"></digi-ng-link-internal>
-      </digi-info-card>
+        </digi-info-card>
-    </div>
+      </div>
 
-    <div class="start__alerts">
+      <div class="start__alerts">
-      <digi-notification-alert af-variation="info" af-heading="Viktig information" af-heading-level="h3">
+        <digi-notification-alert af-variation="info" af-heading="Viktig information" af-heading-level="h3">
-        <p>Large alert! Check the knobs section and play around!</p>
+          <p>Large alert! Check the knobs section and play around!</p>
-      </digi-notification-alert>
+        </digi-notification-alert>
-      <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
+        <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
-        <p>Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna</p>
+          <p>Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna</p>
-      </digi-notification-alert>
+        </digi-notification-alert>
+      </div>
+      <div class="start__statistics">
+        <digi-info-card af-heading="Statistik" af-heading-level="h2" af-type="info">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolores debitis enim. Voluptatum debitis
+          necessitatibus, distinctio expedita officiis maiores eum sapiente molestiae eveniet soluta dolores non, porro
+          quo vitae tenetur?
+        </digi-info-card>
+      </div>
     </div>
-    <div class="start__statistics">
+  </section>
-      <digi-info-card af-heading="Statistik" af-heading-level="h2" af-type="info">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolores debitis enim. Voluptatum debitis
-        necessitatibus, distinctio expedita officiis maiores eum sapiente molestiae eveniet soluta dolores non, porro
-        quo vitae tenetur?
-      </digi-info-card>
-    </div>
-  </div>
-</section>
 </dafa-logged-in-shell>

apps/dafa-web/src/app/services/api/participants.service.ts

@@ -6,6 +6,7 @@ import { environment } from '@dafa-environment';
 import {
   mapParticipantApiResponseToParticipant,
   Participant,
+  ParticipantApiResponse,
   ParticipantsApiResponse,
 } from '@dafa-models/participant.model';
 import { Sort } from '@dafa-models/sort.model';
@@ -22,12 +23,15 @@ function filterParticipants(participants: Participant[], searchFilter: string):
   });
 }
 
+const API_HEADERS = { headers: environment.api.headers };
+
 @Injectable({
   providedIn: 'root',
 })
 export class ParticipantsService {
+  private _apiUrl = `${environment.api.url}/participants`;
   private _allParticipants$: Observable<Participant[]> = this.httpClient
-    .get<ParticipantsApiResponse>(`${environment.api.url}/participants`)
+    .get<ParticipantsApiResponse>(this._apiUrl)
     .pipe(map(response => response.data.map(participant => mapParticipantApiResponseToParticipant(participant))));
   private _activeParticipantsSortBy$ = new BehaviorSubject<Sort<keyof Participant> | null>({
     key: 'handleBefore',
@@ -73,6 +77,12 @@ export class ParticipantsService {
     })
   );
 
+  public fetchDetailedParticipantData$(id: string): Observable<Participant> {
+    return this.httpClient
+      .get<ParticipantApiResponse>(`${this._apiUrl}/${id}`, { ...API_HEADERS })
+      .pipe(map(result => mapParticipantApiResponseToParticipant(result.data)));
+  }
+
   public setSearchFilter(value: string) {
     this._searchFilter$.next(value);
   }

apps/dafa-web/src/app/shared/components/back-link/back-link.component.html

@@ -0,0 +1,4 @@
+<a class="back-link" [routerLink]="route">
+  <dafa-icon [icon]="iconType.ARROW_LEFT"></dafa-icon>
+  <ng-content></ng-content>
+</a>

apps/dafa-web/src/app/shared/components/back-link/back-link.component.scss

@@ -0,0 +1,11 @@
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  font-weight: var(--digi--typography--font-weight--semibold);
+  gap: var(--digi--layout--gutter--xs);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

apps/dafa-web/src/app/shared/components/back-link/back-link.component.spec.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BackLinkComponent } from './back-link.component';
+
+describe('BackLinkComponent', () => {
+  let component: BackLinkComponent;
+  let fixture: ComponentFixture<BackLinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [BackLinkComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dafa-web/src/app/shared/components/back-link/back-link.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconType } from '@dafa-enums/icon-type.enum';
+
+@Component({
+  selector: 'dafa-back-link',
+  templateUrl: './back-link.component.html',
+  styleUrls: ['./back-link.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BackLinkComponent {
+  @Input() route: string[];
+  iconType = IconType;
+}

apps/dafa-web/src/app/shared/components/back-link/back-link.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IconModule } from '../icon/icon.module';
+import { BackLinkComponent } from './back-link.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [BackLinkComponent],
+  imports: [CommonModule, RouterModule, IconModule],
+  exports: [BackLinkComponent],
+})
+export class BackLinkModule {}

apps/dafa-web/src/app/shared/components/icon/icon.component.html

@@ -42,6 +42,8 @@
     ></digi-icon-exclamation-triangle>
     <digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
     <digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
+    <digi-icon-arrow-left *ngSwitchCase="iconType.ARROW_LEFT" [ngClass]="iconClass"></digi-icon-arrow-left>
+    <digi-icon-arrow-right *ngSwitchCase="iconType.ARROW_RIGHT" [ngClass]="iconClass"></digi-icon-arrow-right>
     <digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
     <digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash>
   </ng-container>

apps/dafa-web/src/app/utils/map-paths-to-breadcrumbs.util.ts

@@ -9,12 +9,14 @@ export function mapPathsToBreadcrumbs(
     ...(startBreadcrumb ? [startBreadcrumb] : []),
     ...paths.map((path, index) => ({
       text: mapPathToPageName(path),
-      routerLink: paths.slice(0, index + 1).join('/'),
+      routerLink: `/${paths.slice(0, index + 1).join('/')}`,
     })),
   ];
 
   if (isEmployeeCardRoute(paths)) {
     breadcrumbs[breadcrumbs.length - 1].text = 'Personal information';
+  } else if (isParticipantCardRoute(paths)) {
+    breadcrumbs[breadcrumbs.length - 1].text = 'Deltagarinformation';
   }
 
   return breadcrumbs;
@@ -23,3 +25,7 @@ export function mapPathsToBreadcrumbs(
 function isEmployeeCardRoute(paths: string[]): boolean {
   return paths.length === 3 && paths[1] === 'personal';
 }
+
+function isParticipantCardRoute(paths: string[]): boolean {
+  return paths.length === 2 && paths[0] === 'deltagare';
+}

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

@@ -44,6 +44,12 @@ strong {
   &__link {
     display: inline-flex;
     align-items: center;
+    text-decoration: none;
+    font-weight: var(--digi--typography--font-weight--semibold);
+
+    &:hover {
+      text-decoration: underline;
+    }
 
     &--with-icon {
       gap: var(--digi--layout--gutter--xs);