[myfaces-tobago] branch t5_selectMany updated: feat: tc:selectMany

[lo...@apache.org]

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

lofwyr 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 838ab23c67 feat: tc:selectMany
838ab23c67 is described below

commit 838ab23c67a4a2069a8c2bf3a65a66e5436eaf24
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Fri Oct 28 09:06:01 2022 +0200

    feat: tc:selectMany
    
    * TS click on list
    
    issue: TOBAGO-2159
---
 .../renderkit/renderer/SelectManyRenderer.java     |  2 +
 .../src/main/ts/tobago-select-many.ts              | 67 ++++++++++++++++------
 2 files changed, 53 insertions(+), 16 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 2acbceb26d..2068262ca3 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
@@ -27,6 +27,7 @@ import org.apache.myfaces.tobago.internal.util.SelectItemUtils;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.CssItem;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
 import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
@@ -99,6 +100,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
         contains = ArrayUtils.contains(submittedValues, formattedValue);
       }
       writer.startElement(HtmlElements.TR);
+      writer.writeAttribute(DataAttributes.VALUE, formattedValue, true);
       writer.writeClassAttribute(
         contains ? BootstrapClass.TABLE_ACTIVE : null,
         item.isDisabled() ? BootstrapClass.TEXT_MUTED : null);
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
index 68ff5fc38d..03f510d740 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -25,29 +25,16 @@ class SelectMany extends HTMLElement {
     super();
   }
 
-  connectedCallback(): void {
-    // todo: implement open/close dropdown-menu
-    // todo: position/size of dropdown-menu
-    // todo: implement select/deselect options
-    // todo: implement remove badge
-
-    this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
-  }
-
-  private showDropdownMenu(event: MouseEvent): void {
-    this.dropdownMenu.classList.add(this.CssClass.SHOW);
-  }
-
   get hiddenSelect(): HTMLScriptElement {
     return this.root.querySelector(`select[name='${this.id}']`);
   }
 
-  get selectField(): HTMLInputElement {
-    return this.root.querySelector(`.tobago-filter-wrapper[name='${this.id}']`);
+  get selectField(): HTMLDivElement {
+    return this.querySelector(".tobago-filter-wrapper");
   }
 
   get filterInput(): HTMLInputElement {
-    return this.root.querySelector(".tobago-filter");
+    return this.querySelector(".tobago-filter");
   }
 
   get dropdownMenu(): HTMLDivElement {
@@ -61,6 +48,54 @@ class SelectMany extends HTMLElement {
   get root(): ShadowRoot | Document {
     return this.getRootNode() as ShadowRoot | Document;
   }
+
+  get tbody(): HTMLElement {
+    return this.querySelector("tbody");
+  }
+
+  connectedCallback(): void {
+    // todo: implement open/close dropdown-menu
+    // todo: position/size of dropdown-menu
+    // todo: implement select/deselect options
+    // todo: implement remove badge
+
+    this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
+
+    this.initList();
+  }
+
+  select(event: MouseEvent) {
+    const target = <HTMLElement>event.target;
+    const row = target.closest("tr");
+    row.classList.toggle("table-primary");
+    const itemValue = row.dataset.tobagoValue;
+    console.info("itemValue", itemValue);
+    if (row.classList.contains("table-primary")) {
+      const badge = this.getRowTemplate(itemValue, row.innerText);
+      console.info("badge", badge);
+      this.filterInput.insertAdjacentHTML("beforebegin", badge);
+    } else {
+      const selectors = `.badge[data-tobago-value="${itemValue}"]`;
+      console.info("selectors", selectors);
+      this.selectField.querySelector(selectors).remove();
+    }
+  }
+
+  getRowTemplate(value: string, text: string) : string {
+    return `<span class="badge text-bg-primary" data-tobago-value="${value}">${text}</span>`;
+  }
+
+  private showDropdownMenu(event: MouseEvent): void {
+    this.dropdownMenu.classList.add(this.CssClass.SHOW);
+  }
+
+  private initList() {
+    const tbody = this.tbody;
+    tbody.addEventListener("click", this.select.bind(this));
+    tbody.querySelectorAll("tr").forEach((row: HTMLTableRowElement) => {
+      // row stuff
+    });
+  }
 }
 
 document.addEventListener("tobago.init", function (event: Event): void {