aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/search/CheckBox.tsx8
-rw-r--r--src/client/views/search/FieldFilters.tsx29
-rw-r--r--src/client/views/search/SearchBox.scss12
-rw-r--r--src/client/views/search/SearchBox.tsx100
-rw-r--r--src/client/views/search/ToggleBar.scss4
5 files changed, 129 insertions, 24 deletions
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 94fd3503d..fc1d4005e 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -42,7 +42,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
targets: this.checkRef.current,
easing: "easeInOutQuad",
duration: 500,
- opacity: 1 ,
+ opacity: 0 ,
});
this.checkTimeline.add({
targets: this.checkRef.current,
@@ -51,11 +51,15 @@ export class CheckBox extends React.Component<CheckBoxProps>{
strokeDashoffset: [anime.setDashoffset, 0],
opacity: 1
});
+
+ if(this.props.originalStatus){
+ this.checkTimeline.play();
+ }
}
@action.bound
onClick = () => {
- this.props.updateStatus(this._status);
+ this.props.updateStatus(!this._status);
if(this._status){
this.uncheckTimeline.play();
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
new file mode 100644
index 000000000..e84137d69
--- /dev/null
+++ b/src/client/views/search/FieldFilters.tsx
@@ -0,0 +1,29 @@
+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";
+
+export interface FieldFilterProps {
+ titleFieldStatus: boolean;
+ dataFieldStatus: boolean;
+ authorFieldStatus: boolean;
+ updateTitleStatus(stat: boolean): void;
+ updateAuthorStatus(stat: boolean): void;
+ updateDataStatus(stat: boolean): void;
+}
+
+export class FieldFilters extends React.Component<FieldFilterProps> {
+ render() {
+ return (
+ <div>
+ <div className="filter field-title">Filter by Basic Keys</div>
+ <CheckBox originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+ <CheckBox originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+ <CheckBox originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+ </div>
+ )
+ }
+} \ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 786b76a5b..2b52112e0 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -38,11 +38,14 @@
.filter-form {
background: $dark-color;
- height: 400px;
+ // height: 400px;
+ height: auto;
+ overflow: auto;
position: relative;
right: 1px;
color: $light-color;
flex-direction: column;
+ display: inline-block;
}
#filter{
@@ -68,8 +71,11 @@
height: 20px;
}
-.where-in-doc{
- height: 20px;
+.field-title {
+ color: $light-color;
+ text-transform: uppercase;
+ margin-top: 5px;
+ margin-bottom: 5px;
}
.type-of-node{
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 755d6a14c..a25fff32d 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -23,9 +23,12 @@ import { ToggleBar } from './ToggleBar';
import { IconBar } from './IconBar';
import { type } from 'os';
import { CheckBox } from './CheckBox';
+import { FieldFilters } from './FieldFilters';
export enum Keys {
TITLE = "title",
+ AUTHOR = "author",
+ DATA = "data"
}
@observer
@@ -39,11 +42,13 @@ export class SearchBox extends React.Component {
@observable private _filterOpen: boolean = false;
@observable private _resultsOpen: boolean = false;
@observable private _results: Doc[] = [];
- @observable filterBoxStatus: boolean = false;
@observable private _openNoResults: boolean = false;
allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
@observable _icons: string[] = this.allIcons;
@observable _selectedTypes: any[] = [];
+ @observable titleFieldStatus: boolean = true;
+ @observable authorFieldStatus: boolean = true;
+ @observable dataFieldStatus: boolean = true;
constructor(props: Readonly<{}>) {
super(props);
@@ -58,7 +63,7 @@ export class SearchBox extends React.Component {
});
//empties search query after 30 seconds of the search bar/filter box not being open
- if(!this._resultsOpen && !this._filterOpen){
+ if (!this._resultsOpen && !this._filterOpen) {
setTimeout(this.clearSearchQuery, 30000);
}
}
@@ -69,6 +74,7 @@ export class SearchBox extends React.Component {
IconBar.Instance.selectAll();
}
+
@action.bound
onChange(e: React.ChangeEvent<HTMLInputElement>) {
this._searchString = e.target.value;
@@ -85,27 +91,80 @@ export class SearchBox extends React.Component {
this._results = [];
}
+ basicRequireWords(query: string): string {
+ let oldWords = query.split(" ");
+ let newWords: string[] = [];
+ oldWords.forEach(word => {
+ let newWrd = "+" + word;
+ newWords.push(newWrd);
+ });
+ query = newWords.join(" ");
+
+ return query;
+ }
+
+ basicFieldFilters(query: string, type: string): string {
+ let oldWords = query.split(" ");
+ let mod = "";
+
+ if(type === Keys.AUTHOR){
+ mod = " author_t:";
+ }if(type === Keys.DATA){
+ //TODO
+ }if(type === Keys.TITLE){
+ mod = " title_t:";
+ }
+
+ let newWords:string[] = [];
+ oldWords.forEach(word => {
+ let newWrd = mod + word;
+ newWords.push(newWrd);
+ });
+
+ query = newWords.join(" ");
+
+ return query;
+ }
+
+ applyBasicFieldFilters(query: string) {
+ let finalQuery = "";
+
+ if(this.titleFieldStatus){
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
+ }
+ if(this.authorFieldStatus){
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
+ }
+ if(this.dataFieldStatus){
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
+ }
+ return finalQuery;
+ }
+
+ get fieldFiltersApplied(){return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus);}
+
@action
submitSearch = async () => {
let query = this._searchString;
let results: Doc[];
+ //if this is true, then not all of the field boxes are checked
+ //TODO: data
+ if(this.fieldFiltersApplied){
+ query = this.applyBasicFieldFilters(query);
+ }
+
//if this._wordstatus is false, all words are required and a + is added before each
if (!this._basicWordStatus) {
- let oldWords = query.split(" ");
- let newWords: string[] = [];
- oldWords.forEach(word => {
- let newWrd = "+" + word;
- newWords.push(newWrd);
- });
- query = newWords.join(" ");
+ query = this.basicRequireWords(query);
}
+ query = query.replace(/\s+/g, ' ').trim()
+
//if there is no query there should be no result
if (query === "") {
results = [];
}
-
else {
//gets json result into a list of documents that can be used
results = await this.getResults(query);
@@ -271,9 +330,19 @@ export class SearchBox extends React.Component {
this._pointerTime = e.timeStamp;
}
- //TODO: to be done with checkmark
- updateCheckStatus(newStat: boolean) {
- console.log("updating!")
+ @action.bound
+ updateTitleStatus(newStat: boolean) {
+ this.titleFieldStatus = newStat;
+ }
+
+ @action.bound
+ updateAuthorStatus(newStat: boolean) {
+ this.authorFieldStatus = newStat;
+ }
+
+ @action.bound
+ updateDataStatus(newStat: boolean) {
+ this.dataFieldStatus = newStat;
}
// Useful queries:
@@ -310,13 +379,14 @@ export class SearchBox extends React.Component {
<ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
</div>
<div className="type-of-node filter-div">
- <IconBar/>
+ <IconBar />
</div>
<div className="filter-collection filter-div">
temp for filtering by collection
</div>
<div className="where-in-doc filter-div">
- <CheckBox originalStatus={true} updateStatus={this.updateCheckStatus} title={Keys.TITLE} />
+ <FieldFilters titleFieldStatus = {this.titleFieldStatus} dataFieldStatus = {this.dataFieldStatus} authorFieldStatus = {this.authorFieldStatus}
+ updateAuthorStatus = {this.updateAuthorStatus} updateDataStatus = {this.updateDataStatus} updateTitleStatus = {this.updateTitleStatus}/>
</div>
</div>
<button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 68f0c9c2b..3a262709d 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -32,9 +32,5 @@
height: 100%;
border-radius: 10px;
background-color: $light-color;
- -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;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 13:36:41 +0000