WIP: handle out-of-date record

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

@@ -44,8 +44,8 @@ export class EditorContainerComponent implements OnInit {
     this.route.params
       .subscribe(params => {
         this.apiService.fetchRecord(params['type'], params['recid'])
-          .then(record => {
-            this.record = record['metadata'];
+          .then(json => {
+            this.record = json['metadata'];
             this.config = this.appConfig.getConfigForRecord(this.record);
             return this.apiService.fetchUrl(this.record['$schema']);
           }).then(schema => {

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

@@ -53,33 +53,68 @@ export class EditorToolbarSaveComponent {
 
   onClickSave(event: Object) {
     this.recordCleanupService.cleanup(this.record);
+    this.previewAndSave();
+  }
+
+  previewAndSave() {
     this.http.post(`${environment.baseUrl}/editor/preview`, this.record)
       .subscribe((res: Response) => {
         this.modalService.displayModal({
           title: 'Preview',
           bodyHtml: this.domSanitizer.bypassSecurityTrustHtml('<iframe id="iframe-preview"></iframe>'),
           type: 'confirm',
           onConfirm: () => {
-            this.apiService.saveRecord(this.record).subscribe({
-              next: () => {
-                this.route.params
-                  .subscribe(params => {
-                    window.location.href = `/${params['type']}/${params['recid']}`;
-                });
-              },
-              error: (error) => {
-                console.warn(error.json());
-              },
-          });
+            this.onPreviewConfirm()
           },
           onShow: () => {
             let el = document.getElementById('iframe-preview') as HTMLIFrameElement;
             let doc = el.contentWindow.document;
             doc.open();
             doc.write(res.text());
             doc.close();
-         }
+          }
         });
       });
   }
+
+  onPreviewConfirm(record = undefined, revisionId = undefined) {
+    let _record = record || this.record;
+    this.apiService.saveRecord(_record, revisionId).subscribe({
+      next: () => {
+        this.onSaveRecordSuccess();
+      },
+      error: (error: Response) => {
+        this.onSaveRecordError(error);
+      }
+    });
+  }
+
+  onSaveRecordSuccess() {
+    this.route.params
+      .subscribe(params => {
+        window.location.href = `/${params['type']}/${params['recid']}`;
+      });
+  }
+
+  onSaveRecordError(error) {
+    if (error.status === 412) {
+      // The version of the record on disk has changed
+      // Call API to merge versions
+      this.apiService.rebaseRecord(this.record).subscribe({
+        next: (response: Response) => {
+          let json = response.json();
+          if (json.conflicts) {
+            console.warn('Conflicts found while merging.', json.conflicts);
+          } else {
+            this.onPreviewConfirm(json.merged_json, json.revision_id);
+          }
+        },
+        error: (error) => {
+          console.warn(error.json());
+        }
+      });
+    } else {
+      console.warn(error.json());
+    }
+  }
 }

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

@@ -21,7 +21,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { Headers, Http, RequestOptions } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
@@ -32,6 +32,7 @@ export class ApiService {
   // pid_type and pid_value (see invenio-pidstore)
   private pidType: string;
   private pidValue: string;
+  private revisionId: string;
   // workflow object id (see invenio-workflows)
   private objectId: string;
 
@@ -47,20 +48,34 @@ export class ApiService {
   fetchRecord(pidType: string, pidValue: string): Promise<Object> {
     this.pidType = pidType;
     this.pidValue = pidValue;
-    return this.fetchUrl(this.config.apiUrl(pidType, pidValue));
+    return this.http.get(this.config.apiUrl(pidType, pidValue))
+      .map(res => {
+        this.revisionId = res.headers.get('Etag');
+        return res.json();
+      }).toPromise();
   }
 
   fetchWorkflowObject(objectId: string): Promise<Object> {
     this.objectId = objectId;
     return this.fetchUrl(this.config.holdingPenApiUrl(this.objectId));
   }
 
-  saveRecord(record: Object): Observable<Object> {
+  saveRecord(record: Object, revisionId = undefined): Observable<Object> {
+    let last_revision = revisionId || this.revisionId;
+    let headers = new Headers({
+      'If-Match': last_revision
+    });
+    let options = new RequestOptions({ headers: headers });
     return this.http
-      .put(this.config.apiUrl(this.pidType, this.pidValue), record)
+      .put(this.config.apiUrl(this.pidType, this.pidValue), record, options)
       .map(res => res.json());
   }
 
+  rebaseRecord(record: Object): Observable<Object> {
+    return this.http
+      .post(`http://localhost:5000/api/editor/${this.pidType}/${this.pidValue}/rebase`, record);
+  }
+
   saveWorkflowObject(record: Object): Observable<Object> {
     return this.http
       .put(this.config.holdingPenApiUrl(this.objectId), record)