diff options
Diffstat (limited to 'src')
4 files changed, 254 insertions, 291 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 5c0b6d88b..931645857 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -9,6 +9,77 @@ .schema-table { background-color: $white; + .schema-column-menu { + background: $light-gray; + position: absolute; + min-width: 200px; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 1; + + .schema-key-search-input { + width: calc(100% - 20px); + margin: 10px; + } + + .schema-key-search-result { + cursor: pointer; + padding: 2px 10px; + width: 100%; + + &:hover { + background-color: $medium-gray; + } + } + + .schema-key-search, + .schema-new-key-options { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .schema-new-key-options { + margin: 10px; + .schema-key-warning { + color: red; + font-weight: normal; + align-self: center; + } + } + + .schema-key-list { + width: 100%; + max-height: 300px; + overflow-y: auto; + } + + .schema-key-type-option { + margin: 2px 0px; + + input { + margin-right: 5px; + } + } + + .schema-key-default-val { + margin: 5px 0; + } + + .schema-column-menu-button { + cursor: pointer; + padding: 2px 5px; + background: $medium-blue; + border-radius: 9999px; + color: $white; + width: fit-content; + margin: 5px; + align-self: center; + } + } + .schema-header-row { justify-content: flex-end; @@ -19,6 +90,7 @@ justify-content: space-between; align-items: center; padding: 0; + z-index: 1; .schema-column-title { flex-grow: 2; @@ -46,78 +118,6 @@ .schema-column-resizer.left { align-self: flex-start; } - - .schema-column-menu { - background: $light-gray; - width: inherit; - position: absolute; - top: 35px; - min-width: 200px; - display: flex; - flex-direction: column; - align-items: flex-start; - - .schema-key-search-input { - width: calc(100% - 20px); - margin: 10px; - } - - .schema-key-search-result { - cursor: pointer; - padding: 2px 10px; - width: 100%; - - &:hover { - background-color: $medium-gray; - } - } - - .schema-key-search, - .schema-new-key-options { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .schema-new-key-options { - margin: 10px; - .schema-key-warning { - color: red; - font-weight: normal; - align-self: center; - } - } - - .schema-key-list { - width: 100%; - max-height: 300px; - overflow-y: auto; - } - - .schema-key-type-option { - margin: 2px 0px; - - input { - margin-right: 5px; - } - } - - .schema-key-default-val { - margin: 5px 0; - } - - .schema-column-menu-button { - cursor: pointer; - padding: 2px 5px; - background: $medium-blue; - border-radius: 9999px; - color: $white; - width: fit-content; - margin: 5px; - align-self: center; - } - } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c52a7f3e4..fd7790c4b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -26,6 +26,7 @@ import { SchemaRowBox } from './SchemaRowBox'; import { DefaultStyleProvider } from '../../StyleProvider'; import { DocumentManager } from '../../../util/DocumentManager'; import { ScriptField } from '../../../../fields/ScriptField'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export enum ColumnType { Number, @@ -43,16 +44,25 @@ export class CollectionSchemaView extends CollectionSubView() { private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; + private _makeNewColumn: boolean = false; public static _rowHeight: number = 50; public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; + @observable _lastSelectedRow: number | undefined; @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>(); @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; + @observable _columnMenuIndex: number | undefined; + @observable _menuOptions: string[] = []; + @observable _newFieldWarning: string = ''; + @observable _makeNewField: boolean = false; + @observable _newFieldDefault: any = 0; + @observable _newFieldType: ColumnType = ColumnType.Number; + @observable _menuValue: string = ''; get documentKeys() { const docs = this.childDocs; @@ -154,8 +164,6 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.sortField = field; this.layoutDoc.sortDesc = desc; - console.log(field, desc); - if (field === undefined) return; this.childDocs.sort((docA, docB) => { @@ -189,7 +197,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action - addColumn = (index: number, key: string, defaultVal?: any) => { + addColumn = (key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { this.addNewKey(key, defaultVal); } @@ -200,11 +208,11 @@ export class CollectionSchemaView extends CollectionSubView() { const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth); return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth); }); - currWidths.splice(index + 1, 0, newColWidth); + currWidths.splice(0, 0, newColWidth); this.layoutDoc.columnWidths = new List<number>(currWidths); let currKeys = [...this.columnKeys]; - currKeys.splice(index + 1, 0, key); + currKeys.splice(0, 0, key); this.layoutDoc.columnKeys = new List<string>(currKeys); }; @@ -386,6 +394,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addDocument(this._selectedDocSortedArray); this.addDocument(pushedDocs); this.setSort(undefined); + this.clearSelection(); return true; } return false; @@ -543,6 +552,157 @@ export class CollectionSchemaView extends CollectionSubView() { isChildContentActive = () => this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined; + @computed get fieldDefaultInput() { + switch (this._newFieldType) { + case ColumnType.Number: + return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + case ColumnType.Boolean: + return ( + <> + <input type="checkbox" name="" id="" value={this._newFieldDefault} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> + {this._newFieldDefault ? 'true' : 'false'} + </> + ); + case ColumnType.String: + return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + } + } + + onSearchKeyDown = (e: React.KeyboardEvent) => { + switch (e.key) { + case 'Enter': + this._menuOptions.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuOptions[0]) : action(() => (this._makeNewField = true))(); + break; + case 'Escape': + this.toggleColumnMenu(this._columnMenuIndex); + break; + } + }; + + @action + setKey = (key: string, defaultVal?: any) => { + if (this._makeNewColumn) { + this.addColumn(key, defaultVal); + } else { + this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); + } + this.toggleColumnMenu(this._columnMenuIndex); + }; + + @action + toggleColumnMenu = (index: number | undefined, newCol?: boolean) => { + this._makeNewColumn = false; + if (this._columnMenuIndex !== undefined && index === this._columnMenuIndex) { + this._columnMenuIndex = undefined; + } else { + this._columnMenuIndex = index; + this._menuValue = ''; + this._menuOptions = this.documentKeys; + this._makeNewField = false; + this._newFieldWarning = ''; + this._makeNewField = false; + if (newCol) { + this._makeNewColumn = true; + } + } + }; + + @action + updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => { + this._menuValue = e.target.value; + this._menuOptions = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); + }; + + @computed get renderColumnMenu() { + const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + return ( + <div className="schema-column-menu" style={{ left: x }}> + <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> + {this._makeNewField ? ( + <div className="schema-new-key-options"> + <div className="schema-key-type-option"> + <input + type="radio" + name="newFieldType" + id="" + checked={this._newFieldType == ColumnType.Number} + onChange={action(() => { + this._newFieldType = ColumnType.Number; + this._newFieldDefault = 0; + })} + /> + number + </div> + <div className="schema-key-type-option"> + <input + type="radio" + name="newFieldType" + id="" + checked={this._newFieldType == ColumnType.Boolean} + onChange={action(() => { + this._newFieldType = ColumnType.Boolean; + this._newFieldDefault = false; + })} + /> + boolean + </div> + <div className="schema-key-type-option"> + <input + type="radio" + name="newFieldType" + id="" + checked={this._newFieldType == ColumnType.String} + onChange={action(() => { + this._newFieldType = ColumnType.String; + this._newFieldDefault = ''; + })} + /> + string + </div> + <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> + <div className="schema-key-warning">{this._newFieldWarning}</div> + <div + className="schema-column-menu-button" + onPointerDown={action(e => { + if (this.documentKeys.includes(this._menuValue)) { + this._newFieldWarning = 'Field already exists'; + } else if (this._menuValue.length === 0) { + this._newFieldWarning = 'Field cannot be an empty string'; + } else { + this.setKey(this._menuValue, this._newFieldDefault); + } + })}> + done + </div> + </div> + ) : ( + <div className="schema-key-search"> + <div + className="schema-column-menu-button" + onPointerDown={action(e => { + e.stopPropagation(); + this._makeNewField = true; + })}> + + new field + </div> + <div className="schema-key-list"> + {this._menuOptions.map(key => ( + <div + className="schema-key-search-result" + onPointerDown={e => { + e.stopPropagation(); + this.setKey(key); + }}> + {key} + </div> + ))} + </div> + </div> + )} + </div> + ); + } + render() { return ( <div @@ -558,7 +718,15 @@ export class CollectionSchemaView extends CollectionSubView() { this.clearSelection(); })}> <div className="schema-header-row" style={{ height: CollectionSchemaView._rowHeight }}> - <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div> + <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}> + <div + className="schema-header-button" + onPointerDown={e => { + this.toggleColumnMenu(-1, true); + }}> + <FontAwesomeIcon icon="plus" /> + </div> + </div> {this.columnKeys.map((key, index) => { return ( <SchemaColumnHeader @@ -566,18 +734,17 @@ export class CollectionSchemaView extends CollectionSubView() { columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.displayColumnWidths} - possibleKeys={this.documentKeys} sortField={this.sortField} sortDesc={this.sortDesc} setSort={this.setSort} - changeColumnKey={this.changeColumnKey} - addColumn={this.addColumn} removeColumn={this.removeColumn} resizeColumn={this.startResize} + toggleColumnMenu={this.toggleColumnMenu} /> ); })} </div> + {this._columnMenuIndex !== undefined && this.renderColumnMenu} <div className="schema-table-content" onPointerDown={e => e.stopPropagation()}> {this.childDocs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 2e303f91c..ba63b352b 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -11,29 +11,17 @@ export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; - possibleKeys: string[]; sortField: string; sortDesc: boolean; setSort: (field: string, desc: boolean) => void; - changeColumnKey: (index: number, newKey: string, defaultVal?: any) => void; - addColumn: (index: number, key: string, defaultVal?: any) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; + toggleColumnMenu: (index: number | undefined, newCol?: boolean) => void; // dragColumn: (e: any, index: number) => boolean; } @observer export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> { - @observable _menuVisible: boolean = false; - @observable _makeNewField: boolean = false; - @observable _newFieldType: ColumnType = ColumnType.Number; - @observable _newFieldDefault: any = 0; - @observable _newFieldWarning: string = ''; - @observable _menuValue: string = ''; - @observable _menuOptions: string[] = []; - @observable _filterVisible: boolean = false; - private _makeNewColumn = false; - @computed get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } @@ -49,146 +37,6 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> } }; - @computed get fieldDefaultInput() { - switch (this._newFieldType) { - case ColumnType.Number: - return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; - case ColumnType.Boolean: - return ( - <> - <input type="checkbox" name="" id="" value={this._newFieldDefault} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> - {this._newFieldDefault ? 'true' : 'false'} - </> - ); - case ColumnType.String: - return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; - } - } - - @computed get renderColumnMenu() { - return ( - <div className="schema-column-menu"> - <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> - {this._makeNewField ? ( - <div className="schema-new-key-options"> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - id="" - checked={this._newFieldType == ColumnType.Number} - onChange={action(() => { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - /> - number - </div> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - id="" - checked={this._newFieldType == ColumnType.Boolean} - onChange={action(() => { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - /> - boolean - </div> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - id="" - checked={this._newFieldType == ColumnType.String} - onChange={action(() => { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - /> - string - </div> - <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> - <div className="schema-key-warning">{this._newFieldWarning}</div> - <div - className="schema-column-menu-button" - onPointerDown={action(e => { - if (this.props.possibleKeys.includes(this._menuValue)) { - this._newFieldWarning = 'Field already exists'; - } else if (this._menuValue.length === 0) { - this._newFieldWarning = 'Field cannot be an empty string'; - } else { - this.setKey(this._menuValue, this._newFieldDefault); - } - })}> - done - </div> - </div> - ) : ( - <div className="schema-key-search"> - <div - className="schema-column-menu-button" - onPointerDown={action(e => { - e.stopPropagation(); - this._makeNewField = true; - })}> - + new field - </div> - <div className="schema-key-list"> - {this._menuOptions.map(key => ( - <div - className="schema-key-search-result" - onPointerDown={e => { - e.stopPropagation(); - this.setKey(key); - }}> - {key} - </div> - ))} - </div> - </div> - )} - </div> - ); - } - - @computed get columnFilterMenu() { - return ( - <div className="schema-column-menu"> - <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> - </div> - ); - } - - onSearchKeyDown = (e: React.KeyboardEvent) => { - switch (e.key) { - case 'Enter': - this.setKey(this._menuOptions.length > 0 && this._menuValue.length > 0 ? this._menuOptions[0] : this._menuValue); - break; - case 'Escape': - this.toggleColumnMenu(); - break; - } - }; - - @action - setKey = (key: string, defaultVal?: any) => { - if (this._makeNewColumn) { - this.props.addColumn(this.props.columnIndex, key, defaultVal); - } else { - this.props.changeColumnKey(this.props.columnIndex, key, defaultVal); - } - this.toggleColumnMenu(); - }; - - @action - updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => { - this._menuValue = e.target.value; - this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); - }; - // @action // onPointerDown = (e: React.PointerEvent) => { // e.stopPropagation(); @@ -196,36 +44,6 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> // setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); // }; - @action - toggleColumnMenu = (newCol?: boolean) => { - this._makeNewColumn = false; - if (this._menuVisible) { - this._menuVisible = false; - } else { - this._filterVisible = false; - this._menuVisible = true; - this._menuValue = ''; - this._menuOptions = this.props.possibleKeys; - this._makeNewField = false; - this._newFieldWarning = ''; - this._makeNewField = false; - if (newCol) { - this._makeNewColumn = true; - } - } - }; - - @action - toggleFilterMenu = () => { - console.log(this._filterVisible); - if (this._filterVisible) { - this._filterVisible = false; - } else { - this._filterVisible = true; - this._menuVisible = false; - } - }; - render() { return ( <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}> @@ -236,20 +54,13 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> <div className="schema-header-button" onPointerDown={e => { - this.toggleColumnMenu(); + this.props.toggleColumnMenu(this.props.columnIndex, false); }}> <FontAwesomeIcon icon="pencil-alt" /> </div> <div className="schema-header-button" onPointerDown={e => { - this.toggleColumnMenu(true); - }}> - <FontAwesomeIcon icon="plus" /> - </div> - <div - className="schema-header-button" - onPointerDown={e => { this.props.removeColumn(this.props.columnIndex); }}> <FontAwesomeIcon icon="trash" /> @@ -257,15 +68,9 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> <div className="schema-header-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}> <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} /> </div> - <div className="schema-header-button" onPointerDown={e => this.toggleFilterMenu()}> - <FontAwesomeIcon icon="filter" /> - </div> </div> <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div> - - {this._menuVisible && this.renderColumnMenu} - {this._filterVisible && this.columnFilterMenu} </div> ); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 0f832e7c4..43b7da544 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,20 +1,14 @@ import React = require('react'); import { observer } from 'mobx-react'; -import { Doc, DocListCast, Field } from '../../../../fields/Doc'; -import './CollectionSchemaView.scss'; -import { type } from 'jquery'; -import { action } from 'mobx'; -import { ComputedField } from '../../../../fields/ScriptField'; -import { FieldValue } from '../../../../fields/Types'; -import { CompileScript } from '../../../util/Scripting'; +import { Doc, Field } from '../../../../fields/Doc'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; +import { Transform } from '../../../util/Transform'; import { EditableView } from '../../EditableView'; -import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; import { FieldView, FieldViewProps } from '../../nodes/FieldView'; import { KeyValueBox } from '../../nodes/KeyValueBox'; -import { returnEmptyFilter, returnEmptyDoclist, returnFalse, emptyFunction, returnZero } from '../../../../Utils'; import { DefaultStyleProvider } from '../../StyleProvider'; -import { Transform } from '../../../util/Transform'; import { CollectionSchemaView } from './CollectionSchemaView'; +import './CollectionSchemaView.scss'; export interface SchemaTableCellProps { Document: Doc; @@ -28,7 +22,6 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { render() { const props: FieldViewProps = { Document: this.props.Document, - // DataDoc: this.props.doc, docFilters: returnEmptyFilter, docRangeFilters: returnEmptyFilter, searchFilterDocs: returnEmptyDoclist, @@ -56,8 +49,6 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { return ( <div className="schema-table-cell" style={{ width: this.props.columnWidth, pointerEvents: this.props.isRowActive() ? 'all' : 'none' }}> - {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */} - {/* <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */} <EditableView contents={<FieldView {...props} />} height={'auto'} |