diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 83 |
1 files changed, 56 insertions, 27 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4df647728..de38d0c56 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-restricted-syntax */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Popup, PopupTrigger, Type } from 'browndash-components'; -import { ObservableMap, action, computed, makeObservable, observable, observe, runInAction } from 'mobx'; +import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; @@ -31,6 +31,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { ActionButton } from '@adobe/react-spectrum'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -83,10 +84,11 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _selectedCol: number = 0; @observable _selectedCells: Array<Doc> = []; @observable _mouseCoordinates = { x: 0, y: 0 }; - @observable _lowestSelectedIndex = -1; // lowest index among selected rows; used to properly sync dragged docs with cursor position - @observable _relCursorIndex = -1; // cursor index relative to the current selected cells - @observable _draggedColIndex = 0; - @observable _colBeingDragged = false; + @observable _lowestSelectedIndex: number = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position + @observable _relCursorIndex: number = -1; //cursor index relative to the current selected cells + @observable _draggedColIndex: number = 0; + @observable _colBeingDragged: boolean = false; + @observable _colKeysFiltered: boolean = false; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -271,7 +273,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { - this.addNewKey(newKey, defaultVal); + this.addNewKey(newKey, defaultVal, false); } const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. @@ -282,7 +284,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch addColumn = (key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { - this.addNewKey(key, defaultVal); + this.addNewKey(key, defaultVal, false); } const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1); @@ -297,10 +299,37 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - addNewKey = (key: string, defaultVal: any) => - this.childDocs.forEach(doc => { - doc[DocData][key] = defaultVal; + addNewKey = (key: string, defaultVal: any, isEquation: boolean) => { + if (isEquation) { + this.childDocs.forEach(doc => { + const eq = this.parseEquation(key); + doc[DocData][key] = this.parsedEquationResult(eq); + this.setupAutoUpdate(eq, doc); + }); + } else { + this.childDocs.forEach(doc => { + doc[DocData][key] = defaultVal; + }); + } + } + + @action + setupAutoUpdate = (equation: string, doc: Doc) => { + return autorun(() => { + const result = this.parsedEquationResult(equation); + doc[DocData][equation] = result; }); + } + + parseEquation = (eq: string): string => { + const variablePattern = /[a-z]+/gi; + return eq.replace(variablePattern, (match) => `doc[DocData]['${match}']`); + } + + parsedEquationResult = (eq: string): number => { + const result = new Function('return ' + eq).call(this); + return result; + } @undoBatch removeColumn = (index: number) => { @@ -383,9 +412,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; findColDropIndex = (mouseX: number) => { - const leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0]; - console.log(leftOffset); - console.log(CollectionSchemaView._rowMenuWidth); + let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; let index: number | undefined; this.displayColumnWidths.reduce((total, curr, i) => { if (total <= mouseX && total + curr >= mouseX) { @@ -393,7 +420,7 @@ export class CollectionSchemaView extends CollectionSubView() { else index = i + 1; } return total + curr; - }, leftOffset + CollectionSchemaView._rowMenuWidth); // probably prone to issues; find better implementation (!!!) + }, xOffset); return index; }; @@ -721,18 +748,22 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; - @computed - get activeMenuKeys() { - const activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key)); - return activeKeys; + @action + toggleMenuKeyFilter = () => { + if (!this._colKeysFiltered){ + this._colKeysFiltered = true; + this._menuKeys = this.documentKeys.filter(key => this.childDocsInclude(key)); + } else { + this._colKeysFiltered = false; + this._menuKeys = this.documentKeys; + } } childDocsInclude = (key: string) => { - this.childDocs.forEach(doc => { - // TODO: if childdoc fieldkeys contain the key, return true - }); - return false; - }; + let keyExists: boolean = false; + this.childDocs.forEach(doc => {if (Object.keys(doc).includes(key)) keyExists = true;}) + return keyExists + } @action openColumnMenu = (index: number, newCol: boolean) => { @@ -927,14 +958,12 @@ export class CollectionSchemaView extends CollectionSubView() { </div> ); } + get renderKeysMenu() { 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()} /> - { - // eslint-disable-next-line jsx-a11y/control-has-associated-label - <button type="button" className="schema-column-menu-toggle" /> - } + <button className="schema-column-menu-button" onClick={() => this.toggleMenuKeyFilter()}>{this._colKeysFiltered ? "All keys" : "Active keys only"}</button> {this._makeNewField ? this.newFieldMenu : this.keysDropdown} </div> ); |