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>
|
||||
<section class="deltagare-card">
|
||||
<div *ngIf="deltagare$ | async as deltagare; else loadingRef">
|
||||
<digi-typography>
|
||||
<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">
|
||||
<div class="deltagare-card__tab-contents">
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Personuppgifter</h2>
|
||||
<dl>
|
||||
<dt>Namn:</dt>
|
||||
<dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
|
||||
<dt>Personnummer:</dt>
|
||||
<dd *ngIf="deltagare.ssn; else emptyDD">
|
||||
<msfa-hide-text
|
||||
symbols="********-****"
|
||||
[changingText]="deltagare.ssn"
|
||||
ariaLabelType="personnummer"
|
||||
></msfa-hide-text>
|
||||
</dd>
|
||||
<ng-container *ngFor="let address of deltagare.addresses">
|
||||
<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>
|
||||
<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="Deltagare & tjänst" af-id="deltagare-card-personuppgifter">
|
||||
<div class="deltagare-card__tab-contents">
|
||||
<div class="deltagare-card__tab-column">
|
||||
<h2>Personuppgifter</h2>
|
||||
<dl>
|
||||
<dt>Namn:</dt>
|
||||
<dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
|
||||
<dt>Personnummer:</dt>
|
||||
<dd *ngIf="deltagare.ssn; else emptyDD">
|
||||
<msfa-hide-text
|
||||
symbols="********-****"
|
||||
[changingText]="deltagare.ssn"
|
||||
ariaLabelType="personnummer"
|
||||
></msfa-hide-text>
|
||||
</dd>
|
||||
<ng-container *ngFor="let address of deltagare.addresses">
|
||||
<dt>{{address.type}}:</dt>
|
||||
<dd>
|
||||
{{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' :
|
||||
'Nej'}}
|
||||
<address>
|
||||
{{ address.street }}<br />
|
||||
{{ address.postalCode }} {{ address.city }}
|
||||
</address>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</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;"
|
||||
<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>
|
||||
<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 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>
|
||||
<digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
|
||||
<digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
|
||||
@@ -130,120 +161,96 @@
|
||||
<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>
|
||||
<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 *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
|
||||
</dl>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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ö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>
|
||||
</ng-container>
|
||||
</dl>
|
||||
</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">
|
||||
<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-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>
|
||||
<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>
|
||||
</ng-template>
|
||||
</msfa-layout>
|
||||
</dd>
|
||||
</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 '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