From f7081d84b5bb296f5cff234e222c31ea125a3ab3 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 18 Jun 2021 12:11:42 +0200 Subject: [PATCH] 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 Date: Fri Jun 18 12:10:45 2021 +0200 Merged develop and resolved conflicts commit ecf97a3fe6ad78b6250b46cdaec5169ee4106df8 Merge: 10bc25e ba34b20 Author: Erik Tiekstra Date: Tue Jun 15 15:44:41 2021 +0200 Merge branch 'develop' into feature/TV-267-participant-page commit 10bc25e77822724c469e8002fb00653eab7bf938 Author: Erik Tiekstra Date: Tue Jun 15 15:42:18 2021 +0200 Added back-link commit a45228d0adfa20eb4ee5407c0bc6fea9ea07b8f1 Author: Erik Tiekstra 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 | 37 ++++++----- .../logged-in-shell.component.scss | 1 + .../components/sidebar/sidebar.component.html | 2 +- .../src/app/data/constants/navigation.ts | 2 +- .../src/app/data/enums/icon-type.enum.ts | 2 + .../administration-routing.module.ts | 2 - .../administration/administration.module.ts | 4 +- .../participants-list.component.html | 6 +- .../participants-list.module.ts | 3 +- .../participant-card.component.html | 57 +++++++++++++++++ .../participant-card.component.scss | 45 ++++++++++++++ .../participant-card.component.spec.ts | 28 +++++++++ .../participant-card.component.ts | 25 ++++++++ .../participant-card.module.ts | 23 +++++++ .../participants-routing.module.ts | 20 ++++++ .../pages/participants/participants.module.ts | 12 ++-- .../src/app/pages/start/start.component.html | 62 +++++++++---------- .../app/services/api/participants.service.ts | 12 +++- .../back-link/back-link.component.html | 4 ++ .../back-link/back-link.component.scss | 11 ++++ .../back-link/back-link.component.spec.ts | 26 ++++++++ .../back-link/back-link.component.ts | 13 ++++ .../components/back-link/back-link.module.ts | 13 ++++ .../components/icon/icon.component.html | 4 +- .../utils/map-paths-to-breadcrumbs.util.ts | 8 ++- apps/dafa-web/src/styles/styles.scss | 6 ++ 26 files changed, 360 insertions(+), 68 deletions(-) create mode 100644 apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html create mode 100644 apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.scss create mode 100644 apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.spec.ts create mode 100644 apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.ts create mode 100644 apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts create mode 100644 apps/dafa-web/src/app/pages/participants/participants-routing.module.ts create mode 100644 apps/dafa-web/src/app/shared/components/back-link/back-link.component.html create mode 100644 apps/dafa-web/src/app/shared/components/back-link/back-link.component.scss create mode 100644 apps/dafa-web/src/app/shared/components/back-link/back-link.component.spec.ts create mode 100644 apps/dafa-web/src/app/shared/components/back-link/back-link.component.ts create mode 100644 apps/dafa-web/src/app/shared/components/back-link/back-link.module.ts diff --git a/apps/dafa-web/src/app/app-routing.module.ts b/apps/dafa-web/src/app/app-routing.module.ts index 8b8bd94..62e4727 100644 --- 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 {} diff --git 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 index af305b3..c49d2ae 100644 --- 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; } diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.html b/apps/dafa-web/src/app/components/sidebar/sidebar.component.html index 5635fdd..47a8ea8 100644 --- 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 @@
  • - + Mina deltagare diff --git a/apps/dafa-web/src/app/data/constants/navigation.ts b/apps/dafa-web/src/app/data/constants/navigation.ts index 7090bdd..6f324f8 100644 --- 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', diff --git a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts index 6756f86..bd98aae 100644 --- 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', } diff --git a/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts b/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts index 511cc3e..69d5fd4 100644 --- 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', }, diff --git a/apps/dafa-web/src/app/pages/administration/administration.module.ts b/apps/dafa-web/src/app/pages/administration/administration.module.ts index 21b060a..9335331 100644 --- 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 {} diff --git 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 index 517ab7d..a384036 100644 --- 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 @@ - {{ participant.firstName }} {{ participant.lastName }} + + + {{ participant.fullName }} + + {{ participant.errandNumber }} {{ participant.service }} {{ participant.startDate | date: 'yyyy-MM-dd' }} diff --git 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 index 7672b6e..b17f57a 100644 --- 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 {} diff --git 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 new file mode 100644 index 0000000..3f50628 --- /dev/null +++ b/apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html @@ -0,0 +1,57 @@ + +
    + +
    + Tillbaka till deltagarlistan +

    {{ detailedParticipantData.fullName }}

    +
    +

    + 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. +

    + +
    +
    +

    Personuppgifter

    + +
    +
    Namn
    +
    {{ detailedParticipantData.fullName }}
    +
    Personnummer
    +
    {{ detailedParticipantData.ssn }}
    +
    + +

    Särskilda behov

    +

    + 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! +

    +
    + +
    +

    Om tjänsten

    +
    + +
    +

    Matchningsuppgifter

    +
    +
    + +
    + Tillbaka till deltagarlistan +
    +     +
    + + + + + +
    + + Info saknas +
    +     +     diff --git 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 new file mode 100644 index 0000000..5181069 --- /dev/null +++ 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; + } +} diff --git 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 new file mode 100644 index 0000000..8b3d7f7 --- /dev/null +++ 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; + + 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(); + }); +}); diff --git 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 new file mode 100644 index 0000000..069f23e --- /dev/null +++ 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 = this.activatedRoute.params.pipe( + map(({ participantId }) => participantId) + ); + detailedParticipantData$: Observable = this._participantId$.pipe( + switchMap(participantId => this.participantsService.fetchDetailedParticipantData$(participantId)) + ); + iconType = IconType; + + constructor(private activatedRoute: ActivatedRoute, private participantsService: ParticipantsService) {} +} diff --git 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 new file mode 100644 index 0000000..1f748ab --- /dev/null +++ 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 {} diff --git a/apps/dafa-web/src/app/pages/participants/participants-routing.module.ts b/apps/dafa-web/src/app/pages/participants/participants-routing.module.ts new file mode 100644 index 0000000..2a25de9 --- /dev/null +++ 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 {} diff --git a/apps/dafa-web/src/app/pages/participants/participants.module.ts b/apps/dafa-web/src/app/pages/participants/participants.module.ts index b6d6c7c..e55904c 100644 --- 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 {} diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html index 3442db5..768ed38 100644 --- a/apps/dafa-web/src/app/pages/start/start.component.html +++ b/apps/dafa-web/src/app/pages/start/start.component.html @@ -1,36 +1,36 @@ -
    - -

    Välkommen till Mina Sidor FA

    -

    Här finner du de senaste nyheterna om uppdateringar, notiser och mer.

    -     -
    -
    - -

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

    +
    + +

    Välkommen till Mina Sidor FA

    +

    Här finner du de senaste nyheterna om uppdateringar, notiser och mer.

    +     +
    +
    + +

    + 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 +

    - -     -
    + + +
    -
    - -

    Large alert! Check the knobs section and play around!

    -     - -

    Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna

    -     +
    + +

    Large alert! Check the knobs section and play around!

    +     + +

    Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna

    +     +
    +
    + + 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? + +
    -
    - - 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? - -
    -
    -
    +     diff --git a/apps/dafa-web/src/app/services/api/participants.service.ts b/apps/dafa-web/src/app/services/api/participants.service.ts index 31dcae1..62cde44 100644 --- 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 = this.httpClient - .get(`${environment.api.url}/participants`) + .get(this._apiUrl) .pipe(map(response => response.data.map(participant => mapParticipantApiResponseToParticipant(participant)))); private _activeParticipantsSortBy$ = new BehaviorSubject | null>({ key: 'handleBefore', @@ -73,6 +77,12 @@ export class ParticipantsService { }) ); + public fetchDetailedParticipantData$(id: string): Observable { + return this.httpClient + .get(`${this._apiUrl}/${id}`, { ...API_HEADERS }) + .pipe(map(result => mapParticipantApiResponseToParticipant(result.data))); + } + public setSearchFilter(value: string) { this._searchFilter$.next(value); } diff --git 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 new file mode 100644 index 0000000..4b1cc17 --- /dev/null +++ b/apps/dafa-web/src/app/shared/components/back-link/back-link.component.html @@ -0,0 +1,4 @@ + + + + diff --git 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 new file mode 100644 index 0000000..224c563 --- /dev/null +++ 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; + } +} diff --git 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 new file mode 100644 index 0000000..423d6b2 --- /dev/null +++ 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; + + 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(); + }); +}); diff --git 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 new file mode 100644 index 0000000..7301792 --- /dev/null +++ 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; +} diff --git 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 new file mode 100644 index 0000000..9702513 --- /dev/null +++ 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 {} diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.html b/apps/dafa-web/src/app/shared/components/icon/icon.component.html index 1497afa..377d7a0 100644 --- 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,7 +42,9 @@ > + + - + diff --git 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 index 02e2d04..07fc65c 100644 --- 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'; +} diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss index 9150fdd..8dea91c 100644 --- 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);