Merge branch 'next' into develop
This commit is contained in:
Erik Tiekstra
@@ -1,131 +1,143 @@
|
||||
<msfa-layout>
|
||||
<section class="avrop" *ngIf="currentStep$ | async as currentStep">
|
||||
<digi-typography>
|
||||
<header class="avrop__header">
|
||||
<h1>Nya deltagare</h1>
|
||||
<p>
|
||||
Här ser du alla nya deltagare. Deltagarna ska tilldelas en handledare innan tjänstens start. Kryssa för de
|
||||
deltagare du vill tilldela en handledare. Du kan välja en, eller flera personer samtidigt, genom att kryssa i
|
||||
boxarna nedan.
|
||||
</p>
|
||||
<digi-typography>
|
||||
<ng-container *ngIf="(showUnauthorizedError$ | async) === false; else roleError">
|
||||
<ng-container *ngIf="avropData$ | async as avropData; else skeletonRef">
|
||||
<section class="avrop" *ngIf="currentStep$ | async as currentStep">
|
||||
<header class="avrop__header">
|
||||
<h1>Nya deltagare</h1>
|
||||
<p>
|
||||
Här ser du alla nya deltagare. Deltagarna ska tilldelas en handledare innan tjänstens start. Kryssa för de
|
||||
deltagare du vill tilldela en handledare. Du kan välja en, eller flera personer samtidigt, genom att
|
||||
kryssa i boxarna nedan.
|
||||
</p>
|
||||
|
||||
<digi-notification-alert
|
||||
*ngIf="currentStep === 4 && selectedHandledare$ | async as selectedHandledare"
|
||||
af-heading="Allt gick bra"
|
||||
af-variation="success"
|
||||
>
|
||||
<p>Tilldelningen är nu skickad till {{selectedHandledare.fullName}}.</p>
|
||||
</digi-notification-alert>
|
||||
</header>
|
||||
|
||||
<main class="avrop__steps">
|
||||
<div class="avrop__step-header">
|
||||
<h2 class="avrop__sub-heading">
|
||||
<ng-container [ngSwitch]="currentStep">
|
||||
<ng-container *ngSwitchCase="1">Välj deltagare att tilldela</ng-container>
|
||||
<ng-container *ngSwitchCase="2">Tilldela handledare</ng-container>
|
||||
<ng-container *ngSwitchCase="3">Förehandsgranska och tilldela</ng-container>
|
||||
<ng-container *ngSwitchCase="4">Tilldelade delgare</ng-container>
|
||||
</ng-container>
|
||||
</h2>
|
||||
|
||||
<div class="avrop__progress-bar" *ngIf="currentStep < 4">
|
||||
<span>Steg {{ currentStep }} av {{ totalAmountOfSteps }}:</span>
|
||||
<digi-ng-progress-progressbar
|
||||
[afSteps]="totalAmountOfSteps"
|
||||
[afActiveStep]="currentStep"
|
||||
></digi-ng-progress-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="avropData$ | async as avropData">
|
||||
<div class="avrop__content" *ngIf="avropData.data.length; else noAvrop">
|
||||
<div class="avrop__filter" *ngIf="currentStep === 1">
|
||||
<h3>Filter</h3>
|
||||
<msfa-avrop-filters></msfa-avrop-filters>
|
||||
</div>
|
||||
<div class="avrop__select-handledare" *ngIf="currentStep === 2">
|
||||
<ng-container *ngIf="availableHandledare$ | async as availableHandledare; else loadingRef">
|
||||
<digi-form-select
|
||||
*ngIf="availableHandledare?.length; else noAvailabeHandledare"
|
||||
af-label="Välj handledare att tilldela"
|
||||
af-placeholder="Välj handledare"
|
||||
[afRequired]="true"
|
||||
af-validation="error"
|
||||
(afOnChange)="changeHandledare($event.detail)"
|
||||
>
|
||||
<option
|
||||
*ngFor="let availableHandledare of availableHandledare"
|
||||
[value]="availableHandledare.ciamUserId"
|
||||
>
|
||||
{{ availableHandledare.fullName }}
|
||||
</option>
|
||||
</digi-form-select>
|
||||
|
||||
<ng-template #noAvailableHandledare>
|
||||
<p>Inga handledare har behörighet till markerade deltagare</p>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<h3>Välj deltagare att tilldela handledare</h3>
|
||||
<msfa-avrop-list
|
||||
[availableAvrop]="avropData.data"
|
||||
[paginationMeta]="avropData.meta"
|
||||
[selectedAvrop]="selectedAvrop$ | async"
|
||||
[isLocked]="avropIsLocked$ | async"
|
||||
[isSubmitted]="avropIsSubmitted$ | async"
|
||||
[handledare]="selectedHandledare$ | async"
|
||||
[handledareConfirmed]="handledareConfirmed$ | async"
|
||||
[avropLoading]="avropLoading$ | async"
|
||||
(selectionChanged)="updateSelectedAvrop($event, currentStep)"
|
||||
(paginated)="setNewPage($event)"
|
||||
></msfa-avrop-list>
|
||||
</div>
|
||||
|
||||
<div class="avrop__footer" *ngIf="avropData.data.length" [ngSwitch]="currentStep">
|
||||
<digi-notification-alert
|
||||
*ngIf="error$ | async as error"
|
||||
af-heading="Felmeddelande"
|
||||
af-variation="danger"
|
||||
af-closeable="true"
|
||||
(afOnClose)="resetError()"
|
||||
*ngIf="currentStep === 4 && selectedHandledare$ | async as selectedHandledare"
|
||||
af-heading="Allt gick bra"
|
||||
af-variation="success"
|
||||
>
|
||||
<p>{{error}}</p>
|
||||
<p>Tilldelningen är nu skickad till {{selectedHandledare.fullName}}.</p>
|
||||
</digi-notification-alert>
|
||||
</header>
|
||||
|
||||
<div class="avrop__cta-wrapper">
|
||||
<ng-container *ngSwitchCase="1">
|
||||
<digi-button af-size="m" (afOnClick)="lockSelectedAvrop()">Nästa</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="2">
|
||||
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
|
||||
>Tillbaka</digi-button
|
||||
>
|
||||
<digi-button af-size="m" (afOnClick)="confirmHandledare()">Tilldela</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="3">
|
||||
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
|
||||
>Tillbaka</digi-button
|
||||
>
|
||||
<digi-button af-size="m" (afOnClick)="save()">Bekräfta tilldelning</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="4">
|
||||
<digi-button af-size="m" (afOnClick)="returnToStep1()">Tillbaka till nya deltagare</digi-button>
|
||||
</ng-container>
|
||||
<main class="avrop__steps">
|
||||
<div class="avrop__step-header">
|
||||
<h2 class="avrop__sub-heading">
|
||||
<ng-container [ngSwitch]="currentStep">
|
||||
<ng-container *ngSwitchCase="1">Välj deltagare att tilldela</ng-container>
|
||||
<ng-container *ngSwitchCase="2">Tilldela handledare</ng-container>
|
||||
<ng-container *ngSwitchCase="3">Förehandsgranska och tilldela</ng-container>
|
||||
<ng-container *ngSwitchCase="4">Tilldelade delgare</ng-container>
|
||||
</ng-container>
|
||||
</h2>
|
||||
|
||||
<div class="avrop__progress-bar" *ngIf="currentStep < 4">
|
||||
<span>Steg {{ currentStep }} av {{ totalAmountOfSteps }}:</span>
|
||||
<digi-ng-progress-progressbar
|
||||
[afSteps]="totalAmountOfSteps"
|
||||
[afActiveStep]="currentStep"
|
||||
></digi-ng-progress-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</main>
|
||||
</digi-typography>
|
||||
</section>
|
||||
<div class="avrop__content" *ngIf="avropData.data.length; else noAvrop">
|
||||
<div class="avrop__filter" *ngIf="currentStep === 1">
|
||||
<h3>Filter</h3>
|
||||
<msfa-avrop-filters></msfa-avrop-filters>
|
||||
</div>
|
||||
<div class="avrop__select-handledare" *ngIf="currentStep === 2">
|
||||
<ng-container *ngIf="availableHandledare$ | async as availableHandledare; else loadingRef">
|
||||
<digi-form-select
|
||||
*ngIf="availableHandledare?.length; else noAvailabeHandledare"
|
||||
af-label="Välj handledare att tilldela"
|
||||
af-placeholder="Välj handledare"
|
||||
[afRequired]="true"
|
||||
af-validation="error"
|
||||
(afOnChange)="changeHandledare($event.detail)"
|
||||
>
|
||||
<option
|
||||
*ngFor="let availableHandledare of availableHandledare"
|
||||
[value]="availableHandledare.ciamUserId"
|
||||
>
|
||||
{{ availableHandledare.fullName }}
|
||||
</option>
|
||||
</digi-form-select>
|
||||
|
||||
<ng-template #loadingRef>
|
||||
<msfa-loader></msfa-loader>
|
||||
</ng-template>
|
||||
<ng-template #noAvailabeHandledare>
|
||||
<!-- lägg in lämpligt innehåll -->
|
||||
</ng-template>
|
||||
<ng-template #noAvrop>
|
||||
<p>Det finns för tillfället inga nya deltagare att tilldela.</p>
|
||||
</ng-template>
|
||||
<ng-template #noAvailableHandledare>
|
||||
<p>Inga handledare har behörighet till markerade deltagare</p>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<h3>Välj deltagare att tilldela handledare</h3>
|
||||
<msfa-avrop-list
|
||||
[availableAvrop]="avropData.data"
|
||||
[paginationMeta]="avropData.meta"
|
||||
[selectedAvrop]="selectedAvrop$ | async"
|
||||
[isLocked]="avropIsLocked$ | async"
|
||||
[isSubmitted]="avropIsSubmitted$ | async"
|
||||
[handledare]="selectedHandledare$ | async"
|
||||
[handledareConfirmed]="handledareConfirmed$ | async"
|
||||
[avropLoading]="avropLoading$ | async"
|
||||
(selectionChanged)="updateSelectedAvrop($event, currentStep)"
|
||||
(paginated)="setNewPage($event)"
|
||||
></msfa-avrop-list>
|
||||
</div>
|
||||
|
||||
<div class="avrop__footer" *ngIf="avropData.data.length" [ngSwitch]="currentStep">
|
||||
<digi-notification-alert
|
||||
*ngIf="error$ | async as error"
|
||||
af-heading="Felmeddelande"
|
||||
af-variation="danger"
|
||||
af-closeable="true"
|
||||
(afOnClose)="resetError()"
|
||||
>
|
||||
<p>{{error}}</p>
|
||||
</digi-notification-alert>
|
||||
|
||||
<div class="avrop__cta-wrapper">
|
||||
<ng-container *ngSwitchCase="1">
|
||||
<digi-button af-size="m" (afOnClick)="lockSelectedAvrop()">Nästa</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="2">
|
||||
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
|
||||
>Tillbaka
|
||||
</digi-button>
|
||||
<digi-button af-size="m" (afOnClick)="confirmHandledare()">Tilldela</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="3">
|
||||
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
|
||||
>Tillbaka
|
||||
</digi-button>
|
||||
<digi-button af-size="m" (afOnClick)="save()">Bekräfta tilldelning</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="4">
|
||||
<digi-button af-size="m" (afOnClick)="returnToStep1()">Tillbaka till nya deltagare</digi-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</digi-typography>
|
||||
</msfa-layout>
|
||||
|
||||
<ng-template #loadingRef>
|
||||
<msfa-loader></msfa-loader>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #skeletonRef>
|
||||
<digi-ng-skeleton-base [afCount]="3" afText="Laddar nya deltagare"></digi-ng-skeleton-base>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #noAvailabeHandledare>
|
||||
<!-- lägg in lämpligt innehåll -->
|
||||
</ng-template>
|
||||
|
||||
<ng-template #noAvrop>
|
||||
<p>Det finns för tillfället inga nya deltagare att tilldela.</p>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #roleError>
|
||||
<msfa-unauthorized-alert></msfa-unauthorized-alert>
|
||||
</ng-template>
|
||||
|
||||
@@ -13,7 +13,6 @@ import { Observable } from 'rxjs';
|
||||
export class AvropComponent {
|
||||
readonly totalAmountOfSteps = 3;
|
||||
currentStep$: Observable<number> = this.avropService.currentStep$;
|
||||
|
||||
error$: Observable<string> = this.avropService.error$;
|
||||
avropData$: Observable<AvropCompactData> = this.avropService.avropData$;
|
||||
selectedAvrop$: Observable<AvropCompact[]> = this.avropService.selectedAvrop$;
|
||||
@@ -23,6 +22,7 @@ export class AvropComponent {
|
||||
handledareConfirmed$: Observable<boolean> = this.avropService.handledareIsConfirmed$;
|
||||
avropIsSubmitted$: Observable<boolean> = this.avropService.avropIsSubmitted$;
|
||||
avropLoading$: Observable<boolean> = this.avropService.avropLoading$;
|
||||
showUnauthorizedError$: Observable<boolean> = this.avropService.showUnauthorizedError$;
|
||||
|
||||
constructor(private avropService: AvropService) {}
|
||||
|
||||
|
||||
@@ -4,10 +4,11 @@ import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
|
||||
import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
|
||||
import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.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 { LoaderModule } from '@msfa-shared/components/loader/loader.module';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
@@ -21,6 +22,7 @@ import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
|
||||
DigiNgProgressProgressbarModule,
|
||||
DigiNgSkeletonBaseModule,
|
||||
LoaderModule,
|
||||
UnauthorizedAlertModule,
|
||||
],
|
||||
})
|
||||
export class AvropModule {}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<msfa-layout>
|
||||
<digi-typography>
|
||||
<section class="deltagare">
|
||||
<header class="deltagare__header">
|
||||
<h1>Deltagarlista</h1>
|
||||
<p>
|
||||
Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna och
|
||||
se mer information om deltagarna.
|
||||
</p>
|
||||
</header>
|
||||
<div class="deltagare__filter">
|
||||
<digi-form-checkbox
|
||||
class="deltagare__only-my-deltagare"
|
||||
af-label="Visa endast mina tilldelade deltagare"
|
||||
[afChecked]="onlyMyDeltagare$ | async"
|
||||
(afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
|
||||
></digi-form-checkbox>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
|
||||
<ng-container *ngIf="(showUnauthorizedError$ | async) === false; else roleError">
|
||||
<section class="deltagare" *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
|
||||
<header class="deltagare__header">
|
||||
<h1>Deltagarlista</h1>
|
||||
<p>
|
||||
Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna
|
||||
och se mer information om deltagarna.
|
||||
</p>
|
||||
</header>
|
||||
<div class="deltagare__filter">
|
||||
<digi-form-checkbox
|
||||
class="deltagare__only-my-deltagare"
|
||||
af-label="Visa endast mina tilldelade deltagare"
|
||||
[afChecked]="onlyMyDeltagare$ | async"
|
||||
(afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
|
||||
></digi-form-checkbox>
|
||||
</div>
|
||||
{{showUnauthorizedError$ | async}}
|
||||
<ng-container *ngIf="(deltagareLoading$ | async) === false; else loadingRef">
|
||||
<msfa-deltagare-list
|
||||
*ngIf="allDeltagareData.data.length; else noDeltagare"
|
||||
@@ -28,18 +28,22 @@
|
||||
(paginated)="setNewPage($event)"
|
||||
></msfa-deltagare-list>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #loadingRef>
|
||||
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
|
||||
</ng-template>
|
||||
</section>
|
||||
</section>
|
||||
</ng-container>
|
||||
</digi-typography>
|
||||
</msfa-layout>
|
||||
|
||||
<ng-template #loadingRef>
|
||||
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #noDeltagare>
|
||||
<p>
|
||||
Inga deltagare hittades{{(onlyMyDeltagare$ | async) ? '. Bocka ur "Visa endast mina tilldelade deltagare" för att se
|
||||
deltagare som tillhör din organisation.' : ' som tillhör din organisation.' }}
|
||||
</p>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #roleError>
|
||||
<msfa-unauthorized-alert></msfa-unauthorized-alert>
|
||||
</ng-template>
|
||||
|
||||
@@ -15,6 +15,7 @@ export class DeltagareComponent {
|
||||
sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
|
||||
onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$;
|
||||
deltagareLoading$: Observable<boolean> = this.deltagareService.deltagareLoading$;
|
||||
showUnauthorizedError$: Observable<boolean> = this.deltagareService.showUnauthorizedError$;
|
||||
|
||||
constructor(private deltagareService: DeltagareService) {}
|
||||
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
|
||||
import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
|
||||
import { DeltagareListModule } from './components/deltagare-list/deltagare-list.module';
|
||||
import { DeltagareRoutingModule } from './deltagare-routing.module';
|
||||
import { DeltagareComponent } from './deltagare.component';
|
||||
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [DeltagareComponent],
|
||||
imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule, DigiNgSkeletonBaseModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
DeltagareRoutingModule,
|
||||
LayoutModule,
|
||||
DeltagareListModule,
|
||||
UnauthorizedAlertModule,
|
||||
DigiNgSkeletonBaseModule,
|
||||
],
|
||||
})
|
||||
export class DeltagareModule {}
|
||||
|
||||
Reference in New Issue
Block a user