filter- fixed removable and css (collapse bugs)

3 files changed, 64 insertions, 55 deletions

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index bb68afed3..bb1e79d11 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -209,6 +209,12 @@
         font-size: 16;
     }
 
+    .filterBox-facetHeader-remove{
+        // margin-left: auto;
+        float: right;
+        font-size: 16;
+    }
+
 }
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 4f4e39218..c99967ef7 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -14,6 +14,8 @@ import { undoable } from '../util/UndoManager';
 import { AiOutlineMinusSquare } from 'react-icons/ai';
 import { CiCircleRemove } from 'react-icons/ci';
 
+//slight bug when you don't click on background canvas before creating filter and the you click on the canvas 
+
 interface filterProps {
     rootDoc: Doc;
 }
@@ -103,6 +105,8 @@ export class FilterPanel extends React.Component<filterProps> {
         return { strings: Array.from(valueSet.keys()), rtFields };
     }
 
+
+
     public removeFilter = (filterName: string) => {
         Doc.setDocFilter(this.targetDoc, filterName, undefined, 'remove');
         Doc.setDocRangeFilter(this.targetDoc, filterName, undefined);
@@ -110,11 +114,10 @@ export class FilterPanel extends React.Component<filterProps> {
 
     @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
     @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
-    @observable _removeBoolean = false;
-    // @observable _currentFilters: string[] ; -- instatitae array to store the currently selected filters (Ex: #food ). remove these filters when removing 
+    @observable _currentActiveFilters = new ObservableMap<string, string>();
 
     @computed get activeFacets() {
-        console.log("chosen collpase " + this._chosenFacetsCollapse)
+        // 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'))));
@@ -151,6 +154,25 @@ export class FilterPanel extends React.Component<filterProps> {
         this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
+    @action
+    sortingCurrentFacetValues = (facetHeader:string) => {
+        
+        let returnKeys = [];
+    
+        console.log("this is current filtes " + this._currentActiveFilters)
+        for (var key of this.facetValues(facetHeader)){
+            console.log("key : " + key  )
+            if (this._currentActiveFilters.get(key)){
+                console.log("pushing")
+              returnKeys.push(key) 
+        }}
+        console.log("this is return keys " + returnKeys)
+        return returnKeys.toString();
+    }
+    
+    
+
+
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
@@ -175,7 +197,6 @@ 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));
     };
 
-    // change css and make the currently selected filters appear at the top
 
     render() {
         const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
@@ -205,41 +226,37 @@ export class FilterPanel extends React.Component<filterProps> {
                                 <div className = "filterBox-facetHeader-Header"> </div>
                                 {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
                                 
-                                <div className = "filterBox-facetHeader-collapse"> 
-                                    <div onClick = {action((e) => { 
+                                {/* <div className = "filterBox-facetHeader-collapse">  */}
+                                    <div className = "filterBox-facetHeader-collapse"
+                                     onClick = {action((e) => { 
                                         const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
-                                             <AiOutlineMinusSquare/></div>
+
+                                             <AiOutlineMinusSquare/>
+                                             
+                                             </div>
                                 
-                                    <div onClick = {action((e) => { 
-                                     
-                                        // delete this.activeFacets[facetHeader];
-                                        // StrListCast(this.targetDoc._childFilters).find(filter => filter.split(Doc.FilterSep)[2] = 'remove')
-                                        // .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
-                                        // ?.split(Doc.FilterSep)[2] === 'check'
-                                        // console.log("why cant i get this "+ console.log( StrListCast(this.targetDoc._childFilters)
-                                        // .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader)))
-                                         this.activeFacets.delete(facetHeader)
-                                         this._chosenFacets.delete(facetHeader)
-                                         this._chosenFacetsCollapse.delete(facetHeader)
-                                        //  this._removeBoolean  = true
-                                        //  setTimeout(() => {this._removeBoolean = false}, 1000 )
-                                        //  console.log("TRYING SOMETHING NEW " + e.target.checked)
-                                        
-                                        // check if the current values are apart of the this.facetValues(facetHeader).map(fval ... 
-                                         
-                                        // SET UP BOOLEAN AND IF IT IS TRUE MEANS ITS CLICKED AND THEN ALL BOXES SHOULD BE UNCHECKED 
-                                        }
-                                        )
-                                    }  
-                                    // onChange = {undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, 'check'), 'set filter')}
-                                     >
-                                             <CiCircleRemove/> </div> 
-                                  </div>
-                               
+                                    <div className='filterBox-facetHeader-remove'
+                                     onClick = {action((e) => { 
+                                        for (var key of this.facetValues(facetHeader)){
+                                            if (this._currentActiveFilters.get(key)){
+                                                Doc.setDocFilter(this.targetDoc, facetHeader, key, 'remove')
+                                                this._currentActiveFilters.delete(facetHeader)
+                                        }}
+
+                                        this.activeFacets.delete(facetHeader)
+                                        this._chosenFacets.delete(facetHeader)
+                                        this._chosenFacetsCollapse.delete(facetHeader)
+
+                                        })}  >
+                                            
+                                    <CiCircleRemove/> </div> 
+                                  {/* </div> */}
+
                             </div>
                            
-                            { this._chosenFacetsCollapse.get(facetHeader) ? null : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                            { this._chosenFacetsCollapse.get(facetHeader) ? 
+                             this.sortingCurrentFacetValues(facetHeader) : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
                             {/*  */}
                         </div>
                     ))}
@@ -263,7 +280,6 @@ export class FilterPanel extends React.Component<filterProps> {
                     />
                 );
             case 'checkbox':
-                // console.log("checking")
            
                 return this.facetValues(facetHeader).map(fval => {
                     const facetValue = fval;
@@ -271,7 +287,7 @@ export class FilterPanel extends React.Component<filterProps> {
                         <div>
                             <input
                                 style={{ width: 20, marginLeft: 20 }}
-                                checked={ this._removeBoolean ? false : 
+                                checked={ 
                                         StrListCast(this.targetDoc._childFilters)
                                             .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
                                             ?.split(Doc.FilterSep)[2] === 'check'
@@ -279,25 +295,11 @@ export class FilterPanel extends React.Component<filterProps> {
                                 }
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval,  e.target.checked ? 'check' : 'remove'), 'set filter')}
-                                // onClick={undoable (e => 
-                                //     e.target.checked ? this._currentFilters.push(fval) :  , 'set filter'
-                                // ) }
-                                onClick = {action((e) => {
-                                      console.log("im here")
-                                    console.log( StrListCast(this.targetDoc._childFilters)
-                                    .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
-                                    // ?.split(Doc.FilterSep)[2] === 'check'
-                                    )
-                                    StrListCast(this.targetDoc._childFilters).find(filter => console.log(" rahhhhhh1 " + filter.split(Doc.FilterSep)[1] === facetValue))
-                                    StrListCast(this.targetDoc._childFilters).find(filter => console.log(" rahhhhhh2 " + filter.split(Doc.FilterSep)[2]) )
-                                }
-                                  
-                                    //  console.log("this is an experiment " + StrListCast(this.targetDoc._childFilters)
-                                   
-                                     )
-                                    // undoable (e => console.log(" this is an experiment " + e.target.checked), 'set filter')
-                                   
-                                }
+                                onClick={undoable (e => 
+                                    e.target.checked ? this._currentActiveFilters.set(fval, facetHeader) : this._currentActiveFilters.delete(facetHeader) , 'set filter'
+                                ) }
+                                
+                              
                             />
                             {facetValue}
                         </div>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 5a8a6e4b6..770a72855 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1437,6 +1437,7 @@ export namespace Doc {
     // all documents with the specified value for the specified key are included/excluded
     // based on the modifiers :"check", "x", undefined
     export function setDocFilter(container: Opt<Doc>, key: string, value: any, modifiers: 'remove' | 'match' | 'check' | 'x' | 'exists' | 'unset', toggle?: boolean, fieldPrefix?: string, append: boolean = true) {
+       console.log("in setDocFilter: key "+ key + "value " + value)
         if (!container) return;
         const filterField = '_' + (fieldPrefix ? fieldPrefix + '_' : '') + 'childFilters';
         const childFilters = StrListCast(container[filterField]);