fix breadcrumbs endpoint call (#1333)

valtimo-platform · Jan 28, 2025 · 92c079e · 92c079e
1 parent ac28745
commit 92c079e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
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
@@ -19,6 +19,7 @@
     breadcrumbs: breadcrumbs$ | async,
     currentStepIndex: currentStepIndex$ | async,
     enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,
+    formFlowInstanceId: formFlowInstanceId$ | async,
   } as obs"
 >
   <div *ngIf="formDefinition && (formFlowStepType$ | async) === 'form'">
@@ -42,10 +43,11 @@
       [options]="formioOptions"
     ></valtimo-form-io>
   </div>
+
   <div *ngIf="(formFlowStepType$ | async) === 'custom-component'">
     <valtimo-form-flow-configuration-container
       [componentId]="FormFlowCustomComponentId$ | async"
-      [formFlowInstanceId]="formFlowInstanceId"
+      [formFlowInstanceId]="obs.formFlowInstanceId"
       [disabled]="disabled$ | async"
       (submitEvent)="onSubmit($event)"
       (changeEvent)="onChange($event)"

diff --git a/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.ts b/projects/valtimo/process-link/src/lib/components/form-flow/form-flow.component.ts
@@ -15,7 +15,7 @@
  */
 
 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
-import {BehaviorSubject, combineLatest, filter, Observable, Subscription} from 'rxjs';
+import {BehaviorSubject, combineLatest, Subscription} from 'rxjs';
 import {FormioForm} from '@formio/angular';
 import {
   FormioComponent,
@@ -37,11 +37,22 @@ import {map} from 'rxjs/operators';
   styleUrls: ['./form-flow.component.scss'],
 })
 export class FormFlowComponent implements OnInit, OnDestroy {
-  @ViewChild('form') form: FormioComponent;
-  @Input() formIoFormData: BehaviorSubject<any | null> = new BehaviorSubject<any>(null);
-  @Input() formFlowInstanceId: string | null;
-  @Output() formFlowComplete = new EventEmitter();
-  @Output() formFlowChange = new EventEmitter();
+  @ViewChild('form') public readonly form: FormioComponent;
+
+  @Input() public readonly formIoFormData: BehaviorSubject<any | null> = new BehaviorSubject<any>(
+    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<Step[]>([]);
   public readonly disabled$ = new BehaviorSubject<boolean>(false);
@@ -51,13 +62,11 @@ export class FormFlowComponent implements OnInit, OnDestroy {
   public readonly enableFormFlowBreadcrumbs$ = this.configService.getFeatureToggleObservable(
     'enableFormFlowBreadcrumbs'
   );
+  public readonly formFlowInstanceId$ = new BehaviorSubject<string | null>('');
 
-  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,22 +133,27 @@ 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)
       );
     }
   }
 
   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,19 +227,19 @@ 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 {
       this.getBreadcrumbs();
       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;
     }