Added some functionality and some new data to mock-api

2021-03-29 10:17:00 +02:00
parent cfe1907842
commit c03b66c6bc
11 changed files with 490 additions and 308 deletions
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.html
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html
@@ -5,7 +5,7 @@
    </a>
  </div>
  <ul class="navigation__list dafa__hide-on-print">
-    <li class="navigation__item">
+    <!-- <li class="navigation__item">
      <a
        class="navigation__link"
        [routerLink]="['/']"
@@ -15,7 +15,7 @@
        <dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
        <span class="navigation__text">Startsida</span>
      </a>
-    </li>
+    </li> -->
    <li class="navigation__item" *ngIf="user">
      <div class="navigation__no-link">
        <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
--- a/apps/dafa-web/src/app/data/models/participant.model.ts
+++ b/apps/dafa-web/src/app/data/models/participant.model.ts
@@ -6,4 +6,8 @@ export interface Participant {
  lastName: string;
  service: Service;
  errandNumber: number;
+  startDate: Date;
+  endDate: Date;
+  handleBefore: Date;
+  fullName?: string;
 }
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
@@ -2,11 +2,60 @@
  <table>
    <thead>
      <tr>
-        <th scope="col">Namn</th>
-        <th scope="col">Ärendenummer</th>
-        <th scope="col">Tjänst</th>
-        <th scope="col">Startdatum</th>
-        <th scope="col">Slutdatum</th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('fullName')">
+            Namn
+            <ng-container *ngIf="sortBy?.key === 'fullName'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('errandNumber')">
+            Ärendenummer
+            <ng-container *ngIf="sortBy?.key === 'errandNumber'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('service')">
+            Tjänst
+            <ng-container *ngIf="sortBy?.key === 'service'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('startDate')">
+            Startdatum
+            <ng-container *ngIf="sortBy?.key === 'startDate'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('endDate')">
+            Slutdatum
+            <ng-container *ngIf="sortBy?.key === 'endDate'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <button class="participants-list__sort-button" (click)="handleSort('handleBefore')">
+            Hantera innan
+            <ng-container *ngIf="sortBy?.key === 'handleBefore'">
+              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
      </tr>
    </thead>
    <tbody>
@@ -16,6 +65,7 @@
        <td>{{ participant.service }}</td>
        <td>{{ participant.startDate | date: 'yyyy-MM-dd' }}</td>
        <td>{{ participant.endDate | date: 'yyyy-MM-dd' }}</td>
+        <td>{{ participant.handleBefore | date: 'yyyy-MM-dd' }}</td>
      </tr>
    </tbody>
  </table>
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
@@ -0,0 +1,30 @@
+@import 'variables/gutters';
+
+.participants-list {
+  &__column-head {
+    padding: 0;
+  }
+
+  &__sort-button {
+    position: relative;
+    background-color: transparent;
+    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);
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    display: flex;
+    align-items: center;
+    gap: var(--digi--layout--gutter);
+    cursor: pointer;
+  }
+
+  &__sort-icon {
+    position: absolute;
+    display: inline-flex;
+    right: 0.5rem;
+  }
+}
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Participant } from '@dafa-models/participant.model';
+import { SortBy } from '@dafa-models/sort-by.model';
+import { ParticipantsService } from '@dafa-services/api/participants.service';

@Component({
  selector: 'dafa-participants-list',
@@ -9,4 +11,11 @@ import { Participant } from '@dafa-models/participant.model';
 })
 export class ParticipantsListComponent {
  @Input() participants: Participant[];
+  @Input() sortBy: SortBy | null;
+
+  constructor(private participantsService: ParticipantsService) {}
+
+  handleSort(key: keyof Participant): void {
+    this.participantsService.setSortKey(key);
+  }
 }
--- a/apps/dafa-web/src/app/pages/participants/participants.component.html
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.html
@@ -19,6 +19,7 @@
  <dafa-participants-list
    *ngIf="participants$ | async as participants; else loadingRef"
    [participants]="participants"
+    [sortBy]="sortBy$ | async"
  ></dafa-participants-list>

  <ng-template #loadingRef>
--- a/apps/dafa-web/src/app/pages/participants/participants.component.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Participant } from '@dafa-models/participant.model';
+import { SortBy } from '@dafa-models/sort-by.model';
 import { ParticipantsService } from '@dafa-services/api/participants.service';
 import { BehaviorSubject, Observable } from 'rxjs';

@@ -12,6 +13,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 export class ParticipantsComponent {
  private _searchValue$ = new BehaviorSubject<string>('');
  participants$: Observable<Participant[]> = this.participantsService.participants$;
+  sortBy$: Observable<SortBy | null> = this.participantsService.sortBy$;

  constructor(private participantsService: ParticipantsService) {}

@@ -20,7 +22,7 @@ export class ParticipantsComponent {
  }

  handleSearchSubmit(): void {
-    console.log(this.searchValue);
+    this.participantsService.setSearchFilter(this.searchValue);
  }

  handleSearchInput($event: CustomEvent): void {
--- a/apps/dafa-web/src/app/services/api/participants.service.ts
+++ b/apps/dafa-web/src/app/services/api/participants.service.ts
@@ -10,26 +10,51 @@ import { map } from 'rxjs/operators';
  providedIn: 'root',
 })
 export class ParticipantsService {
-  private _participants$: Observable<Participant[]> = this.httpClient.get<Participant[]>(
-    `${environment.apiBase}/participants`
-  );
-  private _sortBy$ = new BehaviorSubject<SortBy | null>({ key: 'service', reverse: false });
+  private _participants$: Observable<Participant[]> = this.httpClient
+    .get<Participant[]>(`${environment.apiBase}/participants`)
+    .pipe(
+      map(participants =>
+        participants.map(participant => ({
+          ...participant,
+          fullName: `${participant.firstName} ${participant.lastName}`,
+        }))
+      )
+    );
+  private _sortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
  public sortBy$: Observable<SortBy> = this._sortBy$.asObservable();
+  private _searchFilter$ = new BehaviorSubject<string>('');
+  public searchFilter$: Observable<string> = this._searchFilter$.asObservable();
+
+  public participants$: Observable<Participant[]> = combineLatest([
+    this._sortBy$,
+    this._participants$,
+    this._searchFilter$,
+  ]).pipe(
+    map(([sortBy, participants, searchFilter]) => {
+      const filteredParticipants = participants.filter(participant => {
+        const searchValueExistsInName = participant.fullName.toLowerCase().includes(searchFilter.toLowerCase());
+        const searchValueExistsInErrandNumber = participant.errandNumber.toString().includes(searchFilter);
+
+        return searchValueExistsInName || searchValueExistsInErrandNumber;
+      });

-  public participants$: Observable<Participant[]> = combineLatest([this._sortBy$, this._participants$]).pipe(
-    map(([sortBy, participants]) => {
      if (sortBy) {
        const reverse = sortBy.reverse ? -1 : 1;
-        return [...participants].sort((a, b) => {
+        return [...filteredParticipants].sort((a, b) => {
          const first = a[sortBy.key];
          const second = b[sortBy.key];
-          return reverse * +(first > second) - +(second > first);
+
+          return reverse * (+(first > second) - +(second > first));
        });
      }
      return participants;
    })
  );

+  public setSearchFilter(value: string) {
+    this._searchFilter$.next(value);
+  }
+
  public setSortKey(key: keyof Participant) {
    const currentSortBy = this._sortBy$.getValue();
    let reverse = false;
--- a/apps/dafa-web/src/styles/styles.scss
+++ b/apps/dafa-web/src/styles/styles.scss
@@ -17,10 +17,19 @@ body {
  font-weight: var(--digi--typography--font-weight);
 }

+button {
+  font-family: var(--digi--typography--font-family);
+}
+
 strong {
  font-weight: var(--digi--typography--font-weight--semibold);
 }

+// Make all digi icons display inline-flex to make them get the correct height.
+[class^='sc-digi-icon'] {
+  display: inline-flex;
+}
+
 .dafa {
  &__a11y-sr-only {
    @include dafa__a11y-sr-only;