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
2021-06-18 12:11:42 +02:00
parent 88c68e1e37
commit f7081d84b5
26 changed files with 360 additions and 68 deletions
--- a/apps/dafa-web/src/app/app-routing.module.ts
+++ b/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',
-    data: { title: 'Mina deltagare' },
-    loadChildren: () => import('./pages/participants/participants.module').then(m => m.ParticipantsModule)
+    path: 'deltagare',
+    data: { title: 'Deltagare' },
+    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 {}
--- a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.scss
+++ b/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;
  }

--- a/apps/dafa-web/src/app/components/sidebar/sidebar.component.html
+++ b/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>
--- a/apps/dafa-web/src/app/data/constants/navigation.ts
+++ b/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',
--- a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
+++ b/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',
 }
--- a/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts
+++ b/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',
  },
--- a/apps/dafa-web/src/app/pages/administration/administration.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
+++ b/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>
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html
+++ b/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>
--- a/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.scss
+++ b/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;
+  }
+}
--- a/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.spec.ts
+++ b/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();
+  });
+});
--- a/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.ts
+++ b/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) {}
+}
--- a/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/pages/participants/participants-routing.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/pages/participants/participants.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/pages/start/start.component.html
+++ b/apps/dafa-web/src/app/pages/start/start.component.html
@@ -1,5 +1,5 @@
 <dafa-logged-in-shell>
-<section class="start">
+  <section class="start">
    <digi-typography>
      <h1>Välkommen till Mina Sidor FA</h1>
      <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
@@ -8,11 +8,11 @@
      <div class="start__notifications">
        <digi-info-card af-heading="Notiser" af-heading-level="h1" af-type="info" af-link-text="Deltagare">
          <p>
-          Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också
-          i vänster menyn på sidan
+            Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den
+            också i vänster menyn på sidan
          </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>
      </div>

@@ -32,5 +32,5 @@
        </digi-info-card>
      </div>
    </div>
-</section>
+  </section>
 </dafa-logged-in-shell>
--- a/apps/dafa-web/src/app/services/api/participants.service.ts
+++ b/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);
  }
--- a/apps/dafa-web/src/app/shared/components/back-link/back-link.component.html
+++ b/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>
--- a/apps/dafa-web/src/app/shared/components/back-link/back-link.component.scss
+++ b/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;
+  }
+}
--- a/apps/dafa-web/src/app/shared/components/back-link/back-link.component.spec.ts
+++ b/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();
+  });
+});
--- a/apps/dafa-web/src/app/shared/components/back-link/back-link.component.ts
+++ b/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;
+}
--- a/apps/dafa-web/src/app/shared/components/back-link/back-link.module.ts
+++ b/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 {}
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html
+++ b/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>
--- a/apps/dafa-web/src/app/utils/map-paths-to-breadcrumbs.util.ts
+++ b/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';
+}
--- a/apps/dafa-web/src/styles/styles.scss
+++ b/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);