Bug: multiple changes in quick succession on new entry cause exception (part 2) (#1761)

* Properly wait for saving to complete

* Improve/reorganise editor styles.

Author: myieye

src/angular-app/languageforge/lexicon/editor/_editor.scss

@@ -4,6 +4,35 @@
 
 @import "../../../../Site/views/languageforge/theme/default/sass/variables";
 
+#lexAppEditView {
+  display: flex;
+  justify-content: center;
+  .container {
+    margin: 0;
+  }
+}
+
+.container-sticky {
+  position: sticky;
+  top: 0px;
+  z-index: 30;
+  margin-bottom: 10px;
+  background: white;
+}
+
+.container-scroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - 240px);
+  }
+
+  @include media-breakpoint-down(sm) {
+    height: calc(100vh - 215px);
+  }
+}
+
 .lexAppToolbar {
   border: 1px solid $line-color;
   margin: 0 0 5px;

src/angular-app/languageforge/lexicon/editor/comment/lex-comments-view.scss

@@ -3,34 +3,6 @@
 @import "../../../../../../node_modules/bootstrap/scss/variables";
 @import "../../../../../../node_modules/bootstrap/scss/mixins";
 
-#lexAppEditView {
-  display: flex;
-  justify-content: center;
-  .container {
-    margin: 0;
-  }
-}
-
-.container-sticky {
-  position: sticky;
-  top: 0px;
-  z-index: 3;
-  margin-bottom: 10px;
-}
-
-.container-scroll {
-  overflow-y: scroll;
-  overflow-x: hidden;
-
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 230px);
-  }
-
-  @include media-breakpoint-down(sm) {
-    height: calc(100vh - 215px);
-  }
-}
-
 .comments-right-panel {
   color: $Eden;
   font-size: 14px;

src/angular-app/languageforge/lexicon/editor/editor.component.ts

@@ -33,7 +33,7 @@ import { LexiconProject } from '../shared/model/lexicon-project.model';
 import { LexOptionList } from '../shared/model/option-list.model';
 import { FieldControl } from './field/field-control.model';
 import { OfflineCacheUtilsService } from '../../../bellows/core/offline/offline-cache-utils.service';
-import { IPromise } from 'angular';
+import { IDeferred } from 'angular';
 
 class Show {
   more: () => void;
@@ -78,7 +78,7 @@ export class LexiconEditorController implements angular.IController {
 
   private pristineEntry: LexEntry = new LexEntry();
   private warnOfUnsavedEditsId: string;
-  private saving$: IPromise<void>;
+  private saving$: IDeferred<void>;
 
   static $inject = ['$filter', '$interval',
     '$q', '$scope',
@@ -360,9 +360,11 @@ export class LexiconEditorController implements angular.IController {
     const isNewEntry = LexiconEditorController.entryIsNew(this.currentEntry);
     if (isNewEntry) {
       // We have to wait for the initial save to complete so that we have
-      await this.saving$;
+      await this.saving$.promise;
     }
 
+    this.saving$ = this.$q.defer<void>();
+
     // `doSetEntry` is mainly used for when the save button is pressed, that is when the user is saving the current
     // entry and is NOT going to a different entry (as is the case with editing another entry.
     let newEntryTempId: string;
@@ -461,6 +463,7 @@ export class LexiconEditorController implements angular.IController {
     } else {
       successCallback();
     }
+    this.saving$.resolve();
   }
 
   async editEntryAndScroll(id: string): Promise<void> {