From a193bdcb4e3abbb41698ef1ed0f65ff8407c5bf4 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 19 Jul 2023 13:23:25 -0400
Subject: collapsing in filters works

---
 src/client/views/FilterPanel.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'src')

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 (
-- 
cgit v1.2.3-70-g09d2