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

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

@@ -17,14 +17,18 @@
></digi-form-checkbox>
</div>
<msfa-deltagare-list
*ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"
[deltagare]="allDeltagareData.data"
[paginationMeta]="allDeltagareData.meta"
[sort]="sort$ | async"
(sorted)="handleDeltagareSort($event)"
(paginated)="setNewPage($event)"
></msfa-deltagare-list>
<ng-container *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
<ng-container *ngIf="(deltagareLoading$ | async) === false; else loadingRef">
<msfa-deltagare-list
*ngIf="allDeltagareData.data.length; else noDeltagare"
[deltagare]="allDeltagareData.data"
[paginationMeta]="allDeltagareData.meta"
[sort]="sort$ | async"
(sorted)="handleDeltagareSort($event)"
(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>
@@ -32,3 +36,10 @@
</section>
</digi-typography>
</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$;
sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$;
deltagareLoading$: Observable<boolean> = this.deltagareService.deltagareLoading$;
constructor(private deltagareService: DeltagareService) {}