From b2c3f77966dd16d282938fb907c5dcc29b1f84a3 Mon Sep 17 00:00:00 2001
From: Johannes Eder <ederj@cip.ifi.lmu.de>
Date: Fri, 25 Jun 2021 11:41:44 +0200
Subject: [PATCH] chore(form-error-reporter): implemented destroy in
 form-error-reporter

---
 .../src/lib/event-manager/event-manager.js    |  2 ++
 .../src/utils/form/form-error-reporter.js     | 33 +++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/event-manager/event-manager.js b/frontend/src/lib/event-manager/event-manager.js
index e8121131f..e133ce018 100644
--- a/frontend/src/lib/event-manager/event-manager.js
+++ b/frontend/src/lib/event-manager/event-manager.js
@@ -2,6 +2,8 @@
 export const EVENT_TYPE = {
     CLICK : 'click',
     KEYDOWN : 'keydown',
+    INVALID : 'invalid',
+    CHANGE : 'change',
     //more to be added
 };
 
diff --git a/frontend/src/utils/form/form-error-reporter.js b/frontend/src/utils/form/form-error-reporter.js
index dff3f00d2..8ebd14d5f 100644
--- a/frontend/src/utils/form/form-error-reporter.js
+++ b/frontend/src/utils/form/form-error-reporter.js
@@ -1,5 +1,6 @@
 import { Utility } from '../../core/utility';
 import * as defer from 'lodash.defer';
+import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
 
 const FORM_ERROR_REPORTER_INITIALIZED_CLASS = 'form-error-remover--initialized';
 
@@ -10,12 +11,16 @@ export class FormErrorReporter {
   _element;
   _err;
 
+  _eventManager;
+
   constructor(element) {
     if (!element)
       throw new Error('Form Error Reporter utility needs to be passed an element!');
 
     this._element = element;
 
+    this._eventManager = new EventManager();
+
     if (this._element.classList.contains(FORM_ERROR_REPORTER_INITIALIZED_CLASS))
       return;
 
@@ -24,11 +29,23 @@ export class FormErrorReporter {
 
   start() {
     if (this._element.willValidate) {
-      this._element.addEventListener('invalid', this.report.bind(this));
-      this._element.addEventListener('change', () => { defer(this.report.bind(this)); } );
+      let invalidElementEvent = new EventWrapper(EVENT_TYPE.INVALID, this.report.bind(this), this._element);
+      this._eventManager.registerNewListener(invalidElementEvent);
+
+      let changedElementEvent = new EventWrapper(EVENT_TYPE.CHANGE, () => { defer(this.report.bind(this)); }, this._element);
+      this._eventManager.registerNewListener(changedElementEvent);
     }
   }
 
+  destroy() {
+    this._eventManager.removeAllEventListenersFromUtil();
+
+    this._removeError();
+
+    if(this._element.classList.contains(FORM_ERROR_REPORTER_INITIALIZED_CLASS))
+      this._element.classList.remove(FORM_ERROR_REPORTER_INITIALIZED_CLASS);
+  }
+
   report() {
     const msg = this._element.validity.valid ? null : this._element.validationMessage;
 
@@ -37,10 +54,7 @@ export class FormErrorReporter {
     if (!target)
       return;
 
-    if (this._err && this._err.parentNode) {
-      this._err.parentNode.removeChild(this._err);
-      this._err = undefined;
-    }
+    this._removeError();
 
     if (!msg) {
       target.classList.remove('standalone-field--has-error', 'form-group--has-error');
@@ -65,4 +79,11 @@ export class FormErrorReporter {
       }
     }
   }
+
+  _removeError() {
+    if (this._err && this._err.parentNode) {
+      this._err.parentNode.removeChild(this._err);
+      this._err = undefined;
+    }
+  }
 }