From 3b4585dda8e8018ebec94c9065ca4c37b2c98599 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 15 Jun 2020 17:43:58 -0500 Subject: added parts of drop down --- .../views/collections/CollectionSchemaView.scss | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a24140b48..96e9aec5a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -422,6 +422,31 @@ button.add-column { top: 0; right: 0; background-color: lightgray; + + .dropdown { + position: absolute; + top: 100%; + left: 0; + width: 300px; + z-index: 2; + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + li { + padding: 8px 12px; + } + + li:hover { + background-color: rgba(0, 0, 0, 0.14); + cursor: pointer; + } } .doc-drag-over { -- cgit v1.2.3-70-g09d2 From 1e67383b930a5a7b5cb75caf95dd31fbde0ef160 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 16 Jun 2020 17:29:27 -0500 Subject: fix drop down UI --- .../views/collections/CollectionSchemaCells.tsx | 54 +++++++++++-------- .../views/collections/CollectionSchemaView.scss | 63 +++++++++++++--------- 2 files changed, 70 insertions(+), 47 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index e27de4c96..adce4dcef 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -29,7 +29,7 @@ import { KeysDropdown } from "./CollectionSchemaHeaders"; import { listSpec } from "../../../fields/Schema"; import { ObjectField } from "../../../fields/ObjectField"; import { List } from "../../../fields/List"; -import { Link } from "@react-pdf/renderer"; +import { LinkBox } from "../nodes/LinkBox"; const path = require('path'); library.add(faExpand); @@ -421,10 +421,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { // } @observable private _opened = false; - @observable private _text = ""; + @observable private _text = "select an item"; @action toggleOpened(open: boolean) { + console.log("open: " + open); this._opened = open; } @@ -433,6 +434,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { this._text = e.target.value; } + @action + onSelected = (element: string) => { + this._text = element; + } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -461,6 +467,7 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { }; let value = ""; + let link = false; const reference = React.createRef(); const field = props.Document[props.fieldKey]; @@ -469,41 +476,42 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { const optionsList = field as List; - - - - const options = optionsList.map((element, index) => { + const options = optionsList.map((element) => { if (element instanceof Doc) { + if (props.fieldKey.toLowerCase() === "links") { + link = true; + } const title = element.title; - return
{title}
; - } else if (element instanceof Link) { - return
link
; + return
{ this.onSelected(StrCast(element.title)); }} + style={{ padding: "6px" }}> + {title} +
; } else { return
{element}
; } }); + const plainText =
{this._text}
; + const textarea = ; + const dropdown =
+ {options} +
; return (
- - {/* -
this.toggleOpened(!this._opened)}>☰
- */} - - - +
{link ? plainText : textarea}
+
- {this._opened ?
-
- {options} -
-
: null} + {this._opened ? dropdown : null}
); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 96e9aec5a..5a4e1aa58 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -412,6 +412,45 @@ button.add-column { &:hover .collectionSchemaView-cellContents-docExpander { display: block; } + + .collectionSchemaView-dropdownWrapper { + + border: grey; + border-style: solid; + border-width: 1px; + height: 100%; + + .collectionSchemaView-dropdownButton { + + //display: inline-block; + float: left; + height: 100%; + + + } + + .collectionSchemaView-dropdownText { + display: inline-block; + //float: right; + height: 100%; + display: "flex"; + font-size: 13; + justify-content: "center"; + align-items: "center"; + } + + } + + .collectionSchemaView-dropdownContainer { + position: absolute; + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); + + .collectionSchemaView-dropdownOption:hover { + background-color: rgba(0, 0, 0, 0.14); + cursor: pointer; + } + } } .collectionSchemaView-cellContents-docExpander { @@ -423,30 +462,6 @@ button.add-column { right: 0; background-color: lightgray; - .dropdown { - position: absolute; - top: 100%; - left: 0; - width: 300px; - z-index: 2; - border: 1px solid rgba(0, 0, 0, 0.04); - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); - } - - ul { - list-style: none; - padding: 0; - margin: 0; - } - - li { - padding: 8px 12px; - } - - li:hover { - background-color: rgba(0, 0, 0, 0.14); - cursor: pointer; - } } .doc-drag-over { -- cgit v1.2.3-70-g09d2 From b0d3aa2fff87cdaeb4308c278b248f2d11cc043e Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 18 Jun 2020 15:27:01 -0500 Subject: doc opening button --- src/client/views/collections/CollectionSchemaCells.tsx | 18 +++++++++++++++--- src/client/views/collections/CollectionSchemaView.scss | 11 +++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index df2a90366..2aed880ec 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -364,7 +364,9 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { if (results && results.success) { console.log(results.result); - // this._docTitle = results.result; + this._doc = results.result; + this.prop.Document[this.prop.fieldKey] = results.result; + this._docTitle = this._doc?.title; return true; } @@ -378,18 +380,26 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } + onOpenClick = () => { + if (this._doc) { + this.prop.addDocTab(this._doc, "onRight"); + return true; + } + return false; + } + render() { const dragRef: React.RefObject = React.createRef(); const reference = React.createRef(); - if (typeof this._field === "object" && this._docTitle) { + if (typeof this._field === "object" && this._doc && this._docTitle) { return (
-
this._overlayDisposer?.()} ref={this.dropRef}> @@ -409,6 +419,8 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { })} />
+
); } else { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5a4e1aa58..50971420d 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -413,6 +413,17 @@ button.add-column { display: block; } + + .collectionSchemaView-cellContents-document { + display: inline-block; + } + + .collectionSchemaView-cellContents-docButton { + float: right; + width: "15px"; + height: "15px"; + } + .collectionSchemaView-dropdownWrapper { border: grey; -- cgit v1.2.3-70-g09d2 From cec8cc0d8444b0321ec95a49d91a77a926462900 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 22 Jun 2020 14:22:23 -0500 Subject: more with previews --- .../views/collections/CollectionSchemaCells.tsx | 35 +++++++++++++++++++--- .../views/collections/CollectionSchemaView.scss | 4 +++ .../views/collections/CollectionSchemaView.tsx | 11 ++++--- 3 files changed, 42 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 4231a3941..b9be3b64f 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -404,13 +404,37 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._preview = false; } else { if (bool) { - this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX, e.screenY); + console.log("show doc"); + this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX - 230, e.screenY - 570); } else { + console.log("no doc"); this.props.showDoc(undefined); } } } + onDown = (e: any) => { + this.props.changeFocusedCellByIndex(this.props.row, this.props.col); + this.props.setPreviewDoc(this.props.rowProps.original); + + let url: string; + if (url = StrCast(this.props.rowProps.row.href)) { + try { + new URL(url); + const temp = window.open(url)!; + temp.blur(); + window.focus(); + } catch { } + } + + const field = this.props.rowProps.original[this.props.rowProps.column.id!]; + const doc = FieldValue(Cast(field, Doc)); + if (typeof field === "object" && doc) this.props.setPreviewDoc(doc); + + this.showPreview(true, e); + + } + render() { const dragRef: React.RefObject = React.createRef(); @@ -420,9 +444,12 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return ( -
{ this.showPreview(true, e); }} - onPointerLeave={(e) => { this.showPreview(false, e); }} +
{ this.onDown(e); }} + // onFocus={(e) => this.showPreview(true, e)} + onMouseEnter={(e) => { this.showPreview(true, e); }} + // onBlur={(e) => { console.log("Blur"); this.showPreview(false, e) }} + onMouseLeave={(e) => { this.showPreview(false, e); }} >
{ render() { const preview = ""; return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
{!this._showDoc ? (null) : -
{ this.onOpenClick(); }} - style={{ position: "absolute", width: 400, height: 300, transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` }} +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 400, height: 300, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` + }} ref="overlay"> { ContentScaling={returnOne}>
} - {this.reactTable} -
this.createRow()}>+ new
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 45e3384b31ed2816e6846c2ff545fe55dc155339 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 23 Jun 2020 16:41:07 -0500 Subject: minor changes --- .../views/collections/CollectionSchemaCells.tsx | 33 +++++++++--- .../views/collections/CollectionSchemaHeaders.tsx | 10 ++++ .../views/collections/CollectionSchemaView.scss | 4 ++ .../views/collections/CollectionSchemaView.tsx | 63 +++++++++++++++------- 4 files changed, 85 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') 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 { @action onPointerDown = async (e: React.PointerEvent): Promise => { + 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 { // ); trace(); + + return (
+ + { 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 { } }} /> + +
{/* {fieldIsDoc ? docExpander : null} */}
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 { private DIVIDER_WIDTH = 4; @@ -320,19 +316,48 @@ export class SchemaTable extends React.Component { } const cols = this.columns.map(col => { - const header = 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 =
+ c.heading)} + // keyType={this.getColumnType(col)} + typeConst={columnTypes.get(col.heading) !== undefined} + menuButtonContent={
{col.heading}
} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + deleteColumn={this.deleteColumn} + onlyShowOptions={false} + setColumnType={this.setColumnType} + setColumnSort={this.setColumnSort} + setColumnColor={this.setColumnColor} + /> +
; + + + // 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: , -- cgit v1.2.3-70-g09d2 From 161d71258b636178f3e160dc66143d5df1ebb5ed Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 24 Jun 2020 19:48:09 -0500 Subject: restructure of schema view class and menus --- .../views/collections/CollectionSchemaView.scss | 5 + .../views/collections/CollectionSchemaView.tsx | 943 +++++++++++++++++++-- 2 files changed, 898 insertions(+), 50 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 1463cdb3c..a0bbae88f 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -63,6 +63,7 @@ margin-left: 50px; z-index: 10000; + overflow-y: visible; &.-header { font-size: 12px; @@ -179,11 +180,15 @@ .collectionSchemaView-header { height: 100%; color: gray; + z-index: 10000; + overflow-y: visible; .collectionSchema-header-menu { height: 100%; + z-index: 10000; .collectionSchema-header-toggler { + z-index: 10000; width: 100%; height: 100%; padding: 4px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9c4ec7021..18a53541d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -10,7 +10,7 @@ import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; -import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../fields/Types"; import { Docs, DocumentOptions } from "../../documents/Documents"; @@ -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, CollectionSchemaColumnMenu } from "./CollectionSchemaHeaders"; +import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; @@ -29,7 +29,6 @@ import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; -import ReactDOM from "react-dom"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -65,6 +64,781 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } + @observable pointerX: number = 0; + @observable pointerY: number = 0; + @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); } + + @observable col: any = ""; + @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); } + + @observable menuContent: any = ""; + @observable headerOpen: boolean = false; + + @observable private _isOpen: boolean = false; + @observable private _node: HTMLDivElement | null = null; + + componentDidMount() { + document.addEventListener("pointerdown", this.detectClick); + document.addEventListener("keydown", this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.detectClick); + document.removeEventListener("keydown", this.onKeyDown); + } + + detectClick = (e: PointerEvent): void => { + if (this._node && this._node.contains(e.target as Node)) { + } else { + this._isOpen = false; + this.setHeaderIsEditing(false); + } + } + + @action + toggleIsOpen = (): void => { + this._isOpen = !this._isOpen; + this.setHeaderIsEditing(this._isOpen); + } + + changeColumnType = (type: ColumnType, col: any): void => { + this.setColumnType(col, type); + } + + changeColumnSort = (desc: boolean | undefined, col: any): void => { + this.setColumnSort(col, desc); + } + + changeColumnColor = (color: string, col: any): void => { + this.setColumnColor(col, color); + } + + @action + setNode = (node: HTMLDivElement): void => { + if (node) { + this._node = node; + } + } + + renderTypes = (col: any) => { + if (columnTypes.get(col.heading)) return <>; + + const type = col.type; + return ( +
+ +
+
this.changeColumnType(ColumnType.Any, col)}> + + Any +
+
this.changeColumnType(ColumnType.Number, col)}> + + Number +
+
this.changeColumnType(ColumnType.String, col)}> + + Text +
+
this.changeColumnType(ColumnType.Boolean, col)}> + + Checkbox +
+
this.changeColumnType(ColumnType.List, col)}> + + List +
+
this.changeColumnType(ColumnType.Doc, col)}> + + Document +
+
this.changeColumnType(ColumnType.Image, col)}> + + Image +
+
+
+ ); + } + + renderSorting = (col: any) => { + const sort = col.desc; + return ( +
+ +
+
this.changeColumnSort(true, col)}> + + Sort descending +
+
this.changeColumnSort(false, col)}> + + Sort ascending +
+
this.changeColumnSort(undefined, col)}> + + Clear sorting +
+
+
+ ); + } + + renderColors = (col: any) => { + const selected = col.color; + + const pink = PastelSchemaPalette.get("pink2"); + const purple = PastelSchemaPalette.get("purple2"); + const blue = PastelSchemaPalette.get("bluegreen1"); + const yellow = PastelSchemaPalette.get("yellow4"); + const red = PastelSchemaPalette.get("red2"); + const gray = "#f1efeb"; + + return ( +
+ +
+
this.changeColumnColor(pink!, col)}>
+
this.changeColumnColor(purple!, col)}>
+
this.changeColumnColor(blue!, col)}>
+
this.changeColumnColor(yellow!, col)}>
+
this.changeColumnColor(red!, col)}>
+
this.changeColumnColor(gray, col)}>
+
+
+ ); + } + + renderContent = (col: any) => { + return ( +
+
+ + c.heading)} + canAddNew={true} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + /> +
+ {false ? <> : + <> + {this.renderTypes(col)} + {this.renderSorting(col)} + {this.renderColors(col)} +
+ +
+ + } +
+ ); + } + + + //anchorPoints.TOP_CENTER + + @computed get renderMenu() { + return ( +
+ {/* +
this.toggleIsOpen()}>{this.menuContent}
+ */} + {this.renderContent(this.col)} +
+ ); + } + + + + + + + + + + + + + + // ADDED START HEREE + // + // + // + + @observable _headerIsEditing: boolean = false; + @observable _cellIsEditing: boolean = false; + @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; + @observable _openCollections: Array = []; + + @observable _showDoc: Doc | undefined; + @observable _showDataDoc: any = ""; + @observable _showDocPos: number[] = []; + + @computed get columns() { + return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); + } + set columns(columns: SchemaHeaderField[]) { + this.props.Document.schemaColumns = new List(columns); + } + + // @computed get childDocs() { + // if (this.childDocs) return this.childDocs; + + // const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; + // return DocListCast(doc[this.props.fieldKey]); + // } + + set childDocs(docs: Doc[]) { + const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; + doc[this.props.fieldKey] = new List(docs); + } + + @computed get textWrappedRows() { + return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + } + set textWrappedRows(textWrappedRows: string[]) { + this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); + } + + @computed get resized(): { id: string, value: number }[] { + return this.columns.reduce((resized, shf) => { + (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); + return resized; + }, [] as { id: string, value: number }[]); + } + @computed get sorted(): SortingRule[] { + return this.columns.reduce((sorted, shf) => { + shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); + return sorted; + }, [] as SortingRule[]); + } + + @action + openHeader = (col: any, menu: any) => { + this.menuContent = menu; + this.col = col; + this.headerOpen = !this.headerOpen; + } + + @computed get tableColumns(): Column[] { + const columns: Column[] = []; + const tableIsFocused = this.isFocused(this.props.Document); + const focusedRow = this._focusedCell.row; + const focusedCol = this._focusedCell.col; + const isEditable = !this._headerIsEditing; + + if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { + columns.push( + { + expander: true, + Header: "", + width: 30, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>
; + if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>
; + } else { + return null; + } + } + } + ); + } + + const cols = this.columns.map(col => { + + 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"; + + // this.menuContent =
{col.heading}
; + + const menuContent =
{col.heading}
; + + // this.col = col; + + const header = +
{ this.openHeader(col, menuContent); }} + style={{ background: col.color }}> + {menuContent} +
; + + + // 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: , + accessor: (doc: Doc) => doc ? doc[col.heading] : 0, + id: col.heading, + Cell: (rowProps: CellInfo) => { + const rowIndex = rowProps.index; + const columnIndex = this.columns.map(c => c.heading).indexOf(rowProps.column.id!); + const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; + + const props: CellProps = { + row: rowIndex, + col: columnIndex, + rowProps: rowProps, + isFocused: isFocused, + changeFocusedCellByIndex: this.changeFocusedCellByIndex, + CollectionView: this.props.CollectionView, + ContainingCollection: this.props.ContainingCollectionView, + Document: this.props.Document, + fieldKey: this.props.fieldKey, + renderDepth: this.props.renderDepth, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + moveDocument: this.props.moveDocument, + setIsEditing: this.setCellIsEditing, + isEditable: isEditable, + setPreviewDoc: this.setPreviewDoc, + setComputed: this.setComputed, + getField: this.getField, + showDoc: this.showDoc, + }; + + const colType = this.getColumnType(col); + if (colType === ColumnType.Number) return ; + if (colType === ColumnType.String) return ; + if (colType === ColumnType.Boolean) return ; + if (colType === ColumnType.Doc) return ; + if (colType === ColumnType.Image) return ; + if (colType === ColumnType.List) return ; + return ; + }, + minWidth: 200, + }; + }); + columns.push(...cols); + + columns.push({ + Header: , + accessor: (doc: Doc) => 0, + id: "add", + Cell: (rowProps: CellInfo) => <>, + width: 28, + resizable: false + }); + return columns; + } + + tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { + return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); + } + + private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { + return !rowInfo ? {} : { + ScreenToLocalTransform: this.props.ScreenToLocalTransform, + addDoc: this.tableAddDoc, + removeDoc: this.props.removeDocument, + rowInfo, + rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.isFocused(this.props.Document), + textWrapRow: this.toggleTextWrapRow, + rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, + dropAction: StrCast(this.props.Document.childDropAction), + addDocTab: this.props.addDocTab + }; + } + + private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { + if (!rowInfo || column) return {}; + + const row = rowInfo.index; + //@ts-ignore + const col = this.columns.map(c => c.heading).indexOf(column!.id); + const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.isFocused(this.props.Document); + // TODO: editing border doesn't work :( + return { + style: { + border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" + } + }; + } + + @action + onCloseCollection = (collection: Doc): void => { + const index = this._openCollections.findIndex(col => col === collection[Id]); + if (index > -1) this._openCollections.splice(index, 1); + } + + @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); + @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; + @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; + + @action + onPointDown = (e: React.PointerEvent): void => { + this.setFocused(this.props.Document); + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { + e.stopPropagation(); + } + this.pointerY = e.screenY; + this.pointerX = e.screenX; + this.headerOpen = false; + } + + @action + onKeyDown = (e: KeyboardEvent): void => { + if (!this._cellIsEditing && !this._headerIsEditing && this.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { + const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; + this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); + + const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); + pdoc && this.setPreviewDoc(pdoc); + } + } + + changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { + switch (direction) { + case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.columns.length ? 0 : curCol + 1 }; + case "right": return { row: curRow, col: curCol + 1 === this.columns.length ? curCol : curCol + 1 }; + case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; + case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; + case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; + } + return this._focusedCell; + } + + @action + changeFocusedCellByIndex = (row: number, col: number): void => { + if (this._focusedCell.row !== row || this._focusedCell.col !== col) { + this._focusedCell = { row: row, col: col }; + } + this.setFocused(this.props.Document); + } + + @undoBatch + createRow = () => { + this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); + } + + @undoBatch + @action + createColumn = () => { + let index = 0; + let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; + while (found) { + index++; + found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; + } + this.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); + } + + @undoBatch + @action + deleteColumn = (key: string) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([]); + } else { + const index = columns.map(c => c.heading).indexOf(key); + if (index > -1) { + columns.splice(index, 1); + this.columns = columns; + } + } + } + + @undoBatch + @action + changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); + } else { + if (addNew) { + columns.push(new SchemaHeaderField(newKey, "f1efeb")); + this.columns = columns; + } else { + const index = columns.map(c => c.heading).indexOf(oldKey); + if (index > -1) { + const column = columns[index]; + column.setHeading(newKey); + columns[index] = column; + this.columns = columns; + } + } + } + } + + getColumnType = (column: SchemaHeaderField): ColumnType => { + // added functionality to convert old column type stuff to new column type stuff -syip + if (column.type && column.type !== 0) { + return column.type; + } + if (columnTypes.get(column.heading)) { + column.type = columnTypes.get(column.heading)!; + return columnTypes.get(column.heading)!; + } + const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc)); + if (!typesDoc) { + column.type = ColumnType.Any; + return ColumnType.Any; + } + column.type = NumCast(typesDoc[column.heading]); + return NumCast(typesDoc[column.heading]); + } + + @undoBatch + setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => { + if (columnTypes.get(columnField.heading)) return; + + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setType(NumCast(type)); + columns[index] = columnField; + this.columns = columns; + } + } + + @undoBatch + setColumnColor = (columnField: SchemaHeaderField, color: string): void => { + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setColor(color); + columns[index] = columnField; + this.columns = columns; // need to set the columns to trigger rerender + } + } + + @action + setColumns = (columns: SchemaHeaderField[]) => this.columns = columns + + @undoBatch + reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { + const columns = [...columnsValues]; + const oldIndex = columns.indexOf(toMove); + const relIndex = columns.indexOf(relativeTo); + const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex; + + if (oldIndex === newIndex) return; + + columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); + this.columns = columns; + } + + @undoBatch + @action + setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { + const columns = this.columns; + const index = columns.findIndex(c => c.heading === columnField.heading); + const column = columns[index]; + column.setDesc(descending); + columns[index] = column; + this.columns = columns; + } + + get documentKeys() { + const docs = this.childDocs; + const keys: { [key: string]: boolean } = {}; + // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. + // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be + // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. + // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu + // is displayed (unlikely) it won't show up until something else changes. + //TODO Types + untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false)))); + + this.columns.forEach(key => keys[key.heading] = true); + return Array.from(Object.keys(keys)); + } + + @undoBatch + @action + toggleTextwrap = async () => { + const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + if (textwrappedRows.length) { + this.props.Document.textwrappedSchemaRows = new List([]); + } else { + const docs = DocListCast(this.props.Document[this.props.fieldKey]); + const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); + this.props.Document.textwrappedSchemaRows = new List(allRows); + } + } + + @action + toggleTextWrapRow = (doc: Doc): void => { + const textWrapped = this.textWrappedRows; + const index = textWrapped.findIndex(id => doc[Id] === id); + + index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); + + this.textWrappedRows = textWrapped; + } + + @computed + get reactTable() { + const children = this.childDocs; + const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); + const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); + const expanded = {}; + //@ts-ignore + expandedRowsList.forEach(row => expanded[row] = true); + const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( + + return (row.original.type !== "collection") ? (null) : +
{this.renderSchemaTable(row.original, undefined, undefined)}
} + //
} + + />; + } + + onResizedChange = (newResized: Resize[], event: any) => { + const columns = this.columns; + newResized.forEach(resized => { + const index = columns.findIndex(c => c.heading === resized.id); + const column = columns[index]; + column.setWidth(resized.value); + columns[index] = column; + }); + this.columns = columns; + } + + onContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); + ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" }); + } + } + + getField = (row: number, col?: number) => { + const docs = this.childDocs; + + row = row % docs.length; + while (row < 0) row += docs.length; + const columns = this.columns; + const doc = docs[row]; + if (col === undefined) { + return doc; + } + if (col >= 0 && col < columns.length) { + const column = this.columns[col].heading; + return doc[column]; + } + return undefined; + } + + createTransformer = (row: number, col: number): Transformer => { + const self = this; + const captures: { [name: string]: Field } = {}; + + const transformer: ts.TransformerFactory = context => { + return root => { + function visit(node: ts.Node) { + node = ts.visitEachChild(node, visit, context); + if (ts.isIdentifier(node)) { + const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; + const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; + if (isntPropAccess && isntPropAssign) { + if (node.text === "$r") { + return ts.createNumericLiteral(row.toString()); + } else if (node.text === "$c") { + return ts.createNumericLiteral(col.toString()); + } else if (node.text === "$") { + if (ts.isCallExpression(node.parent)) { + // captures.doc = self.props.Document; + // captures.key = self.props.fieldKey; + } + } + } + } + + return node; + } + return ts.visitNode(root, visit); + }; + }; + + // const getVars = () => { + // return { capturedVariables: captures }; + // }; + + return { transformer, /*getVars*/ }; + } + + setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { + script = + `const $ = (row:number, col?:number) => { + if(col === undefined) { + return (doc as any)[key][row + ${row}]; + } + return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; + } + return ${script}`; + const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); + if (compiled.compiled) { + doc[field] = new ComputedField(compiled); + return true; + } + return false; + } + + @action + showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { + this._showDoc = doc; + if (dataDoc && screenX && screenY) { + this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); + } + } + + onOpenClick = () => { + if (this._showDoc) { + this.props.addDocTab(this._showDoc, "onRight"); + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth); + } + + + + // ADDED ENDS HERE + // + // + + + + + private createTarget = (ele: HTMLDivElement) => { this._previewCont = ele; super.CreateDropTarget(ele); @@ -103,15 +877,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } + this.headerOpen = false; } @computed get previewDocument(): Doc | undefined { return this.previewDoc; } - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth); - } - @computed get dividerDragger() { return this.previewWidth() === 0 ? (null) : @@ -152,32 +923,90 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
; } + + // this is added too + renderSchemaTable = (Document: any, dataDoc: any, childDocs: any) => { + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
+ {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} +
; + } + + + // changed to render schema table @computed get schemaTable() { - return ; + const preview = ""; + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
+ {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} +
; } @computed @@ -200,10 +1029,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
{this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} + {this.headerOpen ? this.renderMenu : null}
; } } + + + + + + + + + + export interface SchemaTableProps { Document: Doc; // child doc dataDoc?: Doc; @@ -290,6 +1130,7 @@ export class SchemaTable extends React.Component { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { + const possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); const columns: Column[] = []; const tableIsFocused = this.props.isFocused(this.props.Document); @@ -323,25 +1164,27 @@ export class SchemaTable extends React.Component { - const header =
- c.heading)} - // keyType={this.getColumnType(col)} - typeConst={columnTypes.get(col.heading) !== undefined} - menuButtonContent={
{col.heading}
} - addNew={false} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - deleteColumn={this.deleteColumn} - onlyShowOptions={false} - setColumnType={this.setColumnType} - setColumnSort={this.setColumnSort} - setColumnColor={this.setColumnColor} - /> -
; + const header =
{col.heading}
; + + //
+ // c.heading)} + // // keyType={this.getColumnType(col)} + // typeConst={columnTypes.get(col.heading) !== undefined} + // menuButtonContent={
{col.heading}
} + // addNew={false} + // onSelect={this.changeColumns} + // setIsEditing={this.setHeaderIsEditing} + // deleteColumn={this.deleteColumn} + // onlyShowOptions={false} + // setColumnType={this.setColumnType} + // setColumnSort={this.setColumnSort} + // setColumnColor={this.setColumnColor} + // /> + //
; // Date: Thu, 25 Jun 2020 22:33:50 -0500 Subject: adjusting menu trigger --- .../views/collections/CollectionSchemaHeaders.tsx | 2 +- .../views/collections/CollectionSchemaView.scss | 3 +++ .../views/collections/CollectionSchemaView.tsx | 22 +++++++++++++--------- src/client/views/collections/SchemaTable.tsx | 7 ++++++- 4 files changed, 23 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index aaa2e6096..b84b75172 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -376,7 +376,7 @@ export class KeysDropdown extends React.Component { this.onChange(e.target.value)} onClick={(e) => { - this._inputRef.current!.select(); + //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a0bbae88f..a21249c58 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -182,6 +182,9 @@ color: gray; z-index: 10000; overflow-y: visible; + display: flex; + justify-content: space-between; + flex-wrap: wrap; .collectionSchema-header-menu { height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9cd13058f..900949b94 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -299,20 +299,24 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action closeHeader = () => { this._headerOpen = false; } + renderKeysDropDown = (col: any) => { + return c.heading)} + canAddNew={true} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + />; + } + renderContent = (col: any) => { return (
- c.heading)} - canAddNew={true} - addNew={false} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - /> + {this.renderKeysDropDown(col)}
{false ? <> : <> diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 97d4bb303..b9df2fe6b 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -163,15 +163,20 @@ export class SchemaTable extends React.Component { const menuContent =
{col.heading}
; + const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} style={{ background: col.color, padding: "4px", letterSpacing: "2px", textTransform: "uppercase" }}> {menuContent} +
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + style={{ float: "right" }}> + +
; return { -- cgit v1.2.3-70-g09d2 From bd6dd6a04edf441a819f6f5bdff3aa03b4298d9a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 26 Jun 2020 15:22:31 -0500 Subject: editable text in header --- .../views/collections/CollectionSchemaHeaders.tsx | 12 +++-- .../views/collections/CollectionSchemaView.scss | 5 +- .../views/collections/CollectionSchemaView.tsx | 10 ++-- src/client/views/collections/SchemaTable.tsx | 53 +++++++++++++++++----- 4 files changed, 59 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index b84b75172..8494f3dca 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -285,6 +285,7 @@ export interface KeysDropdownProps { addNew: boolean; onSelect: (oldKey: string, newKey: string, addnew: boolean) => void; setIsEditing: (isEditing: boolean) => void; + width?: string; } @observer export class KeysDropdown extends React.Component { @@ -357,12 +358,13 @@ export class KeysDropdown extends React.Component { this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; const options = keyOptions.map(key => { - return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; + return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); // if search term does not already exist as a group type, give option to create new group type if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); } @@ -373,13 +375,15 @@ export class KeysDropdown extends React.Component { render() { return (
- this.onChange(e.target.value)} onClick={(e) => { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}> -
+
{this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a21249c58..5608cb7ab 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -266,6 +266,7 @@ button.add-column { .keys-dropdown { position: relative; width: 100%; + background-color: white; input { border: 2px solid $light-color-secondary; @@ -285,9 +286,11 @@ button.add-column { position: absolute; top: 28px; box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1); + background-color: white; .key-option { - background-color: $light-color; + //background-color: $light-color; + background-color: white; border: 1px solid lightgray; padding: 2px 3px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 900949b94..a9c599e0e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -60,7 +60,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @observable _menuWidth = 0; - @observable _menuContent: any = ""; @observable _headerOpen = false; @observable _isOpen = false; @observable _node: HTMLDivElement | null = null; @@ -288,8 +287,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - openHeader = (col: any, menu: any, screenx: number, screeny: number) => { - this._menuContent = menu; + openHeader = (col: any, screenx: number, screeny: number) => { this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -363,8 +361,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onWheel(e: React.WheelEvent) { const scale = this.props.ScreenToLocalTransform().Scale; this.props.active(true) && e.stopPropagation(); - this.menuCoordinates[0] -= e.screenX / scale; - this.menuCoordinates[1] -= e.screenY / scale; + //this.menuCoordinates[0] -= e.screenX / scale; + //this.menuCoordinates[1] -= e.screenY / scale; } @computed get renderMenu() { @@ -505,6 +503,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onResizedChange={this.onResizedChange} setColumns={this.setColumns} reorderColumns={this.reorderColumns} + changeColumns={this.changeColumns} + setHeaderIsEditing={this.setHeaderIsEditing} />; } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index b9df2fe6b..5df0a676e 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -20,12 +20,13 @@ 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 } from "./CollectionSchemaHeaders"; +import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; +import { TouchScrollableMenuItem } from "../TouchScrollableMenu"; enum ColumnType { @@ -72,11 +73,13 @@ export interface SchemaTableProps { columns: SchemaHeaderField[]; documentKeys: any[]; headerIsEditing: boolean; - openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; + openHeader: (column: any, screenx: number, screeny: number) => void; onPointerDown: (e: React.PointerEvent) => void; onResizedChange: (newResized: Resize[], event: any) => void; setColumns: (columns: SchemaHeaderField[]) => void; reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; + changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; + setHeaderIsEditing: (isEditing: boolean) => void; } @observer @@ -91,6 +94,8 @@ export class SchemaTable extends React.Component { @observable _showDataDoc: any = ""; @observable _showDocPos: number[] = []; + @observable _showTitleDropdown: boolean = false; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -126,6 +131,9 @@ export class SchemaTable extends React.Component { }, [] as SortingRule[]); } + @action + changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -156,26 +164,48 @@ export class SchemaTable extends React.Component { const cols = this.props.columns.map(col => { + const keysDropdown = c.heading)} + canAddNew={true} + addNew={false} + // i think issue is with these two props + onSelect={this.props.changeColumns} + setIsEditing={this.props.setHeaderIsEditing} + width={"100%"} + />; + 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 headerText = this._showTitleDropdown ? keysDropdown : col.heading; - - const menuContent =
{col.heading}
; + const menuContent =
+ +
+ {keysDropdown} +
+
; const header = -
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + className="collectionSchemaView-menuOptions" style={{ - background: col.color, padding: "4px", - letterSpacing: "2px", - textTransform: "uppercase" + background: col.color, padding: "2px", + // letterSpacing: "2px", + // textTransform: "uppercase", + display: "flex" }}> {menuContent} -
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - style={{ float: "right" }}> - +
this.props.openHeader(col, e.clientX, e.clientY)} + style={{ float: "right", paddingRight: "6px" }}> +
; @@ -342,6 +372,7 @@ export class SchemaTable extends React.Component { this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); } + @action getColumnType = (column: SchemaHeaderField): ColumnType => { // added functionality to convert old column type stuff to new column type stuff -syip if (column.type && column.type !== 0) { -- cgit v1.2.3-70-g09d2 From fa4612e7dfeaecc09e205c5d6fa37743d23f9298 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 27 Jun 2020 02:37:22 -0500 Subject: moved sorting into header --- .../views/collections/CollectionSchemaHeaders.tsx | 15 +++++-- .../views/collections/CollectionSchemaView.scss | 1 + .../views/collections/CollectionSchemaView.tsx | 1 + src/client/views/collections/SchemaTable.tsx | 51 +++++++++++++++++++--- 4 files changed, 58 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 8494f3dca..096b45bee 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -358,13 +358,19 @@ export class KeysDropdown extends React.Component { this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; const options = keyOptions.map(key => { - return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); // if search term does not already exist as a group type, give option to create new group type if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); } @@ -382,7 +388,10 @@ export class KeysDropdown extends React.Component { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}> -
{this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5608cb7ab..9c5f2e8ac 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -293,6 +293,7 @@ button.add-column { background-color: white; border: 1px solid lightgray; padding: 2px 3px; + overflow-x: hidden; &:not(:first-child) { border-top: 0; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index a9c599e0e..61581aec1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -505,6 +505,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { reorderColumns={this.reorderColumns} changeColumns={this.changeColumns} setHeaderIsEditing={this.setHeaderIsEditing} + changeColumnSort={this.setColumnSort} />; } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5df0a676e..5d1dcf199 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -80,6 +80,7 @@ export interface SchemaTableProps { reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; setHeaderIsEditing: (isEditing: boolean) => void; + changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void; } @observer @@ -132,7 +133,22 @@ export class SchemaTable extends React.Component { } @action - changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } + changeSorting = (col: any) => { + console.log(col.heading); + if (col.desc === undefined) { + // no sorting + this.props.changeColumnSort(col, true); + } else if (col.desc === true) { + // descending sort + this.props.changeColumnSort(col, false); + } else if (col.desc === false) { + // ascending sort + this.props.changeColumnSort(col, undefined); + } + } + + @action + changeTitleMode = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -180,7 +196,17 @@ export class SchemaTable extends React.Component { 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 headerText = this._showTitleDropdown ? keysDropdown : col.heading; + const headerText = this._showTitleDropdown ? keysDropdown :
+ {col.heading}
; + + const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; const menuContent =
{ const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - className="collectionSchemaView-menuOptions" + className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", - // letterSpacing: "2px", - // textTransform: "uppercase", display: "flex" }}> - {menuContent} + +
+
+
+ {keysDropdown} +
+ +
this.changeSorting(col)} + style={{ paddingRight: "6px" }}> + +
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px" }}> - +
; -- cgit v1.2.3-70-g09d2 From e5385f9421b23d4119ac8704c9d127f1f296ac54 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 01:53:35 -0500 Subject: partial dropdown for types --- .../views/collections/CollectionSchemaHeaders.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 4 +- .../views/collections/CollectionSchemaView.tsx | 157 ++++++++++++++++----- src/client/views/collections/SchemaTable.tsx | 22 +-- 4 files changed, 135 insertions(+), 56 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 096b45bee..80c265ba6 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -360,7 +360,7 @@ export class KeysDropdown extends React.Component { const options = keyOptions.map(key => { return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); @@ -369,7 +369,7 @@ export class KeysDropdown extends React.Component { if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); @@ -380,8 +380,8 @@ export class KeysDropdown extends React.Component { render() { return ( -
- + this.onChange(e.target.value)} onClick={(e) => { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 9c5f2e8ac..2926a8f6f 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -265,7 +265,7 @@ button.add-column { .keys-dropdown { position: relative; - width: 100%; + //width: 100%; background-color: white; input { @@ -273,6 +273,8 @@ button.add-column { padding: 3px; height: 28px; font-weight: bold; + letter-spacing: "2px"; + text-transform: "uppercase"; &:focus { font-weight: normal; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 61581aec1..bfd5fa96f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,6 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; +import { civicinfo } from "googleapis/build/src/apis/civicinfo"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -68,6 +69,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable _menuHeight = 0; @observable _pointerX = 0; @observable _pointerY = 0; + @observable _openTypes: boolean = false; @computed get menuCoordinates() { const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)); const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)); @@ -123,7 +125,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setHeaderIsEditing(this._isOpen); } + @action changeColumnType = (type: ColumnType, col: any): void => { + this._openTypes = false; this.setColumnType(col, type); } @@ -175,43 +179,74 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { node && (this._node = node); } + @action + typesDropdownChange = (bool: boolean) => { + this._openTypes = bool; + } + + @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); const type = col.type; + + const anyType =
this.changeColumnType(ColumnType.Any, col)}> + + Any +
; + + const numType =
this.changeColumnType(ColumnType.Number, col)}> + + Number +
; + + const textType =
this.changeColumnType(ColumnType.String, col)}> + + Text +
; + + const boolType =
this.changeColumnType(ColumnType.Boolean, col)}> + + Checkbox +
; + + const listType =
this.changeColumnType(ColumnType.List, col)}> + + List +
; + + const docType =
this.changeColumnType(ColumnType.Doc, col)}> + + Document +
; + + const imageType =
this.changeColumnType(ColumnType.Image, col)}> + + Image +
; + + + const allColumnTypes =
+ {anyType} + {numType} + {textType} + {boolType} + {listType} + {docType} + {imageType} +
; + + const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType : + type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType : + type === ColumnType.List ? listType : type === ColumnType.Doc ? docType : imageType; + return (
- -
-
this.changeColumnType(ColumnType.Any, col)}> - - Any -
-
this.changeColumnType(ColumnType.Number, col)}> - - Number -
-
this.changeColumnType(ColumnType.String, col)}> - - Text -
-
this.changeColumnType(ColumnType.Boolean, col)}> - - Checkbox -
-
this.changeColumnType(ColumnType.List, col)}> - - List -
-
this.changeColumnType(ColumnType.Doc, col)}> - - Document -
-
this.changeColumnType(ColumnType.Image, col)}> - - Image -
+
this.typesDropdownChange(!this._openTypes)}> + +
+ {this._openTypes ? allColumnTypes : justColType}
); } @@ -288,6 +323,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action openHeader = (col: any, screenx: number, screeny: number) => { + console.log("header opening"); this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -309,6 +345,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } + @action renderContent = (col: any) => { return (
@@ -365,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @computed get renderMenu() { + @action renderMenu() { const scale = this.props.ScreenToLocalTransform().Scale; return (
doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
{this.renderContent(this._col)}
} + {({ measureRef }) =>
+
+
+ + {this.renderKeysDropDown(this._col)} +
+ {false ? <> : + <> + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+ + } +
+ +
}
); @@ -559,6 +615,41 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + const scale = this.props.ScreenToLocalTransform().Scale; + const menu =
this.props.active(true) && e.stopPropagation()} + onPointerDown={e => this.onHeaderClick(e)} + style={{ + position: "absolute", background: "white", + transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` + }}> + { + const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); + this._menuWidth = dim[0]; this._menuHeight = dim[1]; + })}> + {({ measureRef }) =>
+
+
+ + {this.renderKeysDropDown(this._col)} +
+ {false ? <> : + <> + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+ + } +
+ +
} + +
; + return
doc) {
{this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} - {this._headerOpen ? this.renderMenu : null} + {this._headerOpen ? menu : null}
; } } \ No newline at end of file diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5d1dcf199..176091661 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -186,9 +186,10 @@ export class SchemaTable extends React.Component { existingKeys={this.props.columns.map(c => c.heading)} canAddNew={true} addNew={false} - // i think issue is with these two props onSelect={this.props.changeColumns} setIsEditing={this.props.setHeaderIsEditing} + + // try commenting this out width={"100%"} />; @@ -208,16 +209,6 @@ export class SchemaTable extends React.Component { const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; - const menuContent =
- -
- {keysDropdown} -
-
; - const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} @@ -226,18 +217,13 @@ export class SchemaTable extends React.Component { background: col.color, padding: "2px", display: "flex" }}> - -
-
+
{keysDropdown}
-
this.changeSorting(col)} - style={{ paddingRight: "6px" }}> + style={{ paddingRight: "6px", display: "inline" }}>
this.props.openHeader(col, e.clientX, e.clientY)} -- cgit v1.2.3-70-g09d2 From 3764d9a1fbac63452ce9da8fdabfa83c49f8004d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 12:03:06 -0500 Subject: tweaks to date picker --- src/client/views/collections/CollectionSchemaCells.tsx | 9 +++++++-- src/client/views/collections/CollectionSchemaView.scss | 10 +++++----- src/fields/DateField.ts | 4 ++++ 3 files changed, 16 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0a2c538c2..cdcc67294 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -34,6 +34,7 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import ReactDOM from "react-dom"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; +import { DateField } from "../../../fields/DateField"; const path = require('path'); library.add(faExpand); @@ -374,15 +375,19 @@ export class CollectionSchemaDateCell extends CollectionSchemaCell { docFilters: returnEmptyFilter }; @observable private _field = this.prop.Document[this.prop.fieldKey]; + @observable private _date = new Date(); + @action handleChange = (date: any) => { + this._date = date; this.prop.Document[this.prop.fieldKey] = date; } render() { return this.handleChange(date)} + onChange={date => this.handleChange(date)} />; } } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 2926a8f6f..fa1f01448 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -62,14 +62,14 @@ width: calc(100% - 52px); margin-left: 50px; - z-index: 10000; + z-index: 100; overflow-y: visible; &.-header { font-size: 12px; height: 30px; box-shadow: none; - z-index: 10000; + z-index: 100; overflow-y: visible; } @@ -180,7 +180,7 @@ .collectionSchemaView-header { height: 100%; color: gray; - z-index: 10000; + z-index: 100; overflow-y: visible; display: flex; justify-content: space-between; @@ -188,10 +188,10 @@ .collectionSchema-header-menu { height: 100%; - z-index: 10000; + z-index: 100; .collectionSchema-header-toggler { - z-index: 10000; + z-index: 100; width: 100%; height: 100%; padding: 4px; diff --git a/src/fields/DateField.ts b/src/fields/DateField.ts index a925148c2..bee62663e 100644 --- a/src/fields/DateField.ts +++ b/src/fields/DateField.ts @@ -29,6 +29,10 @@ export class DateField extends ObjectField { [ToString]() { return this.date.toISOString(); } + + getDate() { + return this.date; + } } Scripting.addGlobal(function d(...dateArgs: any[]) { -- cgit v1.2.3-70-g09d2 From 85311e4096a3e3842d0f8a9f39e7436401455aa3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 28 Jun 2020 16:52:17 -0400 Subject: fixed drop down menus in schema collection view menu --- package-lock.json | 44 +++------ .../views/collections/CollectionSchemaCells.tsx | 4 - .../views/collections/CollectionSchemaView.scss | 38 ++++---- .../views/collections/CollectionSchemaView.tsx | 108 ++++----------------- 4 files changed, 52 insertions(+), 142 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index 6c364530b..735cff1a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2946,8 +2946,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2965,13 +2964,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2984,18 +2981,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -3098,8 +3092,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3109,7 +3102,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3122,20 +3114,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3152,7 +3141,6 @@ "mkdirp": { "version": "0.5.3", "bundled": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3208,8 +3196,7 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "npm-packlist": { "version": "1.4.8", @@ -3234,8 +3221,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3245,7 +3231,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3314,8 +3299,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3345,7 +3329,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3363,7 +3346,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3402,13 +3384,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0026ab927..034ba27cf 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -26,15 +26,11 @@ import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; import { List } from "../../../fields/List"; -import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; -import ReactDOM from "react-dom"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; -import { DateField } from "../../../fields/DateField"; const path = require('path'); library.add(faExpand); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index fa1f01448..2330fcc8a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -177,6 +177,26 @@ } +.collectionSchema-header-menu { + height: 100%; + z-index: 100; + position: absolute; + background:white; + + .collectionSchema-header-toggler { + z-index: 100; + width: 100%; + height: 100%; + padding: 4px; + letter-spacing: 2px; + text-transform: uppercase; + + svg { + margin-right: 4px; + } + } +} + .collectionSchemaView-header { height: 100%; color: gray; @@ -185,24 +205,6 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - - .collectionSchema-header-menu { - height: 100%; - z-index: 100; - - .collectionSchema-header-toggler { - z-index: 100; - width: 100%; - height: 100%; - padding: 4px; - letter-spacing: 2px; - text-transform: uppercase; - - svg { - margin-right: 4px; - } - } - } } button.add-column { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 7e8455149..857d8cb50 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,7 +11,6 @@ import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { Docs, DocumentOptions } from "../../documents/Documents"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; @@ -23,8 +22,8 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; -import { SchemaTable } from "./SchemaTable"; -import { civicinfo } from "googleapis/build/src/apis/civicinfo"; +import { SchemaTable } from "./SchemaTable" +import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -185,7 +184,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this._openTypes = bool; } - @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); @@ -353,29 +351,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } - @action - renderContent = (col: any) => { - return ( -
-
- - {this.renderKeysDropDown(col)} -
- {false ? <> : - <> - {this.renderTypes(col)} - {this.renderSorting(col)} - {this.renderColors(col)} -
- -
- - } -
- ); - } - @undoBatch @action deleteColumn = (key: string) => { @@ -410,45 +385,22 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @action renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; - return ( -
this.props.active(true) && e.stopPropagation()} - onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> - { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; this._menuHeight = dim[1]; - })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} - + @computed get renderMenuContent() { + TraceMobx(); + return
+
+ + {this.renderKeysDropDown(this._col)}
- ); + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+
; } - private createTarget = (ele: HTMLDivElement) => { this._previewCont = ele; super.CreateDropTarget(ele); @@ -623,38 +575,18 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + TraceMobx(); + const menuContent = this.renderMenuContent; const scale = this.props.ScreenToLocalTransform().Scale; const menu =
this.props.active(true) && e.stopPropagation()} onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> + style={{ transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` }}> { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} + {({ measureRef }) =>
{menuContent}
}
; -- cgit v1.2.3-70-g09d2 From d6828dba3dc1fd809d0e1449e8230656bb7c5360 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 10:28:31 -0500 Subject: UI fix and little restructure --- .../views/collections/CollectionSchemaHeaders.tsx | 10 +-- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 99 ++++------------------ .../views/collections/CollectionViewChromes.scss | 1 + src/client/views/collections/SchemaTable.tsx | 2 +- 5 files changed, 26 insertions(+), 88 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index fc7c2400d..efff4db98 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -365,7 +365,7 @@ export class KeysDropdown extends React.Component { const options = keyOptions.map(key => { return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); @@ -374,7 +374,7 @@ export class KeysDropdown extends React.Component { if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); @@ -385,8 +385,8 @@ export class KeysDropdown extends React.Component { render() { return ( -
- + this.onChange(e.target.value)} onClick={(e) => { @@ -395,7 +395,7 @@ export class KeysDropdown extends React.Component { }} onFocus={this.onFocus} onBlur={this.onBlur}>
{this.renderOptions()} diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 2330fcc8a..5226a60f1 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -500,7 +500,7 @@ button.add-column { } .collectionSchemaView-toolbar { - z-index: 1000; + z-index: 100; } .collectionSchemaView-toolbar { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index dc4e75443..c75012595 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; -import { civicinfo } from "googleapis/build/src/apis/civicinfo"; +import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -185,7 +185,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this._openTypes = bool; } - @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); @@ -353,29 +352,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } - @action - renderContent = (col: any) => { - return ( -
-
- - {this.renderKeysDropDown(col)} -
- {false ? <> : - <> - {this.renderTypes(col)} - {this.renderSorting(col)} - {this.renderColors(col)} -
- -
- - } -
- ); - } - @undoBatch @action deleteColumn = (key: string) => { @@ -410,43 +386,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @action renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; - return ( -
this.props.active(true) && e.stopPropagation()} - onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> - { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; this._menuHeight = dim[1]; - })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} - + @computed get renderMenuContent() { + TraceMobx(); + return
+
+ + {this.renderKeysDropDown(this._col)}
- ); + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+
; } private createTarget = (ele: HTMLDivElement) => { @@ -623,6 +577,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + TraceMobx(); + const menuContent = this.renderMenuContent; const scale = this.props.ScreenToLocalTransform().Scale; const menu =
this.props.active(true) && e.stopPropagation()} @@ -635,26 +591,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} + {({ measureRef }) =>
{menuContent}
}
; diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 2885ac763..822e15aed 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -16,6 +16,7 @@ height: 32px; border-bottom: .5px solid rgb(180, 180, 180); overflow: visible; + z-index: 9001; .collectionViewBaseChrome { display: flex; diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5152b16b0..9e3b4d961 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -221,7 +221,7 @@ export class SchemaTable extends React.Component { }}>
+ style={{ display: "inline", zIndex: 1000 }}> {keysDropdown}
this.changeSorting(col)} -- cgit v1.2.3-70-g09d2