started adding editable schema cells

5 files changed, 72 insertions, 2 deletions

diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 3d74c047c..53138eda9 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -141,6 +141,10 @@ export class Document extends Field {
         return delegate;
     }
 
+    ToScriptString(): string {
+        return "";
+    }
+
     TrySetValue(value: any): boolean {
         throw new Error("Method not implemented.");
     }
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 9880116c0..20d8bf5ed 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -47,6 +47,8 @@ export abstract class Field {
         return this.id === other.id;
     }
 
+    abstract ToScriptString(): string;
+
     abstract TrySetValue(value: any): boolean;
 
     abstract GetValue(): any;
diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts
index c3444f644..03926d696 100644
--- a/src/fields/NumberField.ts
+++ b/src/fields/NumberField.ts
@@ -5,6 +5,10 @@ export class NumberField extends BasicField<number> {
         super(data);
     }
 
+    ToScriptString(): string {
+        return "new NumberField(this.Data)";
+    }
+
     Copy() {
         return new NumberField(this.Data);
     }
diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
new file mode 100644
index 000000000..5f8d6ebcd
--- /dev/null
+++ b/src/views/EditableView.tsx
@@ -0,0 +1,35 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
+
+export interface EditableProps {
+    GetValue(): string;
+    SetValue(value: string): boolean;
+    contents: any;
+}
+
+@observer
+export class EditableView extends React.Component<EditableProps> {
+    @observable
+    editing: boolean = false;
+
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            this.props.SetValue(e.currentTarget.value);
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input value={this.props.GetValue()} onKeyDown={this.onKeyDown}></input>
+        } else {
+            return (
+                <div>
+                    {this.props.contents}
+                    <button onClick={() => this.editing = true}>Edit</button>
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
index 8817cb496..c7a3d81a4 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -11,6 +11,9 @@ import "./CollectionSchemaView.scss"
 import { ScrollBox } from "../../util/ScrollBox";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
+import { EditableView } from "../EditableView";
+import { CompileScript } from "../../util/Scripting";
+import { Field } from "../../fields/Field";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -25,9 +28,29 @@ export class CollectionSchemaView extends CollectionViewBase {
             fieldKey: rowProps.value[1],
             DocumentViewForField: undefined
         }
-        return (
+        let contents = (
             <FieldView {...props} />
         )
+        return (
+            <EditableView contents={contents} GetValue={() => {
+                let field = props.doc.Get(props.fieldKey);
+                if (field && field instanceof Field) {
+                    return field.ToScriptString();
+                }
+                return field || "";
+            }} SetValue={(value: string) => {
+                let script = CompileScript(value);
+                if (!script.compiled) {
+                    return false;
+                }
+                let field = script();
+                if (field instanceof Field) {
+                    props.doc.Set(props.fieldKey, field);
+                    return true;
+                }
+                return false;
+            }}></EditableView>
+        )
     }
 
     private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
@@ -74,7 +97,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             [KS.Title, KS.Data, KS.Author])
         let content;
         if (this.selectedIndex != -1) {
-            content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
+            content = (
+                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+            )
         } else {
             content = <div />
         }