From 61f7e5f47a02c004982640270feb8176e9407eb5 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Mon, 27 Jul 2020 17:33:01 -0400
Subject: filtering in search bar

---
 .../views/collections/CollectionSchemaView.tsx     |   5 +-
 src/client/views/search/SearchBox.tsx              | 110 ++++++++++++++++++---
 2 files changed, 98 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 0b3d8e20d..4ecc7ba60 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -315,7 +315,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @undoBatch
     @action
     changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => {
-        console.log("COL");
         const columns = this.columns;
         if (columns === undefined) {
             this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
@@ -630,10 +629,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight() || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
-                style={{ backgroundColor:"white", width: `calc(100% - ${this.previewWidth()}px)` }}
+                style={{ backgroundColor: "white", width: `calc(100% - ${this.previewWidth()}px)` }}
                 onKeyPress={this.onKeyPress}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 0daebf0cf..7601ea12e 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -39,6 +39,7 @@ import { listSpec } from '../../../fields/Schema';
 import * as _ from "lodash";
 import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
+import { indexOf } from 'lodash';
 
 
 library.add(faTimes);
@@ -187,8 +188,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable newsearchstring: string = "";
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        //this.layoutDoc._searchString = e.target.value;
+        this.layoutDoc._searchString = e.target.value;
+        console.log(e.target.value);
         this.newsearchstring = e.target.value;
+
+        if (this.filter === true) {
+            runInAction(() => { this.open = false });
+            this.submitFilter();
+        }
+
+
         if (e.target.value === "") {
             console.log("CLOSE");
             runInAction(() => { this.open = false });
@@ -205,7 +214,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
-            console.log(this.newsearchstring)
             this.layoutDoc._searchString = this.newsearchstring;
             // if (this._icons !== this._allIcons) {
             //     runInAction(() => { this.expandedBucket = false });
@@ -219,7 +227,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 runInAction(() => { this.open = false });
 
             }
-            this.submitSearch();
+            if (this.filter === false) {
+                this.submitSearch();
+            }
+
         }
     }
 
@@ -430,6 +441,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
 
 
+    @action
+    submitFilter() {
+        let searchString = StrCast(this.layoutDoc._searchString);
+        if (searchString.includes(":") === false) {
+            return
+        }
+        let key = searchString.slice(0, searchString.indexOf(":"));
+        console.log(key);
+        console.log(searchString);
+        let values = searchString.slice(searchString.indexOf(":") + 1, searchString.length);
+        console.log(values);
+
+        const selectedCollection: DocumentView = SelectionManager.SelectedDocuments()[0];
+        if (selectedCollection !== undefined) {
+            let docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
+            let found: [Doc, string[], string[]][] = [];
+            Doc.setDocFilter(selectedCollection.props.Document, key, values, "match");
+            // docs.forEach((d) => {
+            //     let hlights: string[] = [];
+            //     const protos = Doc.GetAllPrototypes(d);
+            //     let proto = protos[protos.length - 2];
+            //     Object.keys(proto).forEach(key => {
+            //         console.log(key);
+            //         console.log(StrCast(this.layoutDoc._searchString));
+            //         Doc.setDocFilter(selectedCollection.props.Document, key, StrCast(this.layoutDoc._searchString), "match");
+
+            //         // if (StrCast(d[key]).includes(query)) {
+            //         //     console.log(key, d[key]);
+            //         //     hlights.push(key);
+            //         // }
+            //     });
+            //     // if (hlights.length > 0) {
+            //     //     found.push([d, hlights, []]);
+            //     // };
+            // });
+            // console.log(found);
+            // this._results = found;
+            // this._numTotalResults = found.length;
+        }
+        else {
+            this.noresults = "No collection selected :(";
+        }
+
+        //Doc.setDocFilter(this.props.Document, newKey, filter, "match");
+    }
+
     @action
     submitSearch = async (reset?: boolean) => {
 
@@ -474,7 +531,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
     }
 
-    @observable scale = false;
+    @observable scale = true;
 
     @observable _timeout: any = undefined;
 
@@ -1163,6 +1220,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     addDocument = (doc: Doc) => {
         return null;
     }
+
+    @observable filter = false;
+
     //Make id layour document
     render() {
         this.props.Document._chromeStatus === "disabled";
@@ -1200,7 +1260,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     {this._searchbarOpen === true ?
                         <div style={{ display: "flex", justifyContent: "center", }}>
                             <div style={{
-                                width: this.headercount > 0 ? length : 251,
+                                width: this.headercount > 0 ? length : 253,
                                 height: 25,
                                 borderColor: "#9c9396",
                                 border: "1px solid",
@@ -1211,21 +1271,43 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 top: 29
                             }}>
                                 <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
-                                    <div className="radio" style={{ margin: 0 }}>
-                                        <label style={{ fontSize: 12, marginTop: 6 }} >
-                                            <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this.scale === false} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
+                                    <div className="checkbox" style={{ margin: 0 }}>
+                                        <label style={{ fontSize: 12, marginTop: 6 }}>
+                                            <input style={{ marginLeft: -16, marginTop: -1 }} checked={this.filter === true} onChange={() => { runInAction(() => { this.filter = !this.filter }) }} type="checkbox"></input>
+                                            Filter
+                                        </label>
+                                    </div>
+                                    {this.filter === true ? <div style={{ display: "contents" }}>
+                                        <div className="radio" style={{ margin: 0 }}>
+                                            <label style={{ fontSize: 12, marginTop: 6 }} >
+                                                <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this.scale === false} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
                                         Current collection
                                     </label>
-                                    </div>
-                                    <div className="radio" style={{ margin: 0 }}>
-                                        <label style={{ fontSize: 12, marginTop: 6 }} >
-                                            <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.scale === true} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
-                                            Database
+                                        </div>
+                                        <div className="radio" style={{ margin: 0 }}>
+                                            <label style={{ fontSize: 12, marginTop: 6 }} >
+                                                <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.scale === true} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
+                                            Workspace
                                     </label>
+                                        </div>
                                     </div>
+                                        : <div style={{ display: "contents" }}>
+                                            <div className="radio" style={{ margin: 0 }}>
+                                                <label style={{ fontSize: 12, marginTop: 6 }} >
+                                                    <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this.scale === false} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
+                                Current collection
+                            </label>
+                                            </div>
+                                            <div className="radio" style={{ margin: 0 }}>
+                                                <label style={{ fontSize: 12, marginTop: 6 }} >
+                                                    <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.scale === true} onChange={() => { runInAction(() => { this.scale = !this.scale }) }} />
+                                    Database
+                            </label>
+                                            </div>
+                                        </div>
+                                    }
                                 </form>
                             </div>
-
                             {this.noresults === "" ? <div style={{ display: this.open === true ? "contents" : "none" }}> <CollectionView {...this.props}
                                 Document={this.props.Document}
                                 moveDocument={returnFalse}
-- 
cgit v1.2.3-70-g09d2