diff options
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; |