Added text if no deltagare could be found

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

@@ -1,7 +1,9 @@
 <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">
@@ -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

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

@@ -17,14 +17,18 @@
         ></digi-form-checkbox>
       </div>
 
+      <ng-container *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
+        <ng-container *ngIf="(deltagareLoading$ | async) === false; else loadingRef">
           <msfa-deltagare-list
-        *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"
+            *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>

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

@@ -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) {}
 

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

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

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

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