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> <h1>Deltagarinformation</h1>
</header> </header>
<digi-navigation-tabs af-aria-label="Deltagarinformation"> <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-contents">
<div class="deltagare-card__tab-column"> <div class="deltagare-card__tab-column">
<h2>Personuppgifter</h2> <h2>Personuppgifter</h2>
@@ -37,15 +37,17 @@
<dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd> <dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
</ng-container> </ng-container>
</ng-container> </ng-container>
<dt>Epostadress:</dt> <dt>E-postadress:</dt>
<dd *ngIf="deltagare.email; else emptyDD">{{ deltagare.email }}</dd> <dd *ngIf="deltagare.email; else emptyDD">
<a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
</dd>
</dl> </dl>
</div> </div>
<div class="deltagare-card__tab-column"> <div class="deltagare-card__tab-column">
<h2>Särskilda behov</h2> <h2>Behov och språk</h2>
<dl> <dl>
<dt>Funktionsnedsättningar:</dt> <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"> <dd *ngFor="let disability of deltagare.disabilities">
<span>{{ disability.title }}</span> <span>{{ disability.title }}</span>
<digi-ng-popover <digi-ng-popover
@@ -58,8 +60,18 @@
</ng-container> </ng-container>
</dl> </dl>
<dl> <dl>
<dt>Tolk:</dt> <dt>Tolkbehov:</dt>
<dd>{{deltagare.translator ? 'Ja (' + deltagare.translator + ')' : 'Nej'}}</dd> <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> </dl>
</div> </div>
<div class="deltagare-card__tab-column"> <div class="deltagare-card__tab-column">
@@ -81,6 +93,10 @@
<dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD"> <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
{{ deltagare.avropInformation.participationFrequency }} {{ deltagare.avropInformation.participationFrequency }}
</dd> </dd>
<dt>Nivå:</dt>
<dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
{{ deltagare.avropInformation.trackName }}
</dd>
<dt>Utförande verksamhet:</dt> <dt>Utförande verksamhet:</dt>
<dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD"> <dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD">
{{ deltagare.avropInformation.utforandeVerksamhet }} {{ deltagare.avropInformation.utforandeVerksamhet }}
@@ -97,69 +113,67 @@
</div> </div>
</div> </div>
</digi-navigation-tab> </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-contents">
<div class="deltagare-card__tab-column"> <div class="deltagare-card__tab-column">
<h2>Matchningsuppgifter</h2> <h2>Arbetslivserfarenhet</h2>
<dl> <ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
<dt>Arbetslivserfarenhet:</dt> <ul
<ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;"> class="deltagare-card__experience-list"
<ng-container *ngIf="firstVisibleWorkExperiences.length; else emptyDD"> *ngIf="firstVisibleWorkExperiences.length; else emptyText;"
<dd *ngFor="let workExperience of firstVisibleWorkExperiences"> >
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> <li *ngFor="let workExperience of firstVisibleWorkExperiences">
- <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br /> <h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
{{ workExperience.employer }}<br /> <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
{{ workExperience.profession }}<br /> <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
{{ workExperience.description }} {{ workExperience.profession }}
</dd> <p>{{ workExperience.description }}</p>
</ng-container> </li>
</ng-container> </ul>
<ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences"> </ng-container>
<digi-ng-layout-expansion-panel <ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
class="deltagare-card__accordion" <digi-ng-layout-expansion-panel
[afExpanded]="accordionExpanded" class="deltagare-card__accordion"
(click)="toggleAccordionExpanded()" [afExpanded]="accordionExpanded"
*ngIf="hiddenWorkExperiences.length" (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 <ul class="deltagare-card__experience-list">
>{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span <li *ngFor="let workExperience of hiddenWorkExperiences">
> <h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
<dd *ngFor="let workExperience of hiddenWorkExperiences">
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> - <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
<digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br /> <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
{{ workExperience.employer }}<br /> {{ workExperience.profession }}
{{ workExperience.profession }}<br /> <p>{{ workExperience.description }}</p>
{{ workExperience.description }} </li>
</dd> </ul>
</digi-ng-layout-expansion-panel> </digi-ng-layout-expansion-panel>
</ng-container> </ng-container>
</dl>
</div> </div>
<div class="deltagare-card__tab-column-education"> <div class="deltagare-card__tab-column">
<h2>Utbildning</h2> <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> <dl>
<dt>Högsta utbildningsnivå:</dt> <dt>Högsta utbildningsnivå:</dt>
<dd *ngIf="deltagare.highestEducation.level; else emptyDD"> <dd *ngIf="deltagare.highestEducation.level; else emptyDD">
{{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description {{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
}} }}
</dd> </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>
<dl> </div>
<dt>Språk jag kan använda på jobbet:</dt> <div class="deltagare-card__tab-column">
<dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
</dl>
<h2>Körkortsinformation</h2> <h2>Körkortsinformation</h2>
<dl> <dl>
<dt>Har körkort</dt> <dt>Har körkort</dt>
@@ -176,10 +190,6 @@
</digi-navigation-tab> </digi-navigation-tab>
</digi-navigation-tabs> </digi-navigation-tabs>
</digi-typography> </digi-typography>
<footer class="deltagare-card__footer">
<dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
</footer>
</div> </div>
</section> </section>
@@ -192,4 +202,10 @@
<span class="dafa__a11y-sr-only">Info saknas</span> <span class="dafa__a11y-sr-only">Info saknas</span>
</dd> </dd>
</ng-template> </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> </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 'variables/gutters';
@import 'mixins/list';
.deltagare-card { .deltagare-card {
&__tab-contents { &__tab-contents {
@@ -8,25 +9,34 @@
} }
&__tab-column { &__tab-column {
width: 50%; flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
} }
dd { 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); 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 { &__accordion {
max-width: 80%; display: block;
min-width: 250px; margin-top: var(--digi--layout--gutter);
dd:first-of-type {
margin-top: var(--digi--layout--gutter);
}
} }
&__accordion-trigger { &__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()"> <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.EYESLASH" size="l"></dafa-icon>
<dafa-icon *ngIf="hideText" [icon]="iconType.EYE" 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> </button>
</span> </span>

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

@@ -6,9 +6,8 @@
&__button { &__button {
background-color: transparent; background-color: transparent;
color: var(--digi--typography--color--link); 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; border-width: 0;
width: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -16,4 +15,8 @@
color: var(--digi--typography--color--link--active); 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">
<div class="navigation__logo-wrapper"> <div class="navigation__logo-wrapper">
<a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor"> <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> </a>
</div> </div>
<ul class="navigation__list dafa__hide-on-print"> <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 sprakstod: string; // sprakstod
utforandeAdress: string; // adress utforandeAdress: string; // adress
trackCode: string; // sparkod trackCode: string; // sparkod
trackName: string; // sparNamn
} }
export interface Avrop extends AvropCompact { export interface Avrop extends AvropCompact {
@@ -31,6 +32,7 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
sprakstod, sprakstod,
adress, adress,
sparkod, sparkod,
sparNamn,
genomforandeReferens, genomforandeReferens,
deltagandeGrad, deltagandeGrad,
utforandeverksamhet, utforandeverksamhet,
@@ -47,6 +49,7 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
sprakstod: sprakstod, sprakstod: sprakstod,
utforandeAdress: adress, utforandeAdress: adress,
trackCode: sparkod, trackCode: sparkod,
trackName: sparNamn,
genomforandeReferens, genomforandeReferens,
participationFrequency: deltagandeGrad, participationFrequency: deltagandeGrad,
utforandeVerksamhet: utforandeverksamhet, 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 return this.httpClient
.get<{ data: AvropResponse }>(`${this._apiAvropUrl}/${id}`, { ...API_HEADERS }) .get<{ data: AvropResponse }>(`${this._apiAvropUrl}/${id}`, { ...API_HEADERS })
.pipe( .pipe(
filter(response => !!response.data), map(response => (response.data ? mapAvropResponseToAvrop(response.data) : {})),
map(response => mapAvropResponseToAvrop(response.data)),
catchError(error => { catchError(error => {
this.errorService.add(errorToCustomError(error)); this.errorService.add(errorToCustomError(error));
return of({}); 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(), startdatumAvrop: faker.date.recent(),
slutdatumAvrop: faker.date.future(), slutdatumAvrop: faker.date.future(),
aktnummerDiariet: `Af-2021/0000 ${faker.datatype.number({ min: 1000, max: 9999 })}`, aktnummerDiariet: `Af-2021/0000 ${faker.datatype.number({ min: 1000, max: 9999 })}`,
tolkbehov: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)], tolkbehov: currentDeltagare.translator.sprak.beskrivning,
sprakstod: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)], sprakstod: SUPORTLANGUAGES[Math.floor(Math.random() * SUPORTLANGUAGES.length)].beskrivning,
sparkod: track, sparkod: track,
sparNamn: `Nivå ${track}: ${tjanst.name}`, sparNamn: `Nivå ${track}: ${tjanst.name}`,
supervisorId: Math.random() > 0.3 && faker.datatype.uuid(), supervisorId: Math.random() > 0.3 && faker.datatype.uuid(),