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

feat(deltagare): Added deltagare list with data from api. Also adjusted mock-api to match the api. (TV-309)

Browse Source 
Squashed commit of the following:

commit 41560491305b61ba322fa653788411de6112cc7e
Merge: a157e69 03a2c7a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Aug 18 07:23:35 2021 +0200

    Merged develop and fixed conflicts

commit a157e69d6b4b18c9b8a806c4bbbc264b8b311b67
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Aug 17 13:54:29 2021 +0200

    Removed console.log

commit 87a532eb63b9c68109a4f847cc9530a47a56b648
Merge: db2ff17 6d29baa
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Aug 17 13:52:54 2021 +0200

    Merged develop and fixed conflicts

commit db2ff1758218c651cadf93de8ce0c5034d6994d3
Merge: 588adee 01dc4b3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 13:09:33 2021 +0200

    Merged develop and fixed conflicts

commit 588adee5b17aeefcaf526aabdde02ca975c9c031
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 11:11:57 2021 +0200

    Added deltagarlist

commit a0c378a8221a5d363f56ee644b9728d873ae1ff1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 07:19:49 2021 +0200

    Updates after PR

commit 479df238c712e2e14829d33b468ece91332f81c8
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:18:23 2021 +0200

    Updated tolkbehov inside deltagare-card

commit df95ae2a8afbcc78ba546472ae9c1db141d1e642
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:14:27 2021 +0200

    Updated deltagare-kort after discussion with UX
This commit is contained in:
Erik Tiekstra
2021-08-18 07:24:53 +02:00
parent 03a2c7a42f
commit 9f86fb405b
14 changed files with 32838 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="deltagare-list">
<digi-table af-variation="secondary">
<table>
<thead>
<tr>
<th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
<button
class="deltagare-list__sort-button"
[attr.id]="'sort-button-' + column.key"
(click)="handleSort(column.key)"
>
{{column.label}}
<ng-container *ngIf="sort.key === column.key">
<digi-icon-caret-up
class="deltagare-list__sort-icon"
*ngIf="sort.order === orderType.ASC"
></digi-icon-caret-up>
<digi-icon-caret-down
class="deltagare-list__sort-icon"
*ngIf="sort.order === orderType.DESC"
></digi-icon-caret-down>
</ng-container>
</button>
</th>
</tr>
</thead>
<tbody>
<tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
<th scope="row">
<a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
</th>
<td>{{ singleDeltagare.tjanst }}</td>
<td>{{ singleDeltagare.utforandeVerksamhet }}</td>
</tr>
</tbody>
</table>
</digi-table>
<digi-navigation-pagination
*ngIf="totalPages > 1"
class="deltagare-list__pagination"
[afTotalPages]="totalPages"
[afCurrentResultStart]="currentResultStart"
[afCurrentResultEnd]="currentResultEnd"
[afTotalResults]="count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="deltagare"
>
</digi-navigation-pagination>
</div>

35
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.scss Normal file
View File

@@ -0,0 +1,35 @@
@import 'variables/gutters';
.deltagare-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;
}
&__pagination {
display: block;
margin-top: var(--digi--layout--gutter);
}
}

24
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.spec.ts Normal file
View File

@@ -0,0 +1,24 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { DeltagareListComponent } from './deltagare-list.component';
describe('DeltagareListComponent', () => {
let component: DeltagareListComponent;
let fixture: ComponentFixture<DeltagareListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [DeltagareListComponent],
imports: [RouterTestingModule],
}).compileComponents();
fixture = TestBed.createComponent(DeltagareListComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

62
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.ts Normal file
View File

@@ -0,0 +1,62 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
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';
@Component({
selector: 'msfa-deltagare-list',
templateUrl: './deltagare-list.component.html',
styleUrls: ['./deltagare-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareListComponent {
@Input() deltagare: DeltagareCompact[];
@Input() paginationMeta: PaginationMeta;
@Input() sort: Sort<keyof DeltagareCompact>;
@Output() sorted = new EventEmitter<keyof DeltagareCompact>();
@Output() paginated = new EventEmitter<number>();
columnHeaders: { label: string; key: keyof DeltagareCompact }[] = [
{ label: 'Namn', key: 'fullName' },
{
label: 'Tjänst',
key: 'tjanst',
},
{
label: 'Utförandeverksamhet',
key: 'utforandeVerksamhet',
},
];
orderType = SortOrder;
get currentPage(): number {
return this.paginationMeta.page;
}
get totalPages(): number {
return this.paginationMeta?.totalPages;
}
get count(): number {
return this.paginationMeta.count;
}
get currentResultStart(): number {
return (this.currentPage - 1) * this.paginationMeta.limit + 1;
}
get currentResultEnd(): number {
const end = this.currentResultStart + this.paginationMeta.limit - 1;
return end < this.count ? end : this.count;
}
handleSort(key: keyof DeltagareCompact): void {
this.sorted.emit(key);
}
setNewPage(page: number): void {
this.paginated.emit(page);
}
}

12
apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts Normal file
View File

@@ -0,0 +1,12 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DeltagareListComponent } from './deltagare-list.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [DeltagareListComponent],
imports: [CommonModule, RouterModule],
exports: [DeltagareListComponent],
})
export class DeltagareListModule {}

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

@@ -6,17 +6,26 @@
Här ser du en lista på de deltagare du är tilldelad. Klicka på deltagarens namn för att öppna och se mer
information om deltagarna.
</p>
<!--
<ul>
<li><a routerLink="1">Klicka för att gå till sokandeId 1</a></li>
<li><a routerLink="2">Klicka för att gå till sokandeId 2</a></li>
<li><a routerLink="3">Klicka för att gå till sokandeId 3</a></li>
<li><a routerLink="1000">Klicka för att gå till sokandeId 1000</a></li>
</ul>
</ul> -->
<ul *ngIf="allDeltagare$ | async as allDeltagare">
<li *ngFor="let deltagare of allDeltagare"><a [routerLink]="deltagare.id">{{deltagare.fullName}}</a></li>
</ul>
<msfa-deltagare-list
*ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"
[deltagare]="allDeltagareData.data"
[paginationMeta]="allDeltagareData.meta"
[sort]="sort$ | async"
(sorted)="handleDeltagareSort($event)"
(paginated)="setNewPage($event)"
></msfa-deltagare-list>
<ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
</ng-template>
</section>
</digi-typography>
</msfa-layout>

14
apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.ts
View File

@@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DeltagareCompact } from '@msfa-models/deltagare.model';
import { DeltagareCompact, DeltagareCompactData } from '@msfa-models/deltagare.model';
import { Sort } from '@msfa-models/sort.model';
import { DeltagareService } from '@msfa-services/api/deltagare.service';
import { Observable } from 'rxjs';
@@ -10,7 +11,16 @@ import { Observable } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareComponent {
allDeltagare$: Observable<DeltagareCompact[]> = this.deltagareService.allDeltagare$;
allDeltagareData$: Observable<DeltagareCompactData> = this.deltagareService.allDeltagareData$;
sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
constructor(private deltagareService: DeltagareService) {}
handleDeltagareSort(key: keyof DeltagareCompact): void {
this.deltagareService.setSort(key);
}
setNewPage(page: number): void {
this.deltagareService.setPage(page);
}
}

3
apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.module.ts
View File

@@ -1,12 +1,13 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { DeltagareListModule } from './components/deltagare-list/deltagare-list.module';
import { DeltagareRoutingModule } from './deltagare-routing.module';
import { DeltagareComponent } from './deltagare.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [DeltagareComponent],
imports: [CommonModule, DeltagareRoutingModule, LayoutModule],
imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule],
})
export class DeltagareModule {}