diff options
Diffstat (limited to 'src/client/views/collections')
6 files changed, 43 insertions, 72 deletions
diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index cfec3a6bc..1af1a05aa 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -69,7 +69,7 @@ export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMap if (!this._initialLookupPending.get(id)) { this._initialLookupPending.set(id, true); setTimeout(() => { - titleLoc && Doc.SetInPlace(doc, "title", titleLoc, true); + titleLoc && Doc.SetInPlace(doc, `${fieldKey}-address`, titleLoc, true); this.respondToAddressChange(doc, fieldKey, address).then(() => this._initialLookupPending.delete(id)); }); } @@ -114,12 +114,12 @@ export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMap } } - private renderMarker = (layout: Doc) => { - const location = this.getLocation(layout, Doc.LayoutFieldKey(layout)); + private renderMarker = (layout: Doc, fieldKey?: string) => { + const location = this.getLocation(layout, fieldKey || Doc.LayoutFieldKey(layout)); return !location ? (null) : <Marker key={layout[Id]} - label={StrCast(layout.title)} + label={StrCast(layout[`${this.props.fieldKey}-address`])} position={location} onClick={() => this.markerClick(layout, location)} icon={this.renderMarkerIcon(layout)} @@ -250,7 +250,7 @@ export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMap }} > {this.reactiveContents} - {mapLoc ? this.renderMarker(this.rootDoc) : undefined} + {mapLoc && StrCast(this.rootDoc[`${fieldKey}-mapCenter-address`]) ? this.renderMarker(this.rootDoc, `${fieldKey}-mapCenter`) : undefined} </GeoMap> </div> </div>; @@ -260,9 +260,10 @@ export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMap export default GoogleApiWrapper({ apiKey: process.env.GOOGLE_MAPS!, - LoadingContainer: () => ( - <div className={"loadingWrapper"}> + LoadingContainer: () => { + console.log(process.env.GOOGLE_MAPS); + return <div className={"loadingWrapper"}> <img className={"loadingGif"} src={"/assets/loading.gif"} /> - </div> - ) + </div>; + } })(CollectionMapView) as any;
\ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 11470e940..003a1e9ff 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -69,16 +69,9 @@ export class CollectionSchemaCell extends React.Component<CellProps> { protected _document = this.props.rowProps.original; protected _dropDisposer?: DragManager.DragDropDisposer; - async componentWillMount() { - - } - async componentDidMount() { document.addEventListener("keydown", this.onKeyDown); - console.log("mounted"); - console.log(this.type); if (this.type === "context") { - console.log("mounted2"); const doc = Doc.GetProto(this.props.rowProps.original); const aliasdoc = await SearchUtil.GetAliasesOfDocument(doc); if (aliasdoc.length > 0) { @@ -273,9 +266,13 @@ export class CollectionSchemaCell extends React.Component<CellProps> { }; let contents: any = "incorrect type"; - if (type === undefined) contents = <FieldView {...props} fieldKey={fieldKey} />; + if (type === undefined) contents = StrCast(field) === "" ? "--" : <FieldView {...props} fieldKey={fieldKey} />; if (type === "number") contents = typeof field === "number" ? NumCast(field) : "--" + typeof field + "--"; - if (type === "string") contents = typeof field === "string" ? (StrCast(field) === "" ? "--" : StrCast(field)) : "--" + typeof field + "--"; + if (type === "string") { + fieldKey === "text" ? + contents = Cast(field, RichTextField)?.Text : + contents = typeof field === "string" ? (StrCast(field) === "" ? "--" : StrCast(field)) : "--" + typeof field + "--"; + } if (type === "boolean") contents = typeof field === "boolean" ? (BoolCast(field) ? "true" : "false") : "--" + typeof field + "--"; if (type === "document") { const doc = FieldValue(Cast(field, Doc)); @@ -317,7 +314,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> { if (start !== -1) { positions.push(start); } - while (start < contents.length && start !== -1) { + while (start < contents?.length && start !== -1) { term = term.slice(start + search.length + 1); tally += start + search.length + 1; start = term.indexOf(search); @@ -421,14 +418,12 @@ export class CollectionSchemaCell extends React.Component<CellProps> { /> : this.returnHighlights(() => { - console.log(props.fieldKey); const dateCheck: Date | undefined = this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof DateField ? DateCast(this.props.rowProps.original[this.props.rowProps.column.id as string]).date : undefined; if (dateCheck !== undefined) { cfield = dateCheck.toLocaleString(); } if (props.fieldKey === "context") { cfield = this.contents; - console.log("this should work"); } if (props.fieldKey === "*lastModified") { if (FieldValue(props.Document["data-lastModified"]) !== undefined) { @@ -628,7 +623,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { if (typeof this._field === "object" && this._doc && this._docTitle) { return ( <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} - onPointerDown={(e) => { this.onDown(e); }} + onPointerDown={this.onDown} onPointerEnter={(e) => { this.showPreview(true, e); }} onPointerLeave={(e) => { this.showPreview(false, e); }} > diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 5c0e6581b..a4b689e2f 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -521,12 +521,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}></input> - <div className="keys-options-wrapper" style={{ + {!this._isOpen ? (null) : <div className="keys-options-wrapper" style={{ width: this.props.width, maxWidth: this.props.width, height: "auto", }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> {this._searchTerm.includes(":") ? this.renderFilterOptions() : this.renderOptions()} - </div> + </div>} </div > </div> ); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5c2931a8b..3683fdffd 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -211,7 +211,8 @@ height: auto; z-index: 100; position: absolute; - background:white; + background: white; + padding: 5px; .collectionSchema-header-toggler { z-index: 100; @@ -243,7 +244,7 @@ button.add-column { .collectionSchema-header-menuOptions { color: black; - width: 200px; + width: 180px; text-align: left; .collectionSchema-headerMenu-group { @@ -326,6 +327,7 @@ button.add-column { background-color: white; border: 1px solid lightgray; padding: 2px 3px; + &:not(:first-child) { border-top: 0; } @@ -465,9 +467,9 @@ button.add-column { .collectionSchemaView-cellWrapper { height: 100%; padding: 4px; - text-align:left; - padding-left:19px; - + text-align: left; + padding-left: 19px; + position: relative; &:focus { @@ -604,13 +606,14 @@ button.add-column { width: 100%; .rt-thead { - display:none; + display: none; } - .collectionSchemaView-table{ + + .collectionSchemaView-table { border: solid 1px; overflow: hidden; } - + .row-dragger { background-color: rgb(252, 252, 252); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f1de3cee7..6f8fb53ec 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -62,8 +62,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable _menuWidth = 0; @observable _headerOpen = false; - @observable _isOpen = false; - @observable _node: HTMLDivElement | null = null; @observable _headerIsEditing = false; @observable _col: any = ""; @observable _menuHeight = 0; @@ -86,7 +84,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return this.props.ScreenToLocalTransform().transformPoint(x, y); } - @observable scale = this.props.ScreenToLocalTransform().Scale; + @computed get scale() { return this.props.ScreenToLocalTransform().Scale; } @computed get columns() { return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); @@ -111,33 +109,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); } + @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; - componentDidMount() { - document.addEventListener("pointerdown", this.detectClick); - } - - componentWillUnmount() { - document.removeEventListener("pointerdown", this.detectClick); - } - - @action setHeaderIsEditing = (isEditing: boolean) => { - this._headerIsEditing = isEditing; - } - - detectClick = (e: PointerEvent): void => { - if (this._node && this._node.contains(e.target as Node)) { - } else { - this._isOpen = false; - this.setHeaderIsEditing(false); - this.closeHeader(); - } - } - - @action - toggleIsOpen = (): void => { - this._isOpen = !this._isOpen; - this.setHeaderIsEditing(this._isOpen); - } @action changeColumnType = (type: ColumnType, col: any): void => { @@ -191,11 +164,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - setNode = (node: HTMLDivElement): void => { - node && (this._node = node); - } - - @action typesDropdownChange = (bool: boolean) => { this._openTypes = bool; } @@ -408,7 +376,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { TraceMobx(); return <div className="collectionSchema-header-menuOptions"> {this.renderTypes(this._col)} - {this.renderSorting(this._col)} + {/* {this.renderSorting(this._col)} */} {this.renderColors(this._col)} <div className="collectionSchema-headerMenu-group"> <button onClick={() => { this.deleteColumn(this._col.heading); }} @@ -615,7 +583,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } TraceMobx(); const menuContent = this.renderMenuContent; - const menu = <div className="collectionSchema-header-menu" ref={this.setNode} + const menu = <div className="collectionSchema-header-menu" onWheel={e => this.onZoomMenu(e)} onPointerDown={e => this.onHeaderClick(e)} style={{ diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index a2c529a21..7324dd6df 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -42,7 +42,7 @@ enum ColumnType { // this map should be used for keys that should have a const type of value const columnTypes: Map<string, ColumnType> = new Map([ - ["title", ColumnType.String], + ["title", ColumnType.String], ["text", ColumnType.String], ["x", ColumnType.Number], ["y", ColumnType.Number], ["_width", ColumnType.Number], ["_height", ColumnType.Number], ["_nativeWidth", ColumnType.Number], ["_nativeHeight", ColumnType.Number], ["isPrototype", ColumnType.Boolean], ["page", ColumnType.Number], ["curPage", ColumnType.Number], ["currentTimecode", ColumnType.Number], ["zIndex", ColumnType.Number] @@ -168,8 +168,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> { width: 30, Expander: (rowInfo) => { if (rowInfo.original.type === "collection") { - if (rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-up"} size="sm" /></div>; - if (!rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-down"} size="sm" /></div>; + return rowInfo.isExpanded ? + <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-down"} size="sm" /></div> : + <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-right"} size="sm" /></div>; } else { return null; } @@ -383,6 +384,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); pdoc && this.props.setPreviewDoc(pdoc); + } else if ((this._cellIsEditing || this.props.headerIsEditing) && (e.keyCode === 37 || e.keyCode === 39)) { + e.stopPropagation(); // stopPropagation for left/right arrows } } @@ -594,7 +597,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { render() { const preview = ""; - return <div className="collectionSchemaView-table" onPointerDown={this.props.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} + return <div className="collectionSchemaView-table" style={{ overflow: this.props.Document._searchDoc ? undefined : "auto" }} + onPointerDown={this.props.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > {this.reactTable} {StrCast(this.props.Document.type) !== "search" ? <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div> |