diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 27 |
1 files changed, 22 insertions, 5 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index 5d1e5c08d..1ab7ab54e 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -17,6 +17,12 @@ import { CiCircleRemove } from 'react-icons/ci'; interface filterProps { rootDoc: Doc; } + +const handleCollapse = (currentHeader: string) => { + // this._chosenFacetsCollapse.set(currentHeader, true); + console.log("hi") +} + @observer export class FilterPanel extends React.Component<filterProps> { public static LayoutString(fieldKey: string) { @@ -108,12 +114,16 @@ export class FilterPanel extends React.Component<filterProps> { }; @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>(); + @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>(); + @computed get activeFacets() { + console.log("chosen collpase " + this._chosenFacetsCollapse) const facets = new Map<string, 'text' | 'checkbox' | 'slider' | 'range'>(this._chosenFacets); StrListCast(this.targetDoc?._childFilters).map(filter => facets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox')); setTimeout(() => StrListCast(this.targetDoc?._childFilters).map(action(filter => this._chosenFacets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox')))); return facets; } + /** * Responds to clicking the check box in the flyout menu */ @@ -141,6 +151,7 @@ export class FilterPanel extends React.Component<filterProps> { } else { this._chosenFacets.set(facetHeader, 'checkbox'); } + this._chosenFacetsCollapse.set(facetHeader, false) }; facetValues = (facetHeader: string) => { @@ -167,10 +178,11 @@ export class FilterPanel extends React.Component<filterProps> { return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2)); }; + // need boolean that is true or false on click but individual to that specific header + render() { const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet })); - console.log("this is option " + options) - console.log("this is alll facets " + this._allFacets) + return ( <div className="filterBox-treeView"> <div className="filterBox-select"> @@ -197,14 +209,18 @@ export class FilterPanel extends React.Component<filterProps> { {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)} <div className = "filterBox-facetHeader-collapse"> - <AiOutlineMinusSquare/> + <div onClick = {action((e) => { + const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader) + this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}> + <AiOutlineMinusSquare/></div> + <CiCircleRemove/> </div> </div> - - {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)} + { this._chosenFacetsCollapse.get(facetHeader) ? null : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) } + {/* */} </div> ))} </div> @@ -213,6 +229,7 @@ export class FilterPanel extends React.Component<filterProps> { } private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode { + console.log("opening a specific " + this.activeFacets.get(facetHeader)) switch (type) { case 'text': return ( |