From 82e7b6008b4cbab1890235b4b959634ec916d1a1 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Thu, 20 Jun 2019 18:31:58 -0400
Subject: checkboxes working

---
 src/client/views/search/CheckBox.scss          | 10 +++--
 src/client/views/search/CheckBox.tsx           | 15 ++++++-
 src/client/views/search/CollectionFilters.scss | 19 +++++++++
 src/client/views/search/CollectionFilters.tsx  | 52 +++++++++++++++++++++++
 src/client/views/search/FieldFilters.tsx       | 19 ++++-----
 src/client/views/search/SearchBox.scss         |  1 +
 src/client/views/search/SearchBox.tsx          | 59 ++++++++++++++++++++++----
 7 files changed, 150 insertions(+), 25 deletions(-)
 create mode 100644 src/client/views/search/CollectionFilters.scss
 create mode 100644 src/client/views/search/CollectionFilters.tsx

(limited to 'src')

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index 582d24e72..9b0af68d5 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -1,13 +1,16 @@
 @import "../globalCssVariables";
 
-.checkbox {
+.checkboxfilter {
     display: flex;
+    margin-top: 0px;
+    padding: 3px;
 
     .outer {
         display: flex;
         position: relative;
         justify-content: center;
-        align-items: center;
+        align-items: center; 
+        margin-top: 0px;
     }
 
     .check-box {
@@ -28,7 +31,6 @@
 
     .check-container:hover ~ .check-box {
         background-color: $intermediate-color;
-
     }
 
     .check-container {
@@ -49,6 +51,8 @@
 }
 
 .checkbox-title {
+    display: flex;
+    align-items: center;
     text-transform: capitalize;
     margin-left: 15px;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 26ad9d8ce..24c404892 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -10,6 +10,7 @@ interface CheckBoxProps {
     title: string;
     parent: any;
     numCount: number;
+    default: boolean;
 }
 
 @observer
@@ -36,6 +37,9 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             autoplay: false,
             direction: "normal",
         });
+
+        // console.log(this.props.getStatus())
+        // console.log(this.props.getStatus)
     }
 
     componentDidMount = () => {
@@ -55,6 +59,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
         if (this.props.originalStatus) {
             this.checkTimeline.play();
+            this.checkTimeline.restart();
         }
 
         this._resetReaction = reaction(
@@ -76,12 +81,18 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
     @action.bound
     reset() {
-        if (!this._status) {
+        if(this.props.default){
             this._status = true;
             this.checkTimeline.play();
             this.checkTimeline.restart();
         }
+        else{
+            this._status = false;
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
 
+        this.props.updateStatus(this.props.default);
     }
 
     @action.bound
@@ -102,7 +113,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
     render() {
         return (
-            <div className="checkbox" onClick={this.onClick}>
+            <div className="checkboxfilter" onClick={this.onClick}>
                 <div className="outer">
                     <div className="check-container">
                         <svg viewBox="0 12 40 40">
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
new file mode 100644
index 000000000..5e1f4effc
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.scss
@@ -0,0 +1,19 @@
+@import "../globalCssVariables";
+
+.collection-filters{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.collection-filters.main{
+    width: 47%;
+    float: left;
+}
+
+.collection-filters.optional{
+    width: 60%;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    float: right;
+}
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
new file mode 100644
index 000000000..8d1aa1294
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import { CheckBox } from './CheckBox';
+import { Keys } from './SearchBox';
+import "./SearchBox.scss";
+import "./CollectionFilters.scss";
+import { FieldFilters } from './FieldFilters';
+
+interface CollectionFilterProps {
+    collectionStatus: boolean;
+    updateCollectionStatus(val: boolean): void;
+    collectionSelfStatus: boolean;
+    updateSelfCollectionStatus(val: boolean): void;
+    collectionParentStatus: boolean;
+    updateParentCollectionStatus(val: boolean): void;
+}
+
+export class CollectionFilters extends React.Component<CollectionFilterProps> {
+
+    static Instance: CollectionFilters;
+
+    @observable public resetBoolean = false;
+    @observable public resetCounter: number = 0;
+
+    constructor(props:CollectionFilterProps){
+        super(props);
+        CollectionFilters.Instance = this;
+    }
+
+    resetCollectionFilters() {
+        this.resetBoolean = true;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='collection-title'>Search in current collections</div>
+                <div className="collection-filters">
+                    <div className="collection-filters main">
+                        <CheckBox default = {false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.props.updateCollectionStatus} originalStatus={this.props.collectionStatus} />
+                    </div>
+                    <div className="collection-filters optional">
+                        <CheckBox default = {true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
+                        <CheckBox default = {true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index a7b142617..c7928dcd6 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, } from 'mobx';
 import "./SearchBox.scss";
 import { CheckBox } from './CheckBox';
 import { Keys } from './SearchBox';
@@ -21,25 +21,22 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
     @observable public resetBoolean = false;
     @observable public resetCounter: number = 0;
 
-    constructor(props: FieldFilterProps){
+    constructor(props: FieldFilterProps) {
         super(props);
         FieldFilters.Instance = this;
     }
 
-resetFieldFilters() {
-    this.props.updateAuthorStatus(true);
-    this.props.updateDataStatus(true);
-    this.props.updateTitleStatus(true);
-    this.resetBoolean = true;
-}
+    resetFieldFilters() {
+        this.resetBoolean = true;
+    }
 
     render() {
         return (
             <div>
                 <div className="filter field-title">Filter by Basic Keys</div>
-                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
-                <CheckBox numCount = {3} parent = {this}  originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
-                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
             </div>
         );
     }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 26a23c218..486ec9a93 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -69,6 +69,7 @@
 
 .filter-collection{
     display: inline-block;
+    width: 100%;
 }
 
 .field-title {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4ebd9c5e4..2ff960aeb 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -29,6 +29,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { CollectionView } from '../collections/CollectionView';
 import { CollectionPDFView } from '../collections/CollectionPDFView';
 import { CollectionVideoView } from '../collections/CollectionVideoView';
+import { CollectionFilters } from './CollectionFilters';
 
 export enum Keys {
     TITLE = "title",
@@ -55,6 +56,8 @@ export class SearchBox extends React.Component {
     @observable authorFieldStatus: boolean = true;
     @observable dataFieldStatus: boolean = true;
     @observable collectionStatus = false;
+    @observable collectionSelfStatus = true;
+    @observable collectionParentStatus = true;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -79,6 +82,14 @@ export class SearchBox extends React.Component {
         ToggleBar.Instance.resetToggle();
         IconBar.Instance.selectAll();
         FieldFilters.Instance.resetFieldFilters();
+        // console.log("field filters at end")
+        // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus)
+        // console.log("should be true, true, true\n")
+        
+        CollectionFilters.Instance.resetCollectionFilters();
+        // console.log("collection filters at end")
+        // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus)
+        // console.log("should be fase, true, true")
     }
 
     @action.bound
@@ -207,10 +218,6 @@ export class SearchBox extends React.Component {
             query = this.addCollectionFilter(query);
             query = query.replace(/\s+/g, ' ').trim();
         }
-
-        //gets rid of any extra spaces that may have been added
-        // query = query.replace(/\s+/g, ' ').trim();
-
         return query;
     }
 
@@ -238,8 +245,6 @@ export class SearchBox extends React.Component {
 
         query = this.getFinalQuery(query);
 
-        console.log(query);
-
         //if there is no query there should be no result
         if (query === "") {
             results = [];
@@ -429,6 +434,40 @@ export class SearchBox extends React.Component {
         this.collectionStatus = newStat;
     }
 
+    @action.bound
+    updateSelfCollectionStatus(newStat: boolean) {
+        this.collectionSelfStatus = newStat;
+    }
+
+    @action.bound
+    updateParentCollectionStatus(newStat: boolean) {
+        this.collectionParentStatus = newStat;
+    }
+
+    getCollectionStatus() {
+        return this.collectionStatus;
+    }
+
+    getSelfCollectionStatus() {
+        return this.collectionSelfStatus;
+    }
+
+    getParentCollectionStatus() {
+        return this.collectionParentStatus;
+    }
+
+    getTitleStatus() {
+        return this.titleFieldStatus;
+    }
+
+    getAuthorStatus() {
+        return this.authorFieldStatus;
+    }
+
+    getDataStatus() {
+        return this.dataFieldStatus;
+    }
+
     // Useful queries:
     // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
     // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype
@@ -466,11 +505,13 @@ export class SearchBox extends React.Component {
                                 <IconBar />
                             </div>
                             <div className="filter-collection filter-div">
-                                <div className='collection-title'>Search in current collections</div>
-                                <CheckBox title={"limit to current collection"} parent={this} numCount={1} updateStatus={this.updateCollectionStatus} originalStatus={this.collectionStatus} />
+                                <CollectionFilters 
+                                updateCollectionStatus = {this.updateCollectionStatus} updateParentCollectionStatus = {this.updateParentCollectionStatus} updateSelfCollectionStatus = {this.updateSelfCollectionStatus}
+                                collectionStatus = {this.collectionStatus} collectionParentStatus = {this.collectionParentStatus} collectionSelfStatus = {this.collectionSelfStatus}/>
                             </div>
                             <div className="where-in-doc filter-div">
-                                <FieldFilters titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
+                                <FieldFilters 
+                                titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
                                     updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
                             </div>
                         </div>
-- 
cgit v1.2.3-70-g09d2