Close popups with esc (#610)

* Add keydown handler to close popups on escape

* Ensure input is saved even after less than 600ms

* Cast event inline

Co-authored-by: Julian Schmidt <julian.schmidt@student.hpi.de>

frontend/src/app/pages/exercises/exercise/shared/exercise-map/utility/ol-map-manager.ts

@@ -454,6 +454,12 @@ export class OlMapManager {
         this.olMap.getView().on(['change:resolution', 'change:center'], () => {
             this.changePopup$.next(undefined);
         });
+
+        this.openLayersContainer.addEventListener('keydown', (event) => {
+            if ((event as KeyboardEvent).key === 'Escape') {
+                this.changePopup$.next(undefined);
+            }
+        });
     }
 
     private registerDropHandler(translateInteraction: TranslateInteraction) {

frontend/src/app/shared/directives/app-save-on-typing.directive.ts

@@ -2,7 +2,7 @@ import type { OnDestroy } from '@angular/core';
 import { Directive, EventEmitter, Output } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
 
 /**
  * This directive should be used when values should be autosaved while the user types into the input.
@@ -29,19 +29,43 @@ export class AppSaveOnTypingDirective implements OnDestroy {
     destroy$ = new Subject<void>();
     @Output() readonly appSaveOnTyping: EventEmitter<any> = new EventEmitter();
 
+    private lastInputValue?: any;
+    private lastInputValueWasValid = false;
+    private lastSubmittedValue?: any;
+
     constructor(ngModel: NgModel) {
         ngModel.update
             .pipe(
+                tap((value) => {
+                    this.lastInputValue = value;
+                    this.lastInputValueWasValid = ngModel.valid === true;
+                }),
                 // Keeping a key (like backspace) pressed for a more than a certain threshold will result in many key presses
                 // The debounceTime should be above that threshold to not register the initial keypress as the first update
                 debounceTime(600),
                 filter(() => ngModel.valid === true),
                 takeUntil(this.destroy$)
             )
-            .subscribe(this.appSaveOnTyping);
+            .subscribe((value) => {
+                if (this.lastSubmittedValue === value) {
+                    // We don't want to emit the same value twice in a row
+                    return;
+                }
+                this.lastSubmittedValue = value;
+                this.appSaveOnTyping.next(value);
+            });
     }
 
     ngOnDestroy() {
+        if (
+            this.lastInputValueWasValid &&
+            this.lastInputValue !== this.lastSubmittedValue
+        ) {
+            // The last input value was not submitted yet
+            // We want to emit this last value before the appSaveOnTyping gets
+            // unsubscribed from during the destruction of the parent component
+            this.appSaveOnTyping.next(this.lastInputValue);
+        }
         this.destroy$.next();
     }
 }