arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added text if no deltagare could be found

Browse Source
This commit is contained in:
Erik Tiekstra
2021-09-24 13:19:56 +02:00
parent c062b516f3
commit f6243693d4
5 changed files with 79 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.html
View File

@@ -1,57 +1,59 @@
<div class="deltagare-list"> <div class="deltagare-list">
<digi-table af-variation="secondary"> <digi-table af-variation="secondary">
<table class="deltagare-list__table"> <table class="deltagare-list__table">
<caption class="msfa__a11y-sr-only">Tabell med de deltagare som tillhör organistaionen.</caption> <caption class="msfa__a11y-sr-only">
Tabell med de deltagare som tillhör organistaionen.
</caption>
<thead> <thead>
<tr> <tr>
<th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders"> <th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
<button <button
class="deltagare-list__sort-button" class="deltagare-list__sort-button"
[attr.id]="'sort-button-' + column.key" [attr.id]="'sort-button-' + column.key"
(click)="handleSort(column.key)" (click)="handleSort(column.key)"
> >
{{column.label}} {{column.label}}
<ng-container *ngIf="sort.key === column.key"> <ng-container *ngIf="sort.key === column.key">
<digi-icon-caret-up <digi-icon-caret-up
class="deltagare-list__sort-icon" class="deltagare-list__sort-icon"
*ngIf="sort.order === orderType.ASC" *ngIf="sort.order === orderType.ASC"
></digi-icon-caret-up> ></digi-icon-caret-up>
<digi-icon-caret-down <digi-icon-caret-down
class="deltagare-list__sort-icon" class="deltagare-list__sort-icon"
*ngIf="sort.order === orderType.DESC" *ngIf="sort.order === orderType.DESC"
></digi-icon-caret-down> ></digi-icon-caret-down>
</ng-container> </ng-container>
</button> </button>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare"> <tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
<th scope="row"> <th scope="row">
<a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a> <a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
</th> </th>
<td>{{ singleDeltagare.tjanst }}</td> <td>{{ singleDeltagare.tjanst }}</td>
<td>{{ singleDeltagare.utforandeVerksamhet }}</td> <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
<td>{{ singleDeltagare.startdatumAvrop | date }}</td> <td>{{ singleDeltagare.startdatumAvrop | date }}</td>
<td> <td>
{{ singleDeltagare.slutdatumAvrop | date }} {{ singleDeltagare.slutdatumAvrop | date }}
<div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott"> <div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott">
<msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon> <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
Avbrott Avbrott
</div> </div>
</td> </td>
<td> <td>
<digi-button <digi-button
af-variation="tertiary" af-variation="tertiary"
af-size="s" af-size="s"
(click)="openHandelser(singleDeltagare)" (click)="openHandelser(singleDeltagare)"
aria-controls="deltagareHandelser" aria-controls="deltagareHandelser"
> >
<digi-icon-info-circle-reg class="deltagare-list__info-icon" slot="icon"></digi-icon-info-circle-reg> <digi-icon-info-circle-reg class="deltagare-list__info-icon" slot="icon"></digi-icon-info-circle-reg>
Visa händelser Visa händelser
</digi-button> </digi-button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</digi-table> </digi-table>
@@ -66,9 +68,7 @@
[afPrimaryButtonText]="'Stäng'" [afPrimaryButtonText]="'Stäng'"
id="deltagareHandelser" id="deltagareHandelser"
> >
<msfa-deltagare-list-handelser-dialog <msfa-deltagare-list-handelser-dialog [deltagare]="deltagare"></msfa-deltagare-list-handelser-dialog>
[deltagare]="deltagare"
></msfa-deltagare-list-handelser-dialog>
</digi-ng-dialog> </digi-ng-dialog>
<digi-navigation-pagination <digi-navigation-pagination

27
apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.html
View File

@@ -17,14 +17,18 @@
></digi-form-checkbox> ></digi-form-checkbox>
</div> </div>
<msfa-deltagare-list <ng-container *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
*ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef" <ng-container *ngIf="(deltagareLoading$ | async) === false; else loadingRef">
[deltagare]="allDeltagareData.data" <msfa-deltagare-list
[paginationMeta]="allDeltagareData.meta" *ngIf="allDeltagareData.data.length; else noDeltagare"
[sort]="sort$ | async" [deltagare]="allDeltagareData.data"
(sorted)="handleDeltagareSort($event)" [paginationMeta]="allDeltagareData.meta"
(paginated)="setNewPage($event)" [sort]="sort$ | async"
></msfa-deltagare-list> (sorted)="handleDeltagareSort($event)"
(paginated)="setNewPage($event)"
></msfa-deltagare-list>
</ng-container>
</ng-container>
<ng-template #loadingRef> <ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base> <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
@@ -32,3 +36,10 @@
</section> </section>
</digi-typography> </digi-typography>
</msfa-layout> </msfa-layout>
<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>

1
apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.ts
View File

@@ -14,6 +14,7 @@ export class DeltagareComponent {
allDeltagareData$: Observable<DeltagareCompactData> = this.deltagareService.allDeltagareData$; allDeltagareData$: Observable<DeltagareCompactData> = this.deltagareService.allDeltagareData$;
sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$; sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$; onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$;
deltagareLoading$: Observable<boolean> = this.deltagareService.deltagareLoading$;
constructor(private deltagareService: DeltagareService) {} constructor(private deltagareService: DeltagareService) {}

8
apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts
View File

@@ -24,7 +24,7 @@ import { ReportsData } from '@msfa-models/reports.model';
import { Sort } from '@msfa-models/sort.model'; import { Sort } from '@msfa-models/sort.model';
import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model'; import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
import { sortFromToDates } from '@msfa-utils/sort.util'; import { sortFromToDates } from '@msfa-utils/sort.util';
import { Observable, of } from 'rxjs'; import { BehaviorSubject, Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators'; import { catchError, map } from 'rxjs/operators';
@Injectable({ @Injectable({
@@ -32,6 +32,8 @@ import { catchError, map } from 'rxjs/operators';
}) })
export class DeltagareApiService { export class DeltagareApiService {
private _apiBaseUrl = `${environment.api.url}/deltagare`; private _apiBaseUrl = `${environment.api.url}/deltagare`;
private _deltagareLoading$ = new BehaviorSubject<boolean>(false);
public deltagareLoading$: Observable<boolean> = this._deltagareLoading$.asObservable();
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
@@ -51,12 +53,16 @@ export class DeltagareApiService {
if (onlyMyDeltagare) { if (onlyMyDeltagare) {
params.onlyMyDeltagare = onlyMyDeltagare.toString(); params.onlyMyDeltagare = onlyMyDeltagare.toString();
} }
this._deltagareLoading$.next(true);
return this.httpClient return this.httpClient
.get<DeltagareCompactApiResponse>(this._apiBaseUrl, { .get<DeltagareCompactApiResponse>(this._apiBaseUrl, {
params, params,
}) })
.pipe( .pipe(
map(({ data, meta }) => { map(({ data, meta }) => {
this._deltagareLoading$.next(false);
return { data: data.map(deltagare => mapResponseToDeltagareCompact(deltagare)), meta }; return { data: data.map(deltagare => mapResponseToDeltagareCompact(deltagare)), meta };
}), }),
catchError((error: Error) => { catchError((error: Error) => {

1
apps/mina-sidor-fa/src/app/shared/services/deltagare.service.ts
View File

@@ -16,6 +16,7 @@ export class DeltagareService {
public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable(); public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false); private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable(); public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
public deltagareLoading$: Observable<boolean> = this.deltagareApiService.deltagareLoading$;
public allDeltagareData$: Observable<DeltagareCompactData> = combineLatest([ public allDeltagareData$: Observable<DeltagareCompactData> = combineLatest([
this._limit$, this._limit$,
this._page$, this._page$,