diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 59 | ||||
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 20 |
2 files changed, 67 insertions, 12 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index db7bf8c43..f7a553da3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -89,6 +89,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _draggedColIndex: number = 0; @observable _colBeingDragged: boolean = false; @observable _colKeysFiltered: boolean = false; + @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>(); // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -302,9 +303,11 @@ export class CollectionSchemaView extends CollectionSubView() { addNewKey = (key: string, defaultVal: any) => { if (this._newFieldType == ColumnType.Equation) { this.childDocs.forEach(doc => { - const eq = this.parseEquation(defaultVal); - doc[DocData][key] = this.parsedEquationResult(eq, doc); - this.setupAutoUpdate(eq, doc); + const parsedEquation = this.parseEquation(defaultVal); + const val = computed(() => { return this.parsedEquationResult(parsedEquation, doc);}) + doc[DocData][key] = val.get(); + // doc[DocData][key] = this.parsedEquationResult(eq, doc); + // this.setupAutoUpdate(eq, doc); }); } else { this.childDocs.forEach(doc => { @@ -542,11 +545,55 @@ export class CollectionSchemaView extends CollectionSubView() { } else this.addDocToSelection(doc, false); this._selectedCol = col; + if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc)); }; + getCellTag = (doc: Doc, col: number) => { + return this._cellTags.get(doc)[col]; + } + + populateCellTags = () => { + this.childDocs.forEach(doc => this.addTags(doc)); + } + + addTags = (doc: Doc) => { + const row = this.rowIndex(doc) + 1; + const tags = []; + for (let col = 1; col <= this._colEles.length; ++col){ + tags.push(this.numToChar(col) + row.toString()) + } + this._cellTags.set(doc, tags) + } + + modifyCellTags = (addingColumn: boolean) => { + if (addingColumn) { + const colTag = this.numToChar(this._colEles.length); + this._cellTags.forEach((tags, row) => { + const newTag = colTag + this.rowIndex(row); + tags.push(newTag); + }); + } else { + this._cellTags.forEach(tags => { + if (tags.length > 0) { + tags.pop(); + } + }) + } + } + + numToChar = (num: number) => { + let result = ''; + while (num > 0) { + let remainder = (num - 1) % 26; + result = String.fromCharCode(65 + remainder) + result; + num = Math.floor((num - 1) / 26); + } + return result; + } + @action deselectCell = (doc: Doc) => { this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); @@ -936,6 +983,11 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get keysDropdown() { return ( <div className="schema-key-search"> + <button + className="schema-column-menu-button" + onClick={() => this.toggleMenuKeyFilter()}> + {this._colKeysFiltered ? "All keys" : "Active keys only"} + </button> <div className="schema-column-menu-button" onPointerDown={action((e: any) => { @@ -989,7 +1041,6 @@ export class CollectionSchemaView extends CollectionSubView() { return ( <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}> <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> - <button className="schema-column-menu-button" onClick={() => this.toggleMenuKeyFilter()}>{this._colKeysFiltered ? "All keys" : "Active keys only"}</button> {this._makeNewField ? this.newFieldMenu : this.keysDropdown} </div> ); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index b017eb62b..8192c5e2a 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -184,20 +184,24 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } } + select = (shift: boolean, ctrl: boolean, e: React.MouseEvent<HTMLDivElement>) => { + if (this._props.isRowActive?.() !== false) { + if (this.selected && ctrl) { + this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + e.stopPropagation(); + } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + } + } + render() { return ( <div className="schema-table-cell" onContextMenu={e => StopEvent(e)} onPointerDown={action(e => { - const shift: boolean = e.shiftKey; - const ctrl: boolean = e.ctrlKey; - if (this._props.isRowActive?.() !== false) { - if (this.selected && ctrl) { - this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); - e.stopPropagation(); - } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); - } + + this.select(e.shiftKey, e.ctrlKey, e); + })} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} |