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

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html

@@ -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">
+                <dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">{{ deltagare.avropInformation.tjanst }}</dd>
-                    {{ 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
+                <ul class="deltagare-card__experience-list" *ngIf="firstVisibleWorkExperiences.length; else emptyText;">
-                    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">
+              <dl *ngIf="deltagare.disabilities.length; else emptyText">
-            <div class="deltagare-card__select-report">
+                <ng-container *ngFor="let disability of deltagare.disabilities; let index = index">
-              <h3>Skapa ny rapport</h3>
+                  <dt>Funktionsnedsättning {{index + 1}}</dt>
-              <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
+                  <dd>
-              <form [formGroup]="reportPickerFormGroup">
+                    <span>{{ disability.title }}</span>
-                <digi-ng-form-select
+                    <digi-ng-popover
-                  [formControlName]="reportsFormControlName"
+                      *ngIf="disability.description"
-                  afLabel="Välj rapporttyp"
+                      class="deltagare-card__popover"
-                  afPlaceholder="Välj rapporttyp"
+                      [afRelativeIconSize]="true"
-                  [afSelectItems]="selectableReportTypes"
+                      >{{ disability.description }}</digi-ng-popover
-                  [afDisableValidStyle]="true"
-                  [afRequired]="true"
-                  [afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
                     >
-                </digi-ng-form-select>
+                  </dd>
-                <digi-form-validation-message
+                </ng-container>
-                  af-variation="error"
+              </dl>
-                  *ngIf="reportsFormControl.invalid && reportsFormControl.touched"
-                >
-                  Du måste välja en rapporttyp
-                </digi-form-validation-message>
-              </form>
             </div>
-            <div class="deltagare-card__cta-wrapper">
+            <div class="deltagare-card__tab-column">
-              <digi-ng-link-button
+              <h2>Språk</h2>
-                afText="Skapa ny rapport"
+              <dl>
-                (click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
+                <dt>Behov av tolk:</dt>
-              ></digi-ng-link-button>
+                <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>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss

@@ -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,

apps/mina-sidor-fa/src/styles/variables/_z-index.scss

@@ -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;