filter UI

2 files changed, 120 insertions, 73 deletions

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index a9d48219a..8c97d5dbc 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -17,8 +17,8 @@ interface CheckBoxProps {
 export class CheckBox extends React.Component<CheckBoxProps>{
     // true = checked, false = unchecked
     @observable private _status: boolean;
-    @observable private uncheckTimeline: anime.AnimeTimelineInstance;
-    @observable private checkTimeline: anime.AnimeTimelineInstance;
+    // @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+    // @observable private checkTimeline: anime.AnimeTimelineInstance;
     @observable private checkRef: any;
     @observable private _resetReaction?: IReactionDisposer;
 
@@ -28,87 +28,87 @@ export class CheckBox extends React.Component<CheckBoxProps>{
         this._status = this.props.originalStatus;
         this.checkRef = React.createRef();
 
-        this.checkTimeline = anime.timeline({
-            loop: false,
-            autoplay: false,
-            direction: "normal",
-        }); this.uncheckTimeline = anime.timeline({
-            loop: false,
-            autoplay: false,
-            direction: "normal",
-        });
+        // this.checkTimeline = anime.timeline({
+        //     loop: false,
+        //     autoplay: false,
+        //     direction: "normal",
+        // }); this.uncheckTimeline = anime.timeline({
+        //     loop: false,
+        //     autoplay: false,
+        //     direction: "normal",
+        // });
     }
 
-    componentDidMount = () => {
-        this.uncheckTimeline.add({
-            targets: this.checkRef.current,
-            easing: "easeInOutQuad",
-            duration: 500,
-            opacity: 0,
-        });
-        this.checkTimeline.add({
-            targets: this.checkRef.current,
-            easing: "easeInOutQuad",
-            duration: 500,
-            strokeDashoffset: [anime.setDashoffset, 0],
-            opacity: 1
-        });
+    // componentDidMount = () => {
+    //     this.uncheckTimeline.add({
+    //         targets: this.checkRef.current,
+    //         easing: "easeInOutQuad",
+    //         duration: 500,
+    //         opacity: 0,
+    //     });
+    //     this.checkTimeline.add({
+    //         targets: this.checkRef.current,
+    //         easing: "easeInOutQuad",
+    //         duration: 500,
+    //         strokeDashoffset: [anime.setDashoffset, 0],
+    //         opacity: 1
+    //     });
 
-        if (this.props.originalStatus) {
-            this.checkTimeline.play();
-            this.checkTimeline.restart();
-        }
+    //     if (this.props.originalStatus) {
+    //         this.checkTimeline.play();
+    //         this.checkTimeline.restart();
+    //     }
 
-        this._resetReaction = reaction(
-            () => this.props.parent._resetBoolean,
-            () => {
-                if (this.props.parent._resetBoolean) {
-                    runInAction(() => {
-                        this.reset();
-                        this.props.parent._resetCounter++;
-                        if (this.props.parent._resetCounter === this.props.numCount) {
-                            this.props.parent._resetCounter = 0;
-                            this.props.parent._resetBoolean = false;
-                        }
-                    });
-                }
-            },
-        );
-    }
+    //     this._resetReaction = reaction(
+    //         () => this.props.parent._resetBoolean,
+    //         () => {
+    //             if (this.props.parent._resetBoolean) {
+    //                 runInAction(() => {
+    //                     this.reset();
+    //                     this.props.parent._resetCounter++;
+    //                     if (this.props.parent._resetCounter === this.props.numCount) {
+    //                         this.props.parent._resetCounter = 0;
+    //                         this.props.parent._resetBoolean = false;
+    //                     }
+    //                 });
+    //             }
+    //         },
+    //     );
+    // }
 
-    @action.bound
-    reset() {
-        if (this.props.default) {
-            if (!this._status) {
-                this._status = true;
-                this.checkTimeline.play();
-                this.checkTimeline.restart();
-            }
-        }
-        else {
-            if (this._status) {
-                this._status = false;
-                this.uncheckTimeline.play();
-                this.uncheckTimeline.restart();
-            }
-        }
+    // @action.bound
+    // reset() {
+    //     if (this.props.default) {
+    //         if (!this._status) {
+    //             this._status = true;
+    //             this.checkTimeline.play();
+    //             this.checkTimeline.restart();
+    //         }
+    //     }
+    //     else {
+    //         if (this._status) {
+    //             this._status = false;
+    //             this.uncheckTimeline.play();
+    //             this.uncheckTimeline.restart();
+    //         }
+    //     }
 
-        this.props.updateStatus(this.props.default);
-    }
+    //     this.props.updateStatus(this.props.default);
+    // }
 
     @action.bound
     onClick = () => {
-        if (this._status) {
-            this.uncheckTimeline.play();
-            this.uncheckTimeline.restart();
-        }
-        else {
-            this.checkTimeline.play();
-            this.checkTimeline.restart();
+        // if (this._status) {
+        //     this.uncheckTimeline.play();
+        //     this.uncheckTimeline.restart();
+        // }
+        // else {
+        //     this.checkTimeline.play();
+        //     this.checkTimeline.restart();
 
-        }
-        this._status = !this._status;
-        this.props.updateStatus(this._status);
+        // }
+        // this._status = !this._status;
+        // this.props.updateStatus(this._status);
 
     }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 9af8829fa..02b41bc70 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -17,6 +17,7 @@ import "./FilterBox.scss";
 import "./SearchBox.scss";
 import { SearchItem } from './SearchItem';
 import { IconBar } from './IconBar';
+import { FieldFilters } from './FieldFilters';
 
 library.add(faTimes);
 
@@ -338,6 +339,9 @@ export class SearchBox extends React.Component {
     @computed
     get resultHeight() { return this._numTotalResults * 70; }
 
+    @observable private _filterOpen: boolean = false;
+
+
     render() {
         return (
             <div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
@@ -353,6 +357,49 @@ export class SearchBox extends React.Component {
                 <div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
                     <div className="filter-panel"><IconBar /></div>
                 </div>
+                <div>
+                    <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+                        <SearchBox />
+                        {/* {this.getActiveFilters()} */}
+                    </div>
+                    <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
+                        <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
+                            <div id="header">Filter Search Results</div>
+                            <div style={{ marginLeft: "auto" }}></div>
+                            <div className="close-icon" >
+                                <span className="line line-1"></span>
+                                <span className="line line-2"></span></div>
+                        </div>
+                        <div className="filter-options">
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className='filter-title words'>Required words</div>
+                                </div>
+                                <div className="filter-panel" >
+                                    <button className="all-filter">Include All Keywords</button>
+                                </div>
+                            </div>
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className="filter-title icon">Filter by type of node</div>
+                                </div>
+                                <div className="filter-panel"><IconBar /></div>
+                            </div>
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className="filter-title field">Filter by Basic Keys</div>
+                                </div>
+                                <div className="filter-panel"><FieldFilters
+                                    titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
+                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
+                            </div>
+                        </div>
+                        <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
+                            <button className="save-filter" >Save Filters</button>
+                            <button className="reset-filter" >Reset Filters</button>
+                        </div>
+                    </div>
+                </div>
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
                     height: this.resFull ? "auto" : this.resultHeight,