From db4eb0777639495e6afb6636bbd7c9be6aedd3bc Mon Sep 17 00:00:00 2001 From: Jude Date: Mon, 11 Feb 2019 18:59:05 -0500 Subject: added button --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1d53cedc4..79cd78f32 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -159,6 +159,11 @@ export class CollectionFreeFormDocumentView extends DocumentView { this.props.ContainingCollectionView.removeDocument(this.props.Document) } } + + viewAsTreeview = (e: React.MouseEvent): void => { + // do something + } + @action fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.OpenFullScreen(this.props.Document); @@ -198,6 +203,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) + ContextMenu.Instance.addItem({ description: "View as Treeview", event: this.viewAsTreeview }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); } -- cgit v1.2.3-70-g09d2 From 6c6e5ebcfa80c04844a08ab23f6f7b66494b78d4 Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 24 Feb 2019 15:10:36 -0500 Subject: test --- src/client/views/collections/CollectionTreeView.scss | 0 src/client/views/collections/CollectionTreeView.tsx | 20 ++++++++++++++++++++ .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++- 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/client/views/collections/CollectionTreeView.scss create mode 100644 src/client/views/collections/CollectionTreeView.tsx (limited to 'src/client/views/nodes') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss new file mode 100644 index 000000000..e69de29bb 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>(KeyStore.Data, ListField); + if (children != null) { + console.log("\nNumber of Children: " + children); + } + } + + render() { + return "HELLO WORLD"; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1867d1d9d..14d956d32 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu"; import "./NodeView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { CollectionTreeView } from "../collections/CollectionTreeView"; @observer @@ -161,7 +162,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { } viewAsTreeview = (e: React.MouseEvent): void => { - // do something + CollectionTreeView.makeTreeView(this.props.Document); } @action -- cgit v1.2.3-70-g09d2 From fe05db6c34d54e27ceeb853da5718aca4c52dcae Mon Sep 17 00:00:00 2001 From: madelinegr 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/nodes') 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 { + + @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>(KeyStore.Data, ListField); + let title = document.GetT(KeyStore.Title, TextField); + + // if the title hasn't loaded, immediately return the div + if (!title || title === "") { + return
; + } + + // otherwise, check if it's a collection. + else if (children && children !== "") { + // if it's not collapsed, then render the full TreeView. + if (!this.collapsed) { + return ( +
  • this.collapsed = true)} > + {title.Data} +
      + +
    +
    • + ); + } else { + return
  • this.collapsed = false)}>{title.Data}
    • + } + } + + // finally, if it's a normal document, then render it as such. + else { + return
  • {title.Data}
    • ; + } + } + + render() { + var children = this.props.document.GetT>(KeyStore.Data, ListField); + + if (children && children !== "") { + return (
    + {children.Data.map(value => this.renderChild(value))} +
    ) + // 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>(KeyStore.Data, ListField); - if (children != null) { - console.log("\nNumber of Children: " + children); + // return results; + } else { + return
    ; } - return "HELLO WORLD"; } +} + + +@observer +export class CollectionTreeView extends CollectionViewBase { render() { - return { test }; + let titleStr = ""; + let title = this.props.Document.GetT(KeyStore.Title, TextField); + if (title && title !== "") { + titleStr = title.Data; + } + return ( +
    +

    {titleStr}

    +
      + +
    +
    + ); } } \ 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 { 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