adding fields to properties column

2 files changed, 83 insertions, 20 deletions

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index d4cc53bfa..bb5b80abd 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -1,32 +1,59 @@
 .propertiesView {
 
-    background-color: rgb(168, 168, 168);
+    background-color: rgb(205, 205, 205);
     height: 100%;
     z-index: 1;
+    font-family: "Noto Sans";
+    cursor: auto;
+
+    //overflow-y: scroll;
 
     .propertiesView-title {
-        background-color: rgb(134, 134, 134);
-        border-top: 1px solid black;
-        border-bottom: 1px solid black;
+        background-color: rgb(159, 159, 159);
+        text-align: center;
+        font-size: 18px;
+        font-weight: bold;
+        padding-top: 12px;
+        padding-bottom: 12px;
     }
 
     .propertiesView-name {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
     }
 
     .propertiesView-settings {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
+        font-weight: bold;
     }
 
     .propertiesView-fields {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+
+        .propertiesView-fields-title {
+            font-size: 12.5px;
+            font-weight: bold;
+            padding-bottom: 7px;
+        }
+
+        .propertiesView-fields-content {
+            font-size: 10px;
+            margin-left: 5px;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     .propertiesView-layout {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
+        font-weight: bold;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 4306453ea..bc78fccdf 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -1,20 +1,54 @@
 import React = require("react");
 import { observer } from "mobx-react";
 import "./PropertiesView.scss";
-import { observable, action } from "mobx";
-import { Doc } from "../../../../fields/Doc";
+import { observable, action, computed } from "mobx";
+import { Doc, Field, DocListCast } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
+import { ComputedField } from "../../../../fields/ScriptField";
+import { EditableView } from "../../EditableView";
+import { KeyValueBox } from "../../nodes/KeyValueBox";
+import { Cast } from "../../../../fields/Types";
+import { listSpec } from "../../../../fields/Schema";
 
 
-// interface PropertiesViewProps {
-//     document: Doc;
-//     dataDoc: Doc;
-//     docView: DocumentView;
-//     width: number;
-// }
+interface PropertiesViewProps {
+    document: Doc;
+    //dataDoc: Doc;
+    //docView: DocumentView;
+}
 
 @observer
-export class PropertiesView extends React.Component<{}> {
+export class PropertiesView extends React.Component<PropertiesViewProps> {
+
+    @computed get expandedField() {
+        const ids: { [key: string]: string } = {};
+        const doc = this.props.document;
+        doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
+
+        const rows: JSX.Element[] = [];
+        for (const key of Object.keys(ids).slice().sort()) {
+            const contents = doc[key];
+            let contentElement: (JSX.Element | null)[] | JSX.Element = [];
+            contentElement = <EditableView key="editableView"
+                contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
+                height={13}
+                fontSize={10}
+                GetValue={() => Field.toKeyValueString(doc, key)}
+                SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
+            />;
+
+            rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
+                <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
+                &nbsp;
+                {contentElement}
+            </div>);
+        }
+        return rows;
+    }
+
+    @computed get layoutPreview() {
+        return "layout";
+    }
 
     render() {
         return <div className="propertiesView" >
@@ -22,16 +56,18 @@ export class PropertiesView extends React.Component<{}> {
                 Properties
             </div>
             <div className="propertiesView-name">
-                Properties
+                Collection
             </div>
             <div className="propertiesView-settings">
                 Settings
             </div>
             <div className="propertiesView-fields">
-                Fields
+                <div className="propertiesView-fields-title"> Fields</div>
+                <div className="propertiesView-fields-content"> {this.expandedField} </div>
             </div>
             <div className="propertiesView-layout">
-                Layout
+                <div>Layout</div>
+                <div>{this.layoutPreview}</div>
             </div>
         </div>;
     }