collections sort of works

4 files changed, 92 insertions, 102 deletions

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 22b198739..c8f139144 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -73,6 +73,8 @@
     margin-right: 72px;
 
     .search-item {
+        position: relative;
+        z-index: 1000;
         pointer-events: auto;
         width: 500px;
         background: $light-color-secondary;
@@ -85,6 +87,7 @@
         padding: 10px;
         white-space: nowrap;
         font-size: 13px;
+        height: 70px;
     }
 
     .search-info {
@@ -137,28 +140,27 @@
 
 
     .searchBox-instances {
-        display: inline-block;
-        background: $dark-color;
-        width: 100px;
-        opacity: 1;
-        // width: 0px; this is real
-        // visibility: hidden;
-        // opacity: 0; THIS IS REAL
-        // transition: all 0.2s ease;
-        color: $light-color;
+        display: block;
+        background: $light-color-secondary;
+        opacity: 0;
+        width: 150px;
+        transition: all 0.2s ease;
+        color: black;
+        transform: translateX(150px);
     }
 
+
     .search-overview {
         display: flex;
         // float: left;
         justify-content: flex-end;
+        height: 70px;
     }
 
     .search-overview:hover {
         .searchBox-instances {
-            // visibility: visible;
+            transform: translateX(0px);
             opacity: 1;
-            width: 100px;
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 51fcb4596..0fd3c0904 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -38,6 +38,7 @@ export class SearchBox extends React.Component {
     @observable
     private _results: Doc[] = [];
 
+
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
@@ -73,6 +74,7 @@ export class SearchBox extends React.Component {
         }
         return docs;
     }
+
     public static async convertDataUri(imageUri: string, returnedFilename: string) {
         try {
             let posting = DocServer.prepend(RouteStore.dataUriToImage);
@@ -201,14 +203,7 @@ export class SearchBox extends React.Component {
                     </div>
                     {this._resultsOpen ? (
                         <div className="searchBox-results">
-                            {this._results.map(result => {
-                                this.getViews(result).then((res: Doc[]) => {
-                                    console.log("found")
-                                    return <SearchItem doc={result} views={res} key={result[Id]} />
-                                })
-                            })}
-                            {/* {this._results.map(result => <SearchItem doc={result} views = {this.getViews(result)} key={result[Id]} />)} */}
-                            {/*views = {this.getViews(result)}*/}
+                            {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
                         </div>
                     ) : null}
                 </div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index e82aa0719..ba32a408e 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -4,7 +4,7 @@ import { DocumentManager } from "../util/DocumentManager";
 import { library } from '@fortawesome/fontawesome-svg-core';
 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 } from "../../new_fields/Types";
+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";
@@ -15,18 +15,13 @@ import { RichTextField } from "../../new_fields/RichTextField";
 import { SetupDrag } from "../util/DragManager";
 import { SearchUtil } from "../util/SearchUtil";
 import { Id } from "../../new_fields/FieldSymbols";
-import { ViewItem } from "./ViewItem";
-
-
-export interface SearchProps {
-    doc: Doc;
-    views: Doc[];
-}
+import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { observer } from "mobx-react";
+import { CollectionViewType } from "./collections/CollectionBaseView";
 
 export interface SearchItemProps {
     doc: Doc;
-    views: Doc[];
-    // subitems: FieldViewProps;
+    // addDocTab(doc: Doc, location: string): void
 }
 
 library.add(faCaretUp);
@@ -39,50 +34,66 @@ library.add(faLink);
 library.add(faChartBar);
 library.add(faGlobeAsia);
 
-export class SearchItem extends React.Component<SearchItemProps> {
+@observer
+export class SelectorContextMenu extends React.Component<SearchItemProps> {
+    @observable private _docs: { col: Doc, target: Doc }[] = [];
+    @observable private _otherDocs: { col: Doc, target: Doc }[] = [];
 
-    @observable _selected: boolean = false;
+    constructor(props: SearchItemProps) {
+        super(props);
 
-    @observable
-    private _instances: Doc[] = [];
+        this.fetchDocuments();
+    }
 
-    // @action
-    // getViews = async () => {
-    //     const results = await SearchUtil.GetViewsOfDocument(this.props.doc);
-    //     runInAction(() => {
-    //         this._instances = results;
-    //     });
-    // }
+    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 }));
+        });
+    }
 
-    onClick = () => {
-        DocumentManager.Instance.jumpToDocument(this.props.doc);
+    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");
+        };
     }
 
-    //something wrong with this
-    containingCollection(): string {
-        let docView = DocumentManager.Instance.getDocumentView(this.props.doc);
-        if (docView) {
-            let containerView = docView.props.ContainingCollectionView;
-            if (containerView) {
-                let container = containerView.props.Document;
-                const field = Cast(container.title, RichTextField);
-                return field ? field.Data : "<p>Error loading icon data</p>";
-            }
-        }
-        return "None";
+    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>)}
+            </>
+        );
     }
+}
 
-    //also probably with this rip
-    containingCollectionView() {
-        let docView = DocumentManager.Instance.getDocumentView(this.props.doc);
-        if (docView) {
-            let containerView = docView.props.ContainingCollectionView;
-            if (containerView) {
-                return containerView.props.Document;
-            }
-        }
+@observer
+export class SearchItem extends React.Component<SearchItemProps> {
+
+    @observable _selected: boolean = false;
+    @observable hover = false;
 
-        return this.props.doc;
+    onClick = () => {
+        DocumentManager.Instance.jumpToDocument(this.props.doc);
     }
 
     public DocumentIcon() {
@@ -112,27 +123,33 @@ export class SearchItem extends React.Component<SearchItemProps> {
         }
     }
 
-    select = () => {
-        // console.log('moused');
-        // console.log("before:", this.props.doc, this._selected)
-        this._selected = !this._selected;
-        // console.log("after:", this.props.doc, this._selected)
-    }
-
     linkCount = () => {
-        console.log("counting")
-        let linkToSize = Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length;
-        let linkFromSize = Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length;
-        let linkCount = linkToSize + linkFromSize;
-        return 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-overview" onMouseOver={this.select} onMouseOut={this.select}>
+            <div className="search-overview">
+                {/* onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}> */}
                 <div className="searchBox-instances">
-                    {this.props.views.map(result => <ViewItem doc={result} key={result[Id]} />)}
+                    <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>
@@ -143,14 +160,8 @@ export class SearchItem extends React.Component<SearchItemProps> {
                     </div>
                     <div className="more-search-info">
                         <div className="found">Where Found: (i.e. title, body, etc)</div>
-                        {/* <div className="containing-collection">Collection: {this.containingCollection()}</div> */}
                     </div>
                 </div>
-
-                {/* <div className="expanded-result" style={this._selected ? { display: "flex" } : { display: "none" }}>
-                    <div className="collection-label">Collection: {this.containingCollection()}</div>
-                    <div className="preview"></div>
-                </div> */}
             </div>
         );
     }
diff --git a/src/client/views/ViewItem.tsx b/src/client/views/ViewItem.tsx
deleted file mode 100644
index 85f436b44..000000000
--- a/src/client/views/ViewItem.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Doc } from "../../new_fields/Doc";
-import React = require("react");
-import "./SearchBox.scss";
-
-export interface ViewitemProps {
-    doc: Doc;
-    // subitems: FieldViewProps;
-}
-
-export class ViewItem extends React.Component<ViewitemProps> {
-
-    render() {
-        return (
-            <div>{this.props.doc.title}</div>
-
-        );
-    }
-}
\ No newline at end of file