added async submit for textConcatType (#8)

* added async submit for textConcatType * added async submit on input for TextType * debounce is now regarded on input so the request is only send after last input and not on each single input * v1.7.0 * added compiled js * removed unused line; fixed clicked button in formdata on async submit
heimrichhannot · Nov 5, 2020 · 10b5f03 · 10b5f03
1 parent fa6ee69
commit 10b5f03
Show file tree

Hide file tree

Showing 10 changed files with 1,264 additions and 1,186 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.6.0] - 2020-10-29
+- added async submit for `TextConcatType` to update list while typing in field
+- added async submit for `TextType` to update list while typing in field
+
 ## [1.5.4] - 2020-10-08
 - fixed reviseOptions placeholder bug
 

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "Heimrich & Hannot GmbH <digitales@heimrich-hannot.de>",
   "license": "LGPL-3.0-or-later",
   "dependencies": {
-    "@hundh/contao-filter-bundle": "^1.5",
+    "@hundh/contao-filter-bundle": "^1.7",
     "@hundh/contao-utils-bundle": "^1.0"
   },
   "devDependencies": {

diff --git a/src/Filter/Type/TextConcatType.php b/src/Filter/Type/TextConcatType.php
@@ -123,4 +123,23 @@ public function getDefaultOperator(FilterConfigElementModel $element)
     {
         return DatabaseUtil::OPERATOR_LIKE;
     }
+
+    /**
+     * @return array
+     */
+    public function getOptions(FilterConfigElementModel $element, FormBuilderInterface $builder, bool $triggerEvent = true)
+    {
+        $options = parent::getOptions($element, $builder, $triggerEvent);
+        $builderOptions = $builder->getOptions();
+        $filter = $builderOptions['filter'];
+        $filterConfig = $filter->getFilter();
+
+        if ($element->submitOnInput && $filterConfig['asyncFormSubmit']) {
+            $options['attr']['data-submit-on-input'] = '1';
+            $options['attr']['data-threshold'] = $element->threshold;
+            $options['attr']['data-debounce'] = $element->debounce;
+        }
+
+        return $options;
+    }
 }
diff --git a/src/Filter/Type/TextType.php b/src/Filter/Type/TextType.php
@@ -49,4 +49,20 @@ public function getDefaultOperator(FilterConfigElementModel $element)
     {
         return DatabaseUtil::OPERATOR_LIKE;
     }
+
+    public function getOptions(FilterConfigElementModel $element, FormBuilderInterface $builder, bool $triggerEvent = true)
+    {
+        $options = parent::getOptions($element, $builder, $triggerEvent);
+        $builderOptions = $builder->getOptions();
+        $filter = $builderOptions['filter'];
+        $filterConfig = $filter->getFilter();
+
+        if ($element->submitOnInput && $filterConfig['asyncFormSubmit']) {
+            $options['attr']['data-submit-on-input'] = '1';
+            $options['attr']['data-threshold'] = $element->threshold;
+            $options['attr']['data-debounce'] = $element->debounce;
+        }
+
+        return $options;
+    }
 }
diff --git a/src/Resources/contao/dca/tl_filter_config_element.php b/src/Resources/contao/dca/tl_filter_config_element.php
diff --git a/src/Resources/contao/languages/de/tl_filter_config_element.php b/src/Resources/contao/languages/de/tl_filter_config_element.php
diff --git a/src/Resources/contao/languages/en/tl_filter_config_element.php b/src/Resources/contao/languages/en/tl_filter_config_element.php
diff --git a/src/Resources/npm-package/js/contao-filter-bundle.js b/src/Resources/npm-package/js/contao-filter-bundle.js
@@ -52,18 +52,52 @@ class FilterBundle {
             function(element, event) {
                 event.preventDefault();
 
-                let buttonName = element.form.name + '[submit]',
-                    clickedButton = document.createElement('div');
-                clickedButton.setAttribute('name', buttonName);
-
-                FilterBundle.asyncSubmit(element.form, clickedButton);
+                FilterBundle.initAsyncFormSubmit(element);
             });
 
         EventUtil.addDynamicEventListener('click', '.mod_filter form[data-async] button[type="submit"]',
             function(element, event) {
                 event.preventDefault();
                 FilterBundle.asyncSubmit(element.form, element);
             });
+
+        FilterBundle.initAsyncSubmitOnInput();
+    }
+
+    static initAsyncSubmitOnInput() {
+        let timeout;
+
+        EventUtil.addDynamicEventListener('input',
+            '.mod_filter form[data-async] input[data-submit-on-input], .mod_filter form[data-async] [data-submit-on-input] input',
+            function(element, event) {
+                event.preventDefault();
+
+                if(element.dataset.threshold > element.value.length) {
+                    return;
+                }
+
+                clearTimeout(timeout);
+                timeout = setTimeout(function() {
+                    element.form.classList.add('keep-form');
+                    FilterBundle.initAsyncFormSubmit(element);
+                }, element.dataset.debounce);
+        });
+
+        EventUtil.addDynamicEventListener('focusout',
+            '.mod_filter form[data-async] input[data-submit-on-input], .mod_filter form[data-async] [data-submit-on-input] input',
+            function(element, event) {
+                element.form.classList.remove('keep-form');
+        });
+    }
+
+
+    static initAsyncFormSubmit(element) {
+        let buttonName = element.form.name + '[submit]',
+            clickedButton = document.createElement('div');
+
+        clickedButton.dataset.name = buttonName;
+
+        FilterBundle.asyncSubmit(element.form, clickedButton);
     }
 
     static asyncSubmit(form, clickedButton = null) {
@@ -73,10 +107,9 @@ class FilterBundle {
             config = FilterBundle.getConfig(form);
 
         if (clickedButton !== null) {
-            data.append(clickedButton.getAttribute('name'), '');
+            data.append(clickedButton.dataset.name, '');
         }
 
-
         if ('get' === method || 'GET' === method) {
             AjaxUtil.get(action, data, config);
         } else {
@@ -112,7 +145,9 @@ class FilterBundle {
 
         let form = document.querySelector('form[name="' + response.filterName + '"]');
 
-        FilterBundle.replaceFilterForm(form, response.filter);
+        if(!form.classList.contains('keep-form')) {
+            FilterBundle.replaceFilterForm(form, response.filter);
+        }
 
         form.setAttribute('data-response', request.response);
         form.setAttribute('data-submit-success', 1);
@@ -126,7 +161,7 @@ class FilterBundle {
 
         form.setAttribute('data-submit-success', 0);
         form.setAttribute('data-response', '');
-        form.querySelectorAll('input:not(.disabled), button[type="submit"]').forEach((elem) => {
+        form.querySelectorAll('input:not(.disabled):not([data-submit-on-input="1"]):not([type="hidden"]), button[type="submit"]').forEach((elem) => {
             elem.disabled = true;
         });
 

diff --git a/src/Resources/npm-package/package.json b/src/Resources/npm-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hundh/contao-filter-bundle",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "This package contains the frontend assets of the composer bundle heimrichhannot/contao-filter-bundle.",
   "main": "js/contao-filter-bundle.js",
   "scripts": {

diff --git a/src/Resources/public/js/contao-filter-bundle.js b/src/Resources/public/js/contao-filter-bundle.js