From c301b53e9ca0a02b1a3ed15b9c0501613c2b8045 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Fri, 14 Jun 2019 14:39:53 -0400
Subject: things are working a lil

---
 src/client/views/search/IconBar.scss  |   9 +-
 src/client/views/search/IconBar.tsx   | 224 +++++++++++++++++++++++-----------
 src/client/views/search/SearchBox.tsx |  29 ++++-
 3 files changed, 183 insertions(+), 79 deletions(-)

(limited to 'src')

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
-- 
cgit v1.2.3-70-g09d2