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

Pull request #293: Feature/TV-845 ui dialog

Browse Source 
Merge in TEA/mina-sidor-fa-web from feature/TV-845-ui-dialog-2 to develop

Squashed commit of the following:

commit 06ee26ccbe9d2fd5edfd12d7a292f42e3b747fb7
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Dec 16 09:45:23 2021 +0100

    refactor

commit e2295202721b58fbd37341d3e02dae5a95cbb0c5
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 14:03:37 2021 +0100

    Update ui-dialog-ref.ts

commit c9507cd4579b4e542d0116f5e96b3a911c51600d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 13:00:05 2021 +0100

    cleanup

commit 0e4ded553352414b5ca670897a51f127a5a289b1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:48:25 2021 +0100

    cleanup

commit 0a48220c8bcd5704f7436f1c0c84ca25bac4c8e8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:36:16 2021 +0100

    Dialog working

commit c4c1e9fb42d99df7ec6c058b7bea30662a03bb33
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 11:14:36 2021 +0100

    wip

commit 6668dfb154022b873b0a042087181cd0e6f8994d
Merge: 624b9439 9d96f0d9
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:27 2021 +0100

    Merge branch 'develop' into feature/TV-845-ui-dialog-2

commit 624b94399689bef07178f89c015745c90af1b288
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:19 2021 +0100

    wip

commit 0478638ab0d0f8f62ce8d10489f20e4930099936
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:58:49 2021 +0100

    wip

commit 12234c22062124165c2da10ff75cc887997172a8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:21:09 2021 +0100

    wip
This commit is contained in:
Daniel Appelgren
2021-12-16 10:49:39 +01:00
parent 92cf04e802
commit 975b9e84f7
16 changed files with 391 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
View File

@@ -1,87 +1,77 @@
<digi-ng-dialog
*ngIf="deltagare"
[afActive]="deltagare"
(afOnPrimaryClick)="emitCloseDialog()"
(afOnSecondaryClick)="closeMotivation()"
(afOnInactive)="emitCloseDialog()"
[afHeading]="heading"
afHeadingLevel="h2"
afPrimaryButtonText="Stäng"
[afSecondaryButtonText]="activeHandelseMotivation ? 'Tillbaka till alla händelser' : null"
>
<div class="deltagare-list-handelser">
<h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
<p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
<ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
<ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
<p>{{activeHandelseMotivation.motivation}}</p>
</ng-container>
<h2>Händelser för {{deltagare.fullName}}</h2>
<ng-template #handelseTableRef>
<digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
<table>
<caption class="msfa__a11y-sr-only">
Lista med alla händelser för {{deltagare.fullName}}
</caption>
<thead>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Motivering</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let handelse of deltagareHandelserData.data;">
<td class="deltagare-list-handelser__table-cell">
<digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
</td>
<td
class="deltagare-list-handelser__table-cell"
[ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
>
<ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
{{handelse.description}}
</td>
<td class="deltagare-list-handelser__table-cell">
<ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
{{handelse.effectDescription}}:
<digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
</ng-container>
</td>
<td class="deltagare-list-handelser__table-cell">
<digi-button
*ngIf="handelse.motivation"
af-variation="tertiary"
af-size="s"
(click)="openMotivation(handelse)"
>
<ui-icon slot="icon" uiType="info"></ui-icon>
Motivering till beslut
</digi-button>
</td>
</tr>
</tbody>
</table>
</digi-table>
<ng-container *ngIf="deltagareHandelserData.meta as paginationMeta">
<digi-navigation-pagination
*ngIf="paginationMeta?.totalPage > 1"
class="deltagare-list-handelser__pagination"
[afTotalPages]="paginationMeta?.totalPage"
[afInitActivePage]="paginationMeta?.page"
[afCurrentResultStart]="currentResultStart(paginationMeta)"
[afCurrentResultEnd]="currentResultEnd(paginationMeta)"
[afTotalResults]="paginationMeta?.count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="händelser"
>
</digi-navigation-pagination>
</ng-container>
</ng-template>
<div class="deltagare-list-handelser" *ngIf="deltagare">
<h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
<p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
<ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
<ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
<p>{{activeHandelseMotivation.motivation}}</p>
</ng-container>
</div>
</digi-ng-dialog>
<ng-template #handelseTableRef>
<digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
<table>
<caption class="msfa__a11y-sr-only">
Lista med alla händelser för {{deltagare.fullName}}
</caption>
<thead>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Motivering</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let handelse of deltagareHandelserData.data;">
<td class="deltagare-list-handelser__table-cell">
<digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
</td>
<td
class="deltagare-list-handelser__table-cell"
[ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
>
<ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
{{handelse.description}}
</td>
<td class="deltagare-list-handelser__table-cell">
<ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
{{handelse.effectDescription}}:
<digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
</ng-container>
</td>
<td class="deltagare-list-handelser__table-cell">
<digi-button
*ngIf="handelse.motivation"
af-variation="tertiary"
af-size="s"
(click)="openMotivation(handelse)"
>
<ui-icon slot="icon" uiType="info"></ui-icon>
Motivering till beslut
</digi-button>
</td>
</tr>
</tbody>
</table>
</digi-table>
<ng-container *ngIf="deltagareHandelserData.meta as paginationMeta">
<digi-navigation-pagination
*ngIf="paginationMeta?.totalPage > 1"
class="deltagare-list-handelser__pagination"
[afTotalPages]="paginationMeta?.totalPage"
[afInitActivePage]="paginationMeta?.page"
[afCurrentResultStart]="currentResultStart(paginationMeta)"
[afCurrentResultEnd]="currentResultEnd(paginationMeta)"
[afTotalResults]="paginationMeta?.count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="händelser"
>
</digi-navigation-pagination>
</ng-container>
</ng-template>
</ng-container>
</div>
<ng-template #noEventsRef>
<p>Inga händelser har inkommit.</p>

35
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
View File

@@ -1,13 +1,4 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
SimpleChanges,
} from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, OnDestroy } from '@angular/core';
import {
DeltagareHandelse,
DeltagareHandelseData,
@@ -19,6 +10,8 @@ import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.se
import { UiIconSize } from '@ui/icon/icon-size.enum';
import { UiIconType } from '@ui/icon/icon-type.enum';
import { BehaviorSubject, Observable } from 'rxjs';
import { UI_DIALOG_DATA } from '@ui/dialog/ui-dialog.model';
import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
@Component({
selector: 'msfa-deltagare-list-handelser-dialog',
@@ -26,27 +19,25 @@ import { BehaviorSubject, Observable } from 'rxjs';
styleUrls: ['./deltagare-list-handelser-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareListHandelserDialogComponent implements OnChanges, OnDestroy {
@Input() deltagare: DeltagareCompact;
@Output() closeDialog = new EventEmitter<void>();
export class DeltagareListHandelserDialogComponent implements OnDestroy {
IconType = UiIconType;
IconSize = UiIconSize;
deltagareHandelserData$: Observable<DeltagareHandelseData>;
private _activeHandelseMotivation$ = new BehaviorSubject<DeltagareHandelseMotivation>(null);
constructor(private deltagareHandelserService: DeltagareHandelserService) {}
constructor(
private deltagareHandelserService: DeltagareHandelserService,
@Inject(UI_DIALOG_DATA) public deltagare: DeltagareCompact,
private uiDialogRef: UiDialogRef
) {
this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
this.deltagareHandelserData$ = this.deltagareHandelserService.deltagareHandelserData$;
}
ngOnDestroy(): void {
this.deltagareHandelserService.resetParams();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.deltagare && changes.deltagare.currentValue) {
this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
this.deltagareHandelserData$ = this.deltagareHandelserService.deltagareHandelserData$;
}
}
get activeHandelseMotivation(): DeltagareHandelseMotivation {
return this._activeHandelseMotivation$.getValue();
}
@@ -89,6 +80,6 @@ export class DeltagareListHandelserDialogComponent implements OnChanges, OnDestr
emitCloseDialog(): void {
this._activeHandelseMotivation$.next(null);
this.closeDialog.emit();
this.uiDialogRef.close();
}
}

18
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
View File

@@ -84,21 +84,3 @@
>
</digi-navigation-pagination>
</div>
<msfa-deltagare-list-handelser-dialog
id="deltagare-handelser"
[deltagare]="handelserDialogDeltagare$ | async"
(closeDialog)="closeHandelser()"
></msfa-deltagare-list-handelser-dialog>
<!-- <digi-ng-dialog
*ngIf="handelserDialogDeltagare$ | async as deltagare"
[afActive]="handelserDialogIsOpen$ | async"
(afOnPrimaryClick)="closeHandelser()"
(afOnInactive)="closeHandelser()"
[afHeading]="'Händelser för ' + deltagare.fullName"
afHeadingLevel="h2"
[afPrimaryButtonText]="'Stäng'"
id="deltagareHandelser"
>
<msfa-deltagare-list-handelser-dialog [deltagare]="deltagare"></msfa-deltagare-list-handelser-dialog>
</digi-ng-dialog> -->

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

@@ -6,8 +6,8 @@ import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Sort } from '@msfa-models/sort.model';
import { UiIconSize } from '@ui/icon/icon-size.enum';
import { UiIconType } from '@ui/icon/icon-type.enum';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
import { UiDialog } from '@ui/dialog/ui-dialog.service';
@Component({
selector: 'msfa-deltagare-list-table',
@@ -22,9 +22,10 @@ export class DeltagareListTableComponent {
@Input() sort: Sort<keyof DeltagareCompact>;
@Output() sorted = new EventEmitter<keyof DeltagareCompact>();
@Output() paginated = new EventEmitter<number>();
handelserDialogDeltagare$ = new BehaviorSubject<DeltagareCompact | null>(null);
handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(deltagare => !!deltagare));
constructor(public uiDialog: UiDialog) {}
handelserDialogComponent = DeltagareListHandelserDialogComponent;
IconType = UiIconType;
IconSize = UiIconSize;
@@ -81,6 +82,13 @@ export class DeltagareListTableComponent {
return end < this.count ? end : this.count;
}
openHandelser(singleDeltagare: DeltagareCompact): void {
this.uiDialog.open(this.handelserDialogComponent, {
data: singleDeltagare,
primaryButtonText: 'Stäng',
});
}
getAvropDate(deltagare: DeltagareCompact, avropDate?: string): Date {
return avropDate === 'startdatumAvrop' ? new Date(deltagare.startdatumAvrop) : new Date(deltagare.slutdatumAvrop);
}
@@ -92,12 +100,4 @@ export class DeltagareListTableComponent {
setNewPage(page: number): void {
this.paginated.emit(page);
}
openHandelser(deltagareCompact: DeltagareCompact): void {
this.handelserDialogDeltagare$.next(deltagareCompact);
}
closeHandelser(): void {
this.handelserDialogDeltagare$.next(null);
}
}

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
View File

@@ -1,4 +1,3 @@
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';
@@ -6,11 +5,12 @@ import { UiIconModule } from '@ui/icon/icon.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
import { DeltagareListTableComponent } from './deltagare-list-table.component';
import { UiDialogModule } from '@ui/dialog/ui-dialog.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [DeltagareListTableComponent, DeltagareListHandelserDialogComponent],
imports: [CommonModule, RouterModule, UiIconModule, UiLoaderModule, DigiNgDialogModule],
imports: [CommonModule, RouterModule, UiIconModule, UiDialogModule, UiLoaderModule],
exports: [DeltagareListTableComponent],
})
export class DeltagareListTableModule {}

8
apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts
View File

@@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
import { PaginationParams } from '@msfa-models/api/params.model';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DeltagareHandelserApiService } from './api/deltagare-handelser.api.service';
import { DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
const DEFAULT_PARAMS: PaginationParams = {
page: 1,
@@ -16,7 +17,10 @@ export class DeltagareHandelserService {
private _params$ = new BehaviorSubject<PaginationParams>(DEFAULT_PARAMS);
private _genomforandeReferens$ = new BehaviorSubject<number>(null);
deltagareHandelserData$ = combineLatest([this._genomforandeReferens$, this._params$]).pipe(
deltagareHandelserData$: Observable<DeltagareHandelseData> = combineLatest([
this._genomforandeReferens$,
this._params$,
]).pipe(
switchMap(([genomforandeReferens, params]) => {
return this.deltagareHandelserApiService.fetchDeltagareHandelser$(genomforandeReferens, params);
})