From 639dee759e23083d269ab2a66f30e669b46a9aaf Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 13 Jun 2019 18:41:18 -0400 Subject: honestly no idea what is going on --- src/client/views/search/CheckBox.scss | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/client/views/search/CheckBox.scss (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss new file mode 100644 index 000000000..8eee9176b --- /dev/null +++ b/src/client/views/search/CheckBox.scss @@ -0,0 +1,34 @@ +@import "../globalCssVariables"; + +.checkbox { + display: flex; + + .check-box { + z-index: 900; + position: relative; + height: 20px; + width: 20px; + overflow: visible; + background-color: transparent; + border-style: solid; + border-color: $alt-accent; + border-width: 2px; + } + + .box:hover { + background-color: $intermediate-color; + } + + .checkmark { + z-index: 1000; + position: relative; + fill-opacity: 0; + stroke-width: 4px; + stroke: white; + } + +} + +.checkbox-title { + text-transform: uppercase; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f3f76fc25a9e39d4c08618fb601b5e66ce62e235 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 18 Jun 2019 18:24:51 -0400 Subject: end of day 6/18 --- src/client/views/search/CheckBox.scss | 19 ++++++++++-- src/client/views/search/CheckBox.tsx | 58 +++++++++++++++++++++++++++++++---- 2 files changed, 69 insertions(+), 8 deletions(-) (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 8eee9176b..f7652d830 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,8 +1,15 @@ -@import "../globalCssVariables"; +@import "../globalCssVariables"; .checkbox { display: flex; + .outer { + display: flex; + position: relative; + justify-content: center; + align-items: center; + } + .check-box { z-index: 900; position: relative; @@ -15,13 +22,20 @@ border-width: 2px; } + .check-container { + width: 40px; + height: 40px; + position: absolute; + z-index: 1000; + } + .box:hover { background-color: $intermediate-color; } .checkmark { z-index: 1000; - position: relative; + position: absolute; fill-opacity: 0; stroke-width: 4px; stroke: white; @@ -31,4 +45,5 @@ .checkbox-title { text-transform: uppercase; + margin-left: 10px; } \ No newline at end of file diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 8b5f7d7c1..ace479c70 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action, runInAction } from 'mobx'; import "./CheckBox.scss"; +import * as anime from 'animejs'; interface CheckBoxProps { originalStatus: boolean; @@ -11,27 +12,72 @@ interface CheckBoxProps { @observer export class CheckBox extends React.Component{ + // true = checked, false = unchecked @observable _status: boolean; + @observable uncheckTimeline: anime.AnimeTimelineInstance; + @observable checkTimeline: anime.AnimeTimelineInstance; + @observable checkRef: any; + constructor(props: CheckBoxProps) { super(props); - this._status = this.props.originalStatus; + this.checkRef = React.createRef(); + + this.checkTimeline = anime.timeline({ + loop: false, + autoplay: false, + direction: "normal", + });this.uncheckTimeline = anime.timeline({ + loop: false, + autoplay: false, + direction: "normal", + }); + } + + componentDidMount = () => { + this.uncheckTimeline.add({ + targets: this.checkRef.current, + easing: "easeInOutQuad", + duration: 500, + opacity: 1 , + }); + this.checkTimeline.add({ + targets: this.checkRef.current, + easing: "easeInOutQuad", + duration: 500, + strokeDashoffset: [anime.setDashoffset, 0], + opacity: 1 + }); } + @action.bound onClick = () => { - this._status = !this._status; this.props.updateStatus(this._status); + + if(this._status){ + this.uncheckTimeline.play(); + this.uncheckTimeline.restart(); + } + else{ + this.checkTimeline.play(); + this.checkTimeline.restart(); + + } + this._status = !this._status; } render() { return ( -
-
- - +
+
+
+ +
+
+
{this.props.title}
) -- cgit v1.2.3-70-g09d2 From cf63f68c9d1345855a2bd1f24ba143ba4cfc458a Mon Sep 17 00:00:00 2001 From: Monika Date: Wed, 19 Jun 2019 18:39:08 -0400 Subject: end of day 6/19 --- src/client/views/MainView.tsx | 3 + src/client/views/search/CheckBox.scss | 4 +- src/client/views/search/SearchBox.scss | 9 +- src/client/views/search/SearchBox.tsx | 148 ++++++++++++++++++++++++++++----- 4 files changed, 138 insertions(+), 26 deletions(-) (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c612d4b00..5325282be 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -326,6 +326,9 @@ export class MainView extends React.Component { globalKeyHandler = (e: KeyboardEvent) => { if (e.key === "Control" || !e.ctrlKey) return; + if(e.key === "v") return; + if(e.key === "c") return; + e.preventDefault(); e.stopPropagation(); diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index f7652d830..3f1126948 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -44,6 +44,6 @@ } .checkbox-title { - text-transform: uppercase; - margin-left: 10px; + text-transform: capitalize; + margin-left: 15px; } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 2b52112e0..26a23c218 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -68,7 +68,7 @@ } .filter-collection{ - height: 20px; + display: inline-block; } .field-title { @@ -91,6 +91,13 @@ margin-bottom: 5px; } +.collection-title{ + color: $light-color; + text-transform: uppercase; + margin-top: 5px; + margin-bottom: 5px; +} + .no-result { width: 500px; background: $light-color-secondary; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 86c239f30..f133cfcf1 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -8,12 +8,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import * as rp from 'request-promise'; import { SearchItem } from './SearchItem'; import { DocServer } from '../../DocServer'; -import { Doc } from '../../../new_fields/Doc'; +import { Doc, Opt } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { SetupDrag } from '../../util/DragManager'; import { Docs, DocTypes } from '../../documents/Documents'; import { RouteStore } from '../../../server/RouteStore'; -import { NumCast, Cast } from '../../../new_fields/Types'; +import { NumCast, Cast, StrCast } from '../../../new_fields/Types'; import { SearchUtil } from '../../util/SearchUtil'; import * as anime from 'animejs'; import { updateFunction } from '../../../new_fields/util'; @@ -24,6 +24,11 @@ import { IconBar } from './IconBar'; import { type } from 'os'; import { CheckBox } from './CheckBox'; import { FieldFilters } from './FieldFilters'; +import { SelectionManager } from '../../util/SelectionManager'; +import { DocumentView } from '../nodes/DocumentView'; +import { CollectionView } from '../collections/CollectionView'; +import { CollectionPDFView } from '../collections/CollectionPDFView'; +import { CollectionVideoView } from '../collections/CollectionVideoView'; export enum Keys { TITLE = "title", @@ -49,6 +54,7 @@ export class SearchBox extends React.Component { @observable titleFieldStatus: boolean = true; @observable authorFieldStatus: boolean = true; @observable dataFieldStatus: boolean = true; + @observable collectionStatus = false; constructor(props: Readonly<{}>) { super(props); @@ -107,15 +113,15 @@ export class SearchBox extends React.Component { let oldWords = query.split(" "); let mod = ""; - if(type === Keys.AUTHOR){ + if (type === Keys.AUTHOR) { mod = " author_t:"; - }if(type === Keys.DATA){ + } if (type === Keys.DATA) { //TODO - }if(type === Keys.TITLE){ + } if (type === Keys.TITLE) { mod = " title_t:"; } - let newWords:string[] = []; + let newWords: string[] = []; oldWords.forEach(word => { let newWrd = mod + word; newWords.push(newWrd); @@ -129,37 +135,127 @@ export class SearchBox extends React.Component { applyBasicFieldFilters(query: string) { let finalQuery = ""; - if(this.titleFieldStatus){ + if (this.titleFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE); } - if(this.authorFieldStatus){ + if (this.authorFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR); } - if(this.dataFieldStatus){ + if (this.dataFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA); } return finalQuery; } - get fieldFiltersApplied(){return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus);} + get fieldFiltersApplied() { return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus); } - @action - submitSearch = async () => { - let query = this._searchString; - let results: Doc[]; + //gets all of the collections of all the docviews that are selected + //if a collection is the only thing selected, search only in that collection (not its container) + getCurCollections(): Doc[] { + let selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments(); + let collections: Doc[] = []; + //TODO: make this some sort of error + if (selectedDocs.length === 0) { + console.log("there is nothing selected!") + } + //also searches in a collection if it is selected + else { + selectedDocs.forEach(async element => { + let layout: string = StrCast(element.props.Document.baseLayout); + console.log("doc title:", element.props.Document.title) + //checks if selected view (element) is a collection. if it is, adds to list to search through + if (layout.indexOf("Collection") > -1) { + console.log("current doc is a collection") + //________________________________________________________________ + let proto = await Doc.GetT(element.props.Document, "proto", Doc, true); + let protoId = (proto || element.props.Document)[Id]; + console.log(StrCast(element.props.Document.title), protoId) + + //________________________________________________________________ + //makes sure collections aren't added more than once + if (!collections.includes(element.props.Document)) { + collections.push(element.props.Document); + } + } + //gets the selected doc's containing view + let containingView = element.props.ContainingCollectionView; + //makes sure collections aren't added more than once + if (containingView && !collections.includes(containingView.props.Document)) { + collections.push(containingView.props.Document); + } + }); + } + + return collections; + } + + getFinalQuery(query: string): string { + //alters the query so it looks in the correct fields //if this is true, then not all of the field boxes are checked //TODO: data - if(this.fieldFiltersApplied){ + if (this.fieldFiltersApplied) { query = this.applyBasicFieldFilters(query); + query = query.replace(/\s+/g, ' ').trim(); } + //alters the query based on if all words or any words are required //if this._wordstatus is false, all words are required and a + is added before each if (!this._basicWordStatus) { query = this.basicRequireWords(query); + query = query.replace(/\s+/g, ' ').trim(); + } + + //if should be searched in a specific collection + if (this.collectionStatus) { + query = this.addCollectionFilter(query); + query = query.replace(/\s+/g, ' ').trim(); } - 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; + } + + addCollectionFilter(query: string): string { + let collections: Doc[] = this.getCurCollections(); + let finalQuery: string = ""; + let oldWords = query.split(" "); + + let newWords: string[] = []; + oldWords.forEach(word => { + collections.forEach(async doc => { + let proto = await Doc.GetT(doc, "proto", Doc, true); + let protoId = (proto || doc)[Id]; + console.log(StrCast(doc.title), protoId) + let colString: string = "{!join from=data_l to=id}id:" + protoId + " "; + //{!join from=data_l to=id}id:{collectionProtoId} + let newWrd: string = colString + word; + // console.log(newWrd) + newWords.push(newWrd); + }); + }); + + console.log(newWords) + + //uncomment when done + query = newWords.join(" "); + + + return query; + // const proto = await Doc.GetT(doc, "proto", Doc, true); + // const protoId = (proto || doc)[Id]; + } + + @action + submitSearch = async () => { + let query = this._searchString; + let results: Doc[]; + + query = this.getFinalQuery(query); + + console.log(query); //if there is no query there should be no result if (query === "") { @@ -193,11 +289,11 @@ export class SearchBox extends React.Component { docs.push(field); } } - return this.filterDocs(docs); + return this.filterDocsByType(docs); } //this.icons will now include all the icons that need to be included - @action filterDocs(docs: Doc[]) { + @action filterDocsByType(docs: Doc[]) { let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string", ""); @@ -339,15 +435,20 @@ export class SearchBox extends React.Component { updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; } - + @action.bound updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; } + @action.bound + updateCollectionStatus(newStat: boolean) { + this.collectionStatus = newStat; + } + // 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} + // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype render() { return (
@@ -382,11 +483,12 @@ export class SearchBox extends React.Component {
- temp for filtering by collection +
Search in current collections
+
- +
-- cgit v1.2.3-70-g09d2 From 3e6f1e6e2388bcab53c4ee7d680fa6504e82f74d Mon Sep 17 00:00:00 2001 From: Monika Date: Thu, 20 Jun 2019 12:56:46 -0400 Subject: collections almost theree --- src/client/views/search/CheckBox.scss | 13 +++++++++---- src/client/views/search/SearchBox.tsx | 31 ++++++++++--------------------- 2 files changed, 19 insertions(+), 25 deletions(-) (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 3f1126948..582d24e72 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -20,6 +20,15 @@ border-style: solid; border-color: $alt-accent; border-width: 2px; + -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; + } + + .check-container:hover ~ .check-box { + background-color: $intermediate-color; + } .check-container { @@ -29,10 +38,6 @@ z-index: 1000; } - .box:hover { - background-color: $intermediate-color; - } - .checkmark { z-index: 1000; position: absolute; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 546d58356..4ebd9c5e4 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action, runInAction } from 'mobx'; import "./SearchBox.scss"; -import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faThList } from '@fortawesome/free-solid-svg-icons'; +import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faThList, faWineGlassAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { library } from '@fortawesome/fontawesome-svg-core'; import * as rp from 'request-promise'; @@ -216,30 +216,19 @@ export class SearchBox extends React.Component { addCollectionFilter(query: string): string { let collections: Doc[] = this.getCurCollections(); - console.log("collections", collections) - let finalQuery: string = ""; let oldWords = query.split(" "); - let newWords: string[] = []; - oldWords.forEach(word => { - collections.forEach(doc => { - let proto = doc.proto; - let protoId = (proto || doc)[Id]; - // console.log(StrCast(doc.title), protoId); - let colString: string = "+{!join from=data_l to=id}id:" + protoId + " "; - //{!join from=data_l to=id}id:{collectionProtoId} - let newWrd: string = colString + word; - // console.log(newWrd); - newWords.push(newWrd); - }); + let collectionString: string[] = []; + collections.forEach(doc => { + let proto = doc.proto; + let protoId = (proto || doc)[Id]; + let colString: string = "{!join from=data_l to=id}id:" + protoId + " "; + collectionString.push(colString); }); - console.log(newWords) - - query = newWords.join(" "); - - return query; - // const protoId = (proto || doc)[Id]; + let finalColString = collectionString.join(" "); + finalColString = finalColString.trim(); + return "+(" + finalColString + ")" + query; } @action -- cgit v1.2.3-70-g09d2 From 82e7b6008b4cbab1890235b4b959634ec916d1a1 Mon Sep 17 00:00:00 2001 From: Monika Date: Thu, 20 Jun 2019 18:31:58 -0400 Subject: checkboxes working --- src/client/views/search/CheckBox.scss | 10 +++-- src/client/views/search/CheckBox.tsx | 15 ++++++- src/client/views/search/CollectionFilters.scss | 19 +++++++++ src/client/views/search/CollectionFilters.tsx | 52 +++++++++++++++++++++++ src/client/views/search/FieldFilters.tsx | 19 ++++----- src/client/views/search/SearchBox.scss | 1 + src/client/views/search/SearchBox.tsx | 59 ++++++++++++++++++++++---- 7 files changed, 150 insertions(+), 25 deletions(-) create mode 100644 src/client/views/search/CollectionFilters.scss create mode 100644 src/client/views/search/CollectionFilters.tsx (limited to 'src/client/views/search/CheckBox.scss') 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{ 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{ if (this.props.originalStatus) { this.checkTimeline.play(); + this.checkTimeline.restart(); } this._resetReaction = reaction( @@ -76,12 +81,18 @@ export class CheckBox extends React.Component{ @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{ render() { return ( -
+
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 { + + 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 ( +
+
Search in current collections
+
+
+ +
+
+ + +
+
+
+ ); + } +} \ 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 { @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 (
Filter by Basic Keys
- - - + + +
); } 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 {
-
Search in current collections
- +
-
-- cgit v1.2.3-70-g09d2 From cfb2e001ab6df21558fb5d7f9c18e47c7b6c21bb Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 15:59:08 -0400 Subject: searching updates --- src/client/documents/Documents.ts | 6 +++--- src/client/views/search/CheckBox.scss | 10 ++++----- src/client/views/search/CollectionFilters.tsx | 12 ++++++----- src/client/views/search/SearchBox.tsx | 30 +++++++-------------------- src/client/views/search/ToggleBar.tsx | 4 ++-- 5 files changed, 25 insertions(+), 37 deletions(-) (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1d137b9ff..2ace6a4cc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -88,7 +88,7 @@ export namespace DocUtils { let protoTarg = target.proto ? target.proto : target; UndoManager.RunInBatch(() => { let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1}); - // linkDoc.type = DocTypes.LINK; + linkDoc.type = DocTypes.LINK; let linkDocProto = Doc.GetProto(linkDoc); linkDocProto.title = title === "" ? source.title + " to " + target.title : title; linkDocProto.linkDescription = description; @@ -179,12 +179,12 @@ export namespace Docs { } function CreateTextPrototype(): Doc { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), - { x: 0, y: 0, width: 300, backgroundColor: "#f1efeb" }); + { x: 0, y: 0, width: 300, backgroundColor: "#f1efeb", type: DocTypes.TEXT }); return textProto; } function CreatePdfPrototype(): Doc { let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"), - { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 }); + { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1, type: DocTypes.PDF }); return pdfProto; } function CreateWebPrototype(): Doc { diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 9b0af68d5..e8e7708f4 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -9,7 +9,7 @@ display: flex; position: relative; justify-content: center; - align-items: center; + align-items: center; margin-top: 0px; } @@ -24,12 +24,12 @@ border-color: $alt-accent; border-width: 2px; -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; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } - .check-container:hover ~ .check-box { + .check-container:hover~.check-box { background-color: $intermediate-color; } diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 6019154a6..58b46ca29 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -8,6 +8,8 @@ import "./SearchBox.scss"; import "./CollectionFilters.scss"; import { FieldFilters } from './FieldFilters'; import * as anime from 'animejs'; +import { DocumentView } from '../nodes/DocumentView'; +import { SelectionManager } from '../../util/SelectionManager'; interface CollectionFilterProps { collectionStatus: boolean; @@ -48,7 +50,7 @@ export class CollectionFilters extends React.Component { opacity: 1, }); - if(this.collectionsSelected){ + if (this.collectionsSelected) { this.timeline.play(); this.timeline.reverse(); } @@ -61,10 +63,10 @@ export class CollectionFilters extends React.Component { updateColStat(val: boolean) { this.props.updateCollectionStatus(val); - if (this.collectionsSelected !== val) { - this.timeline.play(); - this.timeline.reverse(); - } + if (this.collectionsSelected !== val) { + this.timeline.play(); + this.timeline.reverse(); + } this.collectionsSelected = val; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index e8b5f35da..30bd0c3d9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -71,25 +71,6 @@ export class SearchBox extends React.Component { this.closeSearch(); } }); - - //empties search query after 30 seconds of the search bar/filter box not being open - // if (!this._resultsOpen && !this._filterOpen) { - // setTimeout(this.clearSearchQuery, 30000); - // } - } - - closeFilterVisual() { - $('document').ready(function () { - var form = document.getElementById("filter-form"); - - if(form){ - if(form.style.maxHeight) { - form.style.maxHeight = null; - form.style - } - - } - }); } setupAccordion() { @@ -227,11 +208,9 @@ export class SearchBox extends React.Component { else { selectedDocs.forEach(async element => { let layout: string = StrCast(element.props.Document.baseLayout); - // console.log("doc title:", element.props.Document.title) //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { console.log("current doc is a collection") - // console.log(element.props.Document) //makes sure collections aren't added more than once if (!collections.includes(element.props.Document)) { collections.push(element.props.Document); @@ -262,7 +241,6 @@ export class SearchBox extends React.Component { //if this._wordstatus is false, all words are required and a + is added before each if (!this._basicWordStatus) { query = this.basicRequireWords(query); - console.log(query) query = query.replace(/\s+/g, ' ').trim(); } @@ -271,6 +249,7 @@ export class SearchBox extends React.Component { query = this.addCollectionFilter(query); query = query.replace(/\s+/g, ' ').trim(); } + console.log(query) return query; } @@ -297,6 +276,7 @@ export class SearchBox extends React.Component { let results: Doc[]; query = this.getFinalQuery(query); + console.log(query) //if there is no query there should be no result if (query === "") { @@ -307,6 +287,8 @@ export class SearchBox extends React.Component { results = await this.getResults(query); } + console.log(results); + runInAction(() => { this._resultsOpen = true; this._results = results; @@ -330,14 +312,18 @@ export class SearchBox extends React.Component { docs.push(field); } } + console.log(docs) return this.filterDocsByType(docs); } //this.icons will now include all the icons that need to be included @action filterDocsByType(docs: Doc[]) { + console.log(this._icons) let finalDocs: Doc[] = []; docs.forEach(doc => { + console.log(doc.layout) let layoutresult = Cast(doc.type, "string", ""); + console.log(layoutresult) if (this._icons.includes(layoutresult)) { finalDocs.push(doc); } diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index b0a061270..96536794d 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -100,8 +100,8 @@ export class ToggleBar extends React.Component{
{this.props.optionOne}
{this.props.optionTwo}
-
-
+
+
); -- cgit v1.2.3-70-g09d2 From 469b070c1c0f5a9d08e7824a4ce430b84f3fcce5 Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 20:39:38 -0400 Subject: end of day 6/24 --- src/client/views/search/CheckBox.scss | 77 +++++++++++++------------- src/client/views/search/CollectionFilters.scss | 24 ++++---- src/client/views/search/CollectionFilters.tsx | 11 +--- src/client/views/search/FieldFilters.scss | 5 ++ src/client/views/search/FieldFilters.tsx | 6 +- src/client/views/search/IconBar.scss | 1 - src/client/views/search/IconBar.tsx | 42 ++++++-------- src/client/views/search/SearchBox.scss | 6 -- 8 files changed, 78 insertions(+), 94 deletions(-) create mode 100644 src/client/views/search/FieldFilters.scss (limited to 'src/client/views/search/CheckBox.scss') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index e8e7708f4..af59d5fbf 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -11,48 +11,49 @@ justify-content: center; align-items: center; margin-top: 0px; - } - .check-box { - z-index: 900; - position: relative; - height: 20px; - width: 20px; - overflow: visible; - background-color: transparent; - border-style: solid; - border-color: $alt-accent; - border-width: 2px; - -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; + .check-container:hover~.check-box { + background-color: $intermediate-color; + } + + .check-container { + width: 40px; + height: 40px; + position: absolute; + z-index: 1000; + + .checkmark { + z-index: 1000; + position: absolute; + fill-opacity: 0; + stroke-width: 4px; + stroke: white; + } + } + + .check-box { + z-index: 900; + position: relative; + height: 20px; + width: 20px; + overflow: visible; + background-color: transparent; + border-style: solid; + border-color: $alt-accent; + border-width: 2px; + -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; + } } - .check-container:hover~.check-box { - background-color: $intermediate-color; - } - - .check-container { - width: 40px; - height: 40px; - position: absolute; - z-index: 1000; - } - - .checkmark { - z-index: 1000; - position: absolute; - fill-opacity: 0; - stroke-width: 4px; - stroke: white; + .checkbox-title { + display: flex; + align-items: center; + text-transform: capitalize; + margin-left: 15px; } } -.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/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index 8d5ab96e7..b54cdcbd1 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -1,20 +1,20 @@ @import "../globalCssVariables"; -.collection-filters{ +.collection-filters { display: flex; flex-direction: row; width: 100%; -} -.collection-filters.main{ - width: 47%; - float: left; -} + &.main { + width: 47%; + float: left; + } -.collection-filters.optional{ - width: 60%; - display: grid; - grid-template-columns: 50% 50%; - float: right; - opacity: 0; + &.optional { + width: 60%; + display: grid; + grid-template-columns: 50% 50%; + float: right; + opacity: 0; + } } \ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 58b46ca29..3dd87157d 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -1,15 +1,8 @@ import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction } from 'mobx'; -import "./SearchBox.scss"; +import { observable, action } from 'mobx'; import { CheckBox } from './CheckBox'; -import { Keys } from './SearchBox'; -import "./SearchBox.scss"; import "./CollectionFilters.scss"; -import { FieldFilters } from './FieldFilters'; import * as anime from 'animejs'; -import { DocumentView } from '../nodes/DocumentView'; -import { SelectionManager } from '../../util/SelectionManager'; interface CollectionFilterProps { collectionStatus: boolean; @@ -77,7 +70,7 @@ export class CollectionFilters extends React.Component {
-
+
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss new file mode 100644 index 000000000..ba0926140 --- /dev/null +++ b/src/client/views/search/FieldFilters.scss @@ -0,0 +1,5 @@ +.field-filters { + width: 100%; + display: grid; + grid-template-columns: 18% 20% 60%; +} \ No newline at end of file diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index f87755478..eb12e654f 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, } from 'mobx'; -import "./SearchBox.scss"; +import { observable } from 'mobx'; import { CheckBox } from './CheckBox'; import { Keys } from './SearchBox'; -import "./SearchBox.scss"; +import "./FieldFilters.scss"; export interface FieldFilterProps { titleFieldStatus: boolean; diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index db4e49fe9..cb7de15a0 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -1,6 +1,5 @@ @import "../globalCssVariables"; - .icon-bar { display: flex; justify-content: space-evenly; diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index f361429f7..a446159fe 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -1,18 +1,14 @@ import * as React from 'react'; import { observer } from 'mobx-react'; -import { observable, action, runInAction } from 'mobx'; +import { observable, action } from 'mobx'; import "./SearchBox.scss"; import "./IconBar.scss"; -import * as anime from 'animejs'; import { DocTypes } from '../../documents/Documents'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { library, icon } from '@fortawesome/fontawesome-svg-core'; +import { library } from '@fortawesome/fontawesome-svg-core'; import * as _ from "lodash"; -import $ from 'jquery'; -import { array } from 'prop-types'; import { IconButton } from './IconButton'; -import { list } from 'serializr'; import { SearchBox } from './SearchBox'; library.add(faSearch); @@ -31,7 +27,7 @@ library.add(faBan); export class IconBar extends React.Component { static Instance: IconBar; - + allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB]; @observable public ResetClicked: boolean = false; @observable public SelectAllClicked: boolean = false; @@ -63,25 +59,23 @@ export class IconBar extends React.Component { render() { return ( -
-
-
-
- -
-
Select All
+
+
+
+
- {this.allIcons.map((type: string) => - - )} -
-
- -
-
Clear
+
Select All
+
+ {this.allIcons.map((type: string) => + + )} +
+
+
+
Clear
); diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index b8791318e..d94edba79 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -174,10 +174,4 @@ text-transform: uppercase; text-align: left; font-weight: bold; -} - -.field-filters { - width: 100%; - display: grid; - grid-template-columns: 18% 20% 60%; } \ No newline at end of file -- cgit v1.2.3-70-g09d2