From 6ac898ddd14a3ac34ee1f94d7cc45044d490da6d Mon Sep 17 00:00:00 2001 From: Jacek Pluta Date: Wed, 7 Aug 2024 10:35:26 +0200 Subject: [PATCH 1/2] [ACS-8312] Display warning about losing response --- .../unsaved-changes-dialog.component.html | 22 +++-- .../unsaved-changes-dialog.component.scss | 69 +++++++++----- .../unsaved-changes-dialog.component.spec.ts | 93 ++++++++++++++----- .../unsaved-changes-dialog.component.ts | 36 ++++++- .../unsaved-changes-dialog.model.ts | 23 +++++ .../unsaved-changes-dialog.module.ts | 10 +- .../unsaved-changes.guard.ts | 15 ++- .../src/lib/styles/_components-variables.scss | 1 + .../src/lib/styles/_reference-variables.scss | 1 + 9 files changed, 204 insertions(+), 66 deletions(-) create mode 100644 lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.model.ts diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html index 3de4be2a695..4248fd8a664 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html @@ -1,29 +1,35 @@ -

- {{ 'CORE.DIALOG.UNSAVED_CHANGES.TITLE' | translate }} +

+ {{ (data?.headerText ? data.headerText : 'CORE.DIALOG.UNSAVED_CHANGES.TITLE') | translate }}

- - {{ 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION' | translate }} + + {{ (data?.descriptionText ? data.descriptionText : 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION') | translate }} +
+ {{ (data?.checkboxText | translate) }} +
- + diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss index 043db206269..94b5cd89b62 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss @@ -1,33 +1,60 @@ -adf-unsaved-changes-dialog { - margin-top: -4px; - display: block; - +.adf-unsaved-changes-dialog { .adf-unsaved-changes-dialog { - &-title { + &-header { display: flex; align-items: center; justify-content: space-between; - font-size: 16px; - font-weight: bold; - } + font-size: 18px; + font-weight: 700; + margin-bottom: 16px; + height: 24px; + + &-close-button { + margin-right: -16px; + margin-bottom: 2px; + } - &-cancel-button { - background-color: var(--adf-secondary-button-background); - margin-right: 4px; + &::before { + display: none; + } } - &-discard-changes-button { - color: var(--theme-warn-color-default-contrast); - background-color: var(--adf-error-color); - min-width: 143px; + &-content { + padding: 0 8px 0 0; + overflow: unset; + color: var(--adf-secondary-modal-text-color); + + &-checkbox { + margin-top: 20px; + + label { + color: var(--adf-secondary-modal-text-color); + } + } } - &-cancel-button, - &-discard-changes-button { - padding: 4px 14px; - height: 32px; - display: flex; - align-items: center; + &-actions { + margin-top: 18px; + margin-bottom: 4px; + padding: 0; + + &-cancel-button { + background-color: var(--adf-secondary-button-background); + margin-right: 4px; + } + + &-discard-changes-button { + color: white; + background-color: var(--adf-error-color); + } + + &-cancel-button, + &-discard-changes-button { + padding: 4px 12px; + height: 32px; + display: flex; + align-items: center; + } } } } diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts index 459c9a2bac2..4654a233d7e 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts @@ -16,39 +16,66 @@ */ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CoreTestingModule, UnsavedChangesDialogComponent } from '@alfresco/adf-core'; +import { CoreTestingModule, StorageService, UnsavedChangesDialogComponent } from '@alfresco/adf-core'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; -import { MatDialogClose } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog'; +import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model'; -describe('UnsavedChangesDialog', () => { +describe('UnsavedAiChangesDialog', () => { let fixture: ComponentFixture; + let storageServiceMock: any; + let savePreferenceCheckbox: DebugElement; + + const setupBeforeEach = (unsavedChangesDialogData?: UnsavedChangesDialogData) => { + storageServiceMock = { + getItem: jasmine.createSpy('getItem'), + setItem: jasmine.createSpy('setItem') + }; - beforeEach(() => { TestBed.configureTestingModule({ - imports: [CoreTestingModule] + imports: [CoreTestingModule], + providers: [ + { provide: StorageService, useValue: storageServiceMock }, + { + provide: MAT_DIALOG_DATA, + useValue: unsavedChangesDialogData ?? {} + } + ] }); + fixture = TestBed.createComponent(UnsavedChangesDialogComponent); fixture.detectChanges(); - }); + savePreferenceCheckbox = fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-content-checkbox"]')); + }; - describe('Close icon button', () => { - let closeIconButton: DebugElement; + const getElements = (): { header: HTMLElement; content: HTMLElement; discardChangesButton: HTMLElement } => { + const header = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-header'); + const content = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-content'); + const discardChangesButton = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-actions-discard-changes-button'); + return { header, content, discardChangesButton }; + }; + describe('when data is not present in dialog', () => { beforeEach(() => { - closeIconButton = fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-close-button"]')); + setupBeforeEach(); }); - it('should have assigned dialog close button with false as result', () => { - expect(closeIconButton.injector.get(MatDialogClose).dialogResult).toBeFalse(); + it('should display correct text if there is no data object', () => { + const { header, content, discardChangesButton } = getElements(); + expect(header.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.TITLE'); + expect(content.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION'); + expect(discardChangesButton.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON'); }); - it('should have displayed correct icon', () => { - expect(closeIconButton.nativeElement.textContent).toBe('close'); + it('should have assigned dialog close button with true as result', () => { + expect( + fixture.debugElement + .query(By.css('[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]')) + .injector.get(MatDialogClose).dialogResult + ).toBeTrue(); }); - }); - describe('Cancel button', () => { it('should have assigned dialog close button with false as result', () => { expect( fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-cancel-button"]')).injector.get(MatDialogClose) @@ -57,13 +84,35 @@ describe('UnsavedChangesDialog', () => { }); }); - describe('Discard changes button', () => { - it('should have assigned dialog close button with true as result', () => { - expect( - fixture.debugElement - .query(By.css('[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]')) - .injector.get(MatDialogClose).dialogResult - ).toBeTrue(); + describe('when data is present in dialog', () => { + beforeEach(() => { + setupBeforeEach({ + headerText: 'headerText', + descriptionText: 'descriptionText', + confirmButtonText: 'confirmButtonText', + checkboxText: 'checkboxText' + }); + fixture.detectChanges(); + }); + + it('should display correct text if there is data object', () => { + const { header, content, discardChangesButton } = getElements(); + + expect(header.textContent).toContain('headerText'); + expect(content.textContent).toContain('descriptionText checkboxText'); + expect(discardChangesButton.textContent).toContain('confirmButtonText'); + }); + + it('should update storageService to true when checkbox is checked', () => { + const event = { checked: true }; + savePreferenceCheckbox.triggerEventHandler('change', event); + expect(storageServiceMock.setItem).toHaveBeenCalledWith(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, 'true'); + }); + + it('should update storageService to false when checkbox is unchecked', () => { + const event = { checked: false }; + savePreferenceCheckbox.triggerEventHandler('change', event); + expect(storageServiceMock.setItem).toHaveBeenCalledWith(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, 'false'); }); }); }); diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts index 1ef532da1c6..e632c7df88f 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts @@ -15,15 +15,45 @@ * limitations under the License. */ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, ViewEncapsulation } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model'; +import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'; +import { ReactiveFormsModule } from '@angular/forms'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { CommonModule } from '@angular/common'; +import { StorageService } from '../../common'; /** * Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding. + * Can be customized with data object - UnsavedChangesDialogData. + * If data.checkboxText is provided, checkbox will be displayed with the checkbox description. + * If data.confirmButtonText is provided, it will be displayed on the confirm button. + * If data.headerText is provided, it will be displayed as the header. + * If data.descriptionText is provided, it will be displayed as dialog content. */ @Component({ + standalone: true, selector: 'adf-unsaved-changes-dialog', encapsulation: ViewEncapsulation.None, templateUrl: './unsaved-changes-dialog.component.html', - styleUrls: ['./unsaved-changes-dialog.component.scss'] + styleUrls: ['./unsaved-changes-dialog.component.scss'], + host: { class: 'adf-unsaved-changes-dialog' }, + imports: [MatDialogModule, TranslateModule, MatButtonModule, MatIconModule, CommonModule, MatCheckboxModule, ReactiveFormsModule] }) -export class UnsavedChangesDialogComponent {} +export class UnsavedChangesDialogComponent { + public static readonly UNSAVED_CHANGES_MODAL_HIDDEN = 'unsaved_changes__modal_hidden'; + + constructor(@Inject(MAT_DIALOG_DATA) public data: UnsavedChangesDialogData, private storageService: StorageService) {} + + /** + * Sets 'unsaved_ai_changes__modal_visible' checked state (true or false string) as new item in local storage. + * + * @param savePreferences - MatCheckboxChange object with information about checkbox state. + */ + onToggleCheckboxPreferences(savePreferences: MatCheckboxChange) { + this.storageService.setItem(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, savePreferences.checked.toString()); + } +} diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.model.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.model.ts new file mode 100644 index 00000000000..fb753c32299 --- /dev/null +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.model.ts @@ -0,0 +1,23 @@ +/*! + * @license + * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface UnsavedChangesDialogData { + checkboxText?: string; + confirmButtonText?: string; + descriptionText?: string; + headerText?: string; +} diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.module.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.module.ts index 4688d00df08..b6a1c6ffe14 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.module.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.module.ts @@ -24,14 +24,8 @@ import { MatIconModule } from '@angular/material/icon'; import { CommonModule } from '@angular/common'; @NgModule({ - declarations: [UnsavedChangesDialogComponent], - imports: [ - MatDialogModule, - TranslateModule, - MatButtonModule, - MatIconModule, - CommonModule - ], + declarations: [], + imports: [MatDialogModule, TranslateModule, MatButtonModule, MatIconModule, CommonModule, UnsavedChangesDialogComponent], exports: [UnsavedChangesDialogComponent] }) export class UnsavedChangesDialogModule {} diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes.guard.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes.guard.ts index d18353b3c2c..3106edbf393 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes.guard.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes.guard.ts @@ -21,6 +21,7 @@ import { Observable } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { UnsavedChangesDialogComponent } from './unsaved-changes-dialog.component'; import { tap } from 'rxjs/operators'; +import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model'; /** * Guard responsible for protecting leaving page with unsaved changes. @@ -30,6 +31,7 @@ import { tap } from 'rxjs/operators'; }) export class UnsavedChangesGuard implements CanDeactivate { unsaved = false; + data: UnsavedChangesDialogData; constructor(private dialog: MatDialog) {} @@ -39,9 +41,14 @@ export class UnsavedChangesGuard implements CanDeactivate { * @returns boolean | Observable true when there is no unsaved changes or changes can be discarded, false otherwise. */ canDeactivate(): boolean | Observable { - return this.unsaved ? - this.dialog.open(UnsavedChangesDialogComponent, { - maxWidth: 346 - }).afterClosed().pipe(tap((confirmed) => this.unsaved = !confirmed)) : true; + return this.unsaved + ? this.dialog + .open(UnsavedChangesDialogComponent, { + maxWidth: 346, + data: this.data + }) + .afterClosed() + .pipe(tap((confirmed) => (this.unsaved = !confirmed))) + : true; } } diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index 45aa397f668..4df3beb1ea6 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -88,6 +88,7 @@ --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color, --adf-error-color: $adf-error-color, --adf-secondary-button-background: $adf-secondary-button-background, + --adf-secondary-modal-text-color: $adf-secondary-modal-text-color, --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text) ); diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index 8795d28591d..dc662e77803 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -27,3 +27,4 @@ $adf-ref-header-icon-color: inherit; $adf-ref-header-icon-border-radius: 50%; $adf-error-color: #ba1b1b; $adf-secondary-button-background: #2121210d; +$adf-secondary-modal-text-color: #212121; From 6b066f228b2dfc51b8773e1613bff4f9fcc2ad2c Mon Sep 17 00:00:00 2001 From: Jacek Pluta Date: Mon, 12 Aug 2024 09:09:17 +0200 Subject: [PATCH 2/2] [ACS-8312] Display warning about losing response - fixes --- .../src/lib/app-config/app-config.service.ts | 42 ++++++++----------- .../unsaved-changes-dialog.component.html | 10 ++--- .../unsaved-changes-dialog.component.spec.ts | 2 +- .../unsaved-changes-dialog.component.ts | 18 ++++++-- 4 files changed, 38 insertions(+), 34 deletions(-) diff --git a/lib/core/src/lib/app-config/app-config.service.ts b/lib/core/src/lib/app-config/app-config.service.ts index 6dd58b4de9b..1e5de6d1fb0 100644 --- a/lib/core/src/lib/app-config/app-config.service.ts +++ b/lib/core/src/lib/app-config/app-config.service.ts @@ -47,7 +47,8 @@ export enum AppConfigValues { STORAGE_PREFIX = 'application.storagePrefix', NOTIFY_DURATION = 'notificationDefaultDuration', CONTENT_TICKET_STORAGE_LABEL = 'ticket-ECM', - PROCESS_TICKET_STORAGE_LABEL = 'ticket-BPM' + PROCESS_TICKET_STORAGE_LABEL = 'ticket-BPM', + UNSAVED_CHANGES_MODAL_HIDDEN = 'unsaved_changes__modal_hidden' } // eslint-disable-next-line no-shadow @@ -63,7 +64,6 @@ export enum Status { providedIn: 'root' }) export class AppConfigService { - config: any = { application: { name: 'Alfresco ADF Application' @@ -97,11 +97,10 @@ export class AppConfigService { * @returns Property value, when loaded */ select(property: string): Observable { - return this.onLoadSubject - .pipe( - map((config) => ObjectUtils.getValue(config, property)), - distinctUntilChanged() - ); + return this.onLoadSubject.pipe( + map((config) => ObjectUtils.getValue(config, property)), + distinctUntilChanged() + ); } /** @@ -170,9 +169,7 @@ export class AppConfigService { protected onDataLoaded() { this.onLoadSubject.next(this.config); - this.extensionService.setup$ - .pipe(take(1)) - .subscribe((config) => this.onExtensionsLoaded(config)); + this.extensionService.setup$.pipe(take(1)).subscribe((config) => this.onExtensionsLoaded(config)); } protected onExtensionsLoaded(config: ExtensionConfig) { @@ -227,20 +224,18 @@ export class AppConfigService { * @param hostIdp host address * @returns Discovery configuration */ - loadWellKnown(hostIdp: string): Promise { + loadWellKnown(hostIdp: string): Promise { return new Promise((resolve, reject) => { - this.http - .get(`${hostIdp}/.well-known/openid-configuration`) - .subscribe({ - next: (res: OpenidConfiguration) => { - resolve(res); - }, - error: (err: any) => { - // eslint-disable-next-line no-console - console.error('hostIdp not correctly configured or unreachable'); - reject(err); - } - }); + this.http.get(`${hostIdp}/.well-known/openid-configuration`).subscribe({ + next: (res: OpenidConfiguration) => { + resolve(res); + }, + error: (err: any) => { + // eslint-disable-next-line no-console + console.error('hostIdp not correctly configured or unreachable'); + reject(err); + } + }); }); } @@ -273,5 +268,4 @@ export class AppConfigService { return result; } - } diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html index 4248fd8a664..3d4a7d0363f 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html @@ -1,5 +1,5 @@

- {{ (data?.headerText ? data.headerText : 'CORE.DIALOG.UNSAVED_CHANGES.TITLE') | translate }} + {{ dialogData.headerText | translate }}

- {{ (data?.descriptionText ? data.descriptionText : 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION') | translate }} -
+ {{ dialogData.descriptionText | translate }} +
{{ (data?.checkboxText | translate) }} + >{{ dialogData.checkboxText | translate }}
@@ -30,6 +30,6 @@

mat-button [mat-dialog-close]="true" class="adf-unsaved-changes-dialog-actions-discard-changes-button"> - {{ (data?.confirmButtonText ? data.confirmButtonText : 'CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON') | translate }} + {{ dialogData.confirmButtonText | translate }} diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts index 4654a233d7e..da49768f760 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts @@ -22,7 +22,7 @@ import { DebugElement } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog'; import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model'; -describe('UnsavedAiChangesDialog', () => { +describe('UnsavedChangesDialog', () => { let fixture: ComponentFixture; let storageServiceMock: any; let savePreferenceCheckbox: DebugElement; diff --git a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts index e632c7df88f..9834f0e494f 100644 --- a/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts +++ b/lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Inject, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model'; import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'; @@ -25,6 +25,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { CommonModule } from '@angular/common'; import { StorageService } from '../../common'; +import { AppConfigValues } from '../../app-config'; /** * Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding. @@ -43,17 +44,26 @@ import { StorageService } from '../../common'; host: { class: 'adf-unsaved-changes-dialog' }, imports: [MatDialogModule, TranslateModule, MatButtonModule, MatIconModule, CommonModule, MatCheckboxModule, ReactiveFormsModule] }) -export class UnsavedChangesDialogComponent { - public static readonly UNSAVED_CHANGES_MODAL_HIDDEN = 'unsaved_changes__modal_hidden'; +export class UnsavedChangesDialogComponent implements OnInit { + dialogData: UnsavedChangesDialogData; constructor(@Inject(MAT_DIALOG_DATA) public data: UnsavedChangesDialogData, private storageService: StorageService) {} + ngOnInit() { + this.dialogData = { + headerText: this.data?.headerText ?? 'CORE.DIALOG.UNSAVED_CHANGES.TITLE', + descriptionText: this.data?.descriptionText ?? 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION', + confirmButtonText: this.data?.confirmButtonText ?? 'CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON', + checkboxText: this.data?.checkboxText ?? '' + }; + } + /** * Sets 'unsaved_ai_changes__modal_visible' checked state (true or false string) as new item in local storage. * * @param savePreferences - MatCheckboxChange object with information about checkbox state. */ onToggleCheckboxPreferences(savePreferences: MatCheckboxChange) { - this.storageService.setItem(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, savePreferences.checked.toString()); + this.storageService.setItem(AppConfigValues.UNSAVED_CHANGES_MODAL_HIDDEN, savePreferences.checked.toString()); } }