From 6c6e5ebcfa80c04844a08ab23f6f7b66494b78d4 Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sun, 24 Feb 2019 15:10:36 -0500
Subject: test

---
 src/client/views/collections/CollectionTreeView.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/client/views/collections/CollectionTreeView.tsx

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
new file mode 100644
index 000000000..adc2e032d
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -0,0 +1,20 @@
+import { observer } from "mobx-react";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
+
+    public static makeTreeView(document: Document) {
+        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children != null) {
+            console.log("\nNumber of Children: " + children);
+        }
+    }
+
+    render() {
+        return "HELLO WORLD";
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 3213d828b4386eabc2ee19b47279d0053958ea2a Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sun, 24 Feb 2019 15:27:27 -0500
Subject: why doesn't this work

---
 src/client/views/collections/CollectionFreeFormView.tsx | 1 +
 src/client/views/collections/CollectionTreeView.tsx     | 7 ++++---
 src/client/views/collections/CollectionView.tsx         | 6 ++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cb6668634..a6296ba3e 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -10,6 +10,7 @@ import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionTreeView } from "../collections/CollectionTreeView";
 import { CollectionView } from "../collections/CollectionView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index adc2e032d..90cd5a4c0 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,14 +7,15 @@ import { ListField } from "../../../fields/ListField";
 @observer
 export class CollectionTreeView extends CollectionViewBase {
 
-    public static makeTreeView(document: Document) {
-        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+    test = () => {
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
         if (children != null) {
             console.log("\nNumber of Children: " + children);
         }
+        return "HELLO WORLD";
     }
 
     render() {
-        return "HELLO WORLD";
+        return { test };
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 90080ab43..35ebb5687 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
+import { CollectionTreeView } from "./CollectionTreeView";
 
 
 
@@ -19,6 +20,7 @@ export enum CollectionViewType {
     Freeform,
     Schema,
     Docking,
+    Tree
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -91,6 +93,10 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 return (<CollectionDockingView {...this.props}
                     addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
                     CollectionView={this} />)
+            case CollectionViewType.Tree:
+                return (<CollectionTreeView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
             default:
                 return <div></div>
         }
-- 
cgit v1.2.3-70-g09d2


From 68874b882ad9806cf1bf7493bc4efe766ed16ab4 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Sun, 24 Feb 2019 18:51:33 -0500
Subject: test

---
 src/client/views/Main.tsx                           | 1 +
 src/client/views/collections/CollectionTreeView.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 661a2ac20..2f5d42641 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -29,6 +29,7 @@ window.addEventListener("dragover", function (e) {
     e.preventDefault();
 }, false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
+    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 90cd5a4c0..9cead9558 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { Document } from "../../../fields/Document";
-import { KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 
 @observer
-- 
cgit v1.2.3-70-g09d2


From fe05db6c34d54e27ceeb853da5718aca4c52dcae Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Sun, 24 Feb 2019 23:16:55 -0500
Subject: look it works

---
 .../views/collections/CollectionTreeView.tsx       | 98 ++++++++++++++++++++--
 src/client/views/collections/CollectionView.tsx    |  2 -
 src/client/views/nodes/DocumentView.tsx            |  1 +
 3 files changed, 92 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 9cead9558..745b06c46 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -3,19 +3,103 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../../fields/TextField";
+import { BasicField } from "../../../fields/BasicField";
+import { assertParenthesizedExpression } from "babel-types";
+import { observable, action } from "mobx";
+
+export interface TreeViewProps {
+    document: Document;
+}
 
 @observer
-export class CollectionTreeView extends CollectionViewBase {
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class TreeView extends React.Component<TreeViewProps> {
+
+    @observable
+    collapsed: boolean = false;
+
+    /**
+     * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
+     * @param document The document to render.
+     */
+    renderChild(document: Document) {
+        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={document.Id}></div>;
+        }
+
+        // otherwise, check if it's a collection.
+        else if (children && children !== "<Waiting>") {
+            // if it's not collapsed, then render the full TreeView.
+            if (!this.collapsed) {
+                return (
+                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                        {title.Data}
+                        <ul key={document.Id}>
+                            <TreeView
+                                document={document}
+                            />
+                        </ul>
+                    </li>
+                );
+            } else {
+                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+            }
+        }
+
+        // finally, if it's a normal document, then render it as such.
+        else {
+            return <li key={document.Id}>{title.Data}</li>;
+        }
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        if (children && children !== "<Waiting>") {
+            return (<div>
+                {children.Data.map(value => this.renderChild(value))}
+            </div>)
+            // let results: JSX.Element[] = [];
+
+            // // append a list item for each child in the collection
+            // children.Data.forEach((value) => {
+            //     results.push(this.renderChild(value));
+            // })
 
-    test = () => {
-        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        if (children != null) {
-            console.log("\nNumber of Children: " + children);
+            // return results;
+        } else {
+            return <div></div>;
         }
-        return "HELLO WORLD";
     }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
 
     render() {
-        return { test };
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== "<Waiting>") {
+            titleStr = title.Data;
+        }
+        return (
+            <div>
+                <h3>{titleStr}</h3>
+                <ul>
+                    <TreeView
+                        document={this.props.Document}
+                    />
+                </ul>
+            </div>
+        );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 35ebb5687..37fe43ab3 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -13,8 +13,6 @@ import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
 
-
-
 export enum CollectionViewType {
     Invalid,
     Freeform,
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ad1328e5d..f06ea632c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -189,6 +189,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
             ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
             ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
+            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
             ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
             SelectionManager.SelectDoc(this, e.ctrlKey);
-- 
cgit v1.2.3-70-g09d2


From fc3308a7760860328d153faba65ab3821d4d0c70 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Sun, 24 Feb 2019 23:37:41 -0500
Subject: minor css styling

---
 .../views/collections/CollectionTreeView.scss      | 28 ++++++++++++++++++++++
 .../views/collections/CollectionTreeView.tsx       |  9 ++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index e69de29bb..675fc6c53 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -0,0 +1,28 @@
+ul {
+    list-style: none;
+}
+
+li {
+    margin: 5px 0;
+}
+
+.no-indent {
+    padding-left: 0;
+}
+
+/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */
+
+li:before {
+    content: '\2014';
+    margin-right: 0.7em;
+}
+
+.collapsed:before {
+    content: '\25b6';
+    margin-right: 0.65em;
+}
+
+.uncollapsed:before {
+    content: '\25bc';
+    margin-right: 0.5em;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 745b06c46..52e853bf7 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -5,9 +5,8 @@ import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import React = require("react")
 import { TextField } from "../../../fields/TextField";
-import { BasicField } from "../../../fields/BasicField";
-import { assertParenthesizedExpression } from "babel-types";
 import { observable, action } from "mobx";
+import "./CollectionTreeView.scss";
 
 export interface TreeViewProps {
     document: Document;
@@ -40,7 +39,7 @@ class TreeView extends React.Component<TreeViewProps> {
             // if it's not collapsed, then render the full TreeView.
             if (!this.collapsed) {
                 return (
-                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                    <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
                         {title.Data}
                         <ul key={document.Id}>
                             <TreeView
@@ -50,7 +49,7 @@ class TreeView extends React.Component<TreeViewProps> {
                     </li>
                 );
             } else {
-                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
             }
         }
 
@@ -94,7 +93,7 @@ export class CollectionTreeView extends CollectionViewBase {
         return (
             <div>
                 <h3>{titleStr}</h3>
-                <ul>
+                <ul className="no-indent">
                     <TreeView
                         document={this.props.Document}
                     />
-- 
cgit v1.2.3-70-g09d2

