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

16
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,15 +1,6 @@
<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">
<h2>Händelser för {{deltagare.fullName}}</h2>
<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">
@@ -81,7 +72,6 @@
</ng-template>
</ng-container>
</div>
</digi-ng-dialog>
<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,25 +19,23 @@ 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) {}
ngOnDestroy(): void {
this.deltagareHandelserService.resetParams();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.deltagare && changes.deltagare.currentValue) {
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();
}
get activeHandelseMotivation(): DeltagareHandelseMotivation {
@@ -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);
})

2
libs/ui/.eslintrc.json
View File

@@ -12,7 +12,7 @@
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@angular-eslint/template/process-inline-templates"
],
"parserOptions": { "project": ["apps/mina-sidor-fa/tsconfig.*?.json"] },
"parserOptions": { "project": ["libs/ui/tsconfig.*?.json"] },
"rules": {
"max-len": [
1,

16
libs/ui/src/dialog/dialog.service.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { UiDialog } from './ui-dialog.service';
describe('DialogService', () => {
let service: UiDialog;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(UiDialog);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

51
libs/ui/src/dialog/ui-dialog-ref.ts Normal file
View File

@@ -0,0 +1,51 @@
import { Subject } from 'rxjs';
import { OverlayRef } from '@angular/cdk/overlay';
import { TemplateRef, Type } from '@angular/core';
import { UiDialogConfig } from '@ui/dialog/ui-dialog.model';
export interface OverlayCloseEvent<R> {
type: 'backdropClick' | 'close';
data: R;
}
export class UiDialogRef<CloseResponseData = unknown, InputDataType = unknown> {
afterClosed$ = new Subject<OverlayCloseEvent<CloseResponseData>>();
constructor(
public overlay: OverlayRef,
public content: string | TemplateRef<unknown> | Type<unknown>,
public config: UiDialogConfig<InputDataType>
) {
overlay.backdropClick().subscribe(() => this._close('backdropClick', null));
}
get primaryButtonText(): string {
return this.config.primaryButtonText;
}
get secondaryButtonText(): string {
return this.config.secondaryButtonText;
}
close(data?: CloseResponseData): void {
this._close('close', data);
}
private _close(type: 'backdropClick' | 'close', data: CloseResponseData) {
this.overlay.dispose();
this.afterClosed$.next({
type,
data,
});
this.afterClosed$.complete();
}
primaryAction(): void {
this.config.primaryAction ? this.config.primaryAction(this) : this.close();
}
secondaryAction(): void {
this.config.secondaryAction ? this.config.secondaryAction(this) : this.close();
}
}

29
libs/ui/src/dialog/ui-dialog.component.html Normal file
View File

@@ -0,0 +1,29 @@
<div class="ui-dialog">
<ng-container [ngSwitch]="contentType">
<ng-container *ngSwitchCase="'string'">
<div class="box">
<div [innerHTML]="content"></div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'template'">
<ng-container *ngTemplateOutlet="content; context: context"></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'component'">
<ng-container *ngComponentOutlet="content"></ng-container>
</ng-container>
</ng-container>
<footer class="ui-dialog__footer">
<digi-button af-type="button" (click)="primaryAction()">{{primaryButtonText}}</digi-button>
<digi-button af-type="button" af-variation="secondary" *ngIf="secondaryButtonText" (click)="secondaryAction()">
{{secondaryButtonText}}
</digi-button>
</footer>
<button (click)="close()" class="ui-dialog__close-button" type="button">
<span class="ui-dialog__close-button-text">Stäng&nbsp;</span>
<ui-icon [uiType]="UiIconType.X" [uiSize]="UiIconSize.L"></ui-icon>
</button>
</div>

32
libs/ui/src/dialog/ui-dialog.component.scss Normal file
View File

@@ -0,0 +1,32 @@
@import 'libs/styles/src/variables/shadows';
@import 'libs/styles/src/variables/gutters';
.ui-dialog {
background: white;
border-radius: var(--digi--ui--border--radius);
box-shadow: $msfa__shadow;
padding: $digi--layout--gutter--s $digi--layout--gutter--xl $digi--layout--gutter--l;
position: relative;
&__close-button {
position: absolute;
top: var(--digi--layout--gutter);
right: var(--digi--layout--gutter--s);
background: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
&__close-button-text {
font-size: var(--digi--typography--font-size--s);
}
&__footer {
min-height: var(--digi--layout--gutter);
display: flex;
margin-top: $digi--layout--gutter--l;
gap: var(--digi--layout--gutter);
}
}

24
libs/ui/src/dialog/ui-dialog.component.spec.ts Normal file
View File

@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UiDialogComponent } from './ui-dialog.component';
describe('DialogComponent', () => {
let component: UiDialogComponent;
let fixture: ComponentFixture<UiDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UiDialogComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UiDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

53
libs/ui/src/dialog/ui-dialog.component.ts Normal file
View File

@@ -0,0 +1,53 @@
import { Component, OnInit, TemplateRef, Type } from '@angular/core';
import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
import { UiIconSize } from '@ui/icon/icon-size.enum';
import { UiIconType } from '@ui/icon/icon-type.enum';
@Component({
selector: 'ui-dialog',
templateUrl: './ui-dialog.component.html',
styleUrls: ['./ui-dialog.component.scss'],
})
export class UiDialogComponent implements OnInit {
UiIconType = UiIconType;
UiIconSize = UiIconSize;
contentType: 'template' | 'string' | 'component';
content: string | TemplateRef<unknown> | Type<unknown>;
context;
constructor(private uiDialogRef: UiDialogRef) {}
close(): void {
this.uiDialogRef.close(null);
}
get primaryButtonText(): string {
return this.uiDialogRef.primaryButtonText ?? 'Stäng';
}
get secondaryButtonText(): string {
return this.uiDialogRef.secondaryButtonText;
}
primaryAction(): void {
this.uiDialogRef.primaryAction();
}
secondaryAction(): void {
this.uiDialogRef.secondaryAction();
}
ngOnInit(): void {
this.content = this.uiDialogRef.content;
if (typeof this.content === 'string') {
this.contentType = 'string';
} else if (this.content instanceof TemplateRef) {
this.contentType = 'template';
this.context = {
close: this.uiDialogRef.close.bind(this.uiDialogRef) as unknown,
};
} else {
this.contentType = 'component';
}
}
}

23
libs/ui/src/dialog/ui-dialog.model.ts Normal file
View File

@@ -0,0 +1,23 @@
import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
export const UI_DIALOG_DATA = 'UI_DIALOG_DATA';
export interface UiDialogConfig<DialogInputData = unknown> {
data: DialogInputData;
/**
* primaryButtonText defaults to 'Stäng'
*/
primaryButtonText?: string;
/**
* primaryAction defaults to closing the dialog
*/
primaryAction?: (uiDialogRef?: UiDialogRef) => unknown;
secondaryButtonText?: string;
/**
* secondaryAction defaults to closing the dialog
*/
secondaryAction?: (uiDialogRef?: UiDialogRef) => unknown;
}

13
libs/ui/src/dialog/ui-dialog.module.ts Normal file
View File

@@ -0,0 +1,13 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UiDialogComponent } from './ui-dialog.component';
import { UiIconModule } from '@ui/icon/icon.module';
import { UiDialog } from '@ui/dialog/ui-dialog.service';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [UiDialogComponent],
imports: [CommonModule, UiIconModule],
providers: [UiDialog],
})
export class UiDialogModule {}

44
libs/ui/src/dialog/ui-dialog.service.ts Normal file
View File

@@ -0,0 +1,44 @@
import { Injectable, Injector, TemplateRef, Type } from '@angular/core';
import { ComponentPortal } from '@angular/cdk/portal';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
import { UiDialogComponent } from './ui-dialog.component';
import { UI_DIALOG_DATA, UiDialogConfig } from '@ui/dialog/ui-dialog.model';
@Injectable()
export class UiDialog {
constructor(private overlay: Overlay, private injector: Injector) {}
private static _createInjector(uiDialogRef: UiDialogRef, injector: Injector, config: UiDialogConfig): Injector {
return Injector.create({
parent: injector,
providers: [
{ provide: UiDialogRef, useValue: uiDialogRef },
{ provide: UI_DIALOG_DATA, useValue: config.data },
],
});
}
open<DialogContent = unknown, T = unknown>(
content: string | TemplateRef<unknown> | Type<unknown>,
config: UiDialogConfig<T>
): UiDialogRef<DialogContent> {
const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
const configs = new OverlayConfig({
positionStrategy,
minWidth: '40rem',
minHeight: '40rem',
hasBackdrop: true,
scrollStrategy: this.overlay.scrollStrategies.close(),
backdropClass: 'cdk-overlay-dark-backdrop',
});
const overlayRef = this.overlay.create(configs);
const uiDialogRef = new UiDialogRef<DialogContent, T>(overlayRef, content, config);
const injector = UiDialog._createInjector(uiDialogRef, this.injector, config);
overlayRef.attach(new ComponentPortal(UiDialogComponent, null, injector));
return uiDialogRef;
}
}