From 4a831eea772dfd2e3569bead76764cb01fe2f16a Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:45:12 +0100
Subject: [PATCH] wc: replace select facet-filter #TASK-5070

---
 src/webcomponents/commons/facet-filter.js     | 67 ++++++++++---------
 .../filters/consequence-type-select-filter.js |  8 +--
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/webcomponents/commons/facet-filter.js b/src/webcomponents/commons/facet-filter.js
index bc93a92b63..499009eb99 100644
--- a/src/webcomponents/commons/facet-filter.js
+++ b/src/webcomponents/commons/facet-filter.js
@@ -17,7 +17,7 @@
 import {LitElement, html} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 import "../commons/filters/consequence-type-select-filter.js";
-
+import "../commons/forms/select-field-filter2.js";
 
 export default class FacetFilter extends LitElement {
 
@@ -135,7 +135,6 @@ export default class FacetFilter extends LitElement {
         UtilsNew.initTooltip(this);
     }
 
-
     // Extracts facet field name, value and function (Avg or Percentile) from default list (or saved facet, in future)
     parseFacet(str) {
         const fnMatch = [...str.matchAll(/(avg|min|max|unique|hll|percentile|sumsq)\((\w+)\)/gi)];
@@ -226,7 +225,6 @@ export default class FacetFilter extends LitElement {
     //     this.requestUpdate();
     // }
 
-
     onFacetValueChange(e) {
         const id = e.target.dataset.id;
         // this.selectedFacet = {...this.selectedFacet, [id]: (e.target.value.trim() ? e.target.value : "")};
@@ -337,11 +335,14 @@ export default class FacetFilter extends LitElement {
                         <i class="fas fa-arrow-alt-circle-down"></i> Nested Facet (optional)
                     </a>
                     <div class="collapse ${this.selectedFacet[facet.id].nested ? "in" : ""}" id="${facet.id}_nested">
-                        <select-field-filter
+                        <select-field-filter2
                             .data="${this.config.sections.map(section => ({...section, fields: section.fields.map(item => ({...item, disabled: item.id === facet.id}))}))}"
                             .value=${this.selectedFacet[facet.id].nested ? this.selectedFacet[facet.id].nested.id : null}
+                            .config="${{
+                                multiple: false,
+                            }}"
                             @filterChange="${e => this.onNestedFacetFieldChange(e, facet.id)}">
-                        </select-field-filter>
+                        </select-field-filter2>
                         <div class="pt-1 pb-2">
                             ${this.renderNestedField(this.selectedFacet[facet.id].nested, facet.id)}
                         </div>
@@ -357,9 +358,9 @@ export default class FacetFilter extends LitElement {
                     <div class="row">
                         <div class="col-md-12">
                             <consequence-type-select-filter
-                                    .ct="${this.preparedQuery.ct}"
-                                    .config="${this.consequenceTypes || CONSEQUENCE_TYPES}"
-                                    @filterChange="${e => this.onFacetChange(e, facet.id)}">
+                                .ct="${this.preparedQuery.ct}"
+                                .config="${this.consequenceTypes || CONSEQUENCE_TYPES}"
+                                @filterChange="${e => this.onFacetChange(e, facet.id)}">
                             </consequence-type-select-filter>
                         </div>
                     </div>
@@ -370,14 +371,16 @@ export default class FacetFilter extends LitElement {
                 return html`
                     <div class="row">
                         <div class="col-md-12">
-                            <select-field-filter
-                                ?multiple="${facet.multiple === undefined || facet.multiple}"
+                            <select-field-filter2
                                 .data="${facet.allowedValues}"
                                 .value="${value ?? facet.defaultValue ?? ""}"
+                                .config="${{
+                                    multiple: facet.multiple === undefined || facet.multiple,
+                                }}"
                                 id="${facet.id}_Select"
                                 data-id="${facet.id}"
                                 @filterChange="${e => this.onFacetChange(e, facet.id)}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     </div>
                     ${renderNestedFieldWrapper(facet)}
@@ -415,13 +418,13 @@ export default class FacetFilter extends LitElement {
                             <!-- this.fncs -->
                         <div class="col-4">
                             <div class="col">
-                                <select-field-filter
+                                <select-field-filter2
                                     .data="${this.selectFns || {}}"
                                     .value="${facet.fn ?? "range"}"
                                     id="${this._prefix}${facet.id}_FnSelect"
                                     data-facet="${facet.id}"
                                     @filterChange="${this.onFacetFnChange}">
-                                </select-field-filter>
+                                </select-field-filter2>
                             </div>
                         </div>
                     </div>
@@ -484,14 +487,16 @@ export default class FacetFilter extends LitElement {
                     [...facet.value.matchAll(/\[([^\s]+)]/gim)][0] : "";
                 return html`
                     <div class="col-md-12">
-                        <select-field-filter
-                                ?multiple="${facet.multiple === undefined || facet.multiple}"
-                                .data="${facet.allowedValues}"
-                                .value="${value}"
-                                id="${facet.id}_NestedSelect"
-                                data-parent-facet="${parent}"
-                                @filterChange="${this.onNestedFacetSelectChange}">
-                        </select-field-filter>
+                        <select-field-filter2
+                            .data="${facet.allowedValues}"
+                            .value="${value}"
+                            .config="${{
+                                multiple: facet.multiple === undefined || facet.multiple
+                            }}"
+                            id="${facet.id}_NestedSelect"
+                            data-parent-facet="${parent}"
+                            @filterChange="${this.onNestedFacetSelectChange}">
+                        </select-field-filter2>
                     </div>
                 `;
             case "number":
@@ -528,14 +533,16 @@ export default class FacetFilter extends LitElement {
                             .value="\${num_value || ""}"  @input="\${this.onNestedFacetValueChange}"  />-->
                         </div>
                         <div class="col-md-4">
-                            <select-field-filter
-                                .disabled="${false}"
+                            <select-field-filter2
                                 .data="${this.selectFns || {}}"
                                 .value="${facet.fn ?? "range"}"
+                                .config="${{
+                                    disabled: false
+                                }}"
                                 id="${parent}_NestedFnSelect"
                                 data-parent-facet="${parent}"
                                 @filterChange="${this.onNestedFacetFnChange}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     </div>
                 `;
@@ -573,19 +580,17 @@ export default class FacetFilter extends LitElement {
         }
     }
 
-
     render() {
         return this.config ? html`
             <div class="mb-3 cy-facet-selector">
                 <label class="form-label fw-bold">
                     Select a Term or Range Facet
                 </label>
-                <select-field-filter
-                        multiple
-                        .data="${this.config.sections}"
-                        .value=${Object.keys(this.selectedFacet).join(",")}
-                        @filterChange="${this.onFacetFieldChange}">
-                </select-field-filter>
+                <select-field-filter2
+                    .data="${this.config.sections}"
+                    .value=${Object.keys(this.selectedFacet).join(",")}
+                    @filterChange="${this.onFacetFieldChange}">
+                </select-field-filter2>
                 <div class="text-center">
                     <div>- or -</div>
                     <button class="btn btn-light btn-small cy-default-facets-button" @click="${this.addDefaultFacet}">
diff --git a/src/webcomponents/commons/filters/consequence-type-select-filter.js b/src/webcomponents/commons/filters/consequence-type-select-filter.js
index dadc1f92bb..8b05228cc0 100644
--- a/src/webcomponents/commons/filters/consequence-type-select-filter.js
+++ b/src/webcomponents/commons/filters/consequence-type-select-filter.js
@@ -17,7 +17,7 @@
 import {LitElement, html} from "lit";
 import LitUtils from "../utils/lit-utils.js";
 import UtilsNew from "../../../core/utils-new.js";
-import "../forms/select-field-filter.js";
+import "../forms/select-field-filter2.js";
 
 export default class ConsequenceTypeSelectFilter extends LitElement {
 
@@ -218,13 +218,11 @@ export default class ConsequenceTypeSelectFilter extends LitElement {
 
             <div class="mb-3">
                 <label class="form-label">Or select terms manually:</label>
-                <select-field-filter
-                    multiple
-                    ?liveSearch="${true}"
+                <select-field-filter2
                     .data="${this.options}"
                     .value=${this._ct}
                     @filterChange="${this.onFilterChange}">
-                </select-field-filter>
+                </select-field-filter2>
             </div>
         `;
     }