CAUSEWAY-3829: adds table Search Button + Clear Button

apache · Nov 20, 2024 · cd19f1b · cd19f1b
1 parent 28dacbc
commit cd19f1b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/...main/java/org/apache/causeway/viewer/wicket/ui/components/table/filter/FilterToolbar.html b/...main/java/org/apache/causeway/viewer/wicket/ui/components/table/filter/FilterToolbar.html
@@ -21,9 +21,12 @@
 <body>
 	<wicket:panel>
 		<div class="input-group table-filter-bar">
-			  <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
+<!--			  <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>-->
 			  <input wicket:id="table-search-input" class="form-control" type="text" placeholder="Search" />
-		</div>	
+<!--              <span wicket:id="table-search-button" class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>-->
+              <button wicket:id="table-search-button" class="btn btn-light"><i class="fa-solid fa-magnifying-glass"></i></button>
+              <button wicket:id="table-search-clear" class="btn btn-light"><i class="fa-regular fa-trash-can"></i></button>
+		</div>
 	</wicket:panel>
 </body>
 </html>
diff --git a/...main/java/org/apache/causeway/viewer/wicket/ui/components/table/filter/FilterToolbar.java b/...main/java/org/apache/causeway/viewer/wicket/ui/components/table/filter/FilterToolbar.java
@@ -34,6 +34,8 @@ public class FilterToolbar extends Panel {
 
     private static final long serialVersionUID = 1L;
     private static final String ID_TABLE_SEARCH_INPUT = "table-search-input";
+    private static final String ID_TABLE_SEARCH_BUTTON = "table-search-button";
+    private static final String ID_TABLE_SEARCH_CLEAR = "table-search-clear";
 
     /**
      * DataTable this search bar is attached to.
@@ -64,19 +66,33 @@ private void buildGui() {
         var searchField = new TextField<>(ID_TABLE_SEARCH_INPUT, Model.of(dataTableInteractive.getSearchArgument().getValue()));
         Wkt.attributeReplace(searchField, "placeholder", dataTableInteractive.getSearchPromptPlaceholderText());
 
+        Wkt.linkAdd(this, ID_TABLE_SEARCH_BUTTON, target->{
+            propagateUpdate(target, searchField.getValue());
+        });
+
+        Wkt.linkAdd(this, ID_TABLE_SEARCH_CLEAR, target->{
+            searchField.setModelObject(null);
+            target.add(searchField);
+            propagateUpdate(target, searchField.getValue());
+        });
+
         searchField.add(new OnChangeAjaxBehavior() {
             private static final long serialVersionUID = 1L;
             @Override
             protected void onUpdate(final AjaxRequestTarget target) {
-                // on searchArg update originating from end-user in UI
-                table.setSearchArg(searchField.getValue());
-                table.setSearchHintAndBroadcast(target);
-                // tells the table component to re-render
-                target.add(table);
+                // no-op; however it seems we need to install this behavior, in order for the server side model to receive updates at all
             }
         });
 
         addOrReplace(searchField);
     }
 
+    private void propagateUpdate(final AjaxRequestTarget target, final String searchArg) {
+        // on searchArg update originating from end-user in UI
+        table.setSearchArg(searchArg);
+        table.setSearchHintAndBroadcast(target);
+        // tells the table component to re-render
+        target.add(table);
+    }
+
 }