Merge pull request #33 in TEA/dafa-web-monorepo from feature/TV-269-participant-page-info to develop

Squashed commit of the following:

commit 11ecbd376902220a7501e0cecb918204bc84138f
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 15:01:02 2021 +0200

    TV-269-participant lag till digi variabel

commit 9df794d9160de07bf97fb7ac51dad2bb05519e7a
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 14:51:55 2021 +0200

    TV-269-participant-page changes after review

commit c2531400e0c906a14d40e314bd5b27e9909ba60d
Merge: d373e69 07ce7a4
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 13:12:10 2021 +0200

    Merge branch 'develop' into feature/TV-269-participant-page-info

    # Conflicts:
    #	apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html
    #	apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts

commit d373e694ad107e5d9c22c53a880dfc280d1bb8c0
Merge: 599bdb5 6b0ac72
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Fri Jul 2 08:47:13 2021 +0200

    Merge branch 'develop' into feature/TV-269-participant-page-info

    # Conflicts:
    #	apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html

commit 599bdb53852b252d9f00016063291b2f8ab14e58
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jul 1 19:05:43 2021 +0200

    TV-269 participant page style. participant data model to be replaced with deltagare model

commit 3377aafafb47a6a04fa6ab414223ec7de9119c38
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jul 1 10:19:49 2021 +0200

    TV-269 participantpage w. tabs WIP

commit b37f03fd5598dece7ac06d5113ab6a9876cd3779
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 29 09:06:57 2021 +0200

    TV-269 participantpage tabs w data WIP

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.html

@@ -1,24 +1,21 @@
 <dafa-layout>
   <section class="participant-card">
-    <digi-typography *ngIf="detailedParticipantData$ | async as detailedParticipantData; else loadingRef">
+    <div *ngIf="detailedParticipantData$ | async as detailedParticipantData; else loadingRef">
       <header class="participant-card__header">
         <dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
-        <h1>{{ detailedParticipantData.fullName }}</h1>
+        <h1>Deltagarinformation</h1>
       </header>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
-        quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
-        perferendis commodi.
-      </p>
 
-      <div class="participant-card__contents">
+      <digi-ng-navigation-tabs afTablistLabel="Deltagarinformation">
-        <div class="participant-card__column">
+        <digi-ng-navigation-tab afLabel="Personuppgifter" afId="tab1">
+          <digi-ng-typography-base>
+            <div class="participant-card__tab-contents">
+              <div class="participant-card__tab-column">
                 <h2>Personuppgifter</h2>
-
                 <dl>
-            <dt>Namn</dt>
+                  <dt>Namn:</dt>
                   <dd *ngIf="detailedParticipantData.fullName; else emptyDD">{{ detailedParticipantData.fullName }}</dd>
-            <dt>Personnummer</dt>
+                  <dt>Personnummer:</dt>
                   <dd *ngIf="detailedParticipantData.ssn; else emptyDD">
                     <dafa-hide-text
                       symbols="********-****"
@@ -26,29 +23,166 @@
                       ariaLabelType="personnummer"
                     ></dafa-hide-text>
                   </dd>
+                  <dt>Folkbokföringsadress:</dt>
+                  <dd *ngIf="detailedParticipantData.address; else emptyDD">
+                    {{ detailedParticipantData.address.street }} + ' ' + {{ detailedParticipantData.address.number }},
+                    {{ detailedParticipantData.address.postalcode }} + ' ' + {{ detailedParticipantData.address.city }}
+                  </dd>
+                  <dt>Postadress:</dt>
+                  <dd *ngIf="detailedParticipantData.postalAddress; else emptyDD">
+                    {{ detailedParticipantData.postalAddress.street }} + ' ' + {{
+                    detailedParticipantData.postalAddress.number }}, {{ detailedParticipantData.postalAddress.postalcode
+                    }} + ' ' + {{ detailedParticipantData.postalAddress.city }}
+                  </dd>
+                  <dt>Telefon:</dt>
+                  <dd *ngIf="detailedParticipantData.phoneMobile; else emptyDD"></dd>
+                  <dd>{{ detailedParticipantData.phoneMobile }}</dd>
+                  <dt>Mailadress:</dt>
+                  <dd *ngIf="detailedParticipantData.email; else emptyDD"></dd>
+                  <dd>{{ detailedParticipantData.email }}</dd>
                 </dl>
-
-          <h3>Särskilda behov</h3>
-          <p>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, voluptatum quibusdam repellendus animi,
-            quidem, commodi quos porro quia incidunt saepe veritatis voluptatem. Cupiditate, accusamus atque! Illum,
-            quisquam esse? Omnis, quasi!
-          </p>
               </div>
-
+              <div class="participant-card__tab-column">
-        <div class="participant-card__column">
+                <h2>Särskilda behov</h2>
+                <dl>
+                  <dt>Funktionsnedsättningar</dt>
+                  <ng-container *ngIf="detailedParticipantData.disabilities; else emptyDD">
+                    <!--TODO när api klart: disabilities.length-->
+                    <dd *ngFor="let disability of detailedParticipantData.disabilities">
+                      {{ disability.name }} <br />
+                      {{ disability.description }}
+                    </dd>
+                  </ng-container>
+                </dl>
+                <dl>
+                  <dt>Tolk</dt>
+                  <dd *ngIf="detailedParticipantData.interpretorLanguage; else noDD">
+                    Ja ( {{ detailedParticipantData.interpretorLanguage }} )
+                  </dd>
+                  <dt>Språkstöd</dt>
+                  <dd *ngIf="detailedParticipantData.supportLanguage; else noDD">
+                    Ja ( {{ detailedParticipantData.supportLanguage }} )
+                  </dd>
+                </dl>
+              </div>
+              <div class="participant-card__tab-column">
                 <h2>Om tjänsten</h2>
-        </div>
+                <dl>
-
+                  <dt>Tillhörande tjänst</dt>
-        <div class="participant-card__column">
+                  <dd *ngIf="detailedParticipantData.service; else emptyDD">{{ detailedParticipantData.service }}</dd>
-          <h2>Matchningsuppgifter</h2>
+                  <dt>Datum för tjänstens början</dt>
+                  <dd *ngIf="detailedParticipantData.startDate; else emptyDD">
+                    {{ detailedParticipantData.startDate | localDate }}
+                  </dd>
+                  <dt>Datum för tjänstens slut</dt>
+                  <dd *ngIf="detailedParticipantData.endDate; else emptyDD">
+                    {{ detailedParticipantData.endDate | localDate }}
+                  </dd>
+                  <dt>Deltagandefrekvens</dt>
+                  <dd *ngIf="detailedParticipantData.service.frequency; else emptyDD">
+                    {{ detailedParticipantData.service.frequency }}
+                  </dd>
+                  <dt>Utförande verksamhet</dt>
+                  <dd *ngIf="detailedParticipantData.service.organisation; else emptyDD">
+                    {{ detailedParticipantData.service.organisation }}
+                  </dd>
+                  <dt>Utförande adress</dt>
+                  <dd
+                    *ngIf="
+                      detailedParticipantData.service.organisation &&
+                        detailedParticipantData.service.organisation.adress;
+                      else emptyDD
+                    "
+                  >
+                    {{ detailedParticipantData.service.organisation.adress }}
+                  </dd>
+                  <dt>Genomförandereferens</dt>
+                  <dd *ngIf="detailedParticipantData.service.reference; else emptyDD">
+                    {{ detailedParticipantData.service.reference }}
+                  </dd>
+                </dl>
               </div>
             </div>
-
+          </digi-ng-typography-base>
+        </digi-ng-navigation-tab>
+        <digi-ng-navigation-tab afLabel="Matchningsuppgifter" afId="tab2">
+          <digi-ng-typography-base>
+            <div class="participant-card__tab-contents">
+              <div class="participant-card__tab-column">
+                <h2>Arbetslivserfarenhet</h2>
+                <dl>
+                  <dt>Arbetsgivare</dt>
+                  <ng-container *ngIf="detailedParticipantData.workExperiences; else emptyDD">
+                    <!--TODO när api finns: workExperiences.length-->
+                    <dd *ngFor="let workExperience of detailedParticipantData.workExperiences; index as i">
+                      <!-- TODO: workExperiences.length. index 0-2-->
+                      {{ workExperience.dateFrom | localDate }} - {{ workExperience.dateTo | localDate }} <br />
+                      {{ workExperience.company }} <br />
+                      {{ workExperience.direction }} <br />
+                      {{ workExperience.description }}
+                    </dd>
+                  </ng-container>
+                </dl>
+                <div class="participant-card__employers-expansion">
+                  <digi-ng-layout-expansion-panel [afExpanded]="accordionExpanded" (click)="toggleAccordionExpanded()">
+                    <digi-ng-typography-base
+                      data-slot-trigger
+                      class="participant-card__employers-expansion__trigger-text"
+                    >
+                      {{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare
+                    </digi-ng-typography-base>
+                    <digi-ng-typography-base>
+                      <dl>
+                        <dd *ngFor="let workExperience of detailedParticipantData.workExperiences">
+                          <!-- TODO: workExperiences.length. Från index 3 -->
+                          {{ workExperience.dateFrom | localDate }} - {{ workExperience.dateTo | localDate }} <br />
+                          {{ workExperience.company }} <br />
+                          {{ workExperience.direction }} <br />
+                          {{ workExperience.description }}
+                        </dd>
+                      </dl>
+                    </digi-ng-typography-base>
+                  </digi-ng-layout-expansion-panel>
+                </div>
+              </div>
+              <div class="participant-card__tab-column-education">
+                <h2>Utbildning</h2>
+                <dl>
+                  <dt>Utbildningar</dt>
+                  <ng-container *ngIf="detailedParticipantData.educations; else emptyDD">
+                    <!--TODO när api finns: educations.length-->
+                    <dd *ngFor="let education of detailedParticipantData.educations">
+                      {{ education.dateFrom | localDate }} - {{ education.dateTo | localDate }} <br />
+                      {{ education.organizer }} <br />
+                      {{ education.direction }} <br />
+                      {{ education.description }} <br />
+                    </dd>
+                  </ng-container>
+                </dl>
+                <dl>
+                  <dt>Högsta utbildningsnivå</dt>
+                  <dd *ngIf="detailedParticipantData.highestEduction; else emptyDD">
+                    {{ detailedParticipantData.highestEduction }}
+                  </dd>
+                </dl>
+                <dl>
+                  <dt>Körkortsinformation</dt>
+                  <dd>Innehar körkort ( {{ detailedParticipantData.driversLicenses ? 'Ja' : 'Nej' }} )</dd>
+                  <dd *ngIf="detailedParticipantData.driversLicenses">
+                    <!-- TODO när api finns: .length -->
+                    Körkortsklasser ( {{ detailedParticipantData.driversLicenses.join(', ') }} )<br />
+                    Tillgång till bil ( {{ detailedParticipantData.accessToCar ? 'Ja' : 'Nej' }} )
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </digi-ng-typography-base>
+        </digi-ng-navigation-tab>
+      </digi-ng-navigation-tabs>
       <footer class="participant-card__footer">
         <dafa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</dafa-back-link>
       </footer>
-    </digi-typography>
+    </div>
   </section>
 
   <ng-template #loadingRef>
@@ -60,4 +194,9 @@
       <span class="dafa__a11y-sr-only">Info saknas</span>
     </dd>
   </ng-template>
+  <ng-template #noDD>
+    <dd>
+      <span>Nej</span>
+    </dd>
+  </ng-template>
 </dafa-layout>

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.scss

@@ -1,39 +1,45 @@
 @import 'variables/gutters';
 
 .participant-card {
-  &__contents {
+  &__tab-contents {
     display: flex;
-    flex-direction: column;
     gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
+    margin-left: $digi--layout--gutter--l;
 
     h2 {
-      margin-top: 0;
+      margin-top: $digi--layout--gutter--l;
     }
   }
 
-  &__column {
+  &__tab-column {
-    width: 100%;
+    flex: 1;
     max-width: var(--digi--typography--text--max-width);
   }
 
+  &__tab-column-education {
+    flex: 2;
+  }
+
   dl {
-    display: grid;
+    display: block;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem 2rem;
   }
 
   dt,
   dd {
     margin: 0;
+    padding-bottom: var(--digi--layout--gutter--xs);
   }
 
   dt {
-    grid-column: 1;
     font-weight: var(--digi--typography--font-weight--semibold);
   }
 
-  dd {
+  &__employers-expansion {
-    grid-column: 2;
+    width: 70%;
+
+    &__trigger-text {
+      font-weight: var(--digi--typography--font-weight--bold);
+    }
   }
 
   &__header,

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.component.ts

@@ -20,6 +20,11 @@ export class ParticipantCardComponent {
     switchMap(participantId => this.participantsService.fetchDetailedParticipantData$(participantId))
   );
   iconType = IconType;
+  accordionExpanded = false;
 
   constructor(private activatedRoute: ActivatedRoute, private participantsService: ParticipantsService) {}
+
+  toggleAccordionExpanded(): void {
+    this.accordionExpanded = !this.accordionExpanded;
+  }
 }

apps/dafa-web/src/app/pages/participants/pages/participant-card/participant-card.module.ts

@@ -7,6 +7,11 @@ import { IconModule } from '@dafa-shared/components/icon/icon.module';
 import { LayoutModule } from '@dafa-shared/components/layout/layout.module';
 import { ParticipantCardComponent } from './participant-card.component';
 import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
+import { DigiNgNavigationTabsModule } from '@af/digi-ng/_navigation/navigation-tabs';
+import { DigiNgNavigationTabModule } from '@af/digi-ng/_navigation/navigation-tab';
+import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
+import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
+import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,6 +24,11 @@ import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.modu
     IconModule,
     BackLinkModule,
     HideTextModule,
+    DigiNgNavigationTabsModule,
+    DigiNgNavigationTabModule,
+    DigiNgLayoutExpansionPanelModule,
+    DigiNgTypographyBaseModule,
+    LocalDatePipeModule,
   ],
   exports: [ParticipantCardComponent],
 })