Merge branch 'next' into develop

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

@@ -1,4 +1,5 @@
 <div class="deltagare-list">
+  <msfa-loader *ngIf="deltagareLoading" type="absolute"></msfa-loader>
   <digi-table af-variation="secondary">
     <table class="deltagare-list__table">
       <caption class="msfa__a11y-sr-only">
@@ -77,6 +78,7 @@
     *ngIf="totalPage > 1"
     class="deltagare-list__pagination"
     [afTotalPages]="totalPage"
+    [afInitActivePage]="currentPage"
     [afCurrentResultStart]="currentResultStart"
     [afCurrentResultEnd]="currentResultEnd"
     [afTotalResults]="count"

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

@@ -1,6 +1,9 @@
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .deltagare-list {
+  position: relative;
+  z-index: $msfa__z-index-default;
 
   &__table {
     font-size: var(--digi--typography--font-size--s);
@@ -16,7 +19,8 @@
     border-width: 0;
     width: 100%;
     text-align: left;
-    padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s) var(--digi--layout--gutter);
+    padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s)
+      var(--digi--layout--gutter);
     margin: 0;
     font-size: inherit;
     font-weight: inherit;
@@ -46,5 +50,4 @@
     --digi-icon--height: 1rem;
     --digi-icon--width: 1rem;
   }
-
 }

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

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
+import { IconType } from '@msfa-enums/icon-type.enum';
 import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { Sort } from '@msfa-models/sort.model';
-import { IconType } from '@msfa-enums/icon-type.enum';
-import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -17,6 +17,7 @@ import { map } from 'rxjs/operators';
 export class DeltagareListComponent {
   @Input() deltagare: DeltagareCompact[];
   @Input() paginationMeta: PaginationMeta;
+  @Input() deltagareLoading: boolean;
   @Input() sort: Sort<keyof DeltagareCompact>;
   @Output() sorted = new EventEmitter<keyof DeltagareCompact>();
   @Output() paginated = new EventEmitter<number>();

apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts

@@ -1,15 +1,16 @@
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { DeltagareListComponent } from './deltagare-list.component';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
-import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { DeltagareListHandelserDialogComponent } from './deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
+import { DeltagareListComponent } from './deltagare-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareListComponent, DeltagareListHandelserDialogComponent],
-  imports: [CommonModule, RouterModule, IconModule, DigiNgDialogModule],
+  imports: [CommonModule, RouterModule, IconModule, LoaderModule, DigiNgDialogModule],
   exports: [DeltagareListComponent],
 })
 export class DeltagareListModule {}

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

@@ -17,16 +17,15 @@
             (afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
           ></digi-form-checkbox>
         </div>
-        <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>
+        <msfa-deltagare-list
+          *ngIf="allDeltagareData.data.length; else noDeltagare"
+          [deltagare]="allDeltagareData.data"
+          [paginationMeta]="allDeltagareData.meta"
+          [deltagareLoading]="deltagareLoading$ | async"
+          [sort]="sort$ | async"
+          (sorted)="handleDeltagareSort($event)"
+          (paginated)="setNewPage($event)"
+        ></msfa-deltagare-list>
       </section>
     </ng-container>
   </digi-typography>
@@ -37,7 +36,7 @@
 </ng-template>
 
 <ng-template #noDeltagare>
-  <p>
+  <p *ngIf="(deltagareLoading$ | async) === false">
     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>