feat(employees): Implemented loader inside employees-list when pagination/filtering. (TV-597)

Squashed commit of the following:

commit 9e41609f515909fac8618f8cae9ce29409e62748
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 07:36:21 2021 +0200

    Removed old classes

commit 7be9f46dcd08be3cdec5e92bb237ad8fa6d1c373
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 15 14:23:53 2021 +0200

    Added new loader component and implmented loader inside employees-list

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

@@ -1,4 +1,5 @@
 <div class="employees-list">
+  <msfa-loader *ngIf="employeesLoading" [fullScreen]="true"></msfa-loader>
   <digi-table af-variation="secondary">
     <table>
       <thead>

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

@@ -1,6 +1,7 @@
 @import 'variables/gutters';
 
 .employees-list {
+  position: relative;
   // &__column-head {
   //   // padding: 0;
   // }

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

@@ -14,6 +14,7 @@ import { Sort } from '@msfa-models/sort.model';
 export class EmployeesListComponent {
   @Input() employees: EmployeeCompact[];
   @Input() paginationMeta: PaginationMeta;
+  @Input() employeesLoading: boolean;
   @Input() sort: Sort<keyof EmployeeCompactResponse>;
   @Output() sorted = new EventEmitter<keyof EmployeeCompactResponse>();
   @Output() paginated = new EventEmitter<number>();

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

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { EmployeesListComponent } from './employees-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [EmployeesListComponent],
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, LoaderModule],
   exports: [EmployeesListComponent],
 })
 export class EmployeesListModule {}

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

@@ -39,6 +39,7 @@
         *ngIf="employeesData$ | async as employeesData; else loadingRef"
         [employees]="employeesData.data"
         [paginationMeta]="employeesData.meta"
+        [employeesLoading]="employeesLoading$ | async"
         [sort]="sort$ | async"
         (sorted)="handleEmployeesSort($event)"
         (paginated)="setNewPage($event)"

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

@@ -16,6 +16,7 @@ export class EmployeesComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
   onlyEmployeesWithoutAuthorization$: Observable<boolean> = this.employeeService.onlyEmployeesWithoutAuthorization$;
   employeesData$: Observable<EmployeesData> = this.employeeService.employeesData$;
+  employeesLoading$: Observable<boolean> = this.employeeService.employeesLoading$;
   sort$: Observable<Sort<keyof EmployeeCompactResponse>> = this.employeeService.sort$;
   iconType = IconType;