From 95dbea8f51b0f5835d6caf9adf2cecdfb51d35f7 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 12 Jun 2019 12:51:41 -0400 Subject: no results working --- src/client/views/search/SearchBox.scss | 13 ++++ src/client/views/search/SearchBox.tsx | 125 +++++---------------------------- 2 files changed, 29 insertions(+), 109 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 48c8f4af1..786b76a5b 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -85,3 +85,16 @@ margin-bottom: 5px; } +.no-result { + width: 500px; + background: $light-color-secondary; + border-color: $intermediate-color; + border-bottom-style: solid; + padding: 10px; + height: 50px; + text-transform: uppercase; + text-align: left; + // width: 80%; + font-weight: bold; +} + diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0b9b84030..319573adf 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -38,8 +38,7 @@ export class SearchBox extends React.Component { @observable private _resultsOpen: boolean = false; @observable private _results: Doc[] = []; @observable filterBoxStatus: boolean = false; - @observable filterMenuRef: React.RefObject = React.createRef(); - @observable filterButtonRef: React.RefObject = React.createRef(); + @observable private _openNoResults: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -57,6 +56,11 @@ export class SearchBox extends React.Component { @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; + + if(this._searchString === ""){ + this._results = []; + this._openNoResults = false; + } } @action @@ -82,6 +86,7 @@ export class SearchBox extends React.Component { runInAction(() => { this._resultsOpen = true; this._results = results; + this._openNoResults = true; }); } @@ -106,9 +111,7 @@ export class SearchBox extends React.Component { } @action filterDocs(docs: Doc[]) { - console.log(this._icons) if (this._icons.length === 0) { - console.log("length is 0") return docs; } let finalDocs: Doc[] = []; @@ -138,108 +141,6 @@ export class SearchBox extends React.Component { } } - // isClickInFilter(curElement: Element) { - // console.log(curElement) - // let name: string = curElement.className; - // if (name.indexOf("filter") !== -1) { - // return true; - // } - // else { - // return this.findAncestor2(name); - - // // if(curElement.parentElement){ - // // let parentName = curElement.parentElement.className; - // // if(parentName.indexOf("filter") !== -1){ - // // return true; - // // } - // // } - // } - // return false; - // } - - // findAncestor2(elementName: string){ - - // if(elementName === ""){ - // return false; - // } - - // if(String(elementName).indexOf("filter") !== -1){ - // return true; - // } - - // if(String(elementName).indexOf("SVG")!==-1){ - // console.log("is svg") - // return true; - // } - - // let curElement: Element = document.getElementsByClassName(elementName)[0]; - // let name: string; - // while(curElement.parentElement){ - // name = curElement.className; - // if(name.indexOf("filter") !== -1){ - // return true; - // } - // curElement = curElement.parentElement; - // } - // return false; - // } - - // @action - // handleSearchClick = (e: MouseEvent): void => { - - // // console.log(e) - - // let name: string = (e.target as any).className; - - - - // // console.log((e.target as any).className) - // let element = document.getElementsByClassName((e.target as any).className)[0]; - // // console.log(this.findAncestor2(name)); - // //handles case with filter button - // if (String(name).indexOf("filter") !== -1 || String(name).indexOf("SVG") !== -1) { - // this._resultsOpen = false; - // this._results = []; - // this._open = true; - // // console.log("name is svg") - // } - // else if (element && element.parentElement) { - // //if the filter element is found, show the form and hide the results - // if (this.findAncestor(element, "filter-form")) { - // this._resultsOpen = false; - // this._results = []; - // this._open = true; - // // console.log("parent is filter form") - // } - // //if in main search div, keep results open and close filter - // else if (this.findAncestor(element, "main-searchDiv")) { - // this._resultsOpen = true; - // this._open = false; - // } - // } - // //not in either, close both - // else { - // this._resultsOpen = false; - // this._results = []; - // this._open = false; - // } - - // } - - // //finds ancestor div that matches class name passed in, if not found false returned - // findAncestor(curElement: any, cls: string) { - // while ((curElement = curElement.parentElement) && !curElement.classList.contains(cls)); - // return curElement; - // } - - // componentWillMount() { - // document.addEventListener('mousedown', this.handleSearchClick, false); - // } - - // componentWillUnmount() { - // document.removeEventListener('mousedown', this.handleSearchClick, false); - // } - enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); @@ -333,6 +234,8 @@ export class SearchBox extends React.Component { @action.bound openSearch(e: React.PointerEvent) { e.stopPropagation(); + this._results = []; + this._openNoResults = false; this._open = false; this._resultsOpen = true; this._pointerTime = e.timeStamp; @@ -352,17 +255,21 @@ export class SearchBox extends React.Component { - + {this._resultsOpen ? (
- {this._results.map(result => )} + { (this._results.length !== 0) ? ( + this._results.map(result => ) + ) : + this._openNoResults ? (
No Search Results
) : null } +
) : undefined} {/* these all need class names in order to find ancestor - please do not delete */} {this._open ? ( -
+
-- cgit v1.2.3-70-g09d2