frontend: streamline color change handling and improve form change detection logic

This commit is contained in:
Carlos Santos 2025-10-01 12:38:00 +02:00
parent bfb1736b35
commit 60ae2adf55

View File

@ -78,7 +78,8 @@ export class ConfigComponent implements OnInit {
{ {
key: 'secondaryColor', key: 'secondaryColor',
label: 'Secondary buttons', label: 'Secondary buttons',
description: 'Colors for secondary elements such as logo and icons backgrounds, borders and other subtle details' description:
'Colors for secondary elements such as logo and icons backgrounds, borders and other subtle details'
}, },
{ {
key: 'accentColor', key: 'accentColor',
@ -243,26 +244,25 @@ export class ConfigComponent implements OnInit {
private checkForChanges(): void { private checkForChanges(): void {
if (!this.initialFormValue) return; if (!this.initialFormValue) return;
const currentFormValue = this.appearanceForm.value; this.handleThemeChange();
const currentBaseTheme = currentFormValue.baseTheme || MeetRoomThemeMode.LIGHT;
this.updateFormChangeState(currentFormValue); this.updateColorChangesState();
this.handleThemeChange(currentBaseTheme); this.updateFormChangeState();
// Update color changes state
this.updateColorChangesState(currentFormValue);
} }
private updateFormChangeState(current: any): void { private updateFormChangeState(): void {
const hasChanges = JSON.stringify(current) !== JSON.stringify(this.initialFormValue); const currentFormValue = this.appearanceForm.value;
const hasChanges = JSON.stringify(currentFormValue) !== JSON.stringify(this.initialFormValue);
this.hasFormChanges.set(hasChanges); this.hasFormChanges.set(hasChanges);
} }
/** /**
* Handles theme change by updating non-customized colors * Handles theme change by updating non-customized colors
*/ */
private handleThemeChange(newBaseTheme: MeetRoomThemeMode): void { private handleThemeChange(): void {
const currentFormValue = this.appearanceForm.value;
const newBaseTheme = currentFormValue.baseTheme || MeetRoomThemeMode.LIGHT;
if (newBaseTheme === this.lastBaseThemeValue) return; if (newBaseTheme === this.lastBaseThemeValue) return;
const newDefaults = this.defaultColors[newBaseTheme]; const newDefaults = this.defaultColors[newBaseTheme];
@ -295,7 +295,8 @@ export class ConfigComponent implements OnInit {
/** /**
* Updates color changes state efficiently * Updates color changes state efficiently
*/ */
private updateColorChangesState(currentFormValue: any): void { private updateColorChangesState(): void {
const currentFormValue = this.appearanceForm.value;
const colorKeys: ColorField[] = this.colorFields.map((field) => field.key); const colorKeys: ColorField[] = this.colorFields.map((field) => field.key);
const hasColorChanges = colorKeys.some((key) => currentFormValue[key] !== this.initialFormValue![key]); const hasColorChanges = colorKeys.some((key) => currentFormValue[key] !== this.initialFormValue![key]);