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,128 +1,159 @@
|
|||||||
<msfa-layout>
|
<msfa-layout>
|
||||||
<section class="deltagare-card">
|
<digi-typography>
|
||||||
<div *ngIf="deltagare$ | async as deltagare; else loadingRef">
|
<section *ngIf="deltagare$ | async as deltagare; else loadingRef" class="deltagare-card">
|
||||||
<digi-typography>
|
<header class="deltagare-card__header">
|
||||||
<header class="deltagare-card__header">
|
<msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
|
||||||
<msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
|
<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="Deltagare & tjänst" 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>
|
<dl>
|
||||||
<dl>
|
<dt>Namn:</dt>
|
||||||
<dt>Namn:</dt>
|
<dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
|
||||||
<dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
|
<dt>Personnummer:</dt>
|
||||||
<dt>Personnummer:</dt>
|
<dd *ngIf="deltagare.ssn; else emptyDD">
|
||||||
<dd *ngIf="deltagare.ssn; else emptyDD">
|
<msfa-hide-text
|
||||||
<msfa-hide-text
|
symbols="********-****"
|
||||||
symbols="********-****"
|
[changingText]="deltagare.ssn"
|
||||||
[changingText]="deltagare.ssn"
|
ariaLabelType="personnummer"
|
||||||
ariaLabelType="personnummer"
|
></msfa-hide-text>
|
||||||
></msfa-hide-text>
|
</dd>
|
||||||
</dd>
|
<ng-container *ngFor="let address of deltagare.addresses">
|
||||||
<ng-container *ngFor="let address of deltagare.addresses">
|
<dt>{{address.type}}:</dt>
|
||||||
<dt>{{address.type}}:</dt>
|
|
||||||
<dd>
|
|
||||||
<address>
|
|
||||||
{{ address.street }}<br />
|
|
||||||
{{ address.postalCode }} {{ address.city }}
|
|
||||||
</address>
|
|
||||||
</dd>
|
|
||||||
</ng-container>
|
|
||||||
<dt>Telefon:</dt>
|
|
||||||
<ng-container *ngIf="deltagare.phoneNumbers?.length; else emptyDD">
|
|
||||||
<ng-container *ngFor="let phoneNumber of deltagare.phoneNumbers">
|
|
||||||
<dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
<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>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>
|
<dd>
|
||||||
{{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' :
|
<address>
|
||||||
'Nej'}}
|
{{ address.street }}<br />
|
||||||
|
{{ address.postalCode }} {{ address.city }}
|
||||||
|
</address>
|
||||||
</dd>
|
</dd>
|
||||||
<dt>Språkstöd:</dt>
|
</ng-container>
|
||||||
<dd>
|
<dt>Telefon:</dt>
|
||||||
{{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' :
|
<ng-container *ngIf="deltagare.phoneNumbers?.length; else emptyDD">
|
||||||
'Nej'}}
|
<ng-container *ngFor="let phoneNumber of deltagare.phoneNumbers">
|
||||||
</dd>
|
<dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
|
||||||
<dt>Språk jag kan använda på jobbet:</dt>
|
</ng-container>
|
||||||
<dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
|
</ng-container>
|
||||||
</dl>
|
<dt>E-postadress:</dt>
|
||||||
</div>
|
<dd *ngIf="deltagare.email; else emptyDD">
|
||||||
<div class="deltagare-card__tab-column">
|
<a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
|
||||||
<h2>Om tjänsten</h2>
|
</dd>
|
||||||
<dl>
|
</dl>
|
||||||
<dt>Tillhörande tjänst:</dt>
|
|
||||||
<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>
|
|
||||||
</dd>
|
|
||||||
<dt>Datum för tjänstens slut:</dt>
|
|
||||||
<dd *ngIf="deltagare.avropInformation.endDate; else emptyDD">
|
|
||||||
<digi-typography-time [afDateTime]="deltagare.avropInformation.endDate"></digi-typography-time>
|
|
||||||
</dd>
|
|
||||||
<dt>Deltagandefrekvens:</dt>
|
|
||||||
<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 }}
|
|
||||||
</dd>
|
|
||||||
<dt>Utförande adress:</dt>
|
|
||||||
<dd *ngIf="deltagare.avropInformation.utforandeAdress; else emptyDD">
|
|
||||||
{{ deltagare.avropInformation.utforandeAdress }}
|
|
||||||
</dd>
|
|
||||||
<dt>Genomförandereferens:</dt>
|
|
||||||
<dd *ngIf="deltagare.avropInformation.genomforandeReferens; else emptyDD">
|
|
||||||
{{ deltagare.avropInformation.genomforandeReferens }}
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</digi-navigation-tab>
|
<div class="deltagare-card__tab-column">
|
||||||
<digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
|
<h2>Om tjänsten</h2>
|
||||||
<div class="deltagare-card__tab-contents">
|
<dl>
|
||||||
<div class="deltagare-card__tab-column">
|
<dt>Tillhörande tjänst:</dt>
|
||||||
<h2>Arbetslivserfarenhet</h2>
|
<dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">{{ deltagare.avropInformation.tjanst }}</dd>
|
||||||
<ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
|
<dt>Datum för tjänstens början:</dt>
|
||||||
<ul
|
<dd *ngIf="deltagare.avropInformation.startDate; else emptyDD">
|
||||||
class="deltagare-card__experience-list"
|
<digi-typography-time [afDateTime]="deltagare.avropInformation.startDate"></digi-typography-time>
|
||||||
*ngIf="firstVisibleWorkExperiences.length; else emptyText;"
|
</dd>
|
||||||
|
<dt>Datum för tjänstens slut:</dt>
|
||||||
|
<dd *ngIf="deltagare.avropInformation.endDate; else emptyDD">
|
||||||
|
<digi-typography-time [afDateTime]="deltagare.avropInformation.endDate"></digi-typography-time>
|
||||||
|
</dd>
|
||||||
|
<dt>Deltagandefrekvens:</dt>
|
||||||
|
<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 }}
|
||||||
|
</dd>
|
||||||
|
<dt>Utförande adress:</dt>
|
||||||
|
<dd *ngIf="deltagare.avropInformation.utforandeAdress; else emptyDD">
|
||||||
|
{{ deltagare.avropInformation.utforandeAdress }}
|
||||||
|
</dd>
|
||||||
|
<dt>Genomförandereferens:</dt>
|
||||||
|
<dd *ngIf="deltagare.avropInformation.genomforandeReferens; else emptyDD">
|
||||||
|
{{ deltagare.avropInformation.genomforandeReferens }}
|
||||||
|
</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">
|
||||||
|
<div class="deltagare-card__tab-contents">
|
||||||
|
<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;">
|
||||||
|
<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
|
||||||
>
|
>
|
||||||
<li *ngFor="let workExperience of firstVisibleWorkExperiences">
|
<ul class="deltagare-card__experience-list">
|
||||||
|
<li *ngFor="let workExperience of hiddenWorkExperiences">
|
||||||
<h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
|
<h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
|
||||||
<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 />
|
||||||
@@ -130,120 +161,96 @@
|
|||||||
<p>{{ workExperience.description }}</p>
|
<p>{{ workExperience.description }}</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</digi-ng-layout-expansion-panel>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<div class="deltagare-card__tab-column">
|
||||||
|
<h2>Utbildning</h2>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="deltagare-card__tab-column">
|
||||||
|
<h2>Körkort</h2>
|
||||||
|
<dl>
|
||||||
|
<dt>Har körkort</dt>
|
||||||
|
<dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
|
||||||
|
<ng-container *ngIf="deltagare.driversLicense.licenses.length">
|
||||||
|
<dt>Körkortsklasser</dt>
|
||||||
|
<dd>{{deltagare.driversLicense.licenses.join(', ')}}</dd>
|
||||||
|
<dt>Tillgång till bil</dt>
|
||||||
|
<dd>{{deltagare.driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
|
</dl>
|
||||||
<digi-ng-layout-expansion-panel
|
</div>
|
||||||
class="deltagare-card__accordion"
|
</div>
|
||||||
[afExpanded]="accordionExpanded"
|
</digi-navigation-tab>
|
||||||
(click)="toggleAccordionExpanded()"
|
<digi-navigation-tab af-aria-label="Känsliga uppgifter">
|
||||||
*ngIf="hiddenWorkExperiences.length"
|
<div class="deltagare-card__tab-contents">
|
||||||
>
|
<div class="deltagare-card__tab-column">
|
||||||
<span class="deltagare-card__accordion-trigger" data-slot-trigger
|
<h2>Funktionsnedsättningar</h2>
|
||||||
>{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
|
|
||||||
|
<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
|
||||||
>
|
>
|
||||||
<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.profession }}
|
|
||||||
<p>{{ workExperience.description }}</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</digi-ng-layout-expansion-panel>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
<div class="deltagare-card__tab-column">
|
|
||||||
<h2>Utbildning</h2>
|
|
||||||
<dl>
|
|
||||||
<dt>Högsta utbildningsnivå:</dt>
|
|
||||||
<dd *ngIf="deltagare.highestEducation.level; else emptyDD">
|
|
||||||
{{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
|
|
||||||
}}
|
|
||||||
</dd>
|
</dd>
|
||||||
<h3 class="deltagare-card__subheading deltagare-card__subheading--with-margin">Utbildningar:</h3>
|
</ng-container>
|
||||||
<ul class="deltagare-card__experience-list" *ngIf="deltagare.educations.length; else emptyText">
|
</dl>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="deltagare-card__tab-column">
|
|
||||||
<h2>Körkortsinformation</h2>
|
|
||||||
<dl>
|
|
||||||
<dt>Har körkort</dt>
|
|
||||||
<dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
|
|
||||||
<ng-container *ngIf="deltagare.driversLicense.licenses.length">
|
|
||||||
<dt>Körkortsklasser</dt>
|
|
||||||
<dd>{{deltagare.driversLicense.licenses.join(', ')}}</dd>
|
|
||||||
<dt>Tillgång till bil</dt>
|
|
||||||
<dd>{{deltagare.driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
|
|
||||||
</ng-container>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</digi-navigation-tab>
|
<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>
|
||||||
|
</digi-navigation-tab>
|
||||||
|
</digi-navigation-tabs>
|
||||||
|
</section>
|
||||||
|
</digi-typography>
|
||||||
|
</msfa-layout>
|
||||||
|
|
||||||
<digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
|
<ng-template #loadingRef>
|
||||||
<div class="deltagare-card__select-report">
|
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
|
||||||
<h3>Skapa ny rapport</h3>
|
</ng-template>
|
||||||
<p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
|
<ng-template #emptyDD>
|
||||||
<form [formGroup]="reportPickerFormGroup">
|
<dd>
|
||||||
<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-tabs>
|
|
||||||
</digi-typography>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<ng-template #loadingRef>
|
|
||||||
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
|
|
||||||
</ng-template>
|
|
||||||
<ng-template #emptyDD>
|
|
||||||
<dd>
|
|
||||||
<span aria-hidden="true">-</span>
|
|
||||||
<span class="msfa__a11y-sr-only">Info saknas</span>
|
|
||||||
</dd>
|
|
||||||
</ng-template>
|
|
||||||
<ng-template #emptyText>
|
|
||||||
<span aria-hidden="true">-</span>
|
<span aria-hidden="true">-</span>
|
||||||
<span class="msfa__a11y-sr-only">Info saknas</span>
|
<span class="msfa__a11y-sr-only">Info saknas</span>
|
||||||
</ng-template>
|
</dd>
|
||||||
</msfa-layout>
|
</ng-template>
|
||||||
|
<ng-template #emptyText>
|
||||||
|
<span aria-hidden="true">-</span>
|
||||||
|
<span class="msfa__a11y-sr-only">Info saknas</span>
|
||||||
|
</ng-template>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
@import 'variables/gutters';
|
|
||||||
@import 'mixins/list';
|
@import 'mixins/list';
|
||||||
|
@import 'variables/gutters';
|
||||||
|
@import 'variables/z-index';
|
||||||
|
|
||||||
.deltagare-card {
|
.deltagare-card {
|
||||||
&__tab-contents {
|
&__tab-contents {
|
||||||
@@ -55,6 +56,10 @@
|
|||||||
&__popover {
|
&__popover {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: var(--digi--layout--gutter--s);
|
margin-left: var(--digi--layout--gutter--s);
|
||||||
|
|
||||||
|
::ng-deep .digi-ng-popover__container {
|
||||||
|
z-index: $msfa__z-index-popover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header,
|
&__header,
|
||||||
|
|||||||
@@ -6,3 +6,4 @@ $msfa__z-index-selector-panel: 1;
|
|||||||
$msfa__z-index-backdrop: 1000;
|
$msfa__z-index-backdrop: 1000;
|
||||||
$msfa__z-index-skip-to-content: 2;
|
$msfa__z-index-skip-to-content: 2;
|
||||||
$msfa__z-index-toast: 9999;
|
$msfa__z-index-toast: 9999;
|
||||||
|
$msfa__z-index-popover: 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user