You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2022/10/27 09:37:14 UTC

[myfaces-tobago] branch t5_selectMany updated: feat(selectMany): filter after badges

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/t5_selectMany by this push:
     new a76a934121 feat(selectMany): filter after badges
a76a934121 is described below

commit a76a934121269d74263f56a6f3a6889148fb2f9d
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 27 11:36:19 2022 +0200

    feat(selectMany): filter after badges
    
    * filter is now in .form-select after the badges
    * small table
    
    Issue: TOBAGO-2159
---
 .../renderkit/renderer/SelectManyRenderer.java     | 80 ++++++++++++----------
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |  1 +
 tobago-theme/src/main/scss/_tobago.scss            | 28 ++++++--
 3 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index dc9f831fc6..09bcf9360b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -28,6 +28,7 @@ import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
+import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
 import org.apache.myfaces.tobago.util.ComponentUtils;
 import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
 
@@ -62,46 +63,17 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
 
     renderHiddenSelect(facesContext, component);
+    renderFilterInput(facesContext, component);
 
     writer.startElement(HtmlElements.DIV);
-    writer.writeIdAttribute(fieldId);
-    writer.writeNameAttribute(clientId);
-    HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
-    writer.writeClassAttribute(
-      BootstrapClass.FORM_SELECT,
-      BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
-      component.getCustomClass());
-    writer.writeAttribute(HtmlAttributes.TITLE, title, true);
-
-    final Object[] values = component.getSelectedValues();
-    final String[] submittedValues = getSubmittedValues(component);
-
-    renderBadges(facesContext, values, submittedValues);
-
-    /*renderSelectItems(
-      component, TobagoClass.SELECT_MANY_LISTBOX__OPTION, items, values, submittedValues, writer, facesContext);*/
-
-    writer.startElement(HtmlElements.DIV);
-    writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU, BootstrapClass.SHOW);
-
-    if (filter != null) {
-      writer.startElement(HtmlElements.DIV);
-      writer.writeClassAttribute(TobagoClass.FILTER__WRAPPER);
-      writer.startElement(HtmlElements.INPUT);
-      writer.writeIdAttribute(filterId);
-      writer.writeClassAttribute(BootstrapClass.FORM_CONTROL);
-      writer.endElement(HtmlElements.INPUT);
-      writer.endElement(HtmlElements.DIV);
-
-      writer.startElement(HtmlElements.HR);
-      writer.writeClassAttribute(BootstrapClass.DROPDOWN_DIVIDER);
-      writer.endElement(HtmlElements.HR);
-    }
+    writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU);
 
     writer.startElement(HtmlElements.TABLE);
-    writer.writeClassAttribute(BootstrapClass.TABLE, BootstrapClass.TABLE_HOVER);
+    writer.writeClassAttribute(BootstrapClass.TABLE, BootstrapClass.TABLE_HOVER, BootstrapClass.TABLE_SM);
     writer.startElement(HtmlElements.TBODY);
 
+    final Object[] values = component.getSelectedValues();
+    final String[] submittedValues = getSubmittedValues(component);
     for (SelectItem item : items) {
       Object itemValue = item.getValue();
       // when using selectItem tag with a literal value: use the converted value
@@ -160,6 +132,44 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     writer.endElement(HtmlElements.SELECT);
   }
 
+  private void renderFilterInput(FacesContext facesContext, T component) throws IOException {
+    final TobagoResponseWriter writer = getResponseWriter(facesContext);
+
+    final String clientId = component.getClientId(facesContext);
+    final String fieldId = component.getFieldId(facesContext);
+    final String filterId = clientId + ComponentUtils.SUB_SEPARATOR + "filter";
+    final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
+    final boolean readonly = component.isReadonly();
+    final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
+    final String filter = component.getFilter();
+    final Markup markup = component.getMarkup();
+    final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
+
+    writer.startElement(HtmlElements.DIV);
+    writer.writeIdAttribute(fieldId);
+    writer.writeNameAttribute(clientId);
+    HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
+    writer.writeClassAttribute(
+      BootstrapClass.FORM_SELECT,
+      TobagoClass.FILTER__WRAPPER,
+      BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+      component.getCustomClass());
+    writer.writeAttribute(HtmlAttributes.TITLE, title, true);
+
+    final Object[] values = component.getSelectedValues();
+    final String[] submittedValues = getSubmittedValues(component);
+
+    renderBadges(facesContext, values, submittedValues);
+
+    writer.startElement(HtmlElements.INPUT);
+    writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.TEXT);
+    writer.writeIdAttribute(filterId);
+    writer.writeClassAttribute(TobagoClass.FILTER, BootstrapClass.FORM_CONTROL);
+    writer.endElement(HtmlElements.INPUT);
+
+    writer.endElement(HtmlElements.DIV);
+  }
+
   private void renderBadges(FacesContext facesContext, Object[] values, String[] submittedValues) throws IOException {
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
 
@@ -184,8 +194,6 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
   protected void encodeEndField(FacesContext facesContext, T component) throws IOException {
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
 
-    writer.endElement(HtmlElements.DIV);
-
     encodeBehavior(writer, facesContext, component);
   }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index e0377793dd..46b880456e 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -55,6 +55,7 @@ public enum TobagoClass implements CssItem {
 //  FILE("tobago-file"),
 //  FIGURE("tobago-figure"),
   FOLDER("tobago-folder"),
+  FILTER("tobago-filter"),
   FILTER__WRAPPER("tobago-filter-wrapper"),
   HEADER("tobago-header"),
 //  IMAGE("tobago-image"),
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index a9993fd570..00633390f4 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1175,16 +1175,32 @@ tobago-select-one-radio {
 }
 
 tobago-select-many {
-  .dropdown-menu {
-    .tobago-filter-wrapper {
-      display: flex;
+  .tobago-filter-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .badge {
+      margin-right: 0.125rem;
+    }
 
-      .form-control {
-        margin-left: var(--bs-dropdown-item-padding-x);
-        margin-right: var(--bs-dropdown-item-padding-x);
+    .tobago-filter {
+      margin: 0;
+      border: 0;
+      border-radius: 0;
+      padding: 0;
+      flex: 1 0 0;
+
+      &:focus {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        box-shadow: none;
       }
     }
+  }
 
+  .dropdown-menu {
     .table {
       margin-bottom: 0;
     }