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/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">
-  <digi-typography>
-    <h1>Välkommen till Mina Sidor FA</h1>
-    <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
-  </digi-typography>
-  <div class="start__wrapper">
-    <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
-        </p>
+  <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>
+    </digi-typography>
+    <div class="start__wrapper">
+      <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
+          </p>
 
-        <digi-ng-link-internal afText="Deltagare" afRoute="/mina-deltagare"></digi-ng-link-internal>
-      </digi-info-card>
-    </div>
+          <digi-ng-link-internal afText="Deltagare" afRoute="/deltagare"></digi-ng-link-internal>
+        </digi-info-card>
+      </div>
 
-    <div class="start__alerts">
-      <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>
-      </digi-notification-alert>
-      <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>
-      </digi-notification-alert>
+      <div class="start__alerts">
+        <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>
+        </digi-notification-alert>
+        <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>
+        </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">
-      <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>
+  </section>
 </dafa-logged-in-shell>