feature(Avvikelserapporten): Använd nya dialogen (TV-845)

Merge in TEA/mina-sidor-fa-web from feature/TV-845-ersätt-dialogen-i-Avvikelserapporten-(TV-845) to develop Squashed commit of the following: commit 780f93baab0891a2f2ba49bf14d2c3add99e03c8 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Dec 30 11:27:28 2021 +0100 Update avvikelse-report-form.component.ts commit bea883f6aedfe2655efbb69d66788c1366e48a43 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Dec 30 11:19:03 2021 +0100 cleanup commit ffdf13dfcb3d97960ddb585b09fa5e6446504a68 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:52:37 2021 +0100 Update app.component.ts commit 1631cb763bc7023a9e95682272fb63dcbe15d84e Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:52:03 2021 +0100 fix deltagarelist commit c6080ac50cb6773aac8d4e45336fc1ba2f053a8d Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:24:44 2021 +0100 Update avrop.component.html commit 85057d0860ddceef8309253c983a1674a57291c4 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:21:33 2021 +0100 wip commit a73164bda8a8ae06c5700e382e197d823bef6767 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:20:04 2021 +0100 wip commit 83f3ada5c4c60c9e46d7b01bbbf92053eb1b29ff Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 15:18:30 2021 +0100 wip commit 5e184bc0e1a3f7bb6a3040d4da54a9b0e562dad3 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Dec 29 14:18:39 2021 +0100 wip commit 30a90ce726dde31974e26c974215f6a5a60b025e Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Dec 28 15:11:14 2021 +0100 added scrollbars inside dialog commit 600dd20f3281b4206c12d851cba91ae0ecf1e21a Merge: 7af19054 b9434741 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Dec 28 14:30:49 2021 +0100 Merge branch 'develop' into feature/TV-845-ersätt-dialogen-i-Avvikelserapporten-(TV-845) commit 7af190549c0109f71af87157e8099aa0483c879f Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Dec 28 12:05:22 2021 +0100 wip commit 6e47e4a641daf4cef121e96c3855e4ce4944c6c4 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Dec 28 09:38:36 2021 +0100 wip commit f9354d04f51425cce29f13a10b32555113edaaa2 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Dec 28 09:16:54 2021 +0100 feature(Nya deltagare): Använd nya dialogen (TV-845)
2021-12-30 14:18:58 +01:00
parent 7c48ec175e
commit 8909f7c3d1
26 changed files with 359 additions and 142 deletions
--- a/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.html
+++ b/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.html
@@ -0,0 +1,14 @@
+<div class="ui-dialog-layout">
+  <ui-loader *ngIf="isLoading" uiType="absolute"></ui-loader>
+  <div class="ui-dialog-layout__heading">
+    <ng-content select="[uiDialogHeading]"></ng-content>
+  </div>
+
+  <div class="ui-dialog-layout__scrollable-content">
+    <ng-content></ng-content>
+  </div>
+
+  <footer class="ui-dialog-layout__footer">
+    <ng-content select="[uiDialogFooter]"></ng-content>
+  </footer>
+</div>
--- a/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.scss
+++ b/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.scss
@@ -0,0 +1,40 @@
+@import 'variables/shadows';
+@import 'variables/gutters';
+
+.ui-dialog-layout {
+  padding-top: $digi--layout--gutter--s;
+  display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--s;
+  max-height: 90vh;
+  &__heading {
+    flex: 1 1 2rem;
+  }
+  &__scrollable-content {
+    overflow: auto;
+    flex-grow: 1;
+  }
+
+  &__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 {
+    flex: 1 0 4rem;
+    min-height: var(--digi--layout--gutter);
+    display: flex;
+    margin-top: $digi--layout--gutter--l;
+    gap: var(--digi--layout--gutter);
+  }
+}
--- a/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.spec.ts
+++ b/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UiDialogLayoutComponent } from './ui-dialog-layout.component';
+
+describe('UiDialogLayoutComponent', () => {
+  let component: UiDialogLayoutComponent;
+  let fixture: ComponentFixture<UiDialogLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UiDialogLayoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UiDialogLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.ts
+++ b/libs/ui/src/dialog/ui-dialog-layout/ui-dialog-layout.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ui-dialog-layout',
+  templateUrl: './ui-dialog-layout.component.html',
+  styleUrls: ['./ui-dialog-layout.component.scss'],
+})
+export class UiDialogLayoutComponent {
+  @Input() uiHeading: string;
+  @Input() isLoading = false;
+}
--- a/libs/ui/src/dialog/ui-dialog-ref.ts
+++ b/libs/ui/src/dialog/ui-dialog-ref.ts
@@ -21,12 +21,18 @@ export class UiDialogRef<CloseResponseData = unknown, InputDataType = unknown> {
    overlay.backdropClick().subscribe(() => this._close('backdropClick', null));
  }

+  get includeBasicFooter(): boolean {
+    return this.config.includeBasicFooter;
+  }
  get primaryButtonText(): string {
    return this.config.primaryButtonText;
  }
  get secondaryButtonText(): string {
    return this.config.secondaryButtonText;
  }
+  get heading(): string {
+    return this.config.heading;
+  }

  close(data?: CloseResponseData): void {
    this._close('close', data);
--- a/libs/ui/src/dialog/ui-dialog.component.html
+++ b/libs/ui/src/dialog/ui-dialog.component.html
@@ -1,21 +1,25 @@
 <div class="ui-dialog">
-  <ng-container [ngSwitch]="contentType">
-    <ng-container *ngSwitchCase="'string'">
-      <div class="box">
+  <h2 class="ui-dialog__heading" *ngIf="heading">{{heading}}</h2>
+  <div [ngClass]="{'ui-dialog__scrollable-content': includeBasicFooter}">
+    <ng-container [ngSwitch]="contentType">
+      <ng-container *ngSwitchCase="'string'">
        <div [innerHTML]="content"></div>
-      </div>
-    </ng-container>
+        <footer class="ui-dialog__footer">
+          <digi-button af-type="button" (click)="close()">Stäng</digi-button>
+        </footer>
+      </ng-container>

-    <ng-container *ngSwitchCase="'template'">
-      <ng-container *ngTemplateOutlet="content; context: context"></ng-container>
-    </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 *ngSwitchCase="'component'">
+        <ng-container *ngComponentOutlet="content"></ng-container>
+      </ng-container>
    </ng-container>
-  </ng-container>
+  </div>

-  <footer class="ui-dialog__footer">
+  <footer class="ui-dialog__footer" *ngIf="includeBasicFooter">
    <digi-button af-type="button" (click)="primaryAction()">{{primaryButtonText}}</digi-button>
    <digi-button af-type="button" af-variation="secondary" *ngIf="secondaryButtonText" (click)="secondaryAction()">
      {{secondaryButtonText}}
--- a/libs/ui/src/dialog/ui-dialog.component.scss
+++ b/libs/ui/src/dialog/ui-dialog.component.scss
@@ -7,6 +7,18 @@
  box-shadow: $msfa__shadow;
  padding: $digi--layout--gutter--s $digi--layout--gutter--xl $digi--layout--gutter--l;
  position: relative;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+
+  &__heading {
+    flex: 1 1 2rem;
+  }
+
+  &__scrollable-content {
+    overflow: auto;
+    flex-grow: 1;
+  }

  &__close-button {
    position: absolute;
--- a/libs/ui/src/dialog/ui-dialog.component.ts
+++ b/libs/ui/src/dialog/ui-dialog.component.ts
@@ -28,11 +28,18 @@ export class UiDialogComponent implements OnInit {
  get secondaryButtonText(): string {
    return this.uiDialogRef.secondaryButtonText;
  }
+  get heading(): string {
+    return this.uiDialogRef.heading;
+  }

  primaryAction(): void {
    this.uiDialogRef.primaryAction();
  }

+  get includeBasicFooter(): boolean {
+    return this.uiDialogRef.includeBasicFooter;
+  }
+
  secondaryAction(): void {
    this.uiDialogRef.secondaryAction();
  }
--- a/libs/ui/src/dialog/ui-dialog.model.ts
+++ b/libs/ui/src/dialog/ui-dialog.model.ts
@@ -9,9 +9,12 @@ export interface UiDialogConfig<DialogInputData = unknown> {
  minHeight?: string;
  maxHeight?: string;

+  heading?: string;
+
  /**
   * primaryButtonText defaults to 'Stäng'
   */
+  includeBasicFooter?: boolean;
  primaryButtonText?: string;

  /**
--- a/libs/ui/src/dialog/ui-dialog.module.ts
+++ b/libs/ui/src/dialog/ui-dialog.module.ts
@@ -3,11 +3,14 @@ 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';
+import { UiDialogLayoutComponent } from './ui-dialog-layout/ui-dialog-layout.component';
+import { UiLoaderModule } from '@ui/loader/loader.module';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [UiDialogComponent],
-  imports: [CommonModule, UiIconModule],
+  declarations: [UiDialogComponent, UiDialogLayoutComponent],
+  imports: [CommonModule, UiIconModule, UiLoaderModule],
  providers: [UiDialog],
+  exports: [UiDialogLayoutComponent],
 })
 export class UiDialogModule {}
--- a/libs/ui/src/dialog/ui-dialog.service.ts
+++ b/libs/ui/src/dialog/ui-dialog.service.ts
@@ -19,24 +19,24 @@ export class UiDialog {
    });
  }

-  open<DialogContent = unknown, T = unknown>(
+  open<CloseResponseData = unknown, InputDataType = unknown>(
    content: string | TemplateRef<unknown> | Type<unknown>,
-    config: UiDialogConfig<T> = {}
-  ): UiDialogRef<DialogContent> {
+    config: UiDialogConfig<InputDataType> = { includeBasicFooter: false }
+  ): UiDialogRef<CloseResponseData> {
    const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
    const configs = new OverlayConfig({
      positionStrategy,
-      minWidth: config.minWidth ?? '40rem',
-      minHeight: config.minHeight ?? '40rem',
+      minWidth: config.minWidth ?? '20rem',
+      minHeight: config.minHeight ?? '10rem',
      maxWidth: config.maxWidth ?? '60rem',
      maxHeight: config.maxHeight ?? '60rem',
      hasBackdrop: true,
-      scrollStrategy: this.overlay.scrollStrategies.close(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
      backdropClass: 'cdk-overlay-dark-backdrop',
    });

    const overlayRef = this.overlay.create(configs);
-    const uiDialogRef = new UiDialogRef<DialogContent, T>(overlayRef, content, config);
+    const uiDialogRef = new UiDialogRef<CloseResponseData, InputDataType>(overlayRef, content, config);

    const injector = UiDialog._createInjector(uiDialogRef, this.injector, config);
    overlayRef.attach(new ComponentPortal(UiDialogComponent, null, injector));