diff options
Diffstat (limited to 'src/client/views/FilterPanel.tsx')
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 36 |
1 files changed, 26 insertions, 10 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index fe42628cd..68d29942b 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -11,6 +11,8 @@ import './FilterPanel.scss'; import { FieldView } from './nodes/FieldView'; import { SearchBox } from './search/SearchBox'; import { undoable } from '../util/UndoManager'; +import { AiOutlineMinusSquare } from 'react-icons/ai'; +import { CiCircleRemove } from 'react-icons/ci'; interface filterProps { rootDoc: Doc; @@ -71,7 +73,7 @@ export class FilterPanel extends React.Component<filterProps> { * @returns a string array of the current attributes */ @computed get currentFacets() { - return this.activeFilters.map(filter => filter.split(':')[0]); + return this.activeFilters.map(filter => filter.split(Doc.FilterSep)[0]); } gatherFieldValues(childDocs: Doc[], facetKey: string) { @@ -108,8 +110,8 @@ export class FilterPanel extends React.Component<filterProps> { @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>(); @computed get activeFacets() { const facets = new Map<string, 'text' | 'checkbox' | 'slider' | 'range'>(this._chosenFacets); - StrListCast(this.targetDoc?._childFilters).map(filter => facets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox')); - setTimeout(() => StrListCast(this.targetDoc?._childFilters).map(action(filter => this._chosenFacets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox')))); + 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; } /** @@ -167,13 +169,16 @@ export class FilterPanel extends React.Component<filterProps> { 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"> <div style={{ width: '100%' }}> <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} /> </div> - <div className="filterBox-select-bool"> + {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */} + {/* <div className="filterBox-select-bool"> <select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}> {['AND', 'OR'].map(bool => ( <option value={bool} key={bool}> @@ -181,13 +186,24 @@ export class FilterPanel extends React.Component<filterProps> { </option> ))} </select> - </div>{' '} + </div>{' '} */} </div> <div className="filterBox-tree" key="tree"> {Array.from(this.activeFacets.keys()).map(facetHeader => ( <div> - {facetHeader} + <div className = "filterBox-facetHeader"> + <div className = "filterBox-facetHeader-Header"> </div> + {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)} + + <div className = "filterBox-facetHeader-collapse"> + <AiOutlineMinusSquare/> + {/* <CiCircleRemove/> */} + </div> + + </div> + + {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)} </div> ))} @@ -203,8 +219,8 @@ export class FilterPanel extends React.Component<filterProps> { <input placeholder={ StrListCast(this.targetDoc._childFilters) - .find(filter => filter.split(':')[0] === facetHeader) - ?.split(':')[1] ?? '-empty-' + .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader) + ?.split(Doc.FilterSep)[1] ?? '-empty-' } onBlur={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')} onKeyDown={e => e.key === 'Enter' && undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')(e)} @@ -219,8 +235,8 @@ export class FilterPanel extends React.Component<filterProps> { style={{ width: 20, marginLeft: 20 }} checked={ StrListCast(this.targetDoc._childFilters) - .find(filter => filter.split(':')[0] === facetHeader && filter.split(':')[1] == facetValue) - ?.split(':')[2] === 'check' + .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue) + ?.split(Doc.FilterSep)[2] === 'check' } type={type} onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')} |