add local stroge backup

* Fixes #120. Saves current version of data before window/tab is
closed by the its url from where it was fetched earlier. And check
before fetching a data if it exists on local stroge. Finally clear the
data if it is save successfully.

* Refactors api.service.

package.json

@@ -39,6 +39,7 @@
     "font-awesome": "^4.7.0",
     "lodash": "4.17.2",
     "ng2-json-editor": "~0.6.0",
+    "ng2-webstorage": "^1.5.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { APP_BASE_HREF } from '@angular/common';
 import { HttpModule } from '@angular/http';
 
 import { JsonEditorModule } from 'ng2-json-editor';
+import { Ng2Webstorage } from 'ng2-webstorage';
 
 import { AppComponent } from './app.component';
 import { EditorHoldingPenComponent } from './editor-holdingpen';
@@ -31,7 +32,8 @@ import { AppConfigService } from './app-config.service';
     BrowserModule,
     HttpModule,
     routing,
-    JsonEditorModule
+    JsonEditorModule,
+    Ng2Webstorage
   ],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/editor' },

src/app/editor-container/editor-container.component.ts

@@ -24,7 +24,6 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ApiService } from '../shared/services';
-
 import { AppConfigService } from '../app-config.service';
 
 @Component({
@@ -47,7 +46,11 @@ export class EditorContainerComponent implements OnInit {
       .subscribe(params => {
         this.apiService.fetchRecord(params['type'], params['recid'])
           .then(record => {
-            this.record = record['metadata'];
+            // load record.metadata or record (if it is from local storage)
+            this.record = record['metadata'] || record;
+            window.onbeforeunload = () => {
+              this.apiService.saveDataLocally(this.record);
+            };
             this.config = this.appConfig.getConfigForRecord(this.record);
             return this.apiService.fetchUrl(this.record['$schema']);
           }).then(schema => {

src/app/editor-holdingpen-toolbar/editor-holdingpen-toolbar-save/editor-holdingpen-toolbar-save.component.ts

@@ -34,7 +34,7 @@ export class EditorHoldingPenToolbarSaveComponent {
   constructor(private apiService: ApiService) { }
 
   onClickSave(event: Object) {
-    this.apiService.saveWorkflowObject(this.workflowObject)
+    this.apiService.saveData(this.workflowObject)
       .subscribe(resp => {
         window.location.href = `/holdingpen/${this.workflowObject.id}`;
       });

src/app/editor-holdingpen/editor-holdingpen.component.ts

@@ -23,9 +23,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { ApiService } from '../shared/services';
 import 'rxjs/add/operator/mergeMap';
 
+import { ApiService } from '../shared/services';
 import { AppConfigService } from '../app-config.service';
 
 @Component({
@@ -49,12 +49,17 @@ export class EditorHoldingPenComponent implements OnInit {
         this.apiService.fetchWorkflowObject(params['objectid'])
           .then(workflowObject => {
             this.workflowObject = workflowObject;
+            window.onbeforeunload = () => {
+              this.apiService.saveDataLocally(this.workflowObject);
+            };
             this.config = this.appConfig.getConfigForRecord(this.workflowObject['metadata']);
             return this.apiService.fetchUrl(this.workflowObject['metadata']['$schema']);
           }).then(schema => {
             this.schema = schema;
+
           }).catch(error => console.error(error));
       });
+
   }
 
   onRecordChange(record: Object) {

src/app/editor-toolbar/editor-toolbar-save/editor-toolbar-save.component.ts

@@ -54,7 +54,7 @@ export class EditorToolbarSaveComponent {
           bodyHtml: this.domSanitizer.bypassSecurityTrustHtml('<iframe id="iframe-preview"></iframe>'),
           type: 'confirm',
           onConfirm: () => {
-            this.apiService.saveRecord(this.record).subscribe({
+            this.apiService.saveData(this.record).subscribe({
               next: () => {
                 this.route.params
                   .subscribe(params => {

src/app/shared/services/api.service.ts

@@ -22,48 +22,51 @@
 
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
+
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
+
 import { AppConfigService } from '../../app-config.service';
+import { LocalStorageService } from 'ng2-webstorage';
 
 @Injectable()
 export class ApiService {
-  // pid_type and pid_value (see invenio-pidstore)
-  private pidType: string;
-  private pidValue: string;
-  // workflow object id (see invenio-workflows)
-  private objectId: string;
 
-  constructor(private http: Http, private config: AppConfigService) {
-  }
+  private dataUrl: string;
+
+  constructor(private http: Http,
+    private config: AppConfigService,
+    private localStorageService: LocalStorageService) { }
 
   fetchUrl(url: string): Promise<Object> {
     return this.http.get(url)
       .map(res => res.json())
       .toPromise();
   }
 
+  private fetchFromUrlOrLocalStorage(url: string): Promise<Object> {
+    this.dataUrl = url;
+    let localCopy = this.localStorageService.retrieve(url);
+    return localCopy ? Promise.resolve(localCopy) : this.fetchUrl(url);
+  }
+
   fetchRecord(pidType: string, pidValue: string): Promise<Object> {
-    this.pidType = pidType;
-    this.pidValue = pidValue;
-    return this.fetchUrl(this.config.apiUrl(pidType, pidValue));
+    return this.fetchFromUrlOrLocalStorage(this.config.apiUrl(pidType, pidValue));
   }
 
   fetchWorkflowObject(objectId: string): Promise<Object> {
-    this.objectId = objectId;
-    return this.fetchUrl(this.config.holdingPenApiUrl(this.objectId));
+    return this.fetchFromUrlOrLocalStorage(this.config.holdingPenApiUrl(objectId));
   }
 
-  saveRecord(record: Object): Observable<Object> {
+  saveData(data: Object): Observable<Object> {
+    this.localStorageService.clear(this.dataUrl);
     return this.http
-      .put(this.config.apiUrl(this.pidType, this.pidValue), record)
+      .put(this.dataUrl, data)
       .map(res => res.json());
   }
 
-  saveWorkflowObject(record: Object): Observable<Object> {
-    return this.http
-      .put(this.config.holdingPenApiUrl(this.objectId), record)
-      .map(res => res.json());
+  saveDataLocally(data: Object) {
+    this.localStorageService.store(this.dataUrl, data);
   }
 }