diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html index 8195e19b0c5..1306de1c1cc 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html @@ -3,89 +3,94 @@ -
-
+
+
- -
- - {{form.taskName}} - - {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} - - -
- - - - + +
+ + {{form.taskName}} + + {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} + + +
- -
- - -

-
- check_circle - - error - -
-
- -
-
- -
- {{form.taskName}} - - {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} - - -

- - - - - - - - - + - - -
- -
+ + + +
+ + +

+
+ check_circle + + error + +
+
+ +
+
+ +
+ {{form.taskName}} + + {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} + + +

+ + + + + + + + + + + + +
+ +
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts index 9e4ef8c10db..9116c2a88b1 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts @@ -1362,7 +1362,7 @@ describe('FormCloudComponent', () => { await loadForm({ displayMode: FormCloudDisplayMode.fullScreen }); }); - it('should emit display mode turned on wit the fullScreen configuration', () => { + it('should emit display mode turned on with the fullScreen configuration', () => { expect(displayModeOnSpy).toHaveBeenCalledWith(DisplayModeService.IMPLEMENTED_DISPLAY_MODE_CONFIGURATIONS[1]); }); diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts index ac5d27b5866..676e5467821 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts @@ -134,7 +134,8 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges, protected onDestroy$ = new Subject(); readonly id: string; - displayMode: FormCloudDisplayMode; + displayMode: string; + displayConfiguration: FormCloudDisplayModeConfiguration = DisplayModeService.DEFAULT_DISPLAY_MODE_CONFIGURATIONS[0]; style: string = ''; protected formCloudService = inject(FormCloudService); @@ -241,6 +242,8 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges, this.displayModeOn.emit(newDisplayModeConfiguration); } } + + this.displayConfiguration = newDisplayModeConfiguration; }); } @@ -433,7 +436,9 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges, this.displayModeConfigurations ); - this.displayModeOn.emit(this.displayModeService.findConfiguration(this.displayMode, this.displayModeConfigurations)); + this.displayConfiguration = this.displayModeService.findConfiguration(this.displayMode, this.displayModeConfigurations); + + this.displayModeOn.emit(this.displayConfiguration); } this.changeDetector.detectChanges(); diff --git a/lib/process-services-cloud/src/lib/form/services/display-mode.service.spec.ts b/lib/process-services-cloud/src/lib/form/services/display-mode.service.spec.ts index 9cad3aed1d1..c424401fcf5 100644 --- a/lib/process-services-cloud/src/lib/form/services/display-mode.service.spec.ts +++ b/lib/process-services-cloud/src/lib/form/services/display-mode.service.spec.ts @@ -19,7 +19,6 @@ import { FormCloudDisplayMode, FormCloudDisplayModeConfiguration } from '../../s import { DisplayModeService } from './display-mode.service'; describe('DisplayModeService', () => { - let service: DisplayModeService; let displayModeOnSpy: jasmine.Spy; let displayModeOffSpy: jasmine.Spy; @@ -61,11 +60,18 @@ describe('DisplayModeService', () => { }); it('should return the default display mode when no display mode does not exist in the configuration', () => { - expect(service.getDisplayMode('notExisting' as any)).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); - expect(service.getDisplayMode('notExisting' as any, [])).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); - expect(service.getDisplayMode('notExisting' as any, [{ displayMode: FormCloudDisplayMode.fullScreen }])).toBe(FormCloudDisplayMode.fullScreen); - expect(service.getDisplayMode('notExisting' as any, [{ displayMode: FormCloudDisplayMode.fullScreen }, { displayMode: FormCloudDisplayMode.inline }])).toBe(FormCloudDisplayMode.fullScreen); - expect(service.getDisplayMode('notExisting' as any, [{ displayMode: FormCloudDisplayMode.fullScreen, default: true }, { displayMode: FormCloudDisplayMode.inline }])).toBe(FormCloudDisplayMode.fullScreen); + expect(service.getDisplayMode('notExisting')).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); + expect(service.getDisplayMode('notExisting', [])).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); + expect(service.getDisplayMode('notExisting', [{ displayMode: FormCloudDisplayMode.fullScreen }])).toBe(FormCloudDisplayMode.fullScreen); + expect( + service.getDisplayMode('notExisting', [{ displayMode: FormCloudDisplayMode.fullScreen }, { displayMode: FormCloudDisplayMode.inline }]) + ).toBe(FormCloudDisplayMode.fullScreen); + expect( + service.getDisplayMode('notExisting', [ + { displayMode: FormCloudDisplayMode.fullScreen, default: true }, + { displayMode: FormCloudDisplayMode.inline } + ]) + ).toBe(FormCloudDisplayMode.fullScreen); }); it('should return the provided display mode when display mode is provided', () => { @@ -75,8 +81,10 @@ describe('DisplayModeService', () => { it('should find the display configuration', () => { expect(service.findConfiguration()).toBeUndefined(); expect(service.findConfiguration(FormCloudDisplayMode.fullScreen)).toBe(DisplayModeService.IMPLEMENTED_DISPLAY_MODE_CONFIGURATIONS[1]); - expect(service.findConfiguration('notExisting' as any)).toBeUndefined(); - expect(service.findConfiguration(FormCloudDisplayMode.fullScreen, [{ displayMode: FormCloudDisplayMode.fullScreen }])).toEqual({ displayMode: FormCloudDisplayMode.fullScreen }); + expect(service.findConfiguration('notExisting')).toBeUndefined(); + expect(service.findConfiguration(FormCloudDisplayMode.fullScreen, [{ displayMode: FormCloudDisplayMode.fullScreen }])).toEqual({ + displayMode: FormCloudDisplayMode.fullScreen + }); expect(service.findConfiguration(FormCloudDisplayMode.fullScreen, [{ displayMode: FormCloudDisplayMode.inline }])).toBeUndefined(); }); @@ -134,21 +142,27 @@ describe('DisplayModeService', () => { }); it('should return the default display mode when calling the switchToDisplayMode and display does not exist in configuration', () => { - expect(service.switchToDisplayMode(formId, 'notExisting' as any)).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); + expect(service.switchToDisplayMode(formId, 'notExisting')).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); }); it('should not call the change display mode method when switchToDisplayMode and the mode to switch is the same as the old one', () => { - expect(service.switchToDisplayMode(formId, FormCloudDisplayMode.fullScreen, FormCloudDisplayMode.fullScreen)).toBe(FormCloudDisplayMode.fullScreen); + expect(service.switchToDisplayMode(formId, FormCloudDisplayMode.fullScreen, FormCloudDisplayMode.fullScreen)).toBe( + FormCloudDisplayMode.fullScreen + ); expect(changeDisplayModeSpy).not.toHaveBeenCalledWith(); }); it('should not call the change display mode method when switchToDisplayMode and the mode to switch does not exist and the previous mode was the default one', () => { - expect(service.switchToDisplayMode(formId, 'notExisting' as any, DisplayModeService.DEFAULT_DISPLAY_MODE)).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); + expect(service.switchToDisplayMode(formId, 'notExisting', DisplayModeService.DEFAULT_DISPLAY_MODE)).toBe( + DisplayModeService.DEFAULT_DISPLAY_MODE + ); expect(changeDisplayModeSpy).not.toHaveBeenCalledWith(); }); it('should not call the change display mode method when switchToDisplayMode and the mode to switch does not exist and the previous mode was not provided', () => { - expect(service.switchToDisplayMode(formId, 'notExisting' as any, DisplayModeService.DEFAULT_DISPLAY_MODE)).toBe(DisplayModeService.DEFAULT_DISPLAY_MODE); + expect(service.switchToDisplayMode(formId, 'notExisting', DisplayModeService.DEFAULT_DISPLAY_MODE)).toBe( + DisplayModeService.DEFAULT_DISPLAY_MODE + ); expect(changeDisplayModeSpy).not.toHaveBeenCalledWith(); }); diff --git a/lib/process-services-cloud/src/lib/form/services/display-mode.service.ts b/lib/process-services-cloud/src/lib/form/services/display-mode.service.ts index 2718182c87a..4a737e59a9b 100644 --- a/lib/process-services-cloud/src/lib/form/services/display-mode.service.ts +++ b/lib/process-services-cloud/src/lib/form/services/display-mode.service.ts @@ -35,11 +35,26 @@ export class DisplayModeService { { displayMode: FormCloudDisplayMode.fullScreen, options: { - onDisplayModeOn: () => { }, + onDisplayModeOn: () => {}, onDisplayModeOff: (id: string) => DisplayModeService.changeDisplayMode({ displayMode: FormCloudDisplayMode.inline, id }), onCompleteTask: (id: string) => DisplayModeService.changeDisplayMode({ displayMode: FormCloudDisplayMode.inline, id }), - onSaveTask: () => { }, - displayToolbar: true + onSaveTask: () => {}, + fullscreen: true, + displayToolbar: true, + displayCloseButton: true, + trapFocus: true + } + }, + { + displayMode: FormCloudDisplayMode.standalone, + options: { + onDisplayModeOn: () => {}, + onDisplayModeOff: () => {}, + onCompleteTask: () => {}, + onSaveTask: () => {}, + fullscreen: true, + displayToolbar: false, + trapFocus: true } } ]; @@ -66,25 +81,25 @@ export class DisplayModeService { } } - getDisplayMode(displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]): FormCloudDisplayMode { + getDisplayMode(displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]): string { const configuration = this.findConfiguration(displayMode, availableConfigurations); if (configuration) { return configuration.displayMode; } else if (availableConfigurations && availableConfigurations.length > 0) { - return availableConfigurations.length === 1 ? - availableConfigurations[0].displayMode : - (availableConfigurations.find(config => config.default)?.displayMode || availableConfigurations[0].displayMode); + return availableConfigurations.length === 1 + ? availableConfigurations[0].displayMode + : availableConfigurations.find((config) => config.default)?.displayMode || availableConfigurations[0].displayMode; } else { return DisplayModeService.DEFAULT_DISPLAY_MODE; } } - findConfiguration(displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]): FormCloudDisplayModeConfiguration { - return this.getDisplayModeConfigurations(availableConfigurations).find(config => config.displayMode === displayMode); + findConfiguration(displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]): FormCloudDisplayModeConfiguration { + return this.getDisplayModeConfigurations(availableConfigurations).find((config) => config.displayMode === displayMode); } - onCompleteTask(id?: string, displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { + onCompleteTask(id?: string, displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { const configuration = this.findConfiguration(displayMode, availableConfigurations); if (configuration?.options?.onCompleteTask) { @@ -92,7 +107,7 @@ export class DisplayModeService { } } - onSaveTask(id?: string, displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { + onSaveTask(id?: string, displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { const configuration = this.findConfiguration(displayMode, availableConfigurations); if (configuration?.options?.onSaveTask) { @@ -100,7 +115,7 @@ export class DisplayModeService { } } - onDisplayModeOff(id?: string, displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { + onDisplayModeOff(id?: string, displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { const configuration = this.findConfiguration(displayMode, availableConfigurations); if (configuration?.options?.onDisplayModeOff) { @@ -108,7 +123,7 @@ export class DisplayModeService { } } - onDisplayModeOn(id?: string, displayMode?: FormCloudDisplayMode, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { + onDisplayModeOn(id?: string, displayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[]) { const configuration = this.findConfiguration(displayMode, availableConfigurations); if (configuration?.options?.onDisplayModeOn) { @@ -118,10 +133,10 @@ export class DisplayModeService { switchToDisplayMode( id?: string, - newDisplayMode?: FormCloudDisplayMode, - oldDisplayMode?: FormCloudDisplayMode, + newDisplayMode?: string, + oldDisplayMode?: string, availableConfigurations?: FormCloudDisplayModeConfiguration[] - ): FormCloudDisplayMode { + ): string { const oldConfiguration = this.findConfiguration(oldDisplayMode, availableConfigurations); const newConfiguration = this.findConfiguration(newDisplayMode, availableConfigurations); diff --git a/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts b/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts index c661149a7d8..ec41b41ac99 100644 --- a/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts +++ b/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts @@ -26,7 +26,7 @@ export interface FormRepresentation { version?: number; formDefinition?: FormDefinition; standAlone?: boolean; - displayMode?: FormCloudDisplayMode; + displayMode?: string; } export interface FormTab { @@ -266,11 +266,15 @@ export interface FormCloudDisplayModeConfigurationOptions { onSaveTask(id?: string): void; onDisplayModeOn(id?: string): void; onDisplayModeOff(id?: string): void; + fullscreen?: boolean; + displayToolbar?: boolean; + displayCloseButton?: boolean; + trapFocus?: boolean; [key: string]: any; } export interface FormCloudDisplayModeConfiguration { - displayMode: FormCloudDisplayMode; + displayMode: string; options?: FormCloudDisplayModeConfigurationOptions; default?: boolean; } @@ -278,10 +282,11 @@ export interface FormCloudDisplayModeConfiguration { // eslint-disable-next-line no-shadow export enum FormCloudDisplayMode { inline = 'inline', - fullScreen = 'fullScreen' + fullScreen = 'fullScreen', + standalone = 'standalone' } export interface FormCloudDisplayModeChange { - displayMode: FormCloudDisplayMode; + displayMode: string; id?: string; }