Pull request #261: Feature/TV-863

Merge in TEA/mina-sidor-fa-web from feature/TV-863 to develop

Squashed commit of the following:

commit cfe34c8c9a467fb048b167d685cdc456ccdaf3e3
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Tue Nov 23 14:44:24 2021 +0100

    tog bort public

commit fbb20ddb255643a7ebc0d8d9352f9f11f578a346
Merge: a4862c1e f0354d0a
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Tue Nov 23 12:10:37 2021 +0100

    Merge branch 'develop' into feature/TV-863

commit a4862c1e30e13da8959f72a88b1b77e51ae60566
Merge: 999df7e6 fbd04112
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Fri Nov 19 09:56:34 2021 +0100

    Merge branch 'develop' into feature/TV-863

commit 999df7e665f8a0ae92d2ab25e43564ce68601ef9
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 18 12:51:46 2021 +0100

    ändrade till async i html

commit f7a55b6a6d34843b5d4d8ab43351853b08683768
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 18 12:32:53 2021 +0100

    tog bort komponenten och la in den i själva avrop, och la till en behavioursubject för lokal variabel

commit 6ecd2aee2eb6319265e39813f02c09f4e69aee1d
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 18 10:36:14 2021 +0100

    fixade till fil

commit 88f209e44fa0bacdbc002a2b8b4a82ea03f01259
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 18 10:28:52 2021 +0100

    senaste version av avrop-dialog

commit 63b928a8ded7929f80eccc99da10e473cba035d8
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 11 15:15:47 2021 +0100

    ändrar tillbak från senaste commit, blev css fel

commit e84b9bc6f1e956e8dae375626c69728d3a3c1b9a
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 11 14:57:21 2021 +0100

    tog bort lite i html o css

commit 199af40bd3237d7ffe37e4bab0ecf7abe4778a08
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 11 14:47:03 2021 +0100

    Tog bort mixins

commit 76713bc2c8e8a129dad73f1882e91f7c2ab2dade
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 11 14:29:52 2021 +0100

    Fixat till lite css och html

commit eb274ef554ae8ccc7f01f47e9066c231d5989842
Merge: ce4c4d25 bfb4f6e1
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Thu Nov 11 14:24:44 2021 +0100

    Merge branch 'develop' into feature/TV-863

commit ce4c4d25dd97ae90b7c076a00b4a2a0cbb9bc708
Author: Chingiz <chingiz.esenbaev@arbetsformedlingen.se>
Date:   Wed Nov 10 17:26:49 2021 +0100

    TV-863: Info dialog komponent

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

@@ -71,8 +71,54 @@
                   </ng-template>
                 </ng-container>
               </div>
-
+              <div class="avrop__info">
                 <h3 *ngIf="currentStep === 1">Välj deltagare att tilldela handledare</h3>
+                <digi-button
+                  class="avrop-dialog-button"
+                  af-size="s"
+                  (click)="openAvropDialog()"
+                  aria-controls="avrop-dialog"
+                  aria-label="Öppnar en dialog med information om genomförandereferens, språkstöd och tolk"
+                  af-variation="tertiary"
+                >
+                  <digi-icon-info-circle-reg class="msfa__digi-icon" slot="icon"></digi-icon-info-circle-reg>
+                  Läs mer information här
+                </digi-button>
+
+                <digi-ng-dialog
+                  class="avrop-dialog"
+                  [afActive]="displayAvropDialog$ | async"
+                  (afOnInactive)="closeAvropDialog()"
+                  (afOnPrimaryClick)="closeAvropDialog()"
+                  afHeading="Information"
+                  afHeadingLevel="h2"
+                  afPrimaryButtonText="Stäng"
+                  afSecondaryButtonText=""
+                >
+                  <h3>Genomförandereferens</h3>
+                  <p>
+                    Genomförandereferens är det referensnummer du ska använda dig av i kontakten med Arbetsförmedlingen.
+                    Du kan också använda genomförandereferensen till att leta fram en order i leverantörsportalen.
+                  </p>
+
+                  <h3>Språkstöd</h3>
+                  <p>
+                    Det finns flera olika typer av språkstöd. Till exempel användande av flerspråkig personal, tillgång
+                    till material på lätt svenska eller olika språk, anlitande av tolk med mera. Dessa kan erbjudas och
+                    kombineras efter deltagarens behov. Det finns skillnader mellan vilket språkstöd som ingår i
+                    upphandlingen av olika tjänster och utbildningar. Du hittar mer information om språkstöd i
+                    förfrågningsunderlaget för specifik upphandling.
+                  </p>
+
+                  <h3>Tolk</h3>
+                  <p>
+                    Tolk är en typ av språkstöd som kan behöva anlitas vid behov. Ibland står Arbetsförmedlingen för
+                    tolkkostnaden och ibland står leverantören för tolkkostnaden. Det finns skillnader mellan vilket
+                    språkstöd som ingår i upphandlingen av olika tjänster och utbildningar. Du hittar mer information om
+                    språkstöd och tolk i förfrågningsunderlaget för specifik upphandling.
+                  </p>
+                </digi-ng-dialog>
+              </div>
               <msfa-avrop-list
                 [availableAvrop]="avropData.data"
                 [paginationMeta]="avropData.meta"

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

@@ -39,4 +39,11 @@
     display: flex;
     gap: var(--digi--layout--gutter);
   }
+  &__info {
+    display: flex;
+    align-items: baseline;
+  }
+  .msfa__digi-icon {
+    width: 1.25em;
+  }
 }

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
 import { Avrop, AvropAndMeta } from '@msfa-models/avrop.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { AvropService } from '@msfa-services/avrop.service';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'msfa-avrop',
@@ -23,6 +23,7 @@ export class AvropComponent implements OnDestroy {
   avropIsSubmitted$: Observable<boolean> = this.avropService.avropIsSubmitted$;
   avropLoading$: Observable<boolean> = this.avropService.avropLoading$;
   showUnauthorizedError$: Observable<boolean> = this.avropService.showUnauthorizedError$;
+  displayAvropDialog$ = new BehaviorSubject(false);
 
   constructor(private avropService: AvropService) {}
 
@@ -73,4 +74,12 @@ export class AvropComponent implements OnDestroy {
   setNewPage(page: number): void {
     this.avropService.setPage(page);
   }
+
+  openAvropDialog(): void {
+    this.displayAvropDialog$.next(true);
+  }
+
+  closeAvropDialog(): void {
+    this.displayAvropDialog$.next(false);
+  }
 }

apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts

@@ -10,6 +10,7 @@ import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { AvropComponent } from './avrop.component';
 import { AvropFiltersModule } from './components/avrop-filters/avrop-filters.module';
 import { AvropListModule } from './components/avrop-list/avrop-list.module';
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -25,6 +26,7 @@ import { AvropListModule } from './components/avrop-list/avrop-list.module';
     UiLoaderModule,
     HandledarePickerFormModule,
     UnauthorizedAlertModule,
+    DigiNgDialogModule,
   ],
 })
 export class AvropModule {}