From d12625a3a3e241d80ce3fe8e577ba8a41320b189 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 1 Feb 2019 01:05:31 -0500
Subject: Changed formatting setting, added very basic generic FieldView, and
 added Schema view

---
 src/views/collections/CollectionFreeFormView.tsx |  8 ++--
 src/views/collections/CollectionSchemaView.scss  |  0
 src/views/collections/CollectionSchemaView.tsx   | 49 ++++++++++++++++++++++++
 src/views/nodes/DocumentView.tsx                 | 15 ++++----
 src/views/nodes/FieldView.tsx                    | 31 +++++++++++++++
 5 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 src/views/collections/CollectionSchemaView.scss
 create mode 100644 src/views/collections/CollectionSchemaView.tsx
 create mode 100644 src/views/nodes/FieldView.tsx

(limited to 'src/views')

diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 736bcb786..b4dd140d0 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -174,10 +174,10 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
     render() {
         const { fieldKey, Document: Document } = this.props;
 
-        const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
-        const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
-        const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+        const value: Document[] = Document.GetListField<Document>(fieldKey, []);
+        const panx: number = Document.GetNumberField(KeyStore.PanX, 0);
+        const pany: number = Document.GetNumberField(KeyStore.PanY, 0);
+        const currScale: number = Document.GetNumberField(KeyStore.Scale, 1);
         return (
             <div className="border" style={{
                 borderStyle: "solid",
diff --git a/src/views/collections/CollectionSchemaView.scss b/src/views/collections/CollectionSchemaView.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
new file mode 100644
index 000000000..01a5ab639
--- /dev/null
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -0,0 +1,49 @@
+import { CollectionViewProps, DocumentFieldViewProps } from "../nodes/DocumentView";
+import React = require("react")
+import ReactTable, { ReactTableDefaults, CellInfo } from "react-table";
+import { observer } from "mobx-react";
+import { KeyStore as KS, Key } from "../../fields/Key";
+import { Document } from "../../fields/Document";
+import { FieldView } from "../nodes/FieldView";
+import "react-table/react-table.css"
+
+@observer
+export class CollectionSchemaView extends React.Component<CollectionViewProps> {
+    public static LayoutString() { return '<CollectionSchemaView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; }
+
+    renderCell = (rowProps: CellInfo) => {
+        if (!this.props.ContainingDocumentView) {
+            return <div></div>
+        }
+        let props: DocumentFieldViewProps = {
+            doc: rowProps.value[0],
+            fieldKey: rowProps.value[1],
+            containingDocumentView: this.props.ContainingDocumentView
+        }
+        return <FieldView {...props} />
+    }
+
+    render() {
+        const { Document, fieldKey } = this.props;
+        const children = Document.GetListField<Document>(fieldKey, []);
+        const columns = Document.GetListField(KS.ColumnsKey,
+            [KS.Title, KS.Data, KS.Author])
+        return (
+            <ReactTable
+                data={children}
+                columns={columns.map(col => {
+                    return (
+                        {
+                            Header: col.Name,
+                            accessor: (doc: Document) => [doc, col],
+                            id: col.Id
+                        })
+                })}
+                column={{
+                    ...ReactTableDefaults.column,
+                    Cell: this.renderCell
+                }}
+            />
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 1e4cc1cca..20dc6540b 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -9,6 +9,7 @@ import { FieldTextBox } from "../nodes/FieldTextBox"
 import { Document } from "../../fields/Document";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"
 import { CollectionDockingView } from "../collections/CollectionDockingView"
+import { CollectionSchemaView } from "../collections/CollectionSchemaView"
 import "./NodeView.scss"
 import { SelectionManager } from "../../util/SelectionManager";
 import { ContextMenu } from "../ContextMenu";
@@ -64,16 +65,16 @@ class DocumentContents extends React.Component<DocumentViewProps> {
         let doc = this.props.Document;
         let bindings = { ...this.props } as any;
         for (const key of this.layoutKeys) {
-            bindings[ key.Name + "Key" ] = key;
+            bindings[key.Name + "Key"] = key;
         }
         for (const key of this.layoutFields) {
             let field = doc.GetField(key);
             if (field) {
-                bindings[ key.Name ] = field.GetValue();
+                bindings[key.Name] = field.GetValue();
             }
         }
         return <JsxParser
-            components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView }}
+            components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
             bindings={bindings}
             jsx={this.layout}
             showWarnings={true}
@@ -240,10 +241,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             if (this._mainCont.current != null && this.props.ContainingCollectionView != null) {
                 this._contextMenuCanOpen = false;
                 const rect = this.screenRect;
-                let dragData: { [ id: string ]: any } = {};
-                dragData[ "document" ] = this;
-                dragData[ "xOffset" ] = e.x - rect.left;
-                dragData[ "yOffset" ] = e.y - rect.top;
+                let dragData: { [id: string]: any } = {};
+                dragData["document"] = this;
+                dragData["xOffset"] = e.x - rect.left;
+                dragData["yOffset"] = e.y - rect.top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
                     handlers: {
                         dragComplete: this.dragComplete,
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
new file mode 100644
index 000000000..1c4164089
--- /dev/null
+++ b/src/views/nodes/FieldView.tsx
@@ -0,0 +1,31 @@
+import React = require("react")
+import { DocumentFieldViewProps } from "./DocumentView";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { Field, Opt } from "../../fields/Field";
+import { TextField } from "../../fields/TextField";
+import { NumberField } from "../../fields/NumberField";
+
+@observer
+export class FieldView extends React.Component<DocumentFieldViewProps> {
+    @computed
+    get field(): Opt<Field> {
+        const { doc, fieldKey } = this.props;
+        return doc.GetField(fieldKey);
+    }
+    render() {
+        const field = this.field;
+        if (!field) {
+            return <p>{'<null>'}</p>
+        }
+        if (field instanceof TextField) {
+            return <p>{field.Data}</p>
+        }
+        else if (field instanceof NumberField) {
+            return <p>{field.Data}</p>
+        } else {
+            return <p>{field.GetValue}</p>
+        }
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2