From 22f5739968838dfea6007efd46b4ef5abe1fe4ad Mon Sep 17 00:00:00 2001
From: David Mosbach <mosbach@cip.ifi.lmu.de>
Date: Sat, 22 Jun 2024 22:34:20 +0000
Subject: [PATCH] chore(frontend): enabled submit button after filter event

---
 frontend/src/utils/async-table/async-table.ts | 73 ++++++++++++++-----
 src/Handler/Utils/Table/Pagination.hs         |  5 +-
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/frontend/src/utils/async-table/async-table.ts b/frontend/src/utils/async-table/async-table.ts
index 617c88d72..78d3fe5a0 100644
--- a/frontend/src/utils/async-table/async-table.ts
+++ b/frontend/src/utils/async-table/async-table.ts
@@ -27,10 +27,25 @@ const ASYNC_TABLE_LOADING_CLASS = 'async-table--loading';
 
 const ASYNC_TABLE_FILTER_FORM_SELECTOR = '.table-filter-form';
 
-@Utility({
-  selector: '[uw-async-table]',
-})
-export class AsyncTable {
+class FilterInputs {
+  search : any[];
+  input: any[];
+  change: any[];
+  select: any[];
+
+  constructor() {
+    this.search = [];
+    this.input = [];
+    this.change = [];
+    this.select = [];
+  }
+
+  entries() {
+    return this.search.concat(this.input.concat(this.change.concat(this.select)));
+  }
+
+}
+abstract class TableUtil {
 
   _element;
   _app;
@@ -48,12 +63,8 @@ export class AsyncTable {
 
   _cancelPendingUpdates = [];
 
-  _tableFilterInputs = {
-    search: [],
-    input: [],
-    change: [],
-    select: [],
-  };
+  _tableFilterInputs = new FilterInputs();
+    
   _ignoreRequest = false;
 
   _windowStorage;
@@ -62,13 +73,12 @@ export class AsyncTable {
   _active = true;
 
   constructor(element, app) {
-    alert("async table constructor");
     if (!element) {
-      throw new Error('Async Table utility cannot be setup without an element!');
+      throw new Error('Table utility cannot be setup without an element!');
     }
 
     if (!app) {
-      throw new Error('Async Table utility cannot be setup without an app!');
+      throw new Error('Table utility cannot be setup without an app!');
     }
 
     this._element = element;
@@ -87,7 +97,7 @@ export class AsyncTable {
 
     const table = this._element.querySelector('table, .div__course-teaser');
     if (!table) {
-      throw new Error('Async Table utility needs a <table> or a <div .div__course-teaser> in its element!');
+      throw new Error('Table utility needs a <table> or a <div .div__course-teaser> in its element!');
     }
 
     const rawTableId = table.id;
@@ -95,7 +105,7 @@ export class AsyncTable {
     this._asyncTableId = rawTableId.replace(this._cssIdPrefix, '');
 
     if (!this._asyncTableId) {
-      throw new Error('Async Table cannot be set up without an ident!');
+      throw new Error('Table cannot be set up without an ident!');
     }
 
     this._windowStorage = new StorageManager([ASYNC_TABLE_STORAGE_KEY, this._asyncTableId], ASYNC_TABLE_STORAGE_VERSION, { location: LOCATION.WINDOW });
@@ -104,7 +114,7 @@ export class AsyncTable {
     // find scrolltable wrapper
     this._scrollTable = this._element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR);
     if (!this._scrollTable) {
-      throw new Error('Async Table cannot be set up without a scrolltable element!');
+      throw new Error('Table cannot be set up without a scrolltable element!');
     }
 
     this._processStorage();
@@ -474,14 +484,34 @@ export class AsyncTable {
   // }
 }
 
+@Utility({
+  selector: '[uw-async-table]',
+})
+export class AsyncTable extends TableUtil {
+
+    constructor(element, app) {
+    super(element, app);
+
+    // remove submit button
+    this._element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR)
+                 .querySelector("button[type='submit']")
+                 .remove();
+  }
+}
+
 @Utility({
   selector: '[uw-sync-table]',
 })
-export class SyncTable extends AsyncTable {
+export class SyncTable extends TableUtil {
+
   constructor(element, app) {
-    alert("SYNC table constr!");
     super(element, app);
-    alert("h");
+
+    const tableFilterForm: HTMLFormElement = this._element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR);
+    toggleFormButton(tableFilterForm, true);
+    this._tableFilterInputs.entries().forEach((input) => {
+      input.addEventListener('change', _ => toggleFormButton(tableFilterForm, false));
+    });
   }
 
   _addTableFilterEventListeners(_) {}
@@ -497,3 +527,8 @@ function findCssIdPrefix(id) {
   }
   return '';
 }
+
+function toggleFormButton(form : HTMLFormElement, disabled : boolean) {
+  const btn = form.querySelector("button[type='submit']");
+  disabled ? btn.setAttribute('disabled', 'null') : btn.removeAttribute('disabled');
+}
diff --git a/src/Handler/Utils/Table/Pagination.hs b/src/Handler/Utils/Table/Pagination.hs
index eceec3e26..9bf324887 100644
--- a/src/Handler/Utils/Table/Pagination.hs
+++ b/src/Handler/Utils/Table/Pagination.hs
@@ -647,7 +647,7 @@ defaultDBSFilterLayout filterWdgt filterEnctype filterAction scrolltable
       , formAction   = Just filterAction
       , formEncoding = filterEnctype
       , formAttrs    = [("class", "table-filter-form"), ("autocomplete", "off")]
-      , formSubmit   = FormSubmit --FormAutoSubmit --TODO not for sync-tables
+      , formSubmit   = FormSubmit --FormAutoSubmit --TODO not for sync-tables --FormCustomSubmit MsgFilterSubmit
       , formAnchor   = Nothing :: Maybe Text
       }
 
@@ -1646,12 +1646,13 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
 
   let
     maxRows = fromIntegral @Natural @Int $ fromMaybe 0 appAsyncTableMaxRows
+    isSync = length rows > maxRows
     wrapLayout :: DBResult m x -> DB (DBResult m x)
     wrapLayout = dbHandler (Proxy @m) (Proxy @x) $ (\table -> $(widgetFile "table/layout-wrapper")) . uiLayout
     selector :: (Text, Text)
     selector
       | null rows && (dbsEmptyStyle == DBESNoHeading) = ("","")
-      | length rows > maxRows = ("uw-sync-table","")
+      | isSync = ("uw-sync-table","")
       | otherwise = ("uw-async-table","")
     shortcircuit :: forall void. DBResult m x -> DB void
     shortcircuit res = do