EGON-38: Restore last autosaved draft on reload #113

src/app/Presentation/Canvas/modeler.component.spec.ts

@@ -3,15 +3,28 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ModelerComponent } from 'src/app/Presentation/Canvas/modeler.component';
 import { MockProviders } from 'ng-mocks';
 import { ModelerService } from '../../Service/Modeler/modeler.service';
+import { AutosaveService } from '../../Service/Autosave/autosave.service';
 
 describe('ModelerComponent', () => {
   let component: ModelerComponent;
   let fixture: ComponentFixture<ModelerComponent>;
 
+  let autosaveService: AutosaveService;
+
   beforeEach(async () => {
+    autosaveService = jasmine.createSpyObj(AutosaveService.name, [
+      AutosaveService.prototype.loadLatestDraft.name,
+    ]);
+
     await TestBed.configureTestingModule({
       declarations: [ModelerComponent],
-      providers: [MockProviders(ModelerService)],
+      providers: [
+        MockProviders(ModelerService),
+        {
+          provide: AutosaveService,
+          useValue: autosaveService,
+        },
+      ],
     }).compileComponents();
   });
 
@@ -24,4 +37,8 @@ describe('ModelerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should load latest draft', () => {
+    expect(autosaveService.loadLatestDraft).toHaveBeenCalled();
+  });
 });

src/app/Presentation/Canvas/modeler.component.ts

@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 import { ModelerService } from '../../Service/Modeler/modeler.service';
+import { AutosaveService } from '../../Service/Autosave/autosave.service';
 
 @Component({
   selector: 'app-modeler',
   templateUrl: './modeler.component.html',
   styleUrls: ['./modeler.component.scss'],
 })
 export class ModelerComponent implements OnInit {
-  constructor(private modelerService: ModelerService) {}
+  constructor(
+    private modelerService: ModelerService,
+    private autosaveService: AutosaveService
+  ) {}
 
   ngOnInit(): void {
     this.modelerService.postInit();
+    this.autosaveService.loadLatestDraft();
   }
 }

src/app/Presentation/Header/header-buttons.component.html

@@ -66,11 +66,10 @@
   </button>
   <button
     class="headerButton"
-    title="Restore previous draft"
-    *ngIf="hasPreviousDraft()"
-    (click)="restorePreviousDraft()"
+    title="Create a new domain story"
+    (click)="createNewDomainStory()"
   >
-    <span class="material-icons materialIconButton"> restore_page </span>
+    <span class="material-icons materialIconButton"> delete </span>
   </button>
 </div>
 <div *ngIf="isReplay$ | async">

src/app/Presentation/Header/header-buttons.component.ts

@@ -23,6 +23,8 @@ import {
   SNACKBAR_INFO,
 } from '../../Domain/Common/constants';
 import { AutosaveService } from '../../Service/Autosave/autosave.service';
+import { TitleService } from '../../Service/Title/title.service';
+import { RendererService } from '../../Service/Renderer/renderer.service';
 
 @Component({
   selector: 'app-header-buttons',
@@ -42,7 +44,8 @@ export class HeaderButtonsComponent {
     private replayService: ReplayService,
     private exportService: ExportService,
     private importService: ImportDomainStoryService,
-    private autosaveService: AutosaveService,
+    private titleService: TitleService,
+    private renderService: RendererService,
     private snackbar: MatSnackBar
   ) {
     this.isReplay$ = this.replayStateService.replayOn$;
@@ -176,12 +179,9 @@ export class HeaderButtonsComponent {
     }
   }
 
-  hasPreviousDraft(): boolean {
-    return this.autosaveService.loadCurrentDrafts().length > 0;
-  }
-
-  restorePreviousDraft(): void {
-    this.autosaveService.loadDraft(this.autosaveService.loadCurrentDrafts()[0]);
+  createNewDomainStory(): void {
+    this.titleService.reset();
+    this.renderService.reset();
   }
 
   /** Replay functions **/

src/app/Presentation/LabelDictionary/label-dictionary.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatListModule } from '@angular/material/list';
 
 import { MockModule, MockService } from 'ng-mocks';
 import { MaterialModule } from 'src/app/material.module';

src/app/Service/Autosave/autosave.service.ts

@@ -79,6 +79,14 @@ export class AutosaveService {
     this.autosavedDraftsChanged$.next();
   }
 
+  loadLatestDraft() {
+    const drafts = this.readDrafts();
+    if (drafts.length === 0) {
+      return;
+    }
+    this.loadDraft(drafts[0]);
+  }
+
   private updateConfiguration(configuration: AutosaveConfiguration) {
     this.stopTimer();
 

src/app/Service/Renderer/renderer.service.ts

@@ -19,6 +19,10 @@ export class RendererService {
     this.modelerService.getModeler().importCustomElements(domainStory);
   }
 
+  reset(): void {
+    this.renderStory([]);
+  }
+
   importStory(
     domainStory: BusinessObject[],
     configurationChange: boolean,

src/app/Service/Title/title.service.ts

@@ -37,6 +37,10 @@ export class TitleService {
     }
   }
 
+  reset(): void {
+    this.updateTitleAndDescription(INITIAL_TITLE, INITIAL_DESCRIPTION, false);
+  }
+
   private updateTitle(title: string | null): void {
     this.titleSubject.next(title ?? this.titleSubject.value);
     document.title = title ?? this.titleSubject.value + ' - egon.io';