arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some functionality and some new data to mock-api

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-29 10:17:00 +02:00
committed by Erik Tiekstra
parent cfe1907842
commit c03b66c6bc
11 changed files with 490 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
+55 -5
View File
@@ -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>
apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
+30
View File
@@ -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;
}
}
apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
+9
View File
@@ -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);
}
}
apps/dafa-web/src/app/pages/participants/participants.component.html
+1
View File
@@ -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>
apps/dafa-web/src/app/pages/participants/participants.component.ts
+3 -1
View File
@@ -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 {