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;
}