can change column type to any, string, number, bool, or checkbox

3 files changed, 45 insertions, 252 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index f15734df6..691c4f630 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -63,7 +63,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
     @action
     onKeyDown = (e: KeyboardEvent): void => {
         if (this.props.isFocused && this.props.isEditable) {
-            // console.log("schema cell", this.props.isEditable);
             document.removeEventListener("keydown", this.onKeyDown);
             this._isEditing = true;
             this.props.setIsEditing(true);
@@ -82,72 +81,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
     }
 
-    renderCell = (rowProps: CellInfo) => {
-        let props: FieldViewProps = {
-            Document: rowProps.original,
-            DataDoc: rowProps.original,
-            fieldKey: rowProps.column.id as string,
-            fieldExt: "",
-            ContainingCollectionView: this.props.CollectionView,
-            isSelected: returnFalse,
-            select: emptyFunction,
-            renderDepth: this.props.renderDepth + 1,
-            selectOnLoad: false,
-            ScreenToLocalTransform: Transform.Identity,
-            focus: emptyFunction,
-            active: returnFalse,
-            whenActiveChanged: emptyFunction,
-            PanelHeight: returnZero,
-            PanelWidth: returnZero,
-            addDocTab: this.props.addDocTab,
-        };
-        let fieldContentView = <FieldView {...props} />;
-        let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = (e: React.PointerEvent) => {
-            (!this.props.CollectionView.props.isSelected() ? undefined :
-                SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
-        };
-        let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
-            const res = run({ this: doc });
-            if (!res.success) return false;
-            doc[props.fieldKey] = res.result;
-            return true;
-        };
-        return (
-            <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={props.Document[Id]} ref={reference}>
-                <EditableView
-                    display={"inline"}
-                    contents={fieldContentView}
-                    height={Number(MAX_ROW_HEIGHT)}
-                    GetValue={() => {
-                        let field = props.Document[props.fieldKey];
-                        if (Field.IsField(field)) {
-                            return Field.toScriptString(field);
-                        }
-                        return "";
-                    }}
-                    SetValue={(value: string) => {
-                        let script = CompileScript(value, { addReturn: true, params: { this: Doc.name } });
-                        if (!script.compiled) {
-                            return false;
-                        }
-                        return applyToDoc(props.Document, script.run);
-                    }}
-                    OnFillDown={async (value: string) => {
-                        let script = CompileScript(value, { addReturn: true, params: { this: Doc.name } });
-                        if (!script.compiled) {
-                            return;
-                        }
-                        const run = script.run;
-                        //TODO This should be able to be refactored to compile the script once
-                        const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
-                        val && val.forEach(doc => applyToDoc(doc, run));
-                    }}>
-                </EditableView>
-            </div >
-        );
-    }
-
     renderCellWithType(type: string | undefined) {
         let props: FieldViewProps = {
             Document: this.props.rowProps.original,
@@ -167,7 +100,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             PanelWidth: returnZero,
             addDocTab: this.props.addDocTab,
         };
-        let fieldContentView: JSX.Element = <FieldView {...props} />;
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = (e: React.PointerEvent) => {
             // (!this.props.CollectionView.props.isSelected() ? undefined :
@@ -181,8 +113,11 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         };
 
         let field = props.Document[props.fieldKey];
-        let contents = type === undefined ? <FieldView {...props} /> : type === "number" ? NumCast(field) : type === "boolean" ? (BoolCast(field) ? "true" : "false") : "incorrect type";
-        // let contents = typeof field === "number" ? NumCast(field) : "incorrect type";
+        let contents: any = "incorrect type";
+        if (type === undefined) contents =  <FieldView {...props} />;
+        if (type === "number") contents = typeof field === "number" ? NumCast(field) : "--" + typeof field + "--";
+        if (type === "string") contents = typeof field === "string" ? (StrCast(field) === "" ? "--" : StrCast(field)) : "--" + typeof field + "--";
+        if (type === "boolean") contents = typeof field === "boolean" ? (BoolCast(field) ? "true" : "false") : "--" + typeof field + "--";
 
         return (
             <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
@@ -191,7 +126,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                         editing={this._isEditing}
                         // isEditingCallback={this.isEditingCallback}
                         display={"inline"}
-                        contents={fieldContentView}
+                        contents={contents}
                         height={Number(MAX_ROW_HEIGHT)}
                         GetValue={() => {
                             let field = props.Document[props.fieldKey];
@@ -224,7 +159,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
     }
 
     render() {
-        return this.renderCell(this.props.rowProps);
+        return this.renderCellWithType(undefined);
     }
 }
 
@@ -251,190 +186,37 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell {
 
 @observer
 export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
+    @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false;
+    private _doc: Doc = this.props.rowProps.original;
+
+    applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
+        const res = run({ this: doc });
+        if (!res.success) return false;
+        doc[this.props.rowProps.column.id as string] = res.result;
+        return true;
+    }
+
+    @action
+    toggleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._isChecked = e.target.checked;
+        let script = CompileScript(e.target.checked.toString(), { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
+            if (script.compiled) {
+                this.applyToDoc(this._doc, script.run);
+            }
+    }
+
     render() {
-        console.log("render checkbox cell");
-        let props: FieldViewProps = {
-            Document: this.props.rowProps.original,
-            DataDoc: this.props.rowProps.original,
-            fieldKey: this.props.rowProps.column.id as string,
-            fieldExt: "",
-            ContainingCollectionView: this.props.CollectionView,
-            isSelected: returnFalse,
-            select: emptyFunction,
-            renderDepth: this.props.renderDepth + 1,
-            selectOnLoad: false,
-            ScreenToLocalTransform: Transform.Identity,
-            focus: emptyFunction,
-            active: returnFalse,
-            whenActiveChanged: emptyFunction,
-            PanelHeight: returnZero,
-            PanelWidth: returnZero,
-            addDocTab: this.props.addDocTab,
-        };
-        let fieldContentView: JSX.Element = <FieldView {...props} />;
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = (e: React.PointerEvent) => {
             // (!this.props.CollectionView.props.isSelected() ? undefined :
             //     SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
         };
-        let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
-            const res = run({ this: doc });
-            if (!res.success) return false;
-            doc[props.fieldKey] = res.result;
-            return true;
-        };
-
-        let field = props.Document[props.fieldKey];
-        let contents = BoolCast(field);
-        console.log("contents", contents);
-        // let contents = typeof field === "number" ? NumCast(field) : "incorrect type";
-
-        let toggleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
-            console.log("toggle check", e.target.checked);
-            // this._isChecked = e.target.checked;
-
-            let document = this.props.rowProps.original;
-            let script = CompileScript(e.target.checked.toString(), { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
-            if (script.compiled) {
-                let applied = applyToDoc(document, script.run);
-                console.log("applied", applied);
-            }
-        };
-
         return (
             <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
-                <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={props.Document[Id]} ref={reference}>
-                    <input type="checkbox" onChange={toggleChecked} />
-                    {/* <EditableView
-                        editing={this._isEditing}
-                        isEditingCallback={this.isEditingCallback}
-                        display={"inline"}
-                        contents={fieldContentView}
-                        height={Number(MAX_ROW_HEIGHT)}
-                        GetValue={() => {
-                            let field = props.Document[props.fieldKey];
-                            if (Field.IsField(field)) {
-                                return Field.toScriptString(field);
-                            }
-                            return "";
-                        }
-                        }
-                        SetValue={(value: string) => {
-                            let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
-                            if (!script.compiled) {
-                                return false;
-                            }
-                            return applyToDoc(props.Document, script.run);
-                        }}
-                        OnFillDown={async (value: string) => {
-                            let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
-                            if (!script.compiled) {
-                                return;
-                            }
-                            const run = script.run;
-                            //TODO This should be able to be refactored to compile the script once
-                            const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
-                            val && val.forEach(doc => applyToDoc(doc, run));
-                        }} /> */}
+                <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={this._doc[Id]} ref={reference}>
+                    <input type="checkbox" checked={this._isChecked} onChange={this.toggleChecked}/>
                 </div >
             </div>
         );
     }
-}
-
-        // @observer
-// export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
-//     // @observable private _isChecked: boolean = BoolCast(this.props.rowProps.original[this.props.fieldKey]);
-
-//     render() {
-//         console.log("checkbox rneder");
-
-//         let props: FieldViewProps = {
-//             Document: this.props.rowProps.original,
-//             DataDoc: this.props.rowProps.original,
-//             fieldKey: this.props.rowProps.column.id as string,
-//             fieldExt: "",
-//             ContainingCollectionView: this.props.CollectionView,
-//             isSelected: returnFalse,
-//             select: emptyFunction,
-//             renderDepth: this.props.renderDepth + 1,
-//             selectOnLoad: false,
-//             ScreenToLocalTransform: Transform.Identity,
-//             focus: emptyFunction,
-//             active: returnFalse,
-//             whenActiveChanged: emptyFunction,
-//             PanelHeight: returnZero,
-//             PanelWidth: returnZero,
-//             addDocTab: this.props.addDocTab,
-//         };
-//         let reference = React.createRef<HTMLDivElement>();
-//         let onItemDown = (e: React.PointerEvent) => {
-//             (!this.props.CollectionView.props.isSelected() ? undefined :
-//                 SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
-//         };
-
-//         let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
-//             const res = run({ this: doc });
-//             if (!res.success) return false;
-//             doc[this.props.fieldKey] = res.result;
-//             return true;
-//         };
-
-//         let toggleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
-//             console.log("toggle check", e.target.checked);
-//             // this._isChecked = e.target.checked;
-
-//             let document = this.props.rowProps.original;
-//             let script = CompileScript(e.target.checked.toString(), { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
-//             if (script.compiled) {
-//                 console.log("script compiled");
-//                 applyToDoc(document, script.run);
-//             }
-//         };
-
-
-//         let field = props.Document[props.fieldKey];
-//         // let contents = typeof field === "boolean" ? BoolCast(field) : "incorrect type";
-//         let checked = typeof field === "boolean" ? BoolCast(field) : false;
-
-//         return (
-//             <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
-//                 <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={props.Document[Id]} ref={reference}>
-//                     <input type="checkbox" checked={checked} onChange={toggleChecked} />
-
-//                     {/* <EditableView
-//                         editing={this._isEditing}
-//                         isEditingCallback={this.isEditingCallback}
-//                         display={"inline"}
-//                         contents={contents}
-//                         height={Number(MAX_ROW_HEIGHT)}
-//                         GetValue={() => {
-//                             let field = props.Document[props.fieldKey];
-//                             if (typeof field === "string") {
-//                                 return Field.toScriptString(field);
-//                             }
-//                             return "";
-//                         }
-//                         }
-//                         SetValue={(value: string) => {
-//                             let script = CompileScript(value, { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
-//                             if (!script.compiled) {
-//                                 return false;
-//                             }
-//                             return applyToDoc(props.Document, script.run);
-//                         }}
-//                         OnFillDown={async (value: string) => {
-//                             let script = CompileScript(value, { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
-//                             if (!script.compiled) {
-//                                 return;
-//                             }
-//                             const run = script.run;
-//                             //TODO This should be able to be refactored to compile the script once
-//                             const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
-//                             val && val.forEach(doc => applyToDoc(doc, run));
-//                         }} /> */}
-//                 </div >
-//             </div>
-//         );
-//     }
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index a9d4a0170..3d45089a3 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -35,6 +35,7 @@ export class CollectionSchemaHeader extends React.Component<HeaderProps> {
                     possibleKeys={this.props.possibleKeys}
                     existingKeys={this.props.existingKeys}
                     keyType={this.props.keyType}
+                    typeConst={this.props.typeConst}
                     menuButtonContent={<div><FontAwesomeIcon icon={icon} size="sm" />{this.props.keyValue}</div>}
                     addNew={false}
                     onSelect={this.props.onSelect}
@@ -95,6 +96,7 @@ export interface ColumnMenuProps {
     possibleKeys: string[];
     existingKeys: string[];
     keyType: ColumnType;
+    typeConst: boolean;
     menuButtonContent: JSX.Element;
     addNew: boolean;
     onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
@@ -150,6 +152,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                             addNew={this.props.addNew}
                             onSelect={this.props.onSelect}
                         />
+                        {!this.props.typeConst ? 
                         <KeysDropdown
                             keyValue={keyTypeStr}
                             possibleKeys={colTypes}
@@ -158,6 +161,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                             addNew={false}
                             onSelect={this.setColumnType}
                         />
+                        : null}
                         <button onClick={() => this.props.deleteColumn(this.props.keyValue)}>Delete Column</button>
                     </div>
                 );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 8ddf26be2..3572fac55 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -32,7 +32,7 @@ import { CollectionView } from "./CollectionView";
 import { undoBatch } from "../../util/UndoManager";
 import { timesSeries } from "async";
 import { CollectionSchemaHeader, CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders";
-import { CellProps, CollectionSchemaCell } from "./CollectionSchemaCells";
+import { CellProps, CollectionSchemaCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaBooleanCell, CollectionSchemaCheckboxCell } from "./CollectionSchemaCells";
 
 
 library.add(faCog);
@@ -100,7 +100,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     possibleKeys={possibleKeys}
                     existingKeys={this.columns}
                     keyType={this.getColumnType(col)}
-                    typeConst={false}
+                    typeConst={columnTypes.get(col) !== undefined}
                     onSelect={this.changeColumns}
                     setIsEditing={this.setHeaderIsEditing}
                     deleteColumn={this.deleteColumn}
@@ -130,6 +130,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         setIsEditing: action(emptyFunction), //this.setCellIsEditing,
                         isEditable: true //isEditable
                     };
+
+                    let colType = this.getColumnType(col);
+                    if (colType === ColumnType.Number) return <CollectionSchemaNumberCell {...props}/>
+                    if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props}/>
+                    if (colType === ColumnType.Boolean) return <CollectionSchemaBooleanCell {...props} />
+                    if (colType === ColumnType.Checkbox) return <CollectionSchemaCheckboxCell {...props} />
                     return <CollectionSchemaCell {...props}/>
                 }
             };
@@ -324,9 +330,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         if (columnTypes.get(key)) return;
         const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc));
         if (!typesDoc) {
-            // let newTypesDoc = new Doc();
-            // newTypesDoc[key] = type;
-            // this.props.Document.schemaColumnTypes  = newTypesDoc;
+            let newTypesDoc = new Doc();
+            newTypesDoc[key] = type;
+            this.props.Document.schemaColumnTypes  = newTypesDoc;
+            console.log("no typesDoc");
             return;
         } else {
             typesDoc[key] = type;