From 096913a2aa25bf4d5d2bf9a1911ae45111229dc7 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Tue, 25 Jun 2019 19:27:17 -0400
Subject: end of day 6/25

---
 src/client/views/search/IconBar.tsx   |  2 +-
 src/client/views/search/Pager.scss    | 47 +++++++++++++++++++++
 src/client/views/search/Pager.tsx     | 78 +++++++++++++++++++++++++++++++++++
 src/client/views/search/SearchBox.tsx |  9 ++++
 src/server/Search.ts                  |  5 ++-
 5 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 src/client/views/search/Pager.scss
 create mode 100644 src/client/views/search/Pager.tsx

(limited to 'src')

diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 23a5458bc..744dd898a 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -63,7 +63,7 @@ export class IconBar extends React.Component {
                 <div className="type-outer">
                     <div className={"type-icon all"}
                         onClick={this.selectAll}>
-                        <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+                    <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
                     </div>
                     <div className="filter-description">Select All</div>
                 </div>
diff --git a/src/client/views/search/Pager.scss b/src/client/views/search/Pager.scss
new file mode 100644
index 000000000..2b9c81b93
--- /dev/null
+++ b/src/client/views/search/Pager.scss
@@ -0,0 +1,47 @@
+@import "../globalCssVariables";
+
+.search-pager {
+    background-color: $dark-color;
+    border-radius: 10px;
+    width: 500px;
+    display: flex;
+    justify-content: center;
+    // margin-left: 27px;
+    float: right;
+    margin-right: 74px;
+    margin-left: auto;
+
+    // flex-direction: column;
+
+    .search-arrows {
+        display: flex;
+        justify-content: center;
+        margin: 10px;
+        width: 50%;
+
+        .arrow {
+            -webkit-transition: all 0.2s ease-in-out;
+            -moz-transition: all 0.2s ease-in-out;
+            -o-transition: all 0.2s ease-in-out;
+            transition: all 0.2s ease-in-out;
+
+            .fontawesome-icon {
+                color: $light-color;
+                width: 20px;
+                height: 20px;
+                margin-right: 2px;
+                margin-left: 2px;
+                // opacity: .7;
+            }
+        }
+
+        .pager-title {
+            text-align: center;
+            // font-size: 8px;
+            // margin-bottom: 10px;
+            color: $light-color;
+            // padding: 2px;
+            width: 40%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/Pager.tsx b/src/client/views/search/Pager.tsx
new file mode 100644
index 000000000..258f112b9
--- /dev/null
+++ b/src/client/views/search/Pager.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import "./Pager.scss"
+import { SearchBox } from './SearchBox';
+import { observable, action } from 'mobx';
+import { FilterBox } from './FilterBox';
+
+library.add(faArrowCircleRight);
+library.add(faArrowCircleLeft);
+
+@observer
+export class Pager extends React.Component {
+
+    @observable _leftHover: boolean = false;
+    @observable _rightHover: boolean = false;
+
+    @action
+    onLeftClick(e: React.PointerEvent) {
+        FilterBox.Instance._pointerTime = e.timeStamp;
+        if(SearchBox.Instance._pageNum > 0){
+            SearchBox.Instance._pageNum -= 1;
+        }
+    }
+
+    @action
+    onRightClick(e: React.PointerEvent) {
+        FilterBox.Instance._pointerTime = e.timeStamp;
+        if(SearchBox.Instance._pageNum+1 < SearchBox.Instance._maxNum){
+            SearchBox.Instance._pageNum += 1;
+        }
+    }
+
+    @action.bound
+    mouseInLeft() {
+        this._leftHover = true;
+    }
+
+    @action.bound
+    mouseOutLeft() {
+        this._leftHover = false;
+    }
+
+    @action.bound
+    mouseInRight() {
+        this._rightHover = true;
+    }
+
+    @action.bound
+    mouseOutRight() {
+        this._rightHover = false;
+    }
+
+    render() {
+        return (
+            <div className="search-pager">
+                <div className="search-arrows">
+                    <div className = "arrow"
+                    onPointerDown = {this.onLeftClick} style = {SearchBox.Instance._pageNum === 0 ? {opacity: .2} : this._leftHover ? {opacity: 1} : {opacity: .7}}
+                    onMouseEnter = {this.mouseInLeft} onMouseOut = {this.mouseOutLeft}>
+                        <FontAwesomeIcon className="fontawesome-icon" icon={faArrowCircleLeft} />
+                    </div>
+                    <div className="pager-title">
+                        page {SearchBox.Instance._pageNum + 1} of {SearchBox.Instance._maxNum}
+                    </div>
+                    <div className = "arrow"
+                    onPointerDown = {this.onRightClick} style = {SearchBox.Instance._pageNum === SearchBox.Instance._maxNum-1 ? {opacity: .2} : this._rightHover ? {opacity: 1} : {opacity: .7}}
+                    onMouseEnter = {this.mouseInRight} onMouseOut = {this.mouseOutRight}>
+                        <FontAwesomeIcon className="fontawesome-icon" icon={faArrowCircleRight} />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e86ecb781..dbaa6eba2 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -15,6 +15,7 @@ import { Id } from '../../../new_fields/FieldSymbols';
 import { SearchUtil } from '../../util/SearchUtil';
 import { RouteStore } from '../../../server/RouteStore';
 import { FilterBox } from './FilterBox';
+import { Pager } from './Pager';
 
 @observer
 export class SearchBox extends React.Component {
@@ -23,6 +24,10 @@ export class SearchBox extends React.Component {
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
     @observable private _openNoResults: boolean = false;
+    @observable public _pageNum: number = 0;
+    //temp
+    @observable public _maxNum: number = 10;
+
     static Instance: SearchBox;
 
     constructor(props: any) {
@@ -164,6 +169,7 @@ export class SearchBox extends React.Component {
 
     @action.bound
     closeSearch = () => {
+        console.log("closing search")
         FilterBox.Instance.closeFilter();
         this.closeResults();
     }
@@ -192,6 +198,9 @@ export class SearchBox extends React.Component {
                     ) :
                         this._openNoResults ? (<div className="no-result">No Search Results</div>) : null}
                 </div>
+                <div style={this._results.length !== 0 ? { display: "flex" } : { display: "none" }}>
+                    <Pager />
+                </div>
             </div>
         );
     }
diff --git a/src/server/Search.ts b/src/server/Search.ts
index d776480c6..2db2b242c 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -18,12 +18,13 @@ export class Search {
         }
     }
 
-    public async search(query: string) {
+    public async search(query: string, start: number = 0) {
         try {
             const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
                 qs: {
                     q: query,
-                    fl: "id"
+                    fl: "id",
+                    start: start
                 }
             }));
             const fields = searchResults.response.docs;
-- 
cgit v1.2.3-70-g09d2