1 files changed, 68 insertions, 38 deletions

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..4f7919f50 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,58 +1,88 @@
+import { action, observable } from 'mobx';
+import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { emptyFunction, returnFalse, returnZero } from '../../../Utils';
+import { CompileScript } from "../../util/Scripting";
+import { Transform } from '../../util/Transform';
+import { EditableView } from "../EditableView";
+import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { Opt, Field } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import { Document } from '../../../fields/Document';
-import { Key } from '../../../fields/Key';
-import { Server } from "../../Server"
+import "./KeyValuePair.scss";
+import React = require("react");
+import { Doc, Opt, IsField } from '../../../new_fields/Doc';
+import { FieldValue } from '../../../new_fields/Types';
 
 // Represents one row in a key value plane
 
 export interface KeyValuePairProps {
     rowStyle: string;
-    fieldId: string;
-    doc: Document;
+    keyName: string;
+    doc: Doc;
+    keyWidth: number;
 }
 @observer
 export class KeyValuePair extends React.Component<KeyValuePairProps> {
 
-    @observable
-    private key: Opt<Key>
-
-    constructor(props: KeyValuePairProps) {
-        super(props);
-        Server.GetField(this.props.fieldId,
-            action((field: Opt<Field>) => {
-                if (field) {
-                    this.key = field as Key;
-                }
-            }));
-
-    }
-
-
     render() {
-        if (!this.key) {
-            return <tr><td>error</td><td></td></tr>
-
-        }
         let props: FieldViewProps = {
-            doc: this.props.doc,
-            fieldKey: this.key,
-            isSelected: () => false,
-            select: () => { },
+            Document: this.props.doc,
+            ContainingCollectionView: undefined,
+            fieldKey: this.props.keyName,
+            isSelected: returnFalse,
+            select: emptyFunction,
             isTopMost: false,
-            bindings: {},
             selectOnLoad: false,
-        }
+            active: returnFalse,
+            whenActiveChanged: emptyFunction,
+            ScreenToLocalTransform: Transform.Identity,
+            focus: emptyFunction,
+            PanelWidth: returnZero,
+            PanelHeight: returnZero,
+        };
+        let contents = <FieldView {...props} />;
+        let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
         return (
             <tr className={this.props.rowStyle}>
-                <td>{this.key.Name}</td>
-                <td><FieldView {...props} /></td>
+                <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
+                    <div className="keyValuePair-td-key-container">
+                        <button className="keyValuePair-td-key-delete" onClick={() => {
+                            if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1) {
+                                props.Document[props.fieldKey] = undefined;
+                            }
+                            else props.Document.proto![props.fieldKey] = undefined;
+                        }}>
+                            X
+                        </button>
+                        <div className="keyValuePair-keyField">{fieldKey}</div>
+                    </div>
+                </td>
+                <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }}>
+                    <EditableView contents={contents} height={36} GetValue={() => {
+
+                        let field = FieldValue(props.Document[props.fieldKey]);
+                        if (field) {
+                            //TODO Types
+                            return String(field);
+                            // return field.ToScriptString();
+                        }
+                        return "";
+                    }}
+                        SetValue={(value: string) => {
+                            let script = CompileScript(value, { addReturn: true });
+                            if (!script.compiled) {
+                                return false;
+                            }
+                            let res = script.run();
+                            if (!res.success) return false;
+                            const field = res.result;
+                            if (IsField(field)) {
+                                props.Document[props.fieldKey] = field;
+                                return true;
+                            }
+                            return false;
+                        }}>
+                    </EditableView></td>
             </tr>
-        )
+        );
     }
 }
\ No newline at end of file