aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/search/IconBar.scss9
-rw-r--r--src/client/views/search/IconBar.tsx224
-rw-r--r--src/client/views/search/SearchBox.tsx29
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 05:27:30 +0000