diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 94 | ||||
| -rw-r--r-- | src/fields/SchemaHeaderField.ts | 1 |
2 files changed, 86 insertions, 9 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 7c2cfd15f..db7bf8c43 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() { @@ -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) => { + 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); + }); + } else { + this.childDocs.forEach(doc => { + doc[DocData][key] = defaultVal; + }); + } + } + + @action + setupAutoUpdate = (equation: string, doc: Doc) => { + return autorun(() => { + const result = this.parsedEquationResult(equation, doc); + doc[DocData][equation] = result; }); + } + + parseEquation = (eq: string): string => { + const variablePattern = /[a-z]+/gi; + return eq.replace(variablePattern, (match) => `doc.${match}`); + } + + parsedEquationResult = (eq: string, doc: any): number => { + const func = new Function('doc', 'return ' + eq); + return func(doc); + } @undoBatch removeColumn = (index: number) => { @@ -383,6 +412,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; findColDropIndex = (mouseX: number) => { + 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) { @@ -390,7 +420,7 @@ export class CollectionSchemaView extends CollectionSubView() { else index = i + 1; } return total + curr; - }, 2 * CollectionSchemaView._rowMenuWidth); // probably prone to issues; find better implementation (!!!) + }, xOffset); return index; }; @@ -567,6 +597,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.clearSelection(); draggedDocs.forEach(doc => { DocumentView.addViewRenderedCb(doc, dv => dv.select(true)); + console.log(doc.x); }); this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? [])); return true; @@ -660,6 +691,19 @@ export class CollectionSchemaView extends CollectionSubView() { })} /> ); + case ColumnType.Equation: + return ( + <input + type="text" + name="" + id="" + value={this._newFieldDefault ?? ''} + onPointerDown={e => e.stopPropagation()} + onChange={action((e: any) => { + this._newFieldDefault = e.target.value; + })} + /> + ); default: return undefined; } @@ -683,6 +727,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action setKey = (key: string, defaultVal?: any) => { + console.log("called") if (this._makeNewColumn) { this.addColumn(key, defaultVal); } else { @@ -718,6 +763,23 @@ export class CollectionSchemaView extends CollectionSubView() { }; @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) => { + let keyExists: boolean = false; + this.childDocs.forEach(doc => {if (Object.keys(doc).includes(key)) keyExists = true;}) + return keyExists + } + + @action openColumnMenu = (index: number, newCol: boolean) => { this._makeNewColumn = false; this._columnMenuIndex = index; @@ -833,6 +895,18 @@ export class CollectionSchemaView extends CollectionSubView() { /> string </div> + <div className="schema-key-type-option"> + <input + type="radio" + name="newFieldType" + checked={this._newFieldType === ColumnType.Equation} + onChange={action(() => { + this._newFieldType = ColumnType.Equation; + this._newFieldDefault = ''; + })} + /> + equation + </div> <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> <div className="schema-key-warning">{this._newFieldWarning}</div> <div @@ -910,10 +984,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()} /> + <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/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts index 0a8dd1d9e..6fa94204a 100644 --- a/src/fields/SchemaHeaderField.ts +++ b/src/fields/SchemaHeaderField.ts @@ -12,6 +12,7 @@ export enum ColumnType { Image, RTF, Enumeration, + Equation, Any, } |