diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e154ed5..4c6ae9b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,5 +1,6 @@ import { Routes } from '@angular/router'; import { languageGuard } from './guards/language.guard'; +import { projectEditorDirtyGuard } from './features/project-editor/guards/project-editor-dirty.guard'; import { environment } from '../environments/environment'; // Core routes (same across all brands) @@ -41,7 +42,8 @@ const coreRoutes: Routes = [ }, { path: 'edit/:section', - loadComponent: () => import('./features/project-editor/pages/project-editor-page.component').then(m => m.ProjectEditorPageComponent) + loadComponent: () => import('./features/project-editor/pages/project-editor-page.component').then(m => m.ProjectEditorPageComponent), + canDeactivate: [projectEditorDirtyGuard] }, { path: 'edit', diff --git a/src/app/features/project-editor/guards/project-editor-dirty.guard.ts b/src/app/features/project-editor/guards/project-editor-dirty.guard.ts new file mode 100644 index 0000000..eacee89 --- /dev/null +++ b/src/app/features/project-editor/guards/project-editor-dirty.guard.ts @@ -0,0 +1,12 @@ +import { inject } from '@angular/core'; +import { CanDeactivateFn } from '@angular/router'; +import { ProjectEditorFacade } from '../facade/project-editor.facade'; +import { ProjectEditorPageComponent } from '../pages/project-editor-page.component'; + +export const projectEditorDirtyGuard: CanDeactivateFn = () => { + const facade = inject(ProjectEditorFacade); + if (!facade.dirty()) { + return true; + } + return window.confirm('You have unsaved changes. Leave anyway?'); +}; diff --git a/src/app/features/project-editor/pages/project-editor-page.component.ts b/src/app/features/project-editor/pages/project-editor-page.component.ts index 3dbb9a7..31e54a7 100644 --- a/src/app/features/project-editor/pages/project-editor-page.component.ts +++ b/src/app/features/project-editor/pages/project-editor-page.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostListener, effect, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { toSignal } from '@angular/core/rxjs-interop'; import { map } from 'rxjs/operators'; @@ -68,4 +68,12 @@ export class ProjectEditorPageComponent { } }); } + + @HostListener('window:beforeunload', ['$event']) + warnBeforeUnload(event: BeforeUnloadEvent): void { + if (this.facade.dirty()) { + event.preventDefault(); + event.returnValue = ''; + } + } }