Changed formatting setting, added very basic generic FieldView, and added Schema view

12 files changed, 175 insertions, 37 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e0092cd9e..77c6d1c59 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,6 +8,6 @@
         "**/node_modules": true
     },
     "editor.formatOnSave": true,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
     "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b3c9ce403..c4d226d72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,8 +50,7 @@
     "@types/prop-types": {
       "version": "15.5.8",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
-      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==",
-      "dev": true
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
     },
     "@types/prosemirror-commands": {
       "version": "1.0.1",
@@ -129,7 +128,6 @@
       "version": "16.7.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.17.tgz",
       "integrity": "sha512-YcXcaoXaxo7A76mBCGlKlN2aZu3REQfF0DTrhiyXVJLA7PDdxVCr+wiQOrkVNn44D/zLlIyDSn3U918Ve0AaEA==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -144,6 +142,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-table": {
+      "version": "6.7.21",
+      "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-6.7.21.tgz",
+      "integrity": "sha512-XiYCcn/CBajrj18vLA3kO79AHr5yZTCJe2kl87ZNTRxLO14y9D0IGeGZ3xLsqhfYrJSkkVzAJV8v+bQ4nuKCRQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/sizzle": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
@@ -1105,6 +1111,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "cliui": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@@ -1590,8 +1601,7 @@
     "csstype": {
       "version": "2.5.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.8.tgz",
-      "integrity": "sha512-r4DbsyNJ7slwBSKoGesxDubRWJ71ghG8W2+1HcsDlAo12KGca9dDLv0u98tfdFw7ldBdoA7XmCnI6Q8LpAJXaQ==",
-      "dev": true
+      "integrity": "sha512-r4DbsyNJ7slwBSKoGesxDubRWJ71ghG8W2+1HcsDlAo12KGca9dDLv0u98tfdFw7ldBdoA7XmCnI6Q8LpAJXaQ=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -8341,6 +8351,14 @@
         "threads": "^0.8.0"
       }
     },
+    "react-table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.9.0.tgz",
+      "integrity": "sha512-sATtBTyXlQlqSaPayDv66e5JAS8zv1BmaCAm7UT8VzDD9Cvei90Lgx2Cn0HdGMh7BGDNUiVTSGRaNAzejs/Ohg==",
+      "requires": {
+        "classnames": "^2.2.5"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3dfa158d8..846a8e2a3 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@types/prosemirror-state": "^1.2.1",
     "@types/prosemirror-transform": "^1.1.0",
     "@types/prosemirror-view": "^1.3.0",
+    "@types/react-table": "^6.7.21",
     "@types/uuid": "^3.4.4",
     "flexlayout-react": "^0.3.3",
     "golden-layout": "^1.5.9",
@@ -59,6 +60,7 @@
     "react-golden-layout": "^1.0.6",
     "react-jsx-parser": "^1.13.0",
     "react-mosaic": "0.0.20",
+    "react-table": "^6.9.0",
     "uuid": "^3.3.2"
   }
 }
diff --git a/src/Main.tsx b/src/Main.tsx
index 02b866753..ab87fc316 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -16,6 +16,7 @@ import { CollectionFreeFormView } from './views/collections/CollectionFreeFormVi
 import { ListField } from './fields/ListField';
 import { DocumentView } from './views/nodes/DocumentView';
 import { ContextMenu } from './views/ContextMenu';
+import { TextField } from './fields/TextField';
 
 configure({
     enforceActions: "observed"
@@ -48,7 +49,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 450, y: 500
     });
-    let docset = new Array<Document>(doc1, doc2, doc3);
+    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+    }));
+    schemaDocs[0].SetFieldValue(KS.Author, "Tyler", TextField);
+    schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField);
+    schemaDocs.push(doc2);
+    const doc7 = Documents.SchemaDocument(schemaDocs)
+    const docset = [doc1, doc2, doc3, doc7];
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400, title: "mini collection"
     });
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 318a6d7a3..73cf483ef 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -5,6 +5,7 @@ import { NumberField } from "../fields/NumberField";
 import { ListField } from "../fields/ListField";
 import { FieldTextBox } from "../views/nodes/FieldTextBox";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
 
 interface DocumentOptions {
     x?: number;
@@ -45,7 +46,7 @@ export namespace Documents {
             textProto.SetField(KeyStore.Width, new NumberField(300));
             textProto.SetField(KeyStore.Height, new NumberField(150));
             textProto.SetField(KeyStore.Layout, new TextField(FieldTextBox.LayoutString()));
-            textProto.SetField(KeyStore.LayoutKeys, new ListField([ KeyStore.Data ]));
+            textProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return textProto;
     }
@@ -57,6 +58,27 @@ export namespace Documents {
         return doc;
     }
 
+    let schemaProto: Document;
+    function GetSchemaPrototype(): Document {
+        if (!schemaProto) {
+            schemaProto = new Document();
+            schemaProto.SetField(KeyStore.X, new NumberField(0));
+            schemaProto.SetField(KeyStore.Y, new NumberField(0));
+            schemaProto.SetField(KeyStore.Width, new NumberField(300));
+            schemaProto.SetField(KeyStore.Height, new NumberField(150));
+            schemaProto.SetField(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString()));
+            schemaProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        }
+        return schemaProto;
+    }
+
+    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
+        let doc = GetSchemaPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.SetField(KeyStore.Data, new ListField(documents));
+        return doc;
+    }
+
 
     let dockProto: Document;
     function GetDockPrototype(): Document {
@@ -67,7 +89,7 @@ export namespace Documents {
             dockProto.SetField(KeyStore.Width, new NumberField(300));
             dockProto.SetField(KeyStore.Height, new NumberField(150));
             dockProto.SetField(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString()));
-            dockProto.SetField(KeyStore.LayoutKeys, new ListField([ KeyStore.Data ]));
+            dockProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return dockProto;
     }
@@ -90,7 +112,7 @@ export namespace Documents {
             imageProto.SetField(KeyStore.Height, new NumberField(300));
             imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.SetField(KeyStore.LayoutFields, new ListField([ KeyStore.Data ]));
+            imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
         }
         return imageProto;
     }
@@ -114,7 +136,7 @@ export namespace Documents {
             collectionProto.SetField(KeyStore.Width, new NumberField(300));
             collectionProto.SetField(KeyStore.Height, new NumberField(300));
             collectionProto.SetField(KeyStore.Layout, new TextField('<CollectionFreeFormView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'));
-            collectionProto.SetField(KeyStore.LayoutKeys, new ListField([ KeyStore.Data ]));
+            collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return collectionProto;
     }
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 0551a74b0..5c0a9caf0 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -3,6 +3,7 @@ import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed } from "mobx";
 import { TextField } from "./TextField";
+import { ListField } from "./ListField";
 
 export class Document extends Field {
     private fields: ObservableMap<Key, Field> = new ObservableMap();
@@ -51,14 +52,18 @@ export class Document extends Field {
         return vval;
     }
 
-    GetNumberValue(key: Key, defaultVal: number): number {
+    GetNumberField(key: Key, defaultVal: number): number {
         return this.GetFieldValue(key, NumberField, defaultVal);
     }
 
-    GetTextValue(key: Key, defaultVal: string): string {
+    GetTextField(key: Key, defaultVal: string): string {
         return this.GetFieldValue(key, TextField, defaultVal);
     }
 
+    GetListField<T extends Field>(key: Key, defaultVal: T[]): T[] {
+        return this.GetFieldValue<T[], ListField<T>>(key, ListField, defaultVal)
+    }
+
     SetField(key: Key, field: Field | undefined): void {
         if (field) {
             this.fields.set(key, field);
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 61b3cdd37..4da800fac 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -31,17 +31,19 @@ export class Key extends Field {
 }
 
 export namespace KeyStore {
-    export let Prototype = new Key("Prototype");
-    export let X = new Key("X");
-    export let Y = new Key("Y");
-    export let Title = new Key("Title");
-    export let PanX = new Key("PanX");
-    export let PanY = new Key("PanY");
-    export let Scale = new Key("Scale");
-    export let Width = new Key("Width");
-    export let Height = new Key("Height");
-    export let Data = new Key("Data");
-    export let Layout = new Key("Layout");
-    export let LayoutKeys = new Key("LayoutKeys");
-    export let LayoutFields = new Key("LayoutFields");
+    export const Prototype = new Key("Prototype");
+    export const X = new Key("X");
+    export const Y = new Key("Y");
+    export const Title = new Key("Title");
+    export const Author = new Key("Author");
+    export const PanX = new Key("PanX");
+    export const PanY = new Key("PanY");
+    export const Scale = new Key("Scale");
+    export const Width = new Key("Width");
+    export const Height = new Key("Height");
+    export const Data = new Key("Data");
+    export const Layout = new Key("Layout");
+    export const LayoutKeys = new Key("LayoutKeys");
+    export const LayoutFields = new Key("LayoutFields");
+    export const ColumnsKey = new Key("SchemaColumns");
 }
\ No newline at end of file
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
--- /dev/null
+++ b/src/views/collections/CollectionSchemaView.scss
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