diff options
| -rw-r--r-- | solr/conf/solrconfig.xml | 2 | ||||
| -rw-r--r-- | src/client/views/search/IconBar.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/search/Pager.scss | 47 | ||||
| -rw-r--r-- | src/client/views/search/Pager.tsx | 78 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 9 | ||||
| -rw-r--r-- | src/server/Search.ts | 5 |
6 files changed, 139 insertions, 4 deletions
diff --git a/solr/conf/solrconfig.xml b/solr/conf/solrconfig.xml index 90eff5363..0d8792749 100644 --- a/solr/conf/solrconfig.xml +++ b/solr/conf/solrconfig.xml @@ -695,7 +695,7 @@ --> <lst name="defaults"> <str name="echoParams">explicit</str> - <int name="rows">10</int> + <int name="rows">10000000</int> <str name="df">text</str> <!-- Default search field <str name="df">text</str> 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; |