feat(dbtable): added sync table variant

frontend/src/utils/async-table/async-table.ts

@@ -62,6 +62,7 @@ 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!');
     }
@@ -76,7 +77,7 @@ export class AsyncTable {
     this._eventManager = new EventManager();
 
     if (this._element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) {
-      return false;
+      return null;
     }
       
     // param asyncTableDbHeader
@@ -126,7 +127,7 @@ export class AsyncTable {
       this._element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS);
   }
 
-  _historyListener(historyState) {
+  _historyListener(historyState?) {
     if (!this._active)
       return;
     
@@ -227,7 +228,7 @@ export class AsyncTable {
 
   _gatherTableFilterInputs(tableFilterForm) {
     Array.from(tableFilterForm.querySelectorAll('input')).forEach((input) => {
-      const inputType = input.getAttribute('type');
+      const inputType = (<HTMLElement>input).getAttribute('type');
       if (inputType === 'search') {
         this._tableFilterInputs.search.push(input);
       } else if (['text','date','time','datetime-local'].includes(inputType)) {
@@ -311,7 +312,7 @@ export class AsyncTable {
   _updateFromTableFilter(tableFilterForm) {
     const url = this._serializeTableFilterToURL(tableFilterForm);
     let callback = null;
-    alert(`update from table filter: ${url}`)
+    alert(`ASYNC update from table filter: ${url}`)
 
     const focusedInput = tableFilterForm.querySelector(':focus, :active');
     // focus previously focused input
@@ -341,7 +342,7 @@ export class AsyncTable {
 
     this._debugLog('_serializeTableFilterToURL', Array.from(formData.entries()), url.href);
 
-    const searchParams = new URLSearchParams(Array.from(formData.entries()));
+    const searchParams = new URLSearchParams(<string[][]>Array.from(formData.entries()));
     url.search = searchParams.toString();
 
     this._debugLog('_serializeTableFilterToURL', url.href);
@@ -415,9 +416,9 @@ export class AsyncTable {
   };
 
   // fetches new sorted element from url with params and replaces contents of current element
-  _updateTableFrom(url, callback, isPopState) {
+  _updateTableFrom(url, callback?, isPopState?) {
     url = new URL(url);
-    alert(`update table from: ${url}`)
+    alert(`ASYNC update table from: ${url}`)
 
     const cancelPendingUpdates = (() => {
       this._cancelPendingUpdates.forEach(f => f());
@@ -467,7 +468,7 @@ export class AsyncTable {
     ).finally(() => this._element.classList.remove(ASYNC_TABLE_LOADING_CLASS));
   }
 
-  _debugLog() {}
+  _debugLog(fName, ...args) {}
   //_debugLog(fName, ...args) {
   //   console.log(`[DEBUGLOG] AsyncTable.${fName}`, { args: args, instance: this });
   // }
@@ -478,6 +479,7 @@ export class AsyncTable {
 })
 export class SyncTable extends AsyncTable {
   constructor(element, app) {
+    alert("SYNC table constr!");
     super(element, app);
     alert("h");
   }

frontend/src/utils/exam-correct/exam-correct.js

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
+// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -301,7 +301,7 @@ export class ExamCorrect {
       users: [user],
       status: STATUS.LOADING,
     };
-    if (results && results !== {}) rowInfo.results = results;
+    if (results && results != {}) rowInfo.results = results;
     if (result !== undefined) rowInfo.result = result;
     this._addRow(rowInfo);
 

src/Handler/Utils/Table/Pagination.hs

@@ -1,4 +1,4 @@
--- SPDX-FileCopyrightText: 2022-24 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>,Winnie Ros <winnie.ros@campus.lmu.de>,Steffen Jost <s.jost@fraport.de>
+-- SPDX-FileCopyrightText: 2022-24 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>,Winnie Ros <winnie.ros@campus.lmu.de>,Steffen Jost <s.jost@fraport.de>,David Mosbach <david.mosbach@uniworx.de>
 --
 -- SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -647,9 +647,10 @@ defaultDBSFilterLayout filterWdgt filterEnctype filterAction scrolltable
       , formAction   = Just filterAction
       , formEncoding = filterEnctype
       , formAttrs    = [("class", "table-filter-form"), ("autocomplete", "off")]
-      , formSubmit   = FormAutoSubmit
+      , formSubmit   = FormSubmit --FormAutoSubmit --TODO not for sync-tables
       , formAnchor   = Nothing :: Maybe Text
       }
+    syncButton = [whamlet|<div>|]-- [whamlet|<button>Apply Filter|] --TODO i18n & don't show in async-tables
 
 
 singletonFilter :: Ord k => k -> Prism' (Map k [v]) (Maybe v)
@@ -1643,12 +1644,19 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
     (act, _) -> act
 
   let
+    maxRows = 2
     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","")
+      | otherwise = ("uw-async-table","") --TODO only for small tables
     shortcircuit :: forall void. DBResult m x -> DB void
     shortcircuit res = do
       addCustomHeader HeaderDBTableCanonicalURL =<< toTextUrl (tblLink substPi)
       sendResponse =<< tblLayout . uiLayout =<< dbWidget (Proxy @m) (Proxy @x) res
+  $logErrorS "\a\27[31mTABLE\27[0m" (tshow (fst selector) <> " || row size: " <> tshow (length rows))
   dbInvalidateResult' <=< bool wrapLayout shortcircuit psShortcircuit <=< runDBTable dbtable paginationInput currentKeys . fmap swap $ runWriterT table'
   where
     tblLayout :: forall m'. (MonadHandler m', HandlerSite m' ~ UniWorX) => Widget -> m' Html

templates/table/layout-wrapper.hamlet

@@ -1,8 +1,9 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
-<div ##{wIdent "table-wrapper"} :not (null rows && (dbsEmptyStyle == DBESNoHeading)):uw-async-table uw-hide-columns=#{dbtIdent} data-async-table-db-header=#{toPathPiece HeaderDBTableShortcircuit}>
+<div>
+<div *{selector} ##{wIdent "table-wrapper"} uw-hide-columns=#{dbtIdent} data-async-table-db-header=#{toPathPiece HeaderDBTableShortcircuit}>
   ^{table}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "./frontend/src/js",
+    "outDir": "./static/typescript",
     "module": "ES2022",
     "target": "ES2022",
     "allowJs": true,