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') 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