refactor(dot-page-layout): Enhance DotPageLayoutService

[nicobytes]

Proposed Changes

This pull request refactors the page layout saving logic and improves the template auto-save mechanism in the EditEmaLayoutComponent. The changes modernize the codebase by replacing legacy service dependencies, introduce signals for state management, and enhance reliability when saving templates—especially during component destruction or page navigation.

Service Refactoring and API Improvements

• Replaced the legacy CoreWebService with direct usage of Angular's HttpClient in DotPageLayoutService, streamlining HTTP requests and removing unnecessary abstractions. Also added a new saveLayout method for saving layouts. [1] [2] [3]

Template Auto-Save and State Management

• Refactored EditEmaLayoutComponent to use Angular signals ($lastTemplate, $hasPendingSave) for tracking the latest template and pending save state, replacing the previous use of Subjects and class properties.
• Improved the debounce mechanism for auto-saving templates: reduced debounce time from 5000ms to 1000ms, and switched to concatMap for sequential HTTP requests. The mechanism now accumulates changes and ensures pending saves are handled when the component is destroyed or the user navigates away. [1] [2] [3]

Lifecycle and Reliability Enhancements

• Enhanced ngOnDestroy and page leave logic to ensure any unsaved template changes are immediately persisted, preventing data loss if the component is destroyed during a pending debounce. [1] [2]

Code Quality and Documentation

• Improved documentation and code comments throughout the component, clarifying the purpose and flow of template saving, error handling, and lifecycle hooks for future maintainability. [1] [2] [3]

Minor Improvements

• Updated success message display duration and made minor corrections to comments and error handling for clarity. [1] [2]

Let me know if you want to dive deeper into any of these changes or see how the new signals and debounce logic work in practice!

Checklist

• Tests
• Translations
• Security Implications Contemplated (add notes if applicable)

This PR related: #34145

[Copilot]

Pull request overview

This PR refactors the DotPageLayoutService and EditEmaLayoutComponent to improve modularity and performance. Key changes include migrating from CoreWebService to Angular's native HttpClient, introducing signal-based state management, and enhancing lifecycle handling with DestroyRef and takeUntilDestroyed.

• Replaced CoreWebService with HttpClient for HTTP operations in DotPageLayoutService
• Introduced signal-based state management ($lastTemplate, $hasPendingSave) and improved lifecycle handling in EditEmaLayoutComponent
• Changed debounce time from 5 seconds to 1 second and switched from switchMap to concatMap for sequential request processing

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
core-web/libs/data-access/src/lib/dot-page-layout/dot-page-layout.service.ts	Migrated from CoreWebService to HttpClient and added a new saveLayout method with variant support
core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-layout/edit-ema-layout.component.ts	Refactored to use signals for state management, improved lifecycle handling with DestroyRef, reduced debounce time, and switched to concatMap for sequential save operations

Comments suppressed due to low confidence (4)

core-web/libs/data-access/src/lib/dot-page-layout/dot-page-layout.service.ts:62

• The saveLayout method is missing an explicit return type annotation. While TypeScript can infer it, explicit return types improve code clarity and prevent unintended return type changes. Add the return type Observable<{ layout: DotLayout }> to match the method's behavior.
  core-web/libs/data-access/src/lib/dot-page-layout/dot-page-layout.service.ts:61
• The documentation comment is incorrect. The parameter type is DotTemplateDesigner (not DotLayout as stated), and the return type is not Observable. Update the JSDoc to accurately reflect that this method returns an Observable containing the layout object.
  core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-layout/edit-ema-layout.component.ts:160
• The subscribe method in saveTemplate is using deprecated positional arguments for callbacks. Consider using the object notation with next, error, and complete properties for better readability and consistency with the rest of the codebase (as done in initSaveTemplateDebounce).

            .subscribe(
                () => this.handleSuccessSaveTemplate(),
                (err: HttpErrorResponse) => this.handleErrorSaveTemplate(err),
                () => this.dotRouterService.allowRouteDeactivation()
            );

core-web/libs/data-access/src/lib/dot-page-layout/dot-page-layout.service.ts:75

• The saveLayout method is introduced but not used anywhere in the codebase. If this is intended for future use or as a public API, consider documenting the use case and differences from the save method. If it's not needed yet, consider removing it until there's a concrete use case to avoid maintaining unused code.

[Copilot]

There's a redundant null check. Line 83 already checks if $lastTemplate() is truthy, so the nested check on line 84-85 is unnecessary. The template constant will always have a value within this block.

Suggested change

	const template = this.$lastTemplate();
	if (template) {
	// Save immediately without debounce
	// We don't use takeUntilDestroyed here because the component is already being destroyed
	// and we want the HTTP request to complete
	this.dotPageLayoutService
	.save(this.uveStore.$layoutProps().pageId, {
	...template,
	title: null
	})
	.pipe(take(1))
	.subscribe({
	next: () => {
	this.uveStore.reloadCurrentPage();
	},
	error: (err: HttpErrorResponse) => {
	this.handleErrorSaveTemplate(err);
	},
	complete: () => {
	this.dotRouterService.allowRouteDeactivation();
	}
	});
	}
	const template = this.$lastTemplate()!;
	// Save immediately without debounce
	// We don't use takeUntilDestroyed here because the component is already being destroyed
	// and we want the HTTP request to complete
	this.dotPageLayoutService
	.save(this.uveStore.$layoutProps().pageId, {
	...template,
	title: null
	})
	.pipe(take(1))
	.subscribe({
	next: () => {
	this.uveStore.reloadCurrentPage();
	},
	error: (err: HttpErrorResponse) => {
	this.handleErrorSaveTemplate(err);
	},
	complete: () => {
	this.dotRouterService.allowRouteDeactivation();
	}
	});

[Copilot]

The updateLastTemplate method has a potential issue when $lastTemplate is null. The spread operator on line 133 will spread null, which could cause unexpected behavior. Consider initializing the signal with an empty object or adding a null check before the update.

Suggested change

	this.$lastTemplate.update((prev) => ({ ...prev, ...template }));
	this.$lastTemplate.update((prev) => ({ ...(prev ?? {}), ...template }));

[Copilot]

Reducing the debounce time from 5000ms to 1000ms will result in 5x more save requests to the backend during active editing. This could impact backend performance and increase network traffic. Consider whether this change is necessary, and if so, ensure the backend can handle the increased request frequency.

Suggested change

	export const DEBOUNCE_TIME = 1000;
	export const DEBOUNCE_TIME = 5000;