Skip to content

Commit

Permalink
wc: replace select facet-filter #TASK-5070
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rodielm
Rodielm committed Nov 15, 2023
1 parent d17112d commit 4a831ee
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 36 deletions.
67 changes: 36 additions & 31 deletions src/webcomponents/commons/facet-filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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)];
Expand Down Expand Up @@ -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 : "")};
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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":
Expand Down Expand Up @@ -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>
`;
Expand Down Expand Up @@ -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}">
Expand Down
8 changes: 3 additions & 5 deletions src/webcomponents/commons/filters/consequence-type-select-filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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>
`;
}
Expand Down

0 comments on commit 4a831ee

Please sign in to comment.