diff --git a/package-lock.json b/package-lock.json index d50d7f8b2..d8b4e157c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -467,7 +467,7 @@ }, "dist/valtimo/config": { "name": "@valtimo/config", - "version": "12.2.0", + "version": "0.0.0-watch+1737720576560", "dev": true, "license": "EUPL-1.2", "dependencies": { @@ -559,7 +559,7 @@ }, "dist/valtimo/dossier": { "name": "@valtimo/dossier", - "version": "0.0.0-watch+1733321873940", + "version": "12.2.0", "dev": true, "license": "EUPL-1.2", "dependencies": { @@ -943,7 +943,7 @@ }, "dist/valtimo/zgw": { "name": "@valtimo/zgw", - "version": "12.2.0", + "version": "0.0.0-watch+1737720585212", "dev": true, "license": "EUPL-1.2", "dependencies": { diff --git a/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.html b/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.html index 35a095e1c..fe8bcd5df 100644 --- a/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.html +++ b/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.html @@ -19,6 +19,7 @@ breadcrumbs: breadcrumbs$ | async, currentStepIndex: currentStepIndex$ | async, enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async, + formFlowInstanceId: formFlowInstanceId$ | async, } as obs" >
@@ -42,10 +43,11 @@ [options]="formioOptions" >
+
= new BehaviorSubject(null); - @Input() formFlowInstanceId: string | null; - @Output() formFlowComplete = new EventEmitter(); - @Output() formFlowChange = new EventEmitter(); + @ViewChild('form') public readonly form: FormioComponent; + + @Input() public readonly formIoFormData: BehaviorSubject = new BehaviorSubject( + null + ); + @Input() public set formFlowInstanceId(value: string | null) { + this.formFlowInstanceId$.next(value); + + if (value) this.getBreadcrumbs(); + } + + @Output() public readonly formFlowComplete = new EventEmitter(); + @Output() public readonly formFlowChange = new EventEmitter(); + + public formDefinition: FormioForm; + public formioOptions: ValtimoFormioOptions; public readonly breadcrumbs$ = new BehaviorSubject([]); public readonly disabled$ = new BehaviorSubject(false); @@ -51,13 +62,11 @@ export class FormFlowComponent implements OnInit, OnDestroy { public readonly enableFormFlowBreadcrumbs$ = this.configService.getFeatureToggleObservable( 'enableFormFlowBreadcrumbs' ); + public readonly formFlowInstanceId$ = new BehaviorSubject(''); - private readonly _subscriptions = new Subscription(); + private formFlowStepInstanceId: string | null = null; - formDefinition: FormioForm; - formioOptions: ValtimoFormioOptions; - - private formFlowStepInstanceId: string | null; + private _breadcrumbsSubscription!: Subscription; constructor( private readonly formFlowService: FormFlowService, @@ -71,11 +80,10 @@ export class FormFlowComponent implements OnInit, OnDestroy { public ngOnInit() { this.getFormFlowStep(); - this.getBreadcrumbs(); } public ngOnDestroy(): void { - this._subscriptions.unsubscribe(); + this._breadcrumbsSubscription?.unsubscribe(); } public onChange(event: any): void { @@ -91,10 +99,15 @@ export class FormFlowComponent implements OnInit, OnDestroy { if (submission.data) { this.formIoFormData.next(submission.data); } - if (submission.data.submit && this.formFlowInstanceId && this.formFlowStepInstanceId) { + + if ( + submission.data.submit && + this.formFlowInstanceId$.getValue() && + this.formFlowStepInstanceId + ) { this.formFlowService .submitStep( - this.formFlowInstanceId, + this.formFlowInstanceId$.getValue(), this.formFlowStepInstanceId, this.formIoFormData.getValue() ) @@ -120,8 +133,9 @@ export class FormFlowComponent implements OnInit, OnDestroy { public saveData(): void { const formIoFormDataValue = this.formIoFormData.getValue(); - if (formIoFormDataValue && this.formFlowInstanceId) { - this.formFlowService.save(this.formFlowInstanceId, formIoFormDataValue).subscribe( + + if (formIoFormDataValue && this.formFlowInstanceId$.getValue()) { + this.formFlowService.save(this.formFlowInstanceId$.getValue(), formIoFormDataValue).subscribe( () => null, errors => this.form.showErrors(errors) ); @@ -129,13 +143,17 @@ export class FormFlowComponent implements OnInit, OnDestroy { } public onStepSelected(event: {step: {stepInstanceId: string}; index: number}): void { + const submissionData = this.formIoFormData.getValue().data; + this.disable(); + this.currentStepIndex$.next(event.index); - const submissionData = this.formIoFormData.getValue().data; - if (!this.formFlowInstanceId || !this.formFlowStepInstanceId) return; + + if (!this.formFlowInstanceId$.getValue() || !this.formFlowStepInstanceId) return; + this.formFlowService .navigateToStep( - this.formFlowInstanceId, + this.formFlowInstanceId$.getValue(), this.formFlowStepInstanceId, event.step.stepInstanceId, submissionData @@ -150,51 +168,57 @@ export class FormFlowComponent implements OnInit, OnDestroy { } private getBreadcrumbs(): void { - if (!this.formFlowInstanceId) return; - this._subscriptions.add( - combineLatest([ - this.enableFormFlowBreadcrumbs$, - this.formFlowService.getBreadcrumbs(this.formFlowInstanceId), - this.translateService.stream('key'), - ]) - .pipe( - filter(([enableFormFlowBreadcrumbs]) => enableFormFlowBreadcrumbs), - map(([_, breadcrumbs]) => breadcrumbs) - ) - .subscribe(breadcrumbs => { - this.currentStepIndex$.next(breadcrumbs.currentStepIndex); - this.breadcrumbs$.next( - breadcrumbs.breadcrumbs.map(breadcrumb => ({ - label: - breadcrumb.title ?? - this.translateService.instant(`formFlow.step.${breadcrumb.key}.title`) ?? - breadcrumb.key, - disabled: breadcrumb.stepInstanceId === null, - complete: breadcrumb.completed, - stepInstanceId: breadcrumb.stepInstanceId, - })) - ); - const classElement = document.getElementsByClassName('cds--progress-step--current'); - if (classElement.length > 0) { - classElement[0].scrollIntoView({behavior: 'smooth', inline: 'center'}); - } - }) - ); + if ( + !this.formFlowInstanceId$.getValue() || + !this.configService.getFeatureToggle('enableFormFlowBreadcrumbs') + ) { + return; + } + + this._breadcrumbsSubscription?.unsubscribe(); + + this._breadcrumbsSubscription = combineLatest([ + this.formFlowService.getBreadcrumbs(this.formFlowInstanceId$.getValue()), + this.translateService.stream('key'), + ]) + .pipe(map(([breadcrumbs]) => breadcrumbs)) + .subscribe(breadcrumbs => { + const classElement = document.getElementsByClassName('cds--progress-step--current'); + + this.currentStepIndex$.next(breadcrumbs.currentStepIndex); + + this.breadcrumbs$.next( + breadcrumbs.breadcrumbs.map(breadcrumb => ({ + label: + breadcrumb.title ?? + this.translateService.instant(`formFlow.step.${breadcrumb.key}.title`) ?? + breadcrumb.key, + disabled: breadcrumb.stepInstanceId === null, + complete: breadcrumb.completed, + stepInstanceId: breadcrumb.stepInstanceId, + })) + ); + + if (classElement.length > 0) { + classElement[0].scrollIntoView({behavior: 'smooth', inline: 'center'}); + } + }); } private getFormFlowStep(): void { - if (!this.formFlowInstanceId) return; + if (!this.formFlowInstanceId$.getValue()) return; + this.formFlowService - .getFormFlowStep(this.formFlowInstanceId) + .getFormFlowStep(this.formFlowInstanceId$.getValue()) .subscribe((result: FormFlowInstance) => { this.handleFormFlowStep(result); }); } private back(submissionData: any): void { - if (!this.formFlowInstanceId) return; + if (!this.formFlowInstanceId$.getValue()) return; - this.formFlowService.back(this.formFlowInstanceId, submissionData).subscribe({ + this.formFlowService.back(this.formFlowInstanceId$.getValue(), submissionData).subscribe({ next: (result: FormFlowInstance) => this.handleFormFlowStep(result), error: errors => { this.form?.showErrors(errors); @@ -203,11 +227,11 @@ export class FormFlowComponent implements OnInit, OnDestroy { }); } - private handleFormFlowStep(formFlowInstance: FormFlowInstance) { + private handleFormFlowStep(formFlowInstance: FormFlowInstance): void { if (formFlowInstance.step === null) { this.formFlowStepType$.next(null); this.FormFlowCustomComponentId$.next(''); - this.formFlowInstanceId = null; + this.formFlowInstanceId$.next(null); this.formFlowStepInstanceId = null; this.formFlowComplete.emit(null); } else { @@ -215,7 +239,7 @@ export class FormFlowComponent implements OnInit, OnDestroy { this.modalService.scrollToTop(); this.formFlowStepType$.next(formFlowInstance.step?.type ?? null); this.FormFlowCustomComponentId$.next(formFlowInstance?.step?.typeProperties?.id || ''); - this.formFlowInstanceId = formFlowInstance.id; + this.formFlowInstanceId$.next(formFlowInstance.id); this.formFlowStepInstanceId = formFlowInstance.step?.id ?? null; this.formDefinition = formFlowInstance.step?.typeProperties.definition; }