Finished kvp again

3 files changed, 82 insertions, 5 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e01e1d4cd..5ce8bb637 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed } from "mobx"
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e8ebd50be..6192cd278 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -4,12 +4,18 @@ import { observer } from "mobx-react";
 import { EditorView } from 'prosemirror-view';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Opt, FieldWaiting } from '../../../fields/Field';
+import { Opt, FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import { KeyValuePair } from "./KeyValuePair";
 import "./KeyValueBox.scss";
 import React = require("react")
+import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
+import { useState } from 'react'
+import { Key } from '../../../fields/Key';
+import { TextField } from '../../../fields/TextField';
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
@@ -18,12 +24,18 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
+    private _newKey = '';
+    private _newValue = '';
 
 
     constructor(props: FieldViewProps) {
         super(props);
 
         this._ref = React.createRef();
+        this.state = {
+            key: '',
+            value: ''
+        }
     }
 
 
@@ -32,6 +44,26 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return false;
     }
 
+    onEnterKey = (e: React.KeyboardEvent): void => {
+        if (e.key == 'Enter') {
+            if (this._newKey != '' && this._newValue != '') {
+                let doc = this.props.doc.GetT(KeyStore.Data, Document);
+                if (!doc || doc == FieldWaiting) {
+                    return
+                }
+                let realDoc = doc;
+                realDoc.Set(new Key(this._newKey), new TextField(this._newValue));
+                if (this.refs.newKVPKey instanceof HTMLInputElement) {
+                    this.refs.newKVPKey.value = ''
+                }
+                if (this.refs.newKVPValue instanceof HTMLInputElement) {
+                    this.refs.newKVPValue.value = ''
+                }
+                this._newKey = ''
+                this._newValue = ''
+            }
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
@@ -52,7 +84,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let ids: { [key: string]: string } = {};
         let protos = doc.GetAllPrototypes();
         for (const proto of protos) {
-            proto._proxies.forEach((val, key) => {
+            proto._proxies.forEach((val: any, key: string) => {
                 if (!(key in ids)) {
                     ids[key] = key;
                 }
@@ -67,9 +99,24 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newKey = e.currentTarget.value;
+    }
 
-    render() {
+    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newValue = e.currentTarget.value;
+    }
 
+    newKeyValue = () => {
+        return (
+            <tr>
+                <td><input type="text" ref="newKVPKey" id="key" placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" ref="newKVPValue" id="value" placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+            </tr>
+        )
+    }
+
+    render() {
         return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
             <table className="keyValueBox-table">
                 <tbody>
@@ -78,6 +125,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         <th>Fields</th>
                     </tr>
                     {this.createTable()}
+                    {this.newKeyValue()}
                 </tbody>
             </table>
         </div>)
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..111f85a05 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -8,6 +8,8 @@ import { observable, action } from 'mobx';
 import { Document } from '../../../fields/Document';
 import { Key } from '../../../fields/Key';
 import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
 
 // Represents one row in a key value plane
 
@@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             bindings: {},
             selectOnLoad: false,
         }
+        let contents = (
+            <FieldView {...props} />
+        );
         return (
             <tr className={this.props.rowStyle}>
                 <td>{this.key.Name}</td>
-                <td><FieldView {...props} /></td>
+                <td><EditableView contents={contents} height={36} 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, undefined, true);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}></EditableView></td>
             </tr>
         )
     }