diff options
Diffstat (limited to 'src/client/views/SearchItem.tsx')
| -rw-r--r-- | src/client/views/SearchItem.tsx | 155 |
1 files changed, 127 insertions, 28 deletions
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx index 6901f60da..ae9bc350f 100644 --- a/src/client/views/SearchItem.tsx +++ b/src/client/views/SearchItem.tsx @@ -1,14 +1,27 @@ import React = require("react"); import { library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Cast, NumCast } from "../../new_fields/Types"; +import { FieldView, FieldViewProps } from './nodes/FieldView'; +import { computed, observable, action, runInAction } from "mobx"; +import { IconField } from "../../new_fields/IconField"; +import { listSpec } from "../../new_fields/Schema"; +import { Transform } from "../util/Transform"; +import { ObjectField } from "../../new_fields/ObjectField"; +import { RichTextField } from "../../new_fields/RichTextField"; import { Doc } from "../../new_fields/Doc"; import { DocumentManager } from "../util/DocumentManager"; import { SetupDrag } from "../util/DragManager"; +import { SearchUtil } from "../util/SearchUtil"; +import { Id } from "../../new_fields/FieldSymbols"; +import { CollectionDockingView } from "./collections/CollectionDockingView"; +import { observer } from "mobx-react"; +import { CollectionViewType } from "./collections/CollectionBaseView"; - -export interface SearchProps { +export interface SearchItemProps { doc: Doc; + // addDocTab(doc: Doc, location: string): void } library.add(faCaretUp); @@ -16,33 +29,87 @@ library.add(faObjectGroup); library.add(faStickyNote); library.add(faFilePdf); library.add(faFilm); +library.add(faMusic); +library.add(faLink); +library.add(faChartBar); +library.add(faGlobeAsia); -export class SearchItem extends React.Component<SearchProps> { +@observer +export class SelectorContextMenu extends React.Component<SearchItemProps> { + @observable private _docs: { col: Doc, target: Doc }[] = []; + @observable private _otherDocs: { col: Doc, target: Doc }[] = []; - onClick = () => { - DocumentManager.Instance.jumpToDocument(this.props.doc); + constructor(props: SearchItemProps) { + super(props); + + this.fetchDocuments(); } - //needs help - // @computed get layout(): string { const field = Cast(this.props.doc[fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; } + async fetchDocuments() { + console.log("fetching"); + let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc); + const docs = await SearchUtil.Search(`data_l:"${this.props.doc[Id]}"`, true); + const map: Map<Doc, Doc> = new Map; + const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search(`data_l:"${doc[Id]}"`, true))); + allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); + docs.forEach(doc => map.delete(doc)); + runInAction(() => { + console.log("action running") + this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); + this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); + }); + } + getOnClick({ col, target }: { col: Doc, target: Doc }) { + return () => { + console.log("returning!") + // col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + // if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + // const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + // const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + // col.panX = newPanX; + // col.panY = newPanY; + // } + // this.props.addDocTab(col, "inTab"); + }; + } - public static DocumentIcon(layout: string) { - let button = layout.indexOf("PDFBox") !== -1 ? faFilePdf : - layout.indexOf("ImageBox") !== -1 ? faImage : - layout.indexOf("Formatted") !== -1 ? faStickyNote : - layout.indexOf("Video") !== -1 ? faFilm : - layout.indexOf("Collection") !== -1 ? faObjectGroup : - faCaretUp; - return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />; + render() { + return ( + <> + <p>Contexts:</p> + {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)} + {this._otherDocs.length ? <hr></hr> : null} + {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)} + </> + ); } - onPointerEnter = (e: React.PointerEvent) => { - this.props.doc.libraryBrush = true; - Doc.SetOnPrototype(this.props.doc, "protoBrush", true); +} + +@observer +export class SearchItem extends React.Component<SearchItemProps> { + + @observable _selected: boolean = false; + @observable hover = false; + + onClick = () => { + DocumentManager.Instance.jumpToDocument(this.props.doc); } - onPointerLeave = (e: React.PointerEvent) => { - this.props.doc.libraryBrush = false; - Doc.SetOnPrototype(this.props.doc, "protoBrush", false); + + public DocumentIcon() { + let layoutresult = Cast(this.props.doc.type, "string", ""); + + let button = layoutresult.indexOf("pdf") !== -1 ? faFilePdf : + layoutresult.indexOf("image") !== -1 ? faImage : + layoutresult.indexOf("text") !== -1 ? faStickyNote : + layoutresult.indexOf("video") !== -1 ? faFilm : + layoutresult.indexOf("collection") !== -1 ? faObjectGroup : + layoutresult.indexOf("audio") !== -1 ? faMusic : + layoutresult.indexOf("link") !== -1 ? faLink : + layoutresult.indexOf("histogram") !== -1 ? faChartBar : + layoutresult.indexOf("web") !== -1 ? faGlobeAsia : + faCaretUp; + return <FontAwesomeIcon icon={button} size="2x" />; } collectionRef = React.createRef<HTMLDivElement>(); @@ -55,14 +122,46 @@ export class SearchItem extends React.Component<SearchProps> { return Doc.MakeAlias(doc); } } + + linkCount = () => { + return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length; + } + + // @action + // onMouseLeave = () => { + // this.hover = false; + // } + + // @action + // onMouseEnter = () => { + // this.hover = true; + // } + render() { return ( - <div className="search-item" ref={this.collectionRef} id="result" - onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} - onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} > - <div className="search-title" id="result" >title: {this.props.doc.title}</div> - {/* <div className="search-type" id="result" >Type: {this.props.doc.layout}</div> */} - {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */} + <div className="search-overview"> + {/* onMouseEnter={this.onMouseEnter} + onMouseLeave={this.onMouseLeave}> */} + <div className="searchBox-instances"> + <SelectorContextMenu {...this.props} /> + </div> + {/* {this.hover ? ( + <div className="searchBox-instances"> + <SelectorContextMenu {...this.props} /> + </div> + ) : null} */} + <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} > + <div className="main-search-info"> + <div className="search-title" id="result" >{this.props.doc.title}</div> + <div className="search-info"> + <div className="link-count">{this.linkCount()}</div> + <div className="search-type" >{this.DocumentIcon()}</div> + </div> + </div> + <div className="more-search-info"> + <div className="found">Where Found: (i.e. title, body, etc)</div> + </div> + </div> </div> ); } |