feat(deltagare): Moved around content between tabs inside deltagare-card. (TV-638)
Squashed commit of the following: commit 8466394d617fa573663f3d199414354394d22b31 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Sep 22 11:42:32 2021 +0200 Moved around content for deltagare-card
This commit is contained in:
Erik Tiekstra
@@ -1,13 +1,12 @@
|
||||
<msfa-layout>
|
||||
<section class="deltagare-card">
|
||||
<div *ngIf="deltagare$ | async as deltagare; else loadingRef">
|
||||
<digi-typography>
|
||||
<section *ngIf="deltagare$ | async as deltagare; else loadingRef" class="deltagare-card">
|
||||
<header class="deltagare-card__header">
|
||||
<msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
|
||||
<h1>Deltagarinformation</h1>
|
||||
</header>
|
||||
<digi-navigation-tabs af-aria-label="Deltagarinformation">
|
||||
<digi-navigation-tab af-aria-label="Om deltagaren" af-id="deltagare-card-personuppgifter">
|
||||
<digi-navigation-tab af-aria-label="Deltagare & tjänst" af-id="deltagare-card-personuppgifter">
|
||||
<div class="deltagare-card__tab-contents">
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Personuppgifter</h2>
|
||||
@@ -43,44 +42,11 @@
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Behov och språk</h2>
|
||||
<dl>
|
||||
<dt>Funktionsnedsättningar:</dt>
|
||||
<ng-container *ngIf="deltagare.disabilities.length; else emptyDD">
|
||||
<dd *ngFor="let disability of deltagare.disabilities">
|
||||
<span>{{ disability.title }}</span>
|
||||
<digi-ng-popover
|
||||
*ngIf="disability.description"
|
||||
class="deltagare-card__popover"
|
||||
[afRelativeIconSize]="true"
|
||||
>{{ disability.description }}</digi-ng-popover
|
||||
>
|
||||
</dd>
|
||||
</ng-container>
|
||||
</dl>
|
||||
<dl>
|
||||
<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">
|
||||
<h2>Om tjänsten</h2>
|
||||
<dl>
|
||||
<dt>Tillhörande tjänst:</dt>
|
||||
<dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">
|
||||
{{ deltagare.avropInformation.tjanst }}
|
||||
</dd>
|
||||
<dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">{{ deltagare.avropInformation.tjanst }}</dd>
|
||||
<dt>Datum för tjänstens början:</dt>
|
||||
<dd *ngIf="deltagare.avropInformation.startDate; else emptyDD">
|
||||
<digi-typography-time [afDateTime]="deltagare.avropInformation.startDate"></digi-typography-time>
|
||||
@@ -111,6 +77,54 @@
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Handledare</h2>
|
||||
<dl>
|
||||
<dt>Tilldelad handledare:</dt>
|
||||
<dd *ngIf="deltagare.avropInformation.handledare; else emptyDD">
|
||||
{{ deltagare.avropInformation.handledare }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</digi-navigation-tab>
|
||||
<digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
|
||||
<div class="deltagare-card__select-report">
|
||||
<h3>Skapa ny rapport</h3>
|
||||
<p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
|
||||
<form [formGroup]="reportPickerFormGroup">
|
||||
<digi-ng-form-select
|
||||
[formControlName]="reportsFormControlName"
|
||||
afLabel="Välj rapporttyp"
|
||||
afPlaceholder="Välj rapporttyp"
|
||||
[afSelectItems]="selectableReportTypes"
|
||||
[afDisableValidStyle]="true"
|
||||
[afRequired]="true"
|
||||
[afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
|
||||
>
|
||||
</digi-ng-form-select>
|
||||
<digi-form-validation-message
|
||||
af-variation="error"
|
||||
*ngIf="reportsFormControl.invalid && reportsFormControl.touched"
|
||||
>
|
||||
Du måste välja en rapporttyp
|
||||
</digi-form-validation-message>
|
||||
</form>
|
||||
</div>
|
||||
<div class="deltagare-card__cta-wrapper">
|
||||
<digi-ng-link-button
|
||||
afText="Skapa ny rapport"
|
||||
(click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
|
||||
></digi-ng-link-button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Inskickade rapporter</h3>
|
||||
<msfa-reports
|
||||
*ngIf="reportsData$ | async as reportsData, else loadingRef"
|
||||
[reports]="reportsData.data"
|
||||
[paginationMeta]="reportsData?.meta"
|
||||
(paginated)="setNewPage($event)"
|
||||
></msfa-reports>
|
||||
</div>
|
||||
</digi-navigation-tab>
|
||||
<digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
|
||||
@@ -118,10 +132,7 @@
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Arbetslivserfarenhet</h2>
|
||||
<ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
|
||||
<ul
|
||||
class="deltagare-card__experience-list"
|
||||
*ngIf="firstVisibleWorkExperiences.length; else emptyText;"
|
||||
>
|
||||
<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> -
|
||||
@@ -174,7 +185,7 @@
|
||||
</dl>
|
||||
</div>
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Körkortsinformation</h2>
|
||||
<h2>Körkort</h2>
|
||||
<dl>
|
||||
<dt>Har körkort</dt>
|
||||
<dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
|
||||
@@ -188,50 +199,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</digi-navigation-tab>
|
||||
<digi-navigation-tab af-aria-label="Känsliga uppgifter">
|
||||
<div class="deltagare-card__tab-contents">
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Funktionsnedsättningar</h2>
|
||||
|
||||
<digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
|
||||
<div class="deltagare-card__select-report">
|
||||
<h3>Skapa ny rapport</h3>
|
||||
<p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
|
||||
<form [formGroup]="reportPickerFormGroup">
|
||||
<digi-ng-form-select
|
||||
[formControlName]="reportsFormControlName"
|
||||
afLabel="Välj rapporttyp"
|
||||
afPlaceholder="Välj rapporttyp"
|
||||
[afSelectItems]="selectableReportTypes"
|
||||
[afDisableValidStyle]="true"
|
||||
[afRequired]="true"
|
||||
[afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
|
||||
<dl *ngIf="deltagare.disabilities.length; else emptyText">
|
||||
<ng-container *ngFor="let disability of deltagare.disabilities; let index = index">
|
||||
<dt>Funktionsnedsättning {{index + 1}}</dt>
|
||||
<dd>
|
||||
<span>{{ disability.title }}</span>
|
||||
<digi-ng-popover
|
||||
*ngIf="disability.description"
|
||||
class="deltagare-card__popover"
|
||||
[afRelativeIconSize]="true"
|
||||
>{{ disability.description }}</digi-ng-popover
|
||||
>
|
||||
</digi-ng-form-select>
|
||||
<digi-form-validation-message
|
||||
af-variation="error"
|
||||
*ngIf="reportsFormControl.invalid && reportsFormControl.touched"
|
||||
>
|
||||
Du måste välja en rapporttyp
|
||||
</digi-form-validation-message>
|
||||
</form>
|
||||
</dd>
|
||||
</ng-container>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="deltagare-card__cta-wrapper">
|
||||
<digi-ng-link-button
|
||||
afText="Skapa ny rapport"
|
||||
(click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
|
||||
></digi-ng-link-button>
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Språk</h2>
|
||||
<dl>
|
||||
<dt>Behov av tolk:</dt>
|
||||
<dd>
|
||||
{{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' : 'Nej'}}
|
||||
</dd>
|
||||
<dt>Behov av språkstöd:</dt>
|
||||
<dd>
|
||||
{{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' : 'Nej'}}
|
||||
</dd>
|
||||
<dt>Språk som kan användas på jobbet:</dt>
|
||||
<dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Inskickade rapporter</h3>
|
||||
<msfa-reports
|
||||
*ngIf="reportsData$ | async as reportsData, else loadingRef"
|
||||
[reports]="reportsData.data"
|
||||
[paginationMeta]="reportsData?.meta"
|
||||
(paginated)="setNewPage($event)"
|
||||
></msfa-reports>
|
||||
</div>
|
||||
</digi-navigation-tab>
|
||||
</digi-navigation-tabs>
|
||||
</digi-typography>
|
||||
</div>
|
||||
</section>
|
||||
</digi-typography>
|
||||
</msfa-layout>
|
||||
|
||||
<ng-template #loadingRef>
|
||||
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
|
||||
@@ -246,4 +254,3 @@
|
||||
<span aria-hidden="true">-</span>
|
||||
<span class="msfa__a11y-sr-only">Info saknas</span>
|
||||
</ng-template>
|
||||
</msfa-layout>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import 'variables/gutters';
|
||||
@import 'mixins/list';
|
||||
@import 'variables/gutters';
|
||||
@import 'variables/z-index';
|
||||
|
||||
.deltagare-card {
|
||||
&__tab-contents {
|
||||
@@ -55,6 +56,10 @@
|
||||
&__popover {
|
||||
display: inline-block;
|
||||
margin-left: var(--digi--layout--gutter--s);
|
||||
|
||||
::ng-deep .digi-ng-popover__container {
|
||||
z-index: $msfa__z-index-popover;
|
||||
}
|
||||
}
|
||||
|
||||
&__header,
|
||||
|
||||
@@ -6,3 +6,4 @@ $msfa__z-index-selector-panel: 1;
|
||||
$msfa__z-index-backdrop: 1000;
|
||||
$msfa__z-index-skip-to-content: 2;
|
||||
$msfa__z-index-toast: 9999;
|
||||
$msfa__z-index-popover: 1;
|
||||
|
||||
Reference in New Issue
Block a user