diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/search/CheckBox.scss | 10 | ||||
-rw-r--r-- | src/client/views/search/CheckBox.tsx | 15 | ||||
-rw-r--r-- | src/client/views/search/CollectionFilters.scss | 19 | ||||
-rw-r--r-- | src/client/views/search/CollectionFilters.tsx | 52 | ||||
-rw-r--r-- | src/client/views/search/FieldFilters.tsx | 19 | ||||
-rw-r--r-- | src/client/views/search/SearchBox.scss | 1 | ||||
-rw-r--r-- | src/client/views/search/SearchBox.tsx | 59 |
7 files changed, 150 insertions, 25 deletions
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> |