arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #33 in TEA/dafa-web-monorepo from feature/TV-269-participant-page-info to develop

Browse Source 
Squashed commit of the following:

commit 11ecbd376902220a7501e0cecb918204bc84138f
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 15:01:02 2021 +0200

    TV-269-participant lag till digi variabel

commit 9df794d9160de07bf97fb7ac51dad2bb05519e7a
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 14:51:55 2021 +0200

    TV-269-participant-page changes after review

commit c2531400e0c906a14d40e314bd5b27e9909ba60d
Merge: d373e69 07ce7a4
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 13:12:10 2021 +0200

    Merge branch 'develop' into feature/TV-269-participant-page-info

    # Conflicts:
    #	apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html
    #	apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts

commit d373e694ad107e5d9c22c53a880dfc280d1bb8c0
Merge: 599bdb5 6b0ac72
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 08:47:13 2021 +0200

    Merge branch 'develop' into feature/TV-269-participant-page-info

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

commit 599bdb53852b252d9f00016063291b2f8ab14e58
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jul 1 19:05:43 2021 +0200

    TV-269 participant page style. participant data model to be replaced with deltagare model

commit 3377aafafb47a6a04fa6ab414223ec7de9119c38
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jul 1 10:19:49 2021 +0200

    TV-269 participantpage w. tabs WIP

commit b37f03fd5598dece7ac06d5113ab6a9876cd3779
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 29 09:06:57 2021 +0200

    TV-269 participantpage tabs w data WIP
This commit is contained in:
Cecilia Varnava
2021-07-06 10:11:02 +02:00
parent 219a21eb76
commit 2dc2ca33c8
4 changed files with 213 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,54 +1,188 @@
<dafa-layout>
<section class="participant-card">
<digi-typography *ngIf="detailedParticipantData$ | async as detailedParticipantData; else loadingRef">
<div *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>
<h1>Deltagarinformation</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">
<dafa-hide-text
symbols="********-****"
[changingText]="detailedParticipantData.ssn"
ariaLabelType="personnummer"
></dafa-hide-text>
</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>
<digi-ng-navigation-tabs afTablistLabel="Deltagarinformation">
<digi-ng-navigation-tab afLabel="Personuppgifter" afId="tab1">
<digi-ng-typography-base>
<div class="participant-card__tab-contents">
<div class="participant-card__tab-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">
<dafa-hide-text
symbols="********-****"
[changingText]="detailedParticipantData.ssn"
ariaLabelType="personnummer"
></dafa-hide-text>
</dd>
<dt>Folkbokföringsadress:</dt>
<dd *ngIf="detailedParticipantData.address; else emptyDD">
{{ detailedParticipantData.address.street }} + ' ' + {{ detailedParticipantData.address.number }},
{{ detailedParticipantData.address.postalcode }} + ' ' + {{ detailedParticipantData.address.city }}
</dd>
<dt>Postadress:</dt>
<dd *ngIf="detailedParticipantData.postalAddress; else emptyDD">
{{ detailedParticipantData.postalAddress.street }} + ' ' + {{
detailedParticipantData.postalAddress.number }}, {{ detailedParticipantData.postalAddress.postalcode
}} + ' ' + {{ detailedParticipantData.postalAddress.city }}
</dd>
<dt>Telefon:</dt>
<dd *ngIf="detailedParticipantData.phoneMobile; else emptyDD"></dd>
<dd>{{ detailedParticipantData.phoneMobile }}</dd>
<dt>Mailadress:</dt>
<dd *ngIf="detailedParticipantData.email; else emptyDD"></dd>
<dd>{{ detailedParticipantData.email }}</dd>
</dl>
</div>
<div class="participant-card__tab-column">
<h2>Särskilda behov</h2>
<dl>
<dt>Funktionsnedsättningar</dt>
<ng-container *ngIf="detailedParticipantData.disabilities; else emptyDD">
<!--TODO när api klart: disabilities.length-->
<dd *ngFor="let disability of detailedParticipantData.disabilities">
{{ disability.name }} <br />
{{ disability.description }}
</dd>
</ng-container>
</dl>
<dl>
<dt>Tolk</dt>
<dd *ngIf="detailedParticipantData.interpretorLanguage; else noDD">
Ja ( {{ detailedParticipantData.interpretorLanguage }} )
</dd>
<dt>Språkstöd</dt>
<dd *ngIf="detailedParticipantData.supportLanguage; else noDD">
Ja ( {{ detailedParticipantData.supportLanguage }} )
</dd>
</dl>
</div>
<div class="participant-card__tab-column">
<h2>Om tjänsten</h2>
<dl>
<dt>Tillhörande tjänst</dt>
<dd *ngIf="detailedParticipantData.service; else emptyDD">{{ detailedParticipantData.service }}</dd>
<dt>Datum för tjänstens början</dt>
<dd *ngIf="detailedParticipantData.startDate; else emptyDD">
{{ detailedParticipantData.startDate | localDate }}
</dd>
<dt>Datum för tjänstens slut</dt>
<dd *ngIf="detailedParticipantData.endDate; else emptyDD">
{{ detailedParticipantData.endDate | localDate }}
</dd>
<dt>Deltagandefrekvens</dt>
<dd *ngIf="detailedParticipantData.service.frequency; else emptyDD">
{{ detailedParticipantData.service.frequency }}
</dd>
<dt>Utförande verksamhet</dt>
<dd *ngIf="detailedParticipantData.service.organisation; else emptyDD">
{{ detailedParticipantData.service.organisation }}
</dd>
<dt>Utförande adress</dt>
<dd
*ngIf="
detailedParticipantData.service.organisation &&
detailedParticipantData.service.organisation.adress;
else emptyDD
"
>
{{ detailedParticipantData.service.organisation.adress }}
</dd>
<dt>Genomförandereferens</dt>
<dd *ngIf="detailedParticipantData.service.reference; else emptyDD">
{{ detailedParticipantData.service.reference }}
</dd>
</dl>
</div>
</div>
</digi-ng-typography-base>
</digi-ng-navigation-tab>
<digi-ng-navigation-tab afLabel="Matchningsuppgifter" afId="tab2">
<digi-ng-typography-base>
<div class="participant-card__tab-contents">
<div class="participant-card__tab-column">
<h2>Arbetslivserfarenhet</h2>
<dl>
<dt>Arbetsgivare</dt>
<ng-container *ngIf="detailedParticipantData.workExperiences; else emptyDD">
<!--TODO när api finns: workExperiences.length-->
<dd *ngFor="let workExperience of detailedParticipantData.workExperiences; index as i">
<!-- TODO: workExperiences.length. index 0-2-->
{{ workExperience.dateFrom | localDate }} - {{ workExperience.dateTo | localDate }} <br />
{{ workExperience.company }} <br />
{{ workExperience.direction }} <br />
{{ workExperience.description }}
</dd>
</ng-container>
</dl>
<div class="participant-card__employers-expansion">
<digi-ng-layout-expansion-panel [afExpanded]="accordionExpanded" (click)="toggleAccordionExpanded()">
<digi-ng-typography-base
data-slot-trigger
class="participant-card__employers-expansion__trigger-text"
>
{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare
</digi-ng-typography-base>
<digi-ng-typography-base>
<dl>
<dd *ngFor="let workExperience of detailedParticipantData.workExperiences">
<!-- TODO: workExperiences.length. Från index 3 -->
{{ workExperience.dateFrom | localDate }} - {{ workExperience.dateTo | localDate }} <br />
{{ workExperience.company }} <br />
{{ workExperience.direction }} <br />
{{ workExperience.description }}
</dd>
</dl>
</digi-ng-typography-base>
</digi-ng-layout-expansion-panel>
</div>
</div>
<div class="participant-card__tab-column-education">
<h2>Utbildning</h2>
<dl>
<dt>Utbildningar</dt>
<ng-container *ngIf="detailedParticipantData.educations; else emptyDD">
<!--TODO när api finns: educations.length-->
<dd *ngFor="let education of detailedParticipantData.educations">
{{ education.dateFrom | localDate }} - {{ education.dateTo | localDate }} <br />
{{ education.organizer }} <br />
{{ education.direction }} <br />
{{ education.description }} <br />
</dd>
</ng-container>
</dl>
<dl>
<dt>Högsta utbildningsnivå</dt>
<dd *ngIf="detailedParticipantData.highestEduction; else emptyDD">
{{ detailedParticipantData.highestEduction }}
</dd>
</dl>
<dl>
<dt>Körkortsinformation</dt>
<dd>Innehar körkort ( {{ detailedParticipantData.driversLicenses ? 'Ja' : 'Nej' }} )</dd>
<dd *ngIf="detailedParticipantData.driversLicenses">
<!-- TODO när api finns: .length -->
Körkortsklasser ( {{ detailedParticipantData.driversLicenses.join(', ') }} )<br />
Tillgång till bil ( {{ detailedParticipantData.accessToCar ? 'Ja' : 'Nej' }} )
</dd>
</dl>
</div>
</div>
</digi-ng-typography-base>
</digi-ng-navigation-tab>
</digi-ng-navigation-tabs>
<footer class="participant-card__footer">
<dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
</footer>
</digi-typography>
</div>
</section>
<ng-template #loadingRef>
@@ -60,4 +194,9 @@
<span class="dafa__a11y-sr-only">Info saknas</span>
</dd>
</ng-template>
<ng-template #noDD>
<dd>
<span>Nej</span>
</dd>
</ng-template>
</dafa-layout>

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

@@ -1,39 +1,45 @@
@import 'variables/gutters';
.participant-card {
&__contents {
&__tab-contents {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
margin-left: $digi--layout--gutter--l;
h2 {
margin-top: 0;
margin-top: $digi--layout--gutter--l;
}
}
&__column {
width: 100%;
&__tab-column {
flex: 1;
max-width: var(--digi--typography--text--max-width);
}
&__tab-column-education {
flex: 2;
}
dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 2rem;
display: block;
}
dt,
dd {
margin: 0;
padding-bottom: var(--digi--layout--gutter--xs);
}
dt {
grid-column: 1;
font-weight: var(--digi--typography--font-weight--semibold);
}
dd {
grid-column: 2;
&__employers-expansion {
width: 70%;
&__trigger-text {
font-weight: var(--digi--typography--font-weight--bold);
}
}
&__header,

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

@@ -20,6 +20,11 @@ export class ParticipantCardComponent {
switchMap(participantId => this.participantsService.fetchDetailedParticipantData$(participantId))
);
iconType = IconType;
accordionExpanded = false;
constructor(private activatedRoute: ActivatedRoute, private participantsService: ParticipantsService) {}
toggleAccordionExpanded(): void {
this.accordionExpanded = !this.accordionExpanded;
}
}

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

@@ -7,6 +7,11 @@ import { IconModule } from '@dafa-shared/components/icon/icon.module';
import { LayoutModule } from '@dafa-shared/components/layout/layout.module';
import { ParticipantCardComponent } from './participant-card.component';
import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
import { DigiNgNavigationTabsModule } from '@af/digi-ng/_navigation/navigation-tabs';
import { DigiNgNavigationTabModule } from '@af/digi-ng/_navigation/navigation-tab';
import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,6 +24,11 @@ import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.modu
IconModule,
BackLinkModule,
HideTextModule,
DigiNgNavigationTabsModule,
DigiNgNavigationTabModule,
DigiNgLayoutExpansionPanelModule,
DigiNgTypographyBaseModule,
LocalDatePipeModule,
],
exports: [ParticipantCardComponent],
})