Added text if no deltagare could be found

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

@@ -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

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

@@ -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>

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$,