Fixed issue with pagination inside deltagare

2021-09-29 08:01:20 +02:00
parent ba4a1ce2b9
commit 393900f6c2
10 changed files with 89 additions and 68 deletions
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.html
+++ b/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"
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.scss
+++ b/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;
  }
-
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.ts
+++ b/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>();
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts
+++ b/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 {}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.html
+++ b/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>
--- a/apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts
@@ -1,3 +1,24 @@
+import { SortOrder } from '@msfa-enums/sort-order.enum';
+import { DeltagareCompact } from '@msfa-models/deltagare.model';
+import { EmployeeCompactResponse } from './employee.response.model';
+
 export interface Params {
  [param: string]: string | string[];
 }
+
+export interface PaginationParams {
+  page: number;
+  limit: number;
+  order: SortOrder;
+  search?: string;
+}
+
+export interface DeltagareParams extends PaginationParams {
+  sort: keyof DeltagareCompact;
+  onlyMyDeltagare: boolean;
+}
+
+export interface EmployeeParams extends PaginationParams {
+  sort: keyof EmployeeCompactResponse;
+  onlyEmployeesWithoutAuthorization: boolean;
+}
--- a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts
@@ -8,20 +8,19 @@ import { DisabilityResponse } from '@msfa-models/api/disability.response.model';
 import { DriversLicenseResponse } from '@msfa-models/api/drivers-license.response.model';
 import { EducationsResponse } from '@msfa-models/api/educations.response.model';
 import { HighestEducationResponse } from '@msfa-models/api/highest-education.response.model';
-import { Params } from '@msfa-models/api/params.model';
+import { DeltagareParams, Params } from '@msfa-models/api/params.model';
 import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
 import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
 import { WorkLanguagesResponse } from '@msfa-models/api/work-languages.response.model';
 import { Avrop, mapAvropResponseToAvrop } from '@msfa-models/avrop.model';
 import { ContactInformation, mapResponseToContactInformation } from '@msfa-models/contact-information.model';
-import { DeltagareCompact, DeltagareCompactData, mapResponseToDeltagareCompact } from '@msfa-models/deltagare.model';
+import { DeltagareCompactData, mapResponseToDeltagareCompact } from '@msfa-models/deltagare.model';
 import { Disability, mapResponseToDisability } from '@msfa-models/disability.model';
 import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/drivers-license.model';
 import { Education, mapResponseToEducation } from '@msfa-models/education.model';
 import { CustomError, errorToCustomError } from '@msfa-models/error/custom-error';
 import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
 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 { BehaviorSubject, Observable, of } from 'rxjs';
@@ -39,15 +38,11 @@ export class DeltagareApiService {

  constructor(private httpClient: HttpClient) {}

-  public fetchAllDeltagare$(
-    limit: number,
-    page: number,
-    sort: Sort<keyof DeltagareCompact>,
-    onlyMyDeltagare?: boolean
-  ): Observable<DeltagareCompactData> {
+  public fetchAllDeltagare$(deltagareParams: DeltagareParams): Observable<DeltagareCompactData> {
+    const { sort, order, limit, page, onlyMyDeltagare } = deltagareParams;
    const params: Params = {
-      sort: sort.key as string,
-      order: sort.order as string,
+      sort,
+      order,
      limit: limit.toString(),
      page: page.toString(),
    };
--- a/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts
@@ -10,7 +10,7 @@ import {
  EmployeeResponse,
  EmployeesDataResponse,
 } from '@msfa-models/api/employee.response.model';
-import { Params } from '@msfa-models/api/params.model';
+import { EmployeeParams, Params } from '@msfa-models/api/params.model';
 import {
  Employee,
  EmployeesData,
@@ -23,15 +23,6 @@ import { ErrorService } from '@msfa-services/error.service';
 import { BehaviorSubject, combineLatest, Observable, of, throwError } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, map, switchMap, take, tap } from 'rxjs/operators';

-interface EmployeeParams {
-  page: number;
-  limit: number;
-  sort: keyof EmployeeCompactResponse;
-  order: SortOrder;
-  search: string;
-  onlyEmployeesWithoutAuthorization: boolean;
-}
-
@Injectable({
  providedIn: 'root',
 })
@@ -167,12 +158,10 @@ export class EmployeeService extends UnsubscribeDirective {
  }

  public setSort(sort: keyof EmployeeCompactResponse): void {
-    const currentParams = this._params$.getValue();
-    const currentSort = currentParams.sort;
-    const currentOrder = currentParams.order;
-    const order = currentSort === sort && currentOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const params = this._params$.getValue();
+    const order = params.sort === sort && params.order === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;

-    this._params$.next({ ...this._params$.getValue(), sort, order });
+    this._params$.next({ ...params, sort, order });
  }

  public setPage(page: number): void {
--- a/apps/mina-sidor-fa/src/app/shared/services/deltagare.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/deltagare.service.ts
@@ -1,49 +1,51 @@
 import { Injectable } from '@angular/core';
 import { SortOrder } from '@msfa-enums/sort-order.enum';
+import { DeltagareParams } from '@msfa-models/api/params.model';
 import { DeltagareCompact, DeltagareCompactData } from '@msfa-models/deltagare.model';
 import { Sort } from '@msfa-models/sort.model';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import { DeltagareApiService } from './api/deltagare.api.service';

@Injectable({
  providedIn: 'root',
 })
 export class DeltagareService {
-  private _limit$ = new BehaviorSubject<number>(20);
-  private _page$ = new BehaviorSubject<number>(1);
-  private _sort$ = new BehaviorSubject<Sort<keyof DeltagareCompact>>({ key: 'fullName', order: SortOrder.ASC });
-  public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
-  private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
-  public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
+  private _params$ = new BehaviorSubject<DeltagareParams>({
+    page: 1,
+    limit: 20,
+    sort: 'fullName',
+    order: SortOrder.ASC,
+    onlyMyDeltagare: false,
+  });
+  public sort$: Observable<Sort<keyof DeltagareCompact>> = this._params$.pipe(
+    map(({ sort, order }) => ({ key: sort, order }))
+  );
+  public onlyMyDeltagare$: Observable<boolean> = this._params$.pipe(map(({ onlyMyDeltagare }) => onlyMyDeltagare));
  public showUnauthorizedError$: Observable<boolean> = this.deltagareApiService.showUnauthorizedError$;
  public deltagareLoading$: Observable<boolean> = this.deltagareApiService.deltagareLoading$;
-  public allDeltagareData$: Observable<DeltagareCompactData> = combineLatest([
-    this._limit$,
-    this._page$,
-    this._sort$,
-    this._onlyMyDeltagare$,
-  ]).pipe(
-    switchMap(([limit, page, sort, onlyMyDeltagare]) =>
-      this.deltagareApiService.fetchAllDeltagare$(limit, page, sort, onlyMyDeltagare)
-    )
+  public allDeltagareData$: Observable<DeltagareCompactData> = this._params$.pipe(
+    switchMap(params => this.deltagareApiService.fetchAllDeltagare$(params))
  );

  constructor(private deltagareApiService: DeltagareApiService) {}

-  public setSort(newSortKey: keyof DeltagareCompact): void {
-    const currentSort = this._sort$.getValue();
-    const order =
-      currentSort.key === newSortKey && currentSort.order === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+  public setSort(sort: keyof DeltagareCompact): void {
+    const params = this._params$.getValue();
+    const order = params.sort === sort && params.order === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;

-    this._sort$.next({ key: newSortKey, order });
+    this._params$.next({
+      ...params,
+      sort,
+      order,
+    });
  }

  public setPage(page: number): void {
-    this._page$.next(page);
+    this._params$.next({ ...this._params$.getValue(), page });
  }

  public setOnlyMyDeltagare(value: boolean): void {
-    this._onlyMyDeltagare$.next(value);
+    this._params$.next({ ...this._params$.getValue(), onlyMyDeltagare: value, page: 1 });
  }
 }
--- a/apps/mina-sidor-fa/src/assets/CHANGELOG.md
+++ b/apps/mina-sidor-fa/src/assets/CHANGELOG.md
@@ -7,6 +7,14 @@
 - **avrop:** Now showing spårnamn instead of spårkod inside avrop. [TV-691](https://jira.arbetsformedlingen.se/browse/TV-691)
 - **avrop:** Fixed error-state on handledare select. [TV-699](https://jira.arbetsformedlingen.se/browse/TV-699)
 - **avrop:** Several bugfixes related to avrop. [TV-701](https://jira.arbetsformedlingen.se/browse/TV-701)
+- **employees/deltagare:** Fixed issue with pagination inside employees and deltagare. [TV-676](https://jira.arbetsformedlingen.se/browse/TV-676)
+- **deltagare:** Now handling undefined phonenumbers. [TV-696](https://jira.arbetsformedlingen.se/browse/TV-696)
+- **avrop:** Text-changes to avrop. [TV-687](https://jira.arbetsformedlingen.se/browse/TV-687)
+
+### Features
+
+- **deltagare:** New column "Effekt" inside händelser. [TV-703](https://jira.arbetsformedlingen.se/browse/TV-703)
+- **accessibility:** Added shortcomings to the tillgänglighetsredogörelsen. [TV-698](https://jira.arbetsformedlingen.se/browse/TV-698)

 ## [2.0.0](https://bitbucket.arbetsformedlingen.se/projects/tea/repos/mina-sidor-fa-web/compare/diff?targetBranch=refs%2Ftags%2Fv1.5.0&sourceBranch=refs%2Ftags%2Fv2.0.0) (2021-09-24)