Skip to content

Commit

Permalink
Added cdsLayer to FVM modal to fix wrong bgcolor on inputs. (#1338)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theo-ritense
theo-ritense authored Jan 31, 2025
1 parent 9443d77 commit 282f521
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 40 deletions.
1 change: 1 addition & 0 deletions ...valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

<div
class="form-container formio-carbon"
cdsLayer="1.0"
*ngIf="{
submission: submission$ | async,
form: form$ | async,
Expand Down
96 changes: 56 additions & 40 deletions ...s/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import {TranslateService} from '@ngx-translate/core';
import {HttpErrorResponse} from '@angular/common/http';
import {CommonModule} from '@angular/common';
import {isEqual} from 'lodash';
import {LayerModule} from 'carbon-components-angular';

moment.defaultFormat = 'DD MMM YYYY HH:mm';

Expand All @@ -54,7 +55,7 @@ moment.defaultFormat = 'DD MMM YYYY HH:mm';
templateUrl: './form-view-model.component.html',
styleUrls: ['./form-view-model.component.css'],
standalone: true,
imports: [CommonModule, FormioModule],
imports: [CommonModule, FormioModule, LayerModule],
})
export class FormViewModelComponent implements OnInit, OnDestroy {
@ViewChild('formio') formio: FormioComponent;
Expand Down Expand Up @@ -148,21 +149,19 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
})
);

public readonly renderOptions$: Observable<any> = combineLatest([
this.currentLanguage$,
]).pipe(
public readonly renderOptions$: Observable<any> = combineLatest([this.currentLanguage$]).pipe(
map(([language]) => {
const formioTranslations = this.translateService.instant('formioTranslations');

return {
language,
...(typeof formioTranslations === 'object'
? {
language,
i18n: {
[language]: this.stateService.flattenTranslationsObject(formioTranslations),
},
}
language,
i18n: {
[language]: this.stateService.flattenTranslationsObject(formioTranslations),
},
}
: {}),
};
})
Expand All @@ -184,19 +183,23 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
this.loadInitialViewModel();
}

this.focusSubscription = this.focus$.pipe(withLatestFrom(this.change$, this.submission$)).subscribe(([_, changeData, submissionDate]) => {
const dataAtFocus =
!!changeData && !!changeData.data ? JSON.parse(JSON.stringify(changeData.data)) : JSON.parse(JSON.stringify(submissionDate.data));
this.blur$
.pipe(take(1))
.pipe(withLatestFrom(this.change$))
.subscribe(([_, blurData]) => {
const dataEqual = isEqual(dataAtFocus, blurData?.data);
if (!dataEqual) {
this.updateForm.next(true);
}
});
});
this.focusSubscription = this.focus$
.pipe(withLatestFrom(this.change$, this.submission$))
.subscribe(([_, changeData, submissionDate]) => {
const dataAtFocus =
!!changeData && !!changeData.data
? JSON.parse(JSON.stringify(changeData.data))
: JSON.parse(JSON.stringify(submissionDate.data));
this.blur$
.pipe(take(1))
.pipe(withLatestFrom(this.change$))
.subscribe(([_, blurData]) => {
const dataEqual = isEqual(dataAtFocus, blurData?.data);
if (!dataEqual) {
this.updateForm.next(true);
}
});
});

this.updateSubscription = this.updateForm
.pipe(
Expand Down Expand Up @@ -257,7 +260,10 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
return of(response);
}),
catchError(error => {
const message = error instanceof HttpErrorResponse ? this.handleFormError(error) : error as string
const message =
error instanceof HttpErrorResponse
? this.handleFormError(error)
: (error as string);
callback(message ? {message: message, component: null} : null, null);
return EMPTY; // return an empty observable to complete the stream
})
Expand All @@ -271,7 +277,10 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
return of(response);
}),
catchError(error => {
const message = error instanceof HttpErrorResponse ? this.handleFormError(error) : error as string
const message =
error instanceof HttpErrorResponse
? this.handleFormError(error)
: (error as string);
callback(message ? {message: message, component: null} : null, null);
return EMPTY; // return an empty observable to complete the stream
})
Expand All @@ -285,7 +294,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
const formInstance = this.formio.formio;
this.formErrors$.next([]);
if (error.error?.componentErrors) {
const errors = []
const errors = [];
error.error.componentErrors.forEach(componentError => {
const component = formInstance.getComponent(componentError.component);
if (component == null) {
Expand All @@ -294,16 +303,16 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
component?.setCustomValidity(componentError.message);
}
});
this.formErrors$.next(errors)
} else if(error.error?.error) {
this.formErrors$.next(errors);
} else if (error.error?.error) {
const component = formInstance.getComponent(error.error?.component);
if (component == null) {
this.formErrors$.next([error.error.error]);
} else {
component?.setCustomValidity(error.error.error);
}
} else {
return error.message
return error.message;
}
}

Expand Down Expand Up @@ -393,7 +402,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
this.handlePageChange();
this.refreshForm.emit({submission: submission});
this.loading$.next(false);
this.formErrors$.next([])
this.formErrors$.next([]);
},
error: error => {
this.loading$.next(false);
Expand All @@ -415,15 +424,17 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
.pipe(
take(1),
switchMap(([formName, processDefinitionKey, documentId]) =>
this.viewModelService.getViewModelForStartForm(formName, processDefinitionKey, documentId).pipe(
tap(viewModel => {
this.submission$.next({data: viewModel});
this.change$.pipe(take(1)).subscribe(() => {
this.loading$.next(false);
});
this._isWizard = this.formio.form.display === 'wizard';
})
)
this.viewModelService
.getViewModelForStartForm(formName, processDefinitionKey, documentId)
.pipe(
tap(viewModel => {
this.submission$.next({data: viewModel});
this.change$.pipe(take(1)).subscribe(() => {
this.loading$.next(false);
});
this._isWizard = this.formio.form.display === 'wizard';
})
)
)
)
.subscribe();
Expand All @@ -436,7 +447,12 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
switchMap(updating => {
if (!updating) {
this.loading$.next(true);
return combineLatest([this.formName$, this.processDefinitionKey$, this.change$, this.documentId$]).pipe(
return combineLatest([
this.formName$,
this.processDefinitionKey$,
this.change$,
this.documentId$,
]).pipe(
take(1),
switchMap(([formName, processDefinitionKey, change, documentId]) =>
this.viewModelService
Expand All @@ -457,7 +473,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
this.handlePageChange();
this.refreshForm.emit({submission: submission});
this.loading$.next(false);
this.formErrors$.next([])
this.formErrors$.next([]);
},
error: error => {
this.loading$.next(false);
Expand Down

0 comments on commit 282f521

Please sign in to comment.