Merge branch 'next' into develop

This commit is contained in:
Daniel Appelgren
2021-09-28 13:56:06 +02:00
24 changed files with 213 additions and 124 deletions
@@ -1,7 +1,9 @@
@import 'variables/gutters';
@import 'variables/z-index';
.employees-list {
position: relative;
z-index: $msfa__z-index-default;
// &__column-head {
// // padding: 0;
// }
@@ -19,7 +19,7 @@
<h2>Personallista</h2>
<form class="employees__search-wrapper" (ngSubmit)="setSearchFilter()">
<form class="employees__search-wrapper" (ngSubmit)="setSearchString()">
<digi-form-input-search
af-label="Sök på personalens namn"
(afOnInput)="setSearchValue($event)"
@@ -26,8 +26,8 @@ export class EmployeesComponent {
return this._searchValue$.getValue();
}
setSearchFilter(): void {
this.employeeService.setSearchFilter(this.searchValue);
setSearchString(): void {
this.employeeService.setSearchString(this.searchValue);
}
setSearchValue($event: CustomEvent<{ target: { value: string } }>): void {
@@ -5,11 +5,22 @@
<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>
<ng-container [ngSwitch]="currentStep">
<p *ngSwitchCase="1">
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>
<p *ngSwitchCase="2">
Välj vilken handledare du vill tilldela till deltagarna. Gå vidare genom att klicka på Nästa. I nästa
steg kommer du att kunna granska tilldelningen innan du bekräftar. Återgå till föregående steg genom att
klicka på tillbaka.
</p>
<p *ngSwitchCase="3">
Bekräfta valet av tilldelad handledare genom att klicka på bekräfta tilldelning. Återgå till föregående
steg genom att klicka på tillbaka.
</p>
</ng-container>
<digi-notification-alert
*ngIf="currentStep === 4 && selectedHandledare$ | async as selectedHandledare"
@@ -26,8 +37,8 @@
<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 *ngSwitchCase="3">Förhandsgranska och tilldela</ng-container>
<ng-container *ngSwitchCase="4">Tilldelade deltagare</ng-container>
</ng-container>
</h2>
@@ -100,7 +111,7 @@
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
>Tillbaka
</digi-button>
<digi-button af-size="m" (afOnClick)="confirmHandledare()">Tilldela</digi-button>
<digi-button af-size="m" (afOnClick)="confirmHandledare()">Nästa</digi-button>
</ng-container>
<ng-container *ngSwitchCase="3">
<digi-button af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
import { AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
import { Handledare } from '@msfa-models/handledare.model';
import { AvropService } from '@msfa-services/avrop.service';
@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
styleUrls: ['./avrop.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AvropComponent {
export class AvropComponent implements OnDestroy {
readonly totalAmountOfSteps = 3;
currentStep$: Observable<number> = this.avropService.currentStep$;
error$: Observable<string> = this.avropService.error$;
@@ -26,6 +26,10 @@ export class AvropComponent {
constructor(private avropService: AvropService) {}
ngOnDestroy(): void {
this.returnToStep1();
}
updateSelectedAvrop(deltagareList: AvropCompact[], currentStep: number): void {
if (currentStep !== 1 && !deltagareList.length) {
this.avropService.goToStep1();
@@ -1,13 +1,5 @@
<digi-ng-skeleton-base *ngIf="avropLoading" [afCount]="3" afText="Laddar nya deltagare"></digi-ng-skeleton-base>
<div *ngIf="availableAvrop?.length" class="avrop-list">
<div class="avrop-list__select-all">
<digi-form-checkbox
*ngIf="!isLocked"
af-label="Välj alla deltagare"
[afChecked]="isAllSelected"
(change)="toggleAllAvrop($event.target.checked)"
></digi-form-checkbox>
</div>
<ul class="avrop-list__list">
<li *ngFor="let avrop of avropRows">
<msfa-avrop-row
@@ -27,6 +19,7 @@
*ngIf="totalPage > 1 && !isLocked"
class="avrop-list__pagination"
[afTotalPages]="totalPage"
[afInitActivePage]="currentPage"
[afCurrentResultStart]="currentResultStart"
[afCurrentResultEnd]="currentResultEnd"
[afTotalResults]="count"
@@ -1,10 +1,6 @@
@import 'mixins/list';
.avrop-list {
&__select-all {
padding: var(--digi--layout--gutter);
}
&__list {
@include msfa__reset-list;
display: flex;
@@ -24,10 +24,6 @@ export class AvropListComponent {
get avropRows(): AvropCompact[] {
return this.isLocked ? this.selectedAvrop : this.availableAvrop;
}
get isAllSelected(): boolean {
return this.selectedAvrop?.length === this.availableAvrop?.length;
}
get currentPage(): number {
return this.paginationMeta.page;
}
@@ -53,14 +49,6 @@ export class AvropListComponent {
return !!this.selectedAvrop?.find(selectedAvrop => selectedAvrop.id === avrop.id);
}
toggleAllAvrop(selected: boolean): void {
if (selected && this.selectedAvrop?.length !== this.availableAvrop?.length) {
this.selectionChanged.emit(this.availableAvrop);
} else if (!selected && this.selectedAvrop.length) {
this.selectionChanged.emit([]);
}
}
toggleSelectedAvrop(avrop: Avrop, selected: boolean): void {
const avropIsSelected = !!this.selectedAvrop?.find(selectedAvrop => selectedAvrop.id === avrop.id);
@@ -4,38 +4,40 @@
</p>
<digi-table af-size="s" *ngIf="deltagareHandelser$ | async; let deltagareHandelser">
<ng-container
*ngIf="deltagareHandelser.length > 0; else noEvents"
>
<table>
<caption class="msfa__a11y-sr-only">Lista med alla händelser för {{deltagare?.fullName}}</caption>
<thead>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Datum för händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Datum förklaring</th>
</tr>
</thead>
<tbody>
<ng-container
*ngIf="deltagareHandelser.length > 0; else noEvents"
>
<table>
<caption class="msfa__a11y-sr-only">Lista med alla händelser för {{deltagare?.fullName}}</caption>
<thead>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let handelse of deltagareHandelser;">
<td class="deltagare-list-handelser__table-cell">{{handelse.receivedDate | date}}</td>
<td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
<tr *ngFor="let handelse of deltagareHandelser;">
<td class="deltagare-list-handelser__table-cell">{{handelse.receivedDate | date}}</td>
<td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
{{handelse.description}}</td>
<td class="deltagare-list-handelser__table-cell">
<ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
{{handelse.effectDescription}}: {{handelse.effectDate | date }}
</ng-container>
</td>
<ng-template #isAvbrottCell>
<td class="deltagare-list-handelser__avbrott-cell">
<msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
{{handelse.description}}</td>
<td class="deltagare-list-handelser__table-cell">{{handelse.tidpunkt | date }}</td>
<td class="deltagare-list-handelser__table-cell">{{handelse.tidpunktDescription}}</td>
<ng-template #isAvbrottCell>
<td class="deltagare-list-handelser__avbrott-cell">
<msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
{{handelse.description}}</td>
</ng-template>
</tr>
</ng-template>
</tr>
</tbody>
</table>
</ng-container>
</tbody>
</table>
</ng-container>
</digi-table>
</div>
@@ -17,7 +17,6 @@
(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"