Add filter input in wizard

* A click on a wizard item adds the filter to the input field. There it could be extended. * Double click on a wizard item applies the filter immediately Relates: #12
christophlehmann · Oct 15, 2022 · 75f86b2 · 75f86b2
1 parent c82db9d
commit 75f86b2
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 12 deletions.
diff --git a/Classes/Hooks/PageRendererRenderPreProcess.php b/Classes/Hooks/PageRendererRenderPreProcess.php
@@ -24,6 +24,8 @@ public function addRequireJsModule(array $params, PageRenderer $pageRenderer): v
             $pageRenderer->addInlineLanguageLabelArray([
                 'pagetreefilter_wizard_title' => $this->getLanguageService()->sL($labelPrefix . 'wizard_title'),
                 'pagetreefilter_button_title' => $this->getLanguageService()->sL($labelPrefix . 'filter_button_title'),
+                'pagetreefilter_wizard_submit_button' => $this->getLanguageService()->sL($labelPrefix . 'wizard_submit_button'),
+                'pagetreefilter_wizard_input_placeholder' => $this->getLanguageService()->sL($labelPrefix . 'wizard_input_placeholder'),
             ]);
         }
     }

diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
@@ -4,27 +4,27 @@
 		<header/>
 		<body>
 			<trans-unit id="wizard_title" resname="wizard_title">
-				<source>Pagetree Filter</source>
 				<target>Seitenbaum-Filter</target>
 			</trans-unit>
 			<trans-unit id="wizard_hide_unused_elements" resname="wizard_hide_unused_elements">
-				<source>Hide unused elements</source>
 				<target>Unbenutzte Elemente ausblenden</target>
 			</trans-unit>
 			<trans-unit id="wizard_tab_records" resname="wizard_tab_records">
-				<source>Records</source>
 				<target>Datensätze</target>
 			</trans-unit>
 			<trans-unit id="wizard_error_message" resname="wizard_error_message">
-				<source>Nothing found. Probably the page id was configured incorrectly.</source>
 				<target>Nichts gefunden. Wahrscheinlich ist die Seiten-Id falsch konfiguriert.</target>
 			</trans-unit>
+			<trans-unit id="wizard_submit_button" resname="wizard_submit_button">
+				<target>Anwenden</target>
+			</trans-unit>
+			<trans-unit id="wizard_input_placeholder" resname="wizard_input_placeholder">
+				<target>Filter eingeben</target>
+			</trans-unit>
 			<trans-unit id="filter_error" resname="filter_error">
-				<source>Filter erroneous</source>
 				<target>Filter fehlerhaft</target>
 			</trans-unit>
 			<trans-unit id="filter_button_title" resname="filter_button_title">
-				<source>Filter tree for content elements and records</source>
 				<target>Baum nach Inhaltselementen und Datensätzen filtern</target>
 			</trans-unit>
 		</body>

diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -15,6 +15,12 @@
 			<trans-unit id="wizard_error_message" resname="wizard_error_message">
 				<source>Nothing found. Probably the page id was configured incorrectly.</source>
 			</trans-unit>
+			<trans-unit id="wizard_submit_button" resname="wizard_submit_button">
+				<source>Apply</source>
+			</trans-unit>
+			<trans-unit id="wizard_input_placeholder" resname="wizard_input_placeholder">
+				<source>Enter filter</source>
+			</trans-unit>
 			<trans-unit id="filter_error" resname="filter_error">
 				<source>Filter erroneous</source>
 			</trans-unit>

diff --git a/Resources/Public/Css/Backend/pagetreefilter.css b/Resources/Public/Css/Backend/pagetreefilter.css
@@ -13,4 +13,12 @@
 .pagetreefilter-wizard .modal-body {
     background-color: #fafafa;
     padding: 0;
+}
+
+.pagetreefilter-wizard .modal-footer {
+    display: inline-block;
+}
+
+.pagetreefilter-wizard .modal-footer button {
+    width: 100%;
 }
diff --git a/Resources/Public/JavaScript/PageTreeFilter.js b/Resources/Public/JavaScript/PageTreeFilter.js
@@ -31,14 +31,32 @@ require([], function () {
                 let links = document.querySelectorAll('a.pagetreefilter');
                 links.forEach((button) => {
                     button.addEventListener('click', () => {
-                        applyFilter(button.getAttribute('data-pagetreefilter'));
-                        TYPO3.Modal.dismiss()
+                        let filterInput = document.querySelector('.pagetreefilter-wizard #pagetreefilter-filter');
+                        let newFilter = button.getAttribute('data-pagetreefilter');
+                        if (filterInput.value === newFilter) {
+                            applyFilter();
+                        }
+                        filterInput.value = newFilter;
+                        filterInput.focus();
                     });
                 });
                 toggleHideUnusedElements();
-                document.querySelector('#pagetreefilterhideunused').addEventListener('click', (event) => {
+                document.querySelector('#pagetreefilterhideunused').addEventListener('click', () => {
                     toggleHideUnusedElements()
                 });
+
+                let footer = `  
+                    <div class="t3js-modal-footer modal-footer">
+                        <form id="pagetreefilter-form">
+                            <div class="row">
+                                <div class="col-lg-9"><input type="text" class="form-control" id="pagetreefilter-filter" placeholder="` + TYPO3.lang.pagetreefilter_wizard_input_placeholder + `"></div>
+                                <div class="col-lg-3"><button class="btn btn-primary"><span>` + TYPO3.lang.pagetreefilter_wizard_submit_button + `</span></button></div>
+                            </div>
+                        </form>
+                    </div>
+                `
+                document.querySelector('.pagetreefilter-wizard .modal-content').insertAdjacentHTML('beforeend', footer);
+                document.querySelector('#pagetreefilter-form').addEventListener('submit', applyFilter);
             },
             content: TYPO3.settings.ajaxUrls.pagetreefilter_fetch_filter,
             additionalCssClasses: ['pagetreefilter-wizard']
@@ -79,10 +97,14 @@ require([], function () {
         }
     }
 
-    function applyFilter(filter)
-    {
+    function applyFilter(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        let filter = document.querySelector('#pagetreefilter-filter').value;
         document.querySelector('#typo3-pagetree .search-input').value = filter;
-        document.querySelector('#typo3-pagetree-tree').filter(filter)
+        document.querySelector('#typo3-pagetree-tree').filter(filter);
+        TYPO3.Modal.dismiss();
     }
 
     initializeFilter();