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

feat(deltagare): Visual changes to deltagare-card (TV-363)

Browse Source 
Squashed commit of the following:

commit 96a01004e3d814a2015c09148f0bd35ba4679f82
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 11:10:13 2021 +0200

    Moved workLanguages below translator information

commit a0c378a8221a5d363f56ee644b9728d873ae1ff1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 07:19:49 2021 +0200

    Updates after PR

commit 479df238c712e2e14829d33b468ece91332f81c8
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:18:23 2021 +0200

    Updated tolkbehov inside deltagare-card

commit df95ae2a8afbcc78ba546472ae9c1db141d1e642
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:14:27 2021 +0200

    Updated deltagare-kort after discussion with UX
This commit is contained in:
Erik Tiekstra
2021-08-16 12:51:51 +02:00
parent d020c81519
commit 01dc4b3919
8 changed files with 109 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
apps/dafa-web/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
View File

@@ -7,7 +7,7 @@
<h1>Deltagarinformation</h1>
</header>
<digi-navigation-tabs af-aria-label="Deltagarinformation">
<digi-navigation-tab af-aria-label="Personuppgifter" af-id="deltagare-card-personuppgifter">
<digi-navigation-tab af-aria-label="Om deltagaren" af-id="deltagare-card-personuppgifter">
<div class="deltagare-card__tab-contents">
<div class="deltagare-card__tab-column">
<h2>Personuppgifter</h2>
@@ -37,15 +37,17 @@
<dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
</ng-container>
</ng-container>
<dt>Epostadress:</dt>
<dd *ngIf="deltagare.email; else emptyDD">{{ deltagare.email }}</dd>
<dt>E-postadress:</dt>
<dd *ngIf="deltagare.email; else emptyDD">
<a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
</dd>
</dl>
</div>
<div class="deltagare-card__tab-column">
<h2>Särskilda behov</h2>
<h2>Behov och språk</h2>
<dl>
<dt>Funktionsnedsättningar:</dt>
<ng-container *ngIf="deltagare.disabilities; else emptyDD">
<ng-container *ngIf="deltagare.disabilities.length; else emptyDD">
<dd *ngFor="let disability of deltagare.disabilities">
<span>{{ disability.title }}</span>
<digi-ng-popover
@@ -58,8 +60,18 @@
</ng-container>
</dl>
<dl>
<dt>Tolk:</dt>
<dd>{{deltagare.translator ? 'Ja (' + deltagare.translator + ')' : 'Nej'}}</dd>
<dt>Tolkbehov:</dt>
<dd>
{{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' :
'Nej'}}
</dd>
<dt>Språkstöd:</dt>
<dd>
{{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' :
'Nej'}}
</dd>
<dt>Språk jag kan använda på jobbet:</dt>
<dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
</dl>
</div>
<div class="deltagare-card__tab-column">
@@ -81,6 +93,10 @@
<dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
{{ deltagare.avropInformation.participationFrequency }}
</dd>
<dt>Nivå:</dt>
<dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
{{ deltagare.avropInformation.trackName }}
</dd>
<dt>Utförande verksamhet:</dt>
<dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD">
{{ deltagare.avropInformation.utforandeVerksamhet }}
@@ -97,69 +113,67 @@
</div>
</div>
</digi-navigation-tab>
<digi-navigation-tab af-aria-label="Matchningsuppgifter" af-id="deltagare-card-matchningsuppgifter">
<digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
<div class="deltagare-card__tab-contents">
<div class="deltagare-card__tab-column">
<h2>Matchningsuppgifter</h2>
<dl>
<dt>Arbetslivserfarenhet:</dt>
<ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
<ng-container *ngIf="firstVisibleWorkExperiences.length; else emptyDD">
<dd *ngFor="let workExperience of firstVisibleWorkExperiences">
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time>
- <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
{{ workExperience.employer }}<br />
{{ workExperience.profession }}<br />
{{ workExperience.description }}
</dd>
</ng-container>
</ng-container>
<ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
<digi-ng-layout-expansion-panel
class="deltagare-card__accordion"
[afExpanded]="accordionExpanded"
(click)="toggleAccordionExpanded()"
*ngIf="hiddenWorkExperiences.length"
<h2>Arbetslivserfarenhet</h2>
<ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
<ul
class="deltagare-card__experience-list"
*ngIf="firstVisibleWorkExperiences.length; else emptyText;"
>
<li *ngFor="let workExperience of firstVisibleWorkExperiences">
<h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
<digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
{{ workExperience.profession }}
<p>{{ workExperience.description }}</p>
</li>
</ul>
</ng-container>
<ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
<digi-ng-layout-expansion-panel
class="deltagare-card__accordion"
[afExpanded]="accordionExpanded"
(click)="toggleAccordionExpanded()"
*ngIf="hiddenWorkExperiences.length"
>
<span class="deltagare-card__accordion-trigger" data-slot-trigger
>{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
>
<span class="deltagare-card__accordion-trigger" data-slot-trigger
>{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
>
<dd *ngFor="let workExperience of hiddenWorkExperiences">
<ul class="deltagare-card__experience-list">
<li *ngFor="let workExperience of hiddenWorkExperiences">
<h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
<digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
{{ workExperience.employer }}<br />
{{ workExperience.profession }}<br />
{{ workExperience.description }}
</dd>
</digi-ng-layout-expansion-panel>
</ng-container>
</dl>
{{ workExperience.profession }}
<p>{{ workExperience.description }}</p>
</li>
</ul>
</digi-ng-layout-expansion-panel>
</ng-container>
</div>
<div class="deltagare-card__tab-column-education">
<div class="deltagare-card__tab-column">
<h2>Utbildning</h2>
<dl>
<dt>Utbildningar:</dt>
<ng-container *ngIf="deltagare.educations.length; else emptyDD">
<dd *ngFor="let education of deltagare.educations">
<digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time> -
<digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time><br />
{{ education.organizer }}<br />
{{ education.education}}<br />
{{ education.description }}
</dd>
</ng-container>
</dl>
<dl>
<dt>Högsta utbildningsnivå:</dt>
<dd *ngIf="deltagare.highestEducation.level; else emptyDD">
{{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
}}
</dd>
<h3 class="deltagare-card__subheading deltagare-card__subheading--with-margin">Utbildningar:</h3>
<ul class="deltagare-card__experience-list" *ngIf="deltagare.educations.length; else emptyText">
<li *ngFor="let education of deltagare.educations">
<h4 class="deltagare-card__subheading">{{ education.organizer }}</h4>
<digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time> -
<digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time><br />
{{ education.education}}
<p>{{ education.description }}</p>
</li>
</ul>
</dl>
<dl>
<dt>Språk jag kan använda på jobbet:</dt>
<dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
</dl>
</div>
<div class="deltagare-card__tab-column">
<h2>Körkortsinformation</h2>
<dl>
<dt>Har körkort</dt>
@@ -176,10 +190,6 @@
</digi-navigation-tab>
</digi-navigation-tabs>
</digi-typography>
<footer class="deltagare-card__footer">
<dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
</footer>
</div>
</section>
@@ -192,4 +202,10 @@
<span class="dafa__a11y-sr-only">Info saknas</span>
</dd>
</ng-template>
<ng-template #emptyText>
<p>
<span aria-hidden="true">-</span>
<span class="dafa__a11y-sr-only">Info saknas</span>
</p>
</ng-template>
</dafa-layout>

30
apps/dafa-web/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
View File

@@ -1,4 +1,5 @@
@import 'variables/gutters';
@import 'mixins/list';
.deltagare-card {
&__tab-contents {
@@ -8,25 +9,34 @@
}
&__tab-column {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
dd {
margin: 0 0 var(--digi--layout--gutter--xs);
margin: 0 0 1rem;
}
dt {
dt,
&__subheading {
font-size: var(--digi--typography--font-size--desktop);
font-weight: var(--digi--typography--font-weight--semibold);
margin-top: var(--digi--layout--gutter--s);
margin: var(--digi--layout--gutter--s) 0 0;
&--with-margin {
font-size: var(--digi--typography--font-size--h3);
margin-bottom: var(--digi--layout--gutter--s);
}
}
&__experience-list {
@include dafa__reset-list;
}
&__accordion {
max-width: 80%;
min-width: 250px;
dd:first-of-type {
margin-top: var(--digi--layout--gutter);
}
display: block;
margin-top: var(--digi--layout--gutter);
}
&__accordion-trigger {

1
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html
View File

@@ -3,5 +3,6 @@
<button class="hide-text__button" type="button" [attr.aria-label]="ariaLabel" (click)="toggleText()">
<dafa-icon *ngIf="!hideText" [icon]="iconType.EYESLASH" size="l"></dafa-icon>
<dafa-icon *ngIf="hideText" [icon]="iconType.EYE" size="l"></dafa-icon>
<span class="hide-text__button-text">{{ hideText ? 'Visa' : 'Dölj'}}</span>
</button>
</span>

7
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss
View File

@@ -6,9 +6,8 @@
&__button {
background-color: transparent;
color: var(--digi--typography--color--link);
font-size: var(--digi--typography--font-size--desktop--l);
font-size: var(--digi--typography--font-size--desktop);
border-width: 0;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
@@ -16,4 +15,8 @@
color: var(--digi--typography--color--link--active);
}
}
&__button-text {
margin-left: var(--digi--layout--gutter--s);
}
}

2
apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html
View File

@@ -1,7 +1,7 @@
<div class="navigation">
<div class="navigation__logo-wrapper">
<a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor">
<digi-logo af-system-name="Mina sidor FA" af-color="secondary"></digi-logo>
<digi-logo af-system-name="Mina sidor för fristående aktörer" af-color="secondary"></digi-logo>
</a>
</div>
<ul class="navigation__list dafa__hide-on-print">

3
apps/dafa-web/src/app/shared/models/avrop.model.ts
View File

@@ -11,6 +11,7 @@ export interface AvropCompact {
sprakstod: string; // sprakstod
utforandeAdress: string; // adress
trackCode: string; // sparkod
trackName: string; // sparNamn
}
export interface Avrop extends AvropCompact {
@@ -31,6 +32,7 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
sprakstod,
adress,
sparkod,
sparNamn,
genomforandeReferens,
deltagandeGrad,
utforandeverksamhet,
@@ -47,6 +49,7 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
sprakstod: sprakstod,
utforandeAdress: adress,
trackCode: sparkod,
trackName: sparNamn,
genomforandeReferens,
participationFrequency: deltagandeGrad,
utforandeVerksamhet: utforandeverksamhet,

3
apps/dafa-web/src/app/shared/services/api/deltagare.service.ts
View File

@@ -183,8 +183,7 @@ export class DeltagareService extends UnsubscribeDirective {
return this.httpClient
.get<{ data: AvropResponse }>(`${this._apiAvropUrl}/${id}`, { ...API_HEADERS })
.pipe(
filter(response => !!response.data),
map(response => mapAvropResponseToAvrop(response.data)),
map(response => (response.data ? mapAvropResponseToAvrop(response.data) : {})),
catchError(error => {
this.errorService.add(errorToCustomError(error));
return of({});

4
mock-api/dafa-web/scripts/avrop.js
View File

@@ -46,8 +46,8 @@ function generateAvrop(amount = 10, deltagare) {
startdatumAvrop: faker.date.recent(),
slutdatumAvrop: faker.date.future(),
aktnummerDiariet: `Af-2021/0000 ${faker.datatype.number({ min: 1000, max: 9999 })}`,
tolkbehov: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)],
sprakstod: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)],
tolkbehov: currentDeltagare.translator.sprak.beskrivning,
sprakstod: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)].beskrivning,
sparkod: track,
sparNamn: `Nivå ${track}: ${tjanst.name}`,
supervisorId: Math.random() > 0.3 && faker.datatype.uuid(),