MID-6271 improving search panel

Evolveum · Apr 20, 2022 · efd5ac8 · efd5ac8
1 parent 06c28d6
commit efd5ac8
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 177 deletions.
diff --git a/...in-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/ContainerableListPanel.java b/...in-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/ContainerableListPanel.java
@@ -6,17 +6,10 @@
  */
 package com.evolveum.midpoint.gui.impl.component;
 
-import java.io.Serializable;
-import java.util.Objects;
 import java.util.*;
 import java.util.stream.Collectors;
 import javax.xml.namespace.QName;
 
-import com.evolveum.midpoint.gui.impl.page.admin.report.PageReport;
-
-import com.evolveum.midpoint.web.component.data.SelectableDataTable;
-import com.evolveum.midpoint.web.component.util.*;
-
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -38,20 +31,19 @@
 import org.apache.wicket.model.LoadableDetachableModel;
 import org.apache.wicket.model.Model;
 import org.apache.wicket.model.StringResourceModel;
-import org.apache.wicket.model.util.CollectionModel;
 import org.apache.wicket.request.mapper.parameter.PageParameters;
 import org.apache.wicket.util.string.StringValue;
 import org.apache.wicket.util.visit.IVisitor;
 import org.jetbrains.annotations.NotNull;
 
 import com.evolveum.midpoint.gui.api.component.BasePanel;
 import com.evolveum.midpoint.gui.api.component.MainObjectListPanel;
-import com.evolveum.midpoint.gui.api.model.LoadableModel;
 import com.evolveum.midpoint.gui.api.model.ReadOnlyModel;
 import com.evolveum.midpoint.gui.api.page.PageBase;
 import com.evolveum.midpoint.gui.api.util.ModelServiceLocator;
 import com.evolveum.midpoint.gui.api.util.WebComponentUtil;
 import com.evolveum.midpoint.gui.api.util.WebModelServiceUtils;
+import com.evolveum.midpoint.gui.impl.page.admin.report.PageReport;
 import com.evolveum.midpoint.gui.impl.util.GuiImplUtil;
 import com.evolveum.midpoint.model.api.authentication.CompiledObjectCollectionView;
 import com.evolveum.midpoint.model.common.util.DefaultColumnUtils;
@@ -80,10 +72,15 @@
 import com.evolveum.midpoint.web.component.CompositedIconButtonDto;
 import com.evolveum.midpoint.web.component.data.BoxedTablePanel;
 import com.evolveum.midpoint.web.component.data.ISelectableDataProvider;
+import com.evolveum.midpoint.web.component.data.SelectableDataTable;
 import com.evolveum.midpoint.web.component.data.column.CheckBoxHeaderColumn;
 import com.evolveum.midpoint.web.component.data.column.InlineMenuButtonColumn;
 import com.evolveum.midpoint.web.component.menu.cog.InlineMenuItem;
 import com.evolveum.midpoint.web.component.search.*;
+import com.evolveum.midpoint.web.component.util.SelectableRow;
+import com.evolveum.midpoint.web.component.util.SerializableSupplier;
+import com.evolveum.midpoint.web.component.util.VisibleBehaviour;
+import com.evolveum.midpoint.web.component.util.VisibleEnableBehaviour;
 import com.evolveum.midpoint.web.page.admin.server.dto.OperationResultStatusPresentationProperties;
 import com.evolveum.midpoint.web.session.PageStorage;
 import com.evolveum.midpoint.web.session.UserProfileStorage;
@@ -894,12 +891,12 @@ protected List<C> getPreselectedObjectList(){
         return null;
     }
 
-    protected SearchFormPanel initSearch(String headerId) {
+    protected SearchPanel initSearch(String headerId) {
 
-        return new SearchFormPanel<>(headerId, searchModel) {
+        return new SearchPanel<>(headerId, searchModel) {
 
             @Override
-            protected void searchPerformed(AjaxRequestTarget target) {
+            public void searchPerformed(AjaxRequestTarget target) {
                 ContainerableListPanel.this.refreshTable(target);
             }
 

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/BasicSearchPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/BasicSearchPanel.html
@@ -13,7 +13,7 @@
             <span class="input-group-btn">
                 <a class="btn btn-danger btn-sm" wicket:id="clearSearch"
                    wicket:message="title:BasicSearchPanel.clear">
-                    <i class="fa fa-remove"/>
+                    <i class="fa fa-times"/>
                 </a>
             </span>
         </div>

diff --git a/...gui/src/main/java/com/evolveum/midpoint/web/component/search/AbstractSearchItemPanel.html b/...gui/src/main/java/com/evolveum/midpoint/web/component/search/AbstractSearchItemPanel.html
@@ -13,8 +13,8 @@
         <div class="search-item-label" wicket:id="searchItemLabel" style="width: auto !important; float: left;" />
         <i wicket:id="help" style="float: left; margin-top: 7px;"/>
         <div class="search-item-field" wicket:id="searchItemField" style="float: left;" />
-        <a wicket:id="removeButton" class="btn btn-xs btn-default search-item-remove-button" style="float: left;">
-            <i class="fa fa-remove"/>
+        <a wicket:id="removeButton" class="btn btn-sm px-1">
+            <i class="fa fa-times"/>
         </a>
     </div>
 </wicket:panel>

diff --git a/...dmin-gui/src/main/java/com/evolveum/midpoint/web/component/search/PopoverSearchPanel.java b/...dmin-gui/src/main/java/com/evolveum/midpoint/web/component/search/PopoverSearchPanel.java
@@ -78,7 +78,7 @@ public void onClick(AjaxRequestTarget target) {
 
     public void togglePopover(AjaxRequestTarget target, Component button, Component popover, int paddingRight) {
         StringBuilder script = new StringBuilder();
-        script.append("toggleSearchPopover('");
+        script.append("MidPointTheme.toggleSearchPopover('");
         script.append(button.getMarkupId()).append("','");
         script.append(popover.getMarkupId()).append("',");
         script.append(paddingRight).append(");");

diff --git a/...admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFilterPanel.html b/...admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFilterPanel.html
@@ -14,8 +14,8 @@
         <i wicket:id="help" style="float: left; margin-top: 7px;"/>
         <div class="search-item-field" wicket:id="searchItemField" style="float: left;" />
         <div class="search-item-field" wicket:id="checkDisable" style="float: left; margin-top: 4px;" />
-        <a wicket:id="removeButton" class="btn btn-xs btn-default search-item-remove-button" style="float: left;">
-            <i class="fa fa-remove"/>
+        <a wicket:id="removeButton" class="btn btn-sm px-1">
+            <i class="fa fa-times"/>
         </a>
     </div>
 </wicket:panel>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFormPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFormPanel.html
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFormPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchFormPanel.java
diff --git a/...src/main/java/com/evolveum/midpoint/web/component/search/SearchObjectCollectionPanel.html b/...src/main/java/com/evolveum/midpoint/web/component/search/SearchObjectCollectionPanel.html
@@ -13,7 +13,7 @@
         <div class="search-item-label" wicket:id="clickableName" style="width: auto !important; float: left;" />
         <div class="search-item-label" wicket:id="searchItemLabel" style="padding-left: 0px !important; width: auto !important; float: left;" />
         <i wicket:id="help" style="float: left; margin-top: 7px;"/>
-        <a wicket:id="removeButton" class="btn btn-xs btn-default search-item-remove-button" style="float: left;">
+        <a wicket:id="removeButton" class="btn btn-sm px-1">
             <i class="fa fa-remove"/>
         </a>
     </div>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.html
@@ -6,13 +6,47 @@
   ~ and European Union Public License. See LICENSE file for details.
   -->
 <wicket:panel xmlns:wicket="http://wicket.apache.org">
-    <form wicket:id="form" class="form-inline pull-right search-form" style="padding-bottom:5px; width:100%; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; text-align-last: right;">
-        <div class="form-inline" style="float:right; text-align-last: left;">
-            <div class="form-group pull-right" style="vertical-align: top; margin-top: -5px; display: grid;">
-                <a class="btn btn-sm btn-link" wicket:id="debug" style="display: table-cell; vertical-align: top; padding: 0px;"/>
+    <form wicket:id="form" class="d-flex flex-wrap justify-content-end">
+
+        <div class="my-1" wicket:id="fullTextContainer">
+            <input wicket:id="fullTextField" type="text" class="form-control form-control-sm" style="width: 150px; min-width: 150px;">
+        </div>
+
+        <div wicket:id="collectionRefPanel" class="my-1"/>
+        <div wicket:id="typePanel" class="my-1"/>
+        <div wicket:id="oidItem" class="my-1"/>
+
+        <wicket:container wicket:id="specialItems">
+            <div wicket:id="specialItem" class="my-1"/>
+        </wicket:container>
+        <wicket:container wicket:id="compositedSpecialItems">
+            <div wicket:id="specialItem" class="my-1"/>
+        </wicket:container>
+        <wicket:container wicket:id="items">
+            <div wicket:id="item" class="my-1"/>
+        </wicket:container>
+
+        <div class="my-1 has-feedback col-lg-11 col-sm-10 col-xs-9" wicket:id="advancedGroup" style="float:right; padding-right: 5px; text-align-last: left;">
+                <textarea class="form-control form-control-sm" rows="2" wicket:id="advancedArea"
+                        style="width: 220px; height: 60px; overflow: hidden; float:right;"></textarea>
+            <input wicket:id="axiomQueryField" type="text" class="form-control form-control-sm"
+                    style="width: 91.6666667%; min-width: 300px; float:right;">
+            <label class="control-label col-lg-1" style="vertical-align: top; float:right; padding-right: 5px;">
+                <i id="advancedCheck" class="fa fa-lg" wicket:id="advancedCheck"/>
+            </label>
+            <div wicket:id="advancedErrorGroup" style="float:right">
+                <span id="advancedError" class="help-block" wicket:id="advancedError" style="float:right"/>
             </div>
+        </div>
+
+        <div class="d-flex my-1">
+            <a wicket:id="more" class="btn btn-sm btn-default mx-1">
+                <wicket:message key="SearchPanel.more"/>
+                &nbsp;
+                <span class="fa fa-caret-down"></span>
+            </a>
 
-            <div class="form-group pull-right" style="vertical-align: top; padding-right: 5px;" wicket:id="searchContainer">
+            <div wicket:id="searchContainer">
                 <div class="btn-group btn-group-sm">
                     <button type="button" class="btn btn-primary" about="searchSimple" wicket:id="searchButtonBeforeDropdown">
                         <i class="fa fa-search flip-icon fa-lg"></i>
@@ -30,45 +64,8 @@
                 </div>
             </div>
 
-            <div class="form-group pull-right" wicket:id="moreGroup" style="padding-right: 5px;">
-                <a wicket:id="more" class="btn btn-sm btn-default">
-                    <wicket:message key="SearchPanel.more"/>
-                    &nbsp;
-                    <span class="caret"></span>
-                </a>
-            </div>
+            <a class="btn btn-sm btn-link" wicket:id="debug" style="display: table-cell; vertical-align: top; padding: 0px;"/>
         </div>
-
-        <div class="form-group has-feedback col-lg-11 col-sm-10 col-xs-9" wicket:id="advancedGroup" style="float:right; padding-right: 5px; text-align-last: left;">
-                <textarea class="form-control form-control-sm" rows="2" wicket:id="advancedArea"
-                        style="width: 220px; height: 60px; overflow: hidden; float:right;"></textarea>
-            <input wicket:id="axiomQueryField" type="text" class="form-control form-control-sm"
-                    style="width: 91.6666667%; min-width: 300px; float:right;">
-            <label class="control-label col-lg-1" style="vertical-align: top; float:right; padding-right: 5px;">
-                <i id="advancedCheck" class="fa fa-lg" wicket:id="advancedCheck"/>
-            </label>
-            <div wicket:id="advancedErrorGroup" style="float:right">
-                <span id="advancedError" class="help-block" wicket:id="advancedError" style="float:right"/>
-            </div>
-        </div>
-
-        <div class="form-group" wicket:id="fullTextContainer" style="float:right; padding-right: 5px; text-align-last: left;">
-            <input wicket:id="fullTextField" type="text" class="form-control form-control-sm" style="width: 150px; min-width: 150px;">
-        </div>
-
-        <div wicket:id="collectionRefPanel" class="form-group" style="padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-        <div wicket:id="typePanel" class="form-group" style="padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-        <div wicket:id="oidItem" class="form-group" style="float:right; padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-
-        <wicket:container wicket:id="specialItems">
-            <div wicket:id="specialItem" class="form-group" style="padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-        </wicket:container>
-        <wicket:container wicket:id="compositedSpecialItems">
-            <div wicket:id="specialItem" class="form-group" style="padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-        </wicket:container>
-        <wicket:container wicket:id="items">
-            <div wicket:id="item" class="form-group" style="padding-right: 5px; margin-bottom: 5px; text-align-last: left;"/>
-        </wicket:container>
     </form>
 
     <div wicket:id="popover" class="popover bottom" style="display: none;">

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.java
@@ -104,7 +104,6 @@ public class SearchPanel<C extends Containerable> extends BasePanel<Search<C>> {
     private static final String ID_FULL_TEXT_CONTAINER = "fullTextContainer";
     private static final String ID_FULL_TEXT_FIELD = "fullTextField";
     private static final String ID_ADVANCED_GROUP = "advancedGroup";
-    private static final String ID_MORE_GROUP = "moreGroup";
     private static final String ID_ADVANCED_AREA = "advancedArea";
     private static final String ID_AXIOM_QUERY_FIELD = "axiomQueryField";
     private static final String ID_ADVANCED_CHECK = "advancedCheck";
@@ -269,33 +268,27 @@ protected IModel<String> createHelpModel() {
         oidItem.add(createVisibleBehaviour(SearchBoxModeType.OID));
         form.add(oidItem);
 
-        WebMarkupContainer moreGroup = new WebMarkupContainer(ID_MORE_GROUP);
-        moreGroup.add(new VisibleBehaviour(() -> createVisibleBehaviour(SearchBoxModeType.BASIC).isVisible()));
-        form.add(moreGroup);
-
         AjaxLink<Void> more = new AjaxLink<Void>(ID_MORE) {
             private static final long serialVersionUID = 1L;
 
             @Override
             public void onClick(AjaxRequestTarget target) {
                 resetMoreDialogModel();
                 Component popover = SearchPanel.this.get(createComponentPath(ID_POPOVER));
-                Component button = SearchPanel.this.get(createComponentPath(ID_FORM, ID_MORE_GROUP, ID_MORE));
+                Component button = SearchPanel.this.get(createComponentPath(ID_FORM, ID_MORE));
                 togglePopover(target, button, popover, 14);
             }
         };
-        more.add(new VisibleEnableBehaviour() {
-
-            private static final long serialVersionUID = 1L;
-
-            @Override
-            public boolean isVisible() {
-                Search search = getModelObject();
-                return !search.getAvailableDefinitions().isEmpty();
+        more.add(new VisibleBehaviour(() -> {
+            if (!isItemVisible(SearchBoxModeType.BASIC)) {
+                return false;
             }
-        });
+
+            Search search = getModelObject();
+            return !search.getAvailableDefinitions().isEmpty();
+        }));
         more.setOutputMarkupId(true);
-        moreGroup.add(more);
+        form.add(more);
 
         WebMarkupContainer searchContainer = new WebMarkupContainer(ID_SEARCH_CONTAINER);
         searchContainer.setOutputMarkupId(true);
@@ -728,16 +721,12 @@ public String getObject() {
     }
 
     private VisibleEnableBehaviour createVisibleBehaviour(SearchBoxModeType ... searchType) {
-        return new VisibleEnableBehaviour() {
-
-            private static final long serialVersionUID = 1L;
+        return new VisibleBehaviour(() -> isItemVisible(searchType));
+    }
 
-            @Override
-            public boolean isVisible() {
-                return getModelObject() != null && getModelObject().getSearchType() != null
-                        && Arrays.asList(searchType).contains(getModelObject().getSearchType());
-            }
-        };
+    private boolean isItemVisible(SearchBoxModeType... searchType) {
+        return getModelObject() != null && getModelObject().getSearchType() != null
+                && Arrays.asList(searchType).contains(getModelObject().getSearchType());
     }
 
     private void initPopover() {
@@ -929,7 +918,7 @@ protected void saveSearch(Search search, AjaxRequestTarget target) {
     }
 
     public void togglePopover(AjaxRequestTarget target, Component button, Component popover, int paddingRight) {
-        target.appendJavaScript("toggleSearchPopover('"
+        target.appendJavaScript("MidPointTheme.toggleSearchPopover('"
                 + button.getMarkupId() + "','"
                 + popover.getMarkupId() + "',"
                 + paddingRight + ");");

diff --git a/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPropertyPanel.html b/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPropertyPanel.html
@@ -13,8 +13,8 @@
         <div class="search-item-label" wicket:id="searchItemLabel" style="width: auto !important; float: left;" />
         <i wicket:id="help" style="float: left; margin-top: 7px;"/>
         <div class="search-item-field" wicket:id="searchItemField" style="float: left;" />
-        <a wicket:id="removeButton" class="btn btn-xs btn-default search-item-remove-button" style="float: left;">
-            <i class="fa fa-remove"/>
+        <a wicket:id="removeButton" class="btn btn-sm px-1">
+            <i class="fa fa-times"/>
         </a>
     </div>
 </wicket:panel>