diff options
| -rw-r--r-- | src/client/views/search/IconBar.scss | 9 | ||||
| -rw-r--r-- | src/client/views/search/IconBar.tsx | 224 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 29 |
3 files changed, 183 insertions, 79 deletions
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 3d38b7ac3..6a37982c2 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -33,14 +33,19 @@ } -.type-icon.add.selected { +.type-icon.selected.add { background-color: $alt-accent; opacity: 1; } +.type-icon.selected.removed { + background-color: transparent; + opacity: .2; +} + .type-icon.not-selected { background-color: transparent; - opacity: .4; + opacity: .6; } .fontawesome-icon { diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index ba337dcab..bc3b04ef3 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -7,7 +7,7 @@ import * as anime from 'animejs'; import { DocTypes } from '../../documents/Documents'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; +import { library, icon } from '@fortawesome/fontawesome-svg-core'; import * as _ from "lodash"; import $ from 'jquery'; @@ -25,10 +25,14 @@ library.add(faBan); export interface IconBarProps { updateIcon(icons: string[]): void; - getSelectedTypes(): string[]; - getRemovedTypes(): string[]; + // getSelectedTypes(): string[]; + // getRemovedTypes(): string[]; + getIcons(): string[] + allIcons: string[]; } + + @observer export class IconBar extends React.Component<IconBarProps> { @@ -45,15 +49,19 @@ export class IconBar extends React.Component<IconBarProps> { @observable histRef = React.createRef<HTMLDivElement>(); @observable webRef = React.createRef<HTMLDivElement>(); @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef]; - - @observable originalSelectedNodes: string[] = this.props.getSelectedTypes(); - @observable originalRemovedNodes: string[] = this.props.getSelectedTypes(); + @observable originalSelected: string[] = this.props.getIcons(); + // @observable originalSelectedNodes: string[] = this.props.getSelectedTypes(); + // @observable originalRemovedNodes: string[] = this.props.getSelectedTypes(); @observable removeType: boolean = false; + @observable added: any[]; + @observable removed: any[]; - constructor(props: IconBarProps){ + constructor(props: IconBarProps) { super(props); IconBar.Instance = this; + this.added = []; + this.removed = []; } @action @@ -62,7 +70,7 @@ export class IconBar extends React.Component<IconBarProps> { this.removeType = true; e.preventDefault(); e.stopPropagation(); - + document.body.style.cursor = "not-allowed"; } @action @@ -70,6 +78,8 @@ export class IconBar extends React.Component<IconBarProps> { e.preventDefault(); e.stopPropagation(); this.removeType = false; + document.body.style.cursor = "default"; + } componentWillMount() { @@ -142,70 +152,147 @@ export class IconBar extends React.Component<IconBarProps> { @action.bound unselectAllRefs() { - + this.resetDataRemoved(); + this.resetDataSelected(); + this.removed = []; + this.added = []; + } + + @action.bound + resetDataSelected() { this.allRefs.forEach(element => { if (element.current) { element.current.setAttribute("data-selected", "false"); + } + }); + } + + @action.bound + resetDataRemoved() { + this.allRefs.forEach(element => { + if (element.current) { element.current.setAttribute("data-removed", "false"); } }); } @action.bound - alternateSelectedRef(ref: any) { - if (ref.getAttribute("data-selected") === "true") { - ref.setAttribute("data-selected", "false"); + alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) { + let newRef: HTMLDivElement | null; + if(!(ref instanceof HTMLDivElement)){newRef = ref.current;} + else{newRef = ref;} + if(newRef) + {if (newRef.getAttribute("data-selected") === "true") { + newRef.setAttribute("data-selected", "false"); } else { - ref.setAttribute("data-selected", "true"); - ref.setAttribute("data-removed", "false") - } + newRef.setAttribute("data-selected", "true"); + }} } - //TODO: this needs help @action.bound - alternateRemovedRef(ref: any) { - if (ref.getAttribute("data-removed") === "true") { - ref.setAttribute("data-removed", "false"); - } - else { - ref.setAttribute("data-removed", "true"); - ref.setAttribute("data-selected", "false") - } + setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) { + let newRef: HTMLDivElement | null; + if(!(ref instanceof HTMLDivElement)){newRef = ref.current;} + else{newRef = ref;} + if(newRef) newRef.setAttribute("data-removed", "true"); + } + + @action.bound + setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) { + let newRef: HTMLDivElement | null; + if(!(ref instanceof HTMLDivElement)){newRef = ref.current;} + else{newRef = ref;} + if(newRef) newRef.setAttribute("data-removed", "false"); } //TODO: this needs help @action.bound onClick = (value: string) => { - let icons: string[] = this.props.getSelectedTypes(); - let ref = this.getRef(value); - this.alternateSelectedRef(ref); + let icons: string[] = this.props.getIcons(); + let ref: any = this.getRef(value); + if(ref) this.alternateSelectedRef(ref); + if (value === DocTypes.NONE) { - icons = []; + icons = this.props.allIcons; // if its none, change the color of all the other circles - this.unselectAllRefs(); + this.resetIconFilters(); } - else { - //if it's already selected, unselect it - if (icons.includes(value)) { + + //if type should be removed + if (this.removeType) { + console.log("removing") + if (this.added.length !== 0) { + icons = this.props.allIcons; + this.resetIconFilters(); + this.added = []; icons = _.without(icons, value); + this.removed.push(ref); + this.setToRemove(ref) + ref.setAttribute("data-selected", "true") } - //if it's not yet selected, select it else { - icons.push(value); + //if it's included in the list, remove it + if (icons.includes(value)) { + icons = _.without(icons, value); + this.removed.push(ref); + this.setToRemove(ref) + } + //if it's not included, add it back + else { + icons.push(value); + //take it out of removed list + this.removed = _.without(this.removed, this.getRef(value)); + } + } + + } + //if type should be added + else{ + console.log("adding") + if(this.removed.length !== 0){ + icons = this.props.allIcons; + this.resetIconFilters(); + this.removed = []; + icons = [value]; + this.added.push(ref); + this.setToAdd(ref) + if(ref){ref.setAttribute("data-selected", "true")} + } + else{ + //if its included in the list, remove it + if(icons.includes(value)){ + icons = _.without(icons, value); + this.added = _.without(this.added, this.getRef(value)) + } + //if its not included in the list, add it + else{ + icons.push(value); + this.added.push(ref) + this.setToAdd(ref) + } } } + this.props.updateIcon(icons); //ok i know that this is bad but i dont know how else to get it to rerender and change the classname, //any help here is greatly appreciated thanks frens + console.log(value) + console.log(ref.getAttribute("data-removed")); + console.log(this.isRemoved(ref)); + console.log(ref.className) this.forceUpdate(); } //checks if option is selected based on the attribute data-selected + //this is for visual purposes @action.bound - isRefSelected = (ref: React.RefObject<HTMLDivElement>) => { - if (ref.current) { - if (ref.current.getAttribute("data-selected") === "true") { + isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => { + let newRef: HTMLDivElement | null; + if(!(ref instanceof HTMLDivElement)){newRef = ref.current;} + else{newRef = ref;} + if (newRef) { + if (newRef.getAttribute("data-selected") === "true") { return true; } return false; @@ -215,17 +302,21 @@ export class IconBar extends React.Component<IconBarProps> { //checks attribues of ref to return whether or not a type should be specifically included in the search @action.bound getInitialSelectedStatus = (type: string) => { - if (this.originalSelectedNodes.includes(type)) { + if (this.originalSelected.includes(type)) { return "true"; } return "false"; } //checks attributes of ref to return whether or not it should be excluded from search results + //this is for visual purposes @action.bound - isRemoved = (ref: React.RefObject<HTMLDivElement>) => { - if(ref.current){ - if(ref.current.getAttribute("data-removed") === "true") { + isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => { + let newRef: HTMLDivElement | null; + if(!(ref instanceof HTMLDivElement)){newRef = ref.current;} + else{newRef = ref;} + if (newRef) { + if (newRef.getAttribute("data-removed") === "true") { return true; } return false; @@ -235,121 +326,112 @@ export class IconBar extends React.Component<IconBarProps> { //gets status upon mounting if a doc type should be removed from the results @action.bound getInitialRemovedStatus = (type: string) => { - if (this.originalRemovedNodes.includes(type)) { + if (!this.originalSelected.includes(type)) { return "true"; } return "false"; } - @action.bound - changeCursor() { - if(!this.removeType) - {document.body.style.cursor = 'url(".\noun_Plus_2224963.svg")';} - else{ - {document.body.style.cursor = 'url(".\noun_Plus_2224963.svg")';} - } - } - render() { return ( <div> <div className="filter icon-title">Filter by type of node</div> - <div className="filter icon-bar" onMouseOver={this.changeCursor}> + <div className="filter icon-bar"> <div className="filter type-outer"> <div className={"type-icon none not-selected"} ref={this.noneRef} data-selected={"false"} - data-removed = {"false"} + data-removed={"false"} onClick={() => { this.onClick(DocTypes.NONE); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: -2 }} icon={faBan} /> </div> <div className="filter-description">Clear</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRemoved(this.pdfRef) ? "add" : "remove") + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.pdfRef) ? "selected " + (this.isRemoved(this.pdfRef) ? "removed" : "add") : "not-selected")} ref={this.pdfRef} data-selected={this.getInitialSelectedStatus(DocTypes.PDF)} - data-removed = {this.getInitialRemovedStatus(DocTypes.PDF)} + data-removed={this.getInitialRemovedStatus(DocTypes.PDF)} onClick={() => { this.onClick(DocTypes.PDF); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 0 }} icon={faFilePdf} /> </div> <div className="filter-description">{DocTypes.PDF}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.histRef) ? "selected " + (this.isRemoved(this.histRef) ? "removed" : "add") : "not-selected")} ref={this.histRef} data-selected={this.getInitialSelectedStatus(DocTypes.HIST)} - data-removed = {this.getInitialRemovedStatus(DocTypes.HIST)} + data-removed={this.getInitialRemovedStatus(DocTypes.HIST)} onClick={() => { this.onClick(DocTypes.HIST); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 1 }} icon={faChartBar} /> </div> <div className="filter-description">{DocTypes.HIST}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.colRef) ? "selected " + (this.isRemoved(this.colRef) ? "removed" : "add") : "not-selected")} ref={this.colRef} data-selected={this.getInitialSelectedStatus(DocTypes.COL)} - data-removed = {this.getInitialRemovedStatus(DocTypes.COL)} + data-removed={this.getInitialRemovedStatus(DocTypes.COL)} onClick={() => { this.onClick(DocTypes.COL); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 2 }} icon={faObjectGroup} /> </div> <div className="filter-description">{DocTypes.COL}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.imgRef) ? "selected " + (this.isRemoved(this.imgRef) ? "removed" : "add") : "not-selected")} ref={this.imgRef} data-selected={this.getInitialSelectedStatus(DocTypes.IMG)} - data-removed = {this.getInitialRemovedStatus(DocTypes.IMG)} + data-removed={this.getInitialRemovedStatus(DocTypes.IMG)} onClick={() => { this.onClick(DocTypes.IMG); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 3 }} icon={faImage} /> </div> <div className="filter-description">{DocTypes.IMG}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.vidRef) ? "selected " + (this.isRemoved(this.vidRef) ? "removed" : "add") : "not-selected")} ref={this.vidRef} data-selected={this.getInitialSelectedStatus(DocTypes.VID)} - data-removed = {this.getInitialRemovedStatus(DocTypes.VID)} + data-removed={this.getInitialRemovedStatus(DocTypes.VID)} onClick={() => { this.onClick(DocTypes.VID); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 4 }} icon={faFilm} /> </div> <div className="filter-description">{DocTypes.VID}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.webRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.webRef) ? "selected " + (this.isRemoved(this.webRef) ? "removed" : "add") : "not-selected")} ref={this.webRef} data-selected={this.getInitialSelectedStatus(DocTypes.WEB)} - data-removed = {this.getInitialRemovedStatus(DocTypes.WEB)} + data-removed={this.getInitialRemovedStatus(DocTypes.WEB)} onClick={() => { this.onClick(DocTypes.WEB); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 5 }} icon={faGlobeAsia} /> </div> <div className="filter-description">{DocTypes.WEB}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.linkRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.linkRef) ? "selected " + (this.isRemoved(this.linkRef) ? "removed" : "add") : "not-selected")} ref={this.linkRef} data-selected={this.getInitialSelectedStatus(DocTypes.LINK)} - data-removed = {this.getInitialRemovedStatus(DocTypes.LINK)} + data-removed={this.getInitialRemovedStatus(DocTypes.LINK)} onClick={() => { this.onClick(DocTypes.LINK); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 6 }} icon={faLink} /> </div> <div className="filter-description">{DocTypes.LINK}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.audioRef) ? "selected " + (this.isRemoved(this.audioRef) ? "removed" : "add") : "not-selected")} ref={this.audioRef} data-selected={this.getInitialSelectedStatus(DocTypes.AUDIO)} - data-removed = {this.getInitialRemovedStatus(DocTypes.AUDIO)} + data-removed={this.getInitialRemovedStatus(DocTypes.AUDIO)} onClick={() => { this.onClick(DocTypes.AUDIO); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 7 }} icon={faMusic} /> </div> <div className="filter-description">{DocTypes.AUDIO}</div> </div> <div className="type-outer"> - <div className={"type-icon filter " + (this.isRefSelected(this.textRef) ? "selected" : "not-selected")} + <div className={"type-icon filter " + (this.isRefSelected(this.textRef) ? "selected " + (this.isRemoved(this.textRef) ? "removed" : "add") : "not-selected")} ref={this.textRef} data-selected={this.getInitialSelectedStatus(DocTypes.TEXT)} - data-removed = {this.getInitialRemovedStatus(DocTypes.TEXT)} + data-removed={this.getInitialRemovedStatus(DocTypes.TEXT)} onClick={() => { this.onClick(DocTypes.TEXT); }}> <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 8 }} icon={faStickyNote} /> </div> diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index fc54d87e2..4befb99ec 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -43,6 +43,7 @@ export class SearchBox extends React.Component { @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]; constructor(props: Readonly<{}>) { super(props); @@ -62,7 +63,7 @@ export class SearchBox extends React.Component { ToggleBar.Instance.resetToggle(); IconBar.Instance.resetIconFilters(); // this._wordStatus = true; - this._icons = []; + this._icons = this.allIcons; } @action.bound @@ -80,6 +81,7 @@ export class SearchBox extends React.Component { let query = this._searchString; let results: Doc[]; + //if this._wordstatus is false, all words are required and a + is added before each if (!this._wordStatus) { let oldWords = query.split(" "); let newWords: string[] = []; @@ -90,9 +92,11 @@ export class SearchBox extends React.Component { query = newWords.join(" "); } + //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); @@ -125,15 +129,27 @@ export class SearchBox extends React.Component { return this.filterDocs(docs); } + // @action filterDocs2(docs: Doc[]) { + // if (this._icons.length === 0) { + // return docs; + // } + // let finalDocs: Doc[] = []; + // docs.forEach(doc => { + // let layoutresult = Cast(doc.type, "string", ""); + // if (this._icons.includes(layoutresult)) { + // finalDocs.push(doc) + // } + // }); + // return finalDocs; + // } + + //this.icons will now include all the icons that need to be included @action filterDocs(docs: Doc[]) { - if (this._icons.length === 0) { - return docs; - } let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string", ""); if (this._icons.includes(layoutresult)) { - finalDocs.push(doc) + finalDocs.push(doc); } }); return finalDocs; @@ -255,6 +271,7 @@ export class SearchBox extends React.Component { this._pointerTime = e.timeStamp; } + //TODO: to be cone with checkmark updateCheckStatus(newStat: boolean) { console.log("updating!") } @@ -294,7 +311,7 @@ export class SearchBox extends React.Component { <ToggleBar originalStatus={this._wordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} /> </div> <div className="type-of-node filter-div"> - <IconBar updateIcon={this.updateIcon} getSelectedTypes={this.getIcons} /> + <IconBar allIcons = {this.allIcons} updateIcon={this.updateIcon} getIcons={this.getIcons} /> </div> <div className="filter-collection filter-div"> temp for filtering by collection |