aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionSchemaCells.tsx33
-rw-r--r--src/client/views/collections/CollectionSchemaHeaders.tsx10
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss4
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx63
4 files changed, 85 insertions, 25 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 6f43a2097..a79360a20 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -94,6 +94,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
@action
onPointerDown = async (e: React.PointerEvent): Promise<void> => {
+
this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
this.props.setPreviewDoc(this.props.rowProps.original);
@@ -239,10 +240,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
// );
trace();
+
+
return (
<div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
<div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
<div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
+
+
<EditableView
editing={this._isEditing}
isEditingCallback={this.isEditingCallback}
@@ -251,28 +256,42 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
height={"auto"}
maxHeight={Number(MAX_ROW_HEIGHT)}
GetValue={() => {
- const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
- const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
- const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
- const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
- Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
- return val;
+ if (type === "number" && (contents === 0 || contents === "0")) {
+ return "0";
+ } else {
+ const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
+ console.log(cfield);
+ if (type === "number") {
+ return StrCast(cfield);
+ }
+ const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
+ const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
+ const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
+ Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
+ return val;
+ }
+
}}
SetValue={action((value: string) => {
let retVal = false;
+
if (value.startsWith(":=")) {
retVal = this.props.setComputed(value.substring(2), props.Document, this.props.rowProps.column.id!, this.props.row, this.props.col);
} else {
const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
if (script.compiled) {
retVal = this.applyToDoc(props.Document, this.props.row, this.props.col, script.run);
+ console.log("compiled");
}
+
}
if (retVal) {
this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing'
this.props.setIsEditing(false);
}
return retVal;
+
+ //return true;
})}
OnFillDown={async (value: string) => {
const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
@@ -284,6 +303,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
}
}}
/>
+
+
</div >
{/* {fieldIsDoc ? docExpander : null} */}
</div>
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 0d6cf4474..d9a27f355 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -73,6 +73,16 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
}
}
+
+
+
+
+
+
+
+
+
+
export interface ColumnMenuProps {
columnField: SchemaHeaderField;
// keyValue: string;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 6f076cbb5..1463cdb3c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -62,10 +62,14 @@
width: calc(100% - 52px);
margin-left: 50px;
+ z-index: 10000;
+
&.-header {
font-size: 12px;
height: 30px;
box-shadow: none;
+ z-index: 10000;
+ overflow-y: visible;
}
.rt-resizable-header-content {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 03db0377a..9c4ec7021 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,5 +1,5 @@
import React = require("react");
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library, IconProp } from '@fortawesome/fontawesome-svg-core';
import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, untracked } from "mobx";
@@ -21,7 +21,7 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
import { ContextMenu } from "../ContextMenu";
import '../DocumentDecorations.scss';
import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
-import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders";
+import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu } from "./CollectionSchemaHeaders";
import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
import "./CollectionSchemaView.scss";
import { CollectionSubView } from "./CollectionSubView";
@@ -233,10 +233,6 @@ export interface SchemaTableProps {
-
-
-
-
@observer
export class SchemaTable extends React.Component<SchemaTableProps> {
private DIVIDER_WIDTH = 4;
@@ -320,19 +316,48 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
const cols = this.columns.map(col => {
- const header = <CollectionSchemaHeader
- keyValue={col}
- possibleKeys={possibleKeys}
- existingKeys={this.columns.map(c => c.heading)}
- keyType={this.getColumnType(col)}
- typeConst={columnTypes.get(col.heading) !== undefined}
- onSelect={this.changeColumns}
- setIsEditing={this.setHeaderIsEditing}
- deleteColumn={this.deleteColumn}
- setColumnType={this.setColumnType}
- setColumnSort={this.setColumnSort}
- setColumnColor={this.setColumnColor}
- />;
+
+ const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
+ this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
+ this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
+
+
+
+ const header = <div className="collectionSchemaView-header" style={{ background: col.color }}>
+ <CollectionSchemaColumnMenu
+ columnField={col}
+ // keyValue={this.props.keyValue.heading}
+ possibleKeys={possibleKeys}
+ existingKeys={this.columns.map(c => c.heading)}
+ // keyType={this.getColumnType(col)}
+ typeConst={columnTypes.get(col.heading) !== undefined}
+ menuButtonContent={<div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>}
+ addNew={false}
+ onSelect={this.changeColumns}
+ setIsEditing={this.setHeaderIsEditing}
+ deleteColumn={this.deleteColumn}
+ onlyShowOptions={false}
+ setColumnType={this.setColumnType}
+ setColumnSort={this.setColumnSort}
+ setColumnColor={this.setColumnColor}
+ />
+ </div>;
+
+
+ // <CollectionSchemaHeader
+ // keyValue={col}
+ // possibleKeys={possibleKeys}
+ // existingKeys={this.columns.map(c => c.heading)}
+ // keyType={this.getColumnType(col)}
+ // typeConst={columnTypes.get(col.heading) !== undefined}
+ // onSelect={this.changeColumns}
+ // setIsEditing={this.setHeaderIsEditing}
+ // deleteColumn={this.deleteColumn}
+ // setColumnType={this.setColumnType}
+ // setColumnSort={this.setColumnSort}
+ // setColumnColor={this.setColumnColor}
+ // />;
+
return {
Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.columns} reorderColumns={this.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,