From b27056fc67c654dea72338f928cd69026a501c0f Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 14 May 2024 15:58:23 -0400 Subject: editable columnheader progress; still not updating properly on adding new col --- .../collections/collectionSchema/CollectionSchemaView.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 6fb8e40db..269bb4de5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -162,6 +162,13 @@ min-width: 20%; } + .schema-column-edit-wrapper { + flex-grow: 2; + margin: 5px; + overflow: hidden; + min-width: 20%; + } + .schema-header-menu { margin: 5px; } @@ -176,6 +183,11 @@ } } + .editableView-input { + border: none; + outline: none; + } + /*.schema-column-resizer.left { min-width: 5px; transform: translate(-3px, 0px); -- cgit v1.2.3-70-g09d2 From 52b8410f14c4e522b0d7bbdbfb64d8fdbd5c3023 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 15 May 2024 22:26:42 -0400 Subject: columheader editing working!! (kinda hacky using readonly input revisit) --- src/client/views/EditableView.scss | 3 ++ src/client/views/EditableView.tsx | 44 +++++++++++++------ .../collectionSchema/CollectionSchemaView.scss | 2 +- .../collectionSchema/CollectionSchemaView.tsx | 49 +++++++++------------- .../collectionSchema/SchemaColumnHeader.tsx | 22 ++++++---- 5 files changed, 70 insertions(+), 50 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss index 27b260450..e492068c8 100644 --- a/src/client/views/EditableView.scss +++ b/src/client/views/EditableView.scss @@ -5,6 +5,7 @@ hyphens: auto; overflow: hidden; height: 100%; + width: 100%; min-width: 20; text-overflow: ellipsis; } @@ -33,6 +34,8 @@ pointer-events: all; } + + .editableView-input:focus { border: none; outline: none; diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 011b6c77a..4c4ef227a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; @@ -55,7 +55,7 @@ export interface EditableProps { placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc - isColHeader?: boolean; + showKeyNotVal?: boolean; } /** @@ -277,9 +277,35 @@ export class EditableView extends ObservableReactComponent { ); } + display = () => { + let toDisplay; + const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); + if (this._props.showKeyNotVal){ + toDisplay = + } else { + toDisplay = ( + { + // eslint-disable-next-line react/jsx-props-no-spreading + this._props.fieldContents ? : this.props.contents ? this._props.contents?.valueOf() : '' + } + ) + } + + return toDisplay; + } + render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if ((this._editing && gval !== undefined) || this._props.isColHeader) { + if ((this._editing && gval !== undefined)) { return this._props.sizeToContent ? (
{gval}
@@ -300,21 +326,13 @@ export class EditableView extends ObservableReactComponent { minHeight: '10px', whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line', height: this._props.height, + width: '100%', maxHeight: this._props.maxHeight, fontStyle: this._props.fontStyle, fontSize: this._props.fontSize, }} onClick={this.onClick}> - - { - // eslint-disable-next-line react/jsx-props-no-spreading - this._props.fieldContents ? : this.props.contents ? this._props.contents?.valueOf() : '' - } - + {this.display()}
); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 269bb4de5..fd2e882d9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -159,7 +159,7 @@ flex-grow: 2; margin: 5px; overflow: hidden; - min-width: 20%; + min-width: 100%; } .schema-column-edit-wrapper { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 3d7c7882e..db23f874e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -331,7 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() { const currKeys = this.columnKeys.slice(); currKeys.splice(index, 1); - this.layoutDoc.schema_columnKeys = new List(currKeys); + this.layoutDoc.schema_columnKeys = new List(currKeys); }; @action @@ -677,19 +677,6 @@ export class CollectionSchemaView extends CollectionSubView() { })} /> ); - case ColumnType.Equation: - return ( - e.stopPropagation()} - onChange={action((e: any) => { - this._newFieldDefault = e.target.value; - })} - /> - ); default: return undefined; } @@ -714,7 +701,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action setKey = (key: string, defaultVal?: any, index?: number) => { if (this.columnKeys.includes(key)){ - this._newFieldWarning = 'Field already exists'; return; } @@ -798,12 +784,29 @@ export class CollectionSchemaView extends CollectionSubView() { this._filterColumnIndex = undefined; }; - openContextMenu = (x: number, y: number, index: number) => { + openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => { this.closeColumnMenu(); this.closeFilterMenu(); + + let toDisplay: string = ''; + switch (fieldType) { + case ColumnType.Number: + toDisplay = 'number'; + break; + case ColumnType.String: + toDisplay = 'string'; + break; + case ColumnType.Boolean: + toDisplay = 'boolean'; + break; + default: + toDisplay = 'string'; + break; + } + ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ - description: 'Change field', + description: `Field type: ${toDisplay}`, event: () => this.openColumnMenu(index, false), icon: 'pencil-alt', }); @@ -886,18 +889,6 @@ export class CollectionSchemaView extends CollectionSubView() { /> string -
- { - this._newFieldType = ColumnType.Equation; - this._newFieldDefault = ''; - })} - /> - equation -
value: {this.fieldDefaultInput}
{this._newFieldWarning}
number; resizeColumn: (e: any, index: number) => void; dragColumn: (e: any, index: number) => boolean; - openContextMenu: (x: number, y: number, index: number) => void; + openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void; setColRef: (index: number, ref: HTMLDivElement) => void; rootSelected?: () => boolean; columnWidth: () => number; @@ -49,7 +50,8 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends ObservableReactComponent { - @observable _editing: boolean = false; + @observable _editing: boolean | undefined = false; + @observable _fieldType: ColumnType = ColumnType.String; @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; @@ -125,9 +127,9 @@ export class SchemaColumnHeader extends ObservableReactComponent {console.log(this.fieldKey); return this.fieldKey}} + editing={undefined} + showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value + GetValue={() => this.fieldKey} SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column this.setColumnValues(value, value); @@ -142,7 +144,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { - // return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
+ // return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
// } render() { @@ -153,6 +155,12 @@ export class SchemaColumnHeader extends ObservableReactComponent { + // console.log(true); + // this._editing = true}} + // onPointerLeave={() => { + // console.log(false); + // this._editing = false}} ref={col => { if (col) { this._props.setColRef(this._props.columnIndex, col); @@ -163,7 +171,7 @@ export class SchemaColumnHeader extends ObservableReactComponent{this.editableView}
-
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}> +
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
-- cgit v1.2.3-70-g09d2 From 5b6e6b27a191a880fd454ebbc5ed3816cd5cd59c Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 3 Jun 2024 10:23:38 -0400 Subject: new columns display blank --- src/client/views/EditableView.tsx | 2 + .../collectionSchema/CollectionSchemaView.scss | 10 +++-- .../collectionSchema/CollectionSchemaView.tsx | 48 ++++++---------------- .../collectionSchema/SchemaColumnHeader.tsx | 34 ++++++++------- .../collectionSchema/SchemaTableCell.tsx | 4 +- 5 files changed, 43 insertions(+), 55 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 4c4ef227a..5b691c507 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -56,6 +56,7 @@ export interface EditableProps { wrap?: string; // nowrap, pre-wrap, etc showKeyNotVal?: boolean; + updateAlt?: (newAlt: string) => void; } /** @@ -182,6 +183,7 @@ export class EditableView extends ObservableReactComponent { @action onClick = (e: React.MouseEvent) => { + if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.'); if (this._props.editing !== false) { e.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index fd2e882d9..1dbe75a8d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -50,13 +50,15 @@ .schema-column-menu, .schema-filter-menu { background: $light-gray; - position: relative; - min-width: 200px; - max-width: 400px; + position: absolute; + min-width: 150px; + max-width: 300px; + max-height: 300px; display: flex; + overflow: hidden; flex-direction: column; align-items: flex-start; - z-index: 1; + z-index: 5; .schema-key-search-input { width: calc(100% - 20px); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index db23f874e..c673f0e56 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -32,6 +32,7 @@ import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; import { ActionButton } from '@adobe/react-spectrum'; +import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -273,9 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { - if (!this.documentKeys.includes(newKey)) { - this.addNewKey(newKey, defaultVal); - } + if (!this.documentKeys.includes(newKey)) this.addNewKey(newKey, defaultVal); const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; @@ -283,10 +282,8 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - addColumn = (key: string, defaultVal?: any) => { - if (!this.documentKeys.includes(key)) { - this.addNewKey(key, defaultVal); - } + addColumn = (key?: string, defaultVal?: any) => { + if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal); const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1); const currWidths = this.storedColumnWidths.slice(); @@ -295,7 +292,9 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.schema_columnWidths = new List(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth))); const currKeys = this.columnKeys.slice(); + if (!key) key = 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString(); currKeys.splice(0, 0, key); + this.changeColumnKey(0, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString()); this.layoutDoc.schema_columnKeys = new List(currKeys); }; @@ -332,6 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() { const currKeys = this.columnKeys.slice(); currKeys.splice(index, 1); this.layoutDoc.schema_columnKeys = new List(currKeys); + console.log(...currKeys); }; @action @@ -784,29 +784,13 @@ export class CollectionSchemaView extends CollectionSubView() { this._filterColumnIndex = undefined; }; - openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => { + openContextMenu = (x: number, y: number, index: number) => { this.closeColumnMenu(); this.closeFilterMenu(); - let toDisplay: string = ''; - switch (fieldType) { - case ColumnType.Number: - toDisplay = 'number'; - break; - case ColumnType.String: - toDisplay = 'string'; - break; - case ColumnType.Boolean: - toDisplay = 'boolean'; - break; - default: - toDisplay = 'string'; - break; - } - ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ - description: `Field type: ${toDisplay}`, + description: `Change field`, event: () => this.openColumnMenu(index, false), icon: 'pencil-alt', }); @@ -923,14 +907,6 @@ export class CollectionSchemaView extends CollectionSubView() { onClick={() => this.toggleMenuKeyFilter()}> {this._colKeysFiltered ? "All keys" : "Active keys only"} -
{ - e.stopPropagation(); - this._makeNewField = true; - })}> - + new field -
{ @@ -1077,7 +1053,9 @@ export class CollectionSchemaView extends CollectionSubView() { _oldWheel: any; render() { return ( -
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}> +
this.createDashEventsTarget(ele)} + onDrop={this.onExternalDrop.bind(this)} + onPointerMove={e => this.onPointerMove(e)} >
this.openColumnMenu(-1, true)} icon="plus" />} + toggle={ this.addColumn()} icon="plus" />} //here trigger={PopupTrigger.CLICK} type={Type.TERT} isOpen={this._columnMenuIndex !== -1 ? false : undefined} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index f404eb444..6e2f85cc0 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -39,7 +39,7 @@ export interface SchemaColumnHeaderProps { rowHeight: () => number; resizeColumn: (e: any, index: number) => void; dragColumn: (e: any, index: number) => boolean; - openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void; + openContextMenu: (x: number, y: number, index: number) => void; setColRef: (index: number, ref: HTMLDivElement) => void; rootSelected?: () => boolean; columnWidth: () => number; @@ -50,15 +50,21 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends ObservableReactComponent { - @observable _editing: boolean | undefined = false; - @observable _fieldType: ColumnType = ColumnType.String; + @observable _altTitle: string | undefined = undefined; @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; } + isDefaultTitle = (key: string) => { + const defaultPattern = /EmptyColumnKey/; + let isDefault: boolean = (defaultPattern.exec(key) != null); + return isDefault; + } + getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey)); setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} + @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} @action sortClicked = (e: React.PointerEvent) => { @@ -128,15 +134,21 @@ export class SchemaColumnHeader extends ObservableReactComponent this.fieldKey} + GetValue={() => { + if (this.isDefaultTitle(this.fieldKey)) return ''; + else if (this._altTitle) return this._altTitle; + else return this.fieldKey; + }} SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column - this.setColumnValues(value, value); + this.setColumnValues(value, ''); + this._altTitle = undefined; this._props.finishEdit?.(); return true; - } - this._props.finishEdit?.(); // else save new value to header field + } else if (enterKey) this.updateAlt(value); + this._props.finishEdit?.(); return true; }, 'edit column header')} /> @@ -155,12 +167,6 @@ export class SchemaColumnHeader extends ObservableReactComponent { - // console.log(true); - // this._editing = true}} - // onPointerLeave={() => { - // console.log(false); - // this._editing = false}} ref={col => { if (col) { this._props.setColRef(this._props.columnIndex, col); @@ -171,7 +177,7 @@ export class SchemaColumnHeader extends ObservableReactComponent{this.editableView}
-
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}> +
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 51a92ff35..4531f30a8 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -142,7 +142,7 @@ export class SchemaTableCell extends ObservableReactComponent this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc + GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); @@ -150,7 +150,7 @@ export class SchemaTableCell extends ObservableReactComponent Date: Tue, 4 Jun 2024 13:01:47 -0400 Subject: c --- .../collectionSchema/CollectionSchemaView.scss | 5 ++ .../collectionSchema/CollectionSchemaView.tsx | 9 +-- .../collectionSchema/SchemaColumnHeader.tsx | 66 ++++++++++++---------- .../collectionSchema/SchemaTableCell.tsx | 4 +- 4 files changed, 45 insertions(+), 39 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 1dbe75a8d..3d89a479a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -301,3 +301,8 @@ width: 12px; } } + +.header-dropdown-container { + height: 0px; + width: 60px; +} diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index ef1819120..92cc58f54 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -33,6 +33,7 @@ import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; import { ActionButton } from '@adobe/react-spectrum'; import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow'; +import { Func } from 'mocha'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -706,7 +707,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addColumn(key, defaultVal); this._makeNewColumn = false; } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal); - + this.closeColumnMenu(); }; @@ -884,11 +885,6 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get keysDropdown() { return (
-
{ @@ -1065,6 +1061,7 @@ export class CollectionSchemaView extends CollectionSubView() { CollectionSchemaView._minColWidth} //TODO: update Document={this.Document} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 6e2f85cc0..4f9d53d18 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -32,6 +32,7 @@ export interface SchemaColumnHeaderProps { sortField: string; sortDesc: boolean; schemaView: CollectionSchemaView; + keysDropdown: React.JSX.Element; //cleanupField: (s: string) => string; isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined; setSort: (field: string | undefined, desc?: boolean) => void; @@ -51,17 +52,12 @@ export interface SchemaColumnHeaderProps { export class SchemaColumnHeader extends ObservableReactComponent { @observable _altTitle: string | undefined = undefined; + @observable _displayKeysDropdown: boolean = false; @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; } - - isDefaultTitle = (key: string) => { - const defaultPattern = /EmptyColumnKey/; - let isDefault: boolean = (defaultPattern.exec(key) != null); - return isDefault; - } - + getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey)); setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} @@ -79,6 +75,11 @@ export class SchemaColumnHeader extends ObservableReactComponent { + this._props.schemaView.openColumnMenu(this._props.columnIndex, false) + this._displayKeysDropdown = true; + } + @action setupDrag = (e: React.PointerEvent) => { this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction); @@ -121,7 +122,7 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.schemaView.openColumnMenu(this._props.columnIndex, false)} style={{ color, width: '100%', @@ -148,6 +149,7 @@ export class SchemaColumnHeader extends ObservableReactComponent } - // staticView = () => { - // return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
- // } + isDefaultTitle = (key: string) => { + const defaultPattern = /EmptyColumnKey/; + let isDefault: boolean = (defaultPattern.exec(key) != null); + return isDefault; + } render() { return ( -
{ - if (col) { - this._props.setColRef(this._props.columnIndex, col); - } - }}> -
this._props.resizeColumn(e, this._props.columnIndex)} /> +
{ + if (col) { + this._props.setColRef(this._props.columnIndex, col); + } + }}> +
this._props.resizeColumn(e, this._props.columnIndex)} /> -
{this.editableView}
+
{this.editableView}
-
-
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}> - -
-
- +
+
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}> + +
+
+ +
-
); } } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index e6660f379..c3a58b505 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -30,7 +30,7 @@ import { Colors } from '../../global/globalEnums'; import { DocumentView } from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; -import { FInfotoColType } from './CollectionSchemaView'; +import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; export interface SchemaTableCellProps { @@ -149,7 +149,7 @@ export class SchemaTableCell extends ObservableReactComponent Date: Fri, 7 Jun 2024 02:36:18 -0400 Subject: lots of UI improvements --- src/client/views/EditableView.tsx | 16 +++++++------ .../collectionSchema/CollectionSchemaView.scss | 4 ---- .../collectionSchema/CollectionSchemaView.tsx | 2 ++ .../collectionSchema/SchemaColumnHeader.tsx | 19 ++++++++------- .../collections/collectionSchema/SchemaRowBox.tsx | 3 ++- .../collectionSchema/SchemaTableCell.tsx | 27 ++++++++++++++++++---- 6 files changed, 46 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c79cabd6a..5b690bf33 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -55,7 +55,7 @@ export interface EditableProps { placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc - showKeyNotVal?: boolean; + schemaHeader?: boolean; updateAlt?: (newAlt: string) => void; updateSearch?: (value: string) => void; } @@ -77,6 +77,7 @@ export class EditableView extends ObservableReactComponent { super(props); makeObservable(this); this._editing = !!this._props.editing; + if (this._props.schemaHeader) this._editing = true; } componentDidMount(): void { @@ -184,9 +185,9 @@ export class EditableView extends ObservableReactComponent { }; @action - onClick = (e: React.MouseEvent) => { + onClick = (e?: React.MouseEvent) => { if (this._props.editing !== false) { - e.nativeEvent.stopPropagation(); + e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); } else { @@ -280,12 +281,13 @@ export class EditableView extends ObservableReactComponent { ); } - display = () => { + staticDisplay = () => { let toDisplay; const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if (this._props.showKeyNotVal){ + if (this._props.schemaHeader){ toDisplay = { fontSize: this._props.fontSize, }} onClick={this.onClick}> - {this.display()} + {this.staticDisplay()}
); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 3d89a479a..ceffc7e44 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -302,7 +302,3 @@ } } -.header-dropdown-container { - height: 0px; - width: 60px; -} diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 39bde7d37..ec1341b14 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -758,6 +758,8 @@ const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs. @action openColumnMenu = (index: number, newCol: boolean) => { + this.closeFilterMenu(); + this._makeNewColumn = false; this._columnMenuIndex = index; this._menuValue = ''; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 03cf64fc8..bda9fc9b7 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -57,6 +57,11 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.schemaView?.fieldInfos.get(fieldKey)); setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @@ -77,10 +82,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { - if (this.isDefaultTitle(this.fieldKey)){ - this._props.schemaView.openColumnMenu(this._props.columnIndex, false) - this._displayKeysDropdown = true; - } + this._props.schemaView.openColumnMenu(this._props.columnIndex, false) } @action @@ -125,7 +127,7 @@ export class SchemaColumnHeader extends ObservableReactComponent this.openKeyDropdown()} + return
{SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}} style={{ color, width: '100%', @@ -138,11 +140,12 @@ export class SchemaColumnHeader extends ObservableReactComponent { - if (this.isDefaultTitle(this.fieldKey)) return ''; + if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return ''; else if (this._altTitle) return this._altTitle; else return this.fieldKey; }} @@ -160,7 +163,7 @@ export class SchemaColumnHeader extends ObservableReactComponent } - isDefaultTitle = (key: string) => { + public static isDefaultField = (key: string) => { const defaultPattern = /EmptyColumnKey/; let isDefault: boolean = (defaultPattern.exec(key) != null); return isDefault; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 8ac2c0314..8cac302ce 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -113,7 +113,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { }}> } + icon={ } size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -133,6 +133,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { {this.schemaView?.columnKeys?.map((key, index) => ( boolean; cleanupField: (field: string) => string; + rowSelected: () => boolean; } function selectedCell(props: SchemaTableCellProps) { return ( props.isRowActive() && - props.selectedCol() === props.col && // + props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Document)?.length ); } @@ -74,6 +76,10 @@ export class SchemaTableCell extends ObservableReactComponent { DocumentView.FocusOrOpen(toList(docs)[0]); return true; @@ -89,9 +95,8 @@ export class SchemaTableCell extends ObservableReactComponent - {this.content} + style={{ padding: this._props.padding, + maxWidth: this._props.maxWidth?.(), + width: this._props.columnWidth() || undefined, + border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined, + backgroundColor: this.backgroundColor}}> + {this.defaultKey ? '' : this.content}
); } -- cgit v1.2.3-70-g09d2 From c2a2b8c119c44b167310485cede0920f313cd40a Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 11 Jun 2024 01:56:17 -0400 Subject: rowmenu info icons --- src/client/views/MainView.tsx | 1 + .../collectionSchema/CollectionSchemaView.scss | 17 ++++++++++++++--- .../collectionSchema/CollectionSchemaView.tsx | 22 ++++++++++------------ .../collections/collectionSchema/SchemaRowBox.tsx | 13 ++++++++++++- 4 files changed, 37 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8dc2ce98a..5b9ddbb88 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -278,6 +278,7 @@ export class MainView extends ObservableReactComponent<{}> { library.add( ...[ + fa.faGift, fa.faLockOpen, fa.faSort, fa.faArrowUpZA, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index ceffc7e44..d1f1e3a13 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -259,9 +259,6 @@ flex-direction: row; min-width: 50px; justify-content: center; - .iconButton-container { - min-width: unset !important; - } } .row-cells { @@ -269,6 +266,20 @@ flex-direction: row; justify-content: flex-end; } + + .row-menu-infos { + position: absolute; + top: 3; + left: 3; + z-index: 1; + display: flex; + justify-content: flex-end; + align-items: center; + + .row-infos-icon { + padding-right: 2px; + } + } } .schema-row-button, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index dc29e7413..4abbc7f51 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -201,7 +201,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._docs = this._docs.filter(d => d !== doc) } - rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc); + rowIndex = (doc: Doc) => this.draggedSpliceDocs.docs.indexOf(doc); @action onKeyDown = (e: KeyboardEvent) => { @@ -211,9 +211,9 @@ export class CollectionSchemaView extends CollectionSubView() { { const lastDoc = this._selectedDocs.lastElement(); const lastIndex = this.rowIndex(lastDoc); - const curDoc = this.displayedDocs.docs[lastIndex]; + const curDoc = this.docs[lastIndex]; if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { - const newDoc = this.displayedDocs.docs[lastIndex + 1]; + const newDoc = this.docs[lastIndex + 1]; if (this._selectedDocs.includes(newDoc)) { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); @@ -230,9 +230,9 @@ export class CollectionSchemaView extends CollectionSubView() { { const firstDoc = this._selectedDocs.lastElement(); const firstIndex = this.rowIndex(firstDoc); - const curDoc = this.displayedDocs.docs[firstIndex]; + const curDoc = this.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { - const newDoc = this.displayedDocs.docs[firstIndex - 1]; + const newDoc = this.docs[firstIndex - 1]; if (this._selectedDocs.includes(newDoc)) { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); @@ -514,7 +514,7 @@ export class CollectionSchemaView extends CollectionSubView() { const startRow = Math.min(lastSelectedRow, index); const endRow = Math.max(lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { - const currDoc = this.displayedDocs.docs[i]; + const currDoc = this.docs[i]; if (!this._selectedDocs.includes(currDoc)) { this.selectCell(currDoc, this._selectedCol, false, true); } @@ -555,8 +555,6 @@ export class CollectionSchemaView extends CollectionSubView() { this._lowestSelectedIndex = -1; }; - sortedSelectedDocs = () => this.displayedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); - @computed get rowDropIndex() { const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; @@ -587,7 +585,7 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - const docs = this.displayedDocs.docs.slice(); + const docs = this.draggedSpliceDocs.docs.slice(); this._docs = docs; this.clearSelection(); draggedDocs.forEach(doc => { @@ -719,7 +717,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; setCellValues = (key: string, value: string) => { - if (this._selectedCells.length === 1) this.childDocs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all + if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells return true; }; @@ -1037,7 +1035,7 @@ export class CollectionSchemaView extends CollectionSubView() { return docs; } - @computed get displayedDocs() { + @computed get draggedSpliceDocs() { const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; let docs = [...this.docs]; docs = docs.filter(d => !draggedDocs.includes(d)); @@ -1064,7 +1062,7 @@ export class CollectionSchemaView extends CollectionSubView() { screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - displayedDocsFunc = () => this.displayedDocs.docs; + displayedDocsFunc = () => this.draggedSpliceDocs.docs; _oldWheel: any; render() { return ( diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index a0d3144ce..98a16deea 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -7,7 +7,7 @@ import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg'; import { FaExternalLinkAlt } from 'react-icons/fa'; import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; -import { Doc, DocListCast } from '../../../../fields/Doc'; +import { Doc, DocListCast, FieldResult } from '../../../../fields/Doc'; import { BoolCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoable } from '../../../util/UndoManager'; @@ -21,6 +21,7 @@ import { SchemaTableCell } from './SchemaTableCell'; import { ContextMenu } from '../../ContextMenu'; import { CollectionFreeFormView } from '../collectionFreeForm'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -94,6 +95,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return '' } + get menuInfos() { + const infos: Array = []; + if (this.Document._lockedSchemaEditing) infos.push('lock'); + if (this.Document._childrenSharedWithSchema) infos.push('star'); + return infos; + } + cleanupField = (field: string) => this.schemaView.cleanupComputedField(field) setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); selectedCol = () => this.schemaView._selectedCol; @@ -113,6 +121,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; }}> +
+ {this.menuInfos.map(icn => )} +
Date: Thu, 20 Jun 2024 14:33:28 -0400 Subject: some progress on eq text highlighting --- .../collectionSchema/CollectionSchemaView.scss | 5 +++ .../collectionSchema/CollectionSchemaView.tsx | 4 ++- .../collectionSchema/SchemaCellField.tsx | 37 +++++++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 6 ++++ .../collectionSchema/SchemaTableCell.tsx | 6 +++- 5 files changed, 48 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index d1f1e3a13..6b53eb1cc 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -313,3 +313,8 @@ } } +.schemaField-editing { + outline: none; +} + + diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c287b7d44..5c8a84163 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -533,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() { return cell; } - findCellRefs = (text: string) => { + findCellRefs = (text: string, retRawMatches?: boolean) => { const pattern = /(this|d(\d+))\.(\w+)/g; interface Match { docRef: string; field: string; } @@ -545,6 +545,8 @@ export class CollectionSchemaView extends CollectionSubView() { matches.push({ docRef, field: match[3] }); } + if (retRawMatches) return matches; + const cells: Array = []; matches.forEach((match: Match) => { const {docRef, field} = match; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 3af3b1d61..4ba8c8469 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -15,6 +15,7 @@ export interface SchemaCellFieldProps { highlightCells?: (text: string) => void; GetValue(): string | undefined; SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; + func: (text: string, raw: boolean) => HTMLDivElement[] | []; } @observer @@ -72,10 +73,25 @@ export class SchemaCellField extends ObservableReactComponent { + const matches = this._props.func(content, true); + const cells = this._props.func(content, false); + let chunkedText = content; + let matchNum = 0; + matches.forEach((docRef, field) => { + console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop) + chunkedText = chunkedText.replace(`d5.type`, `d5.type`); + ++matchNum; + }) + return chunkedText; + } + @action setContent = (content: string) => { - this._displayedContent = content; - }; + console.log(this.chunkContent(content)); + this._displayedContent = this.chunkContent(content); + console.log('displayed: ' + this._displayedContent); + } @action setIsFocused = (value: boolean) => { @@ -126,10 +142,13 @@ export class SchemaCellField extends ObservableReactComponent) => { const cursorPos = this.cursorPosition; + const prevVal = this._content; const targVal = e.currentTarget.innerText; if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { this._overlayDisposer?.(); @@ -138,8 +157,10 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); } this._content = targVal; - this.setContent(targVal); - setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) { + this.setContent(targVal); + setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + } this._props.highlightCells?.(targVal); }; @@ -208,15 +229,15 @@ export class SchemaCellField extends ObservableReactComponent : this.props.contents ? this._props.contents?.valueOf() : '' } - }; + } renderEditor = () => { return (
{ this._inputref = r; }} - style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} + style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} onBlur={e => this.finalizeEdit(false, true, false)} autoFocus onInput={this.onChange} @@ -228,7 +249,7 @@ export class SchemaCellField extends ObservableReactComponent
); - }; + } render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 4902a49ff..121605a2b 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -122,6 +122,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); highlightCells = (text: string) => this.schemaView?.highlightCells(text); + equationHighlightRef = (text: string) => { + + } + eqHighlightFunc = (text: string, raw: boolean) => {return this.schemaView.findCellRefs(text, raw)}; render() { return (
() {
{this.schemaView?.columnKeys?.map((key, index) => ( boolean; isolatedSelection: [boolean, boolean]; highlightCells: (text: string) => void; + equationHighlightRef: ObservableMap; + func: (text: string, raw: boolean) => HTMLDivElement[] | []; + } function selectedCell(props: SchemaTableCellProps) { @@ -179,6 +182,7 @@ export class SchemaTableCell extends ObservableReactComponent selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} contents={undefined} -- cgit v1.2.3-70-g09d2 From 8ceaba8b8264f5519de732cc603dcd276b4b4f4d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 28 Jun 2024 01:49:10 -0400 Subject: header text no longer shifts left on hover --- src/client/documents/Documents.ts | 6 +++++ src/client/util/Scripting.ts | 9 ++++++-- .../collectionSchema/CollectionSchemaView.scss | 1 - .../collectionSchema/SchemaCellField.tsx | 4 +++- .../collectionSchema/SchemaColumnHeader.tsx | 6 ++--- .../collections/collectionSchema/SchemaRowBox.tsx | 6 +---- .../collectionSchema/SchemaTableCell.tsx | 26 +++++++++++++++++----- src/client/views/nodes/FieldView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 2 +- 9 files changed, 43 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index dabbf9591..1b1608cd5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -143,7 +143,12 @@ class ListInfo extends FInfo { fieldType? = FInfoFieldType.list; values?: List[] = []; } +class MapInfo extends FInfo { + fieldType? = FInfoFieldType.list; + values?: List[] = []; +} type BOOLt = BoolInfo | boolean; +type MAPt = MapInfo | Map; type NUMt = NumInfo | number; type STRt = StrInfo | string; type LISTt = ListInfo | List; @@ -229,6 +234,7 @@ export class DocumentOptions { _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed'); _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false); _lockedSchemaEditing?: BOOLt = new BoolInfo("", false); + _schemaInputs?: LISTt = new ListInfo('user inputs to schema field', false) dataViz_title?: string; dataViz_line?: string; diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 6ef592ef2..c7aa56c1e 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -183,14 +183,19 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde ); } +ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer()); +//addreturn = true +//capturedvariables = undefined +// + export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult { - const captured = options.capturedVariables ?? {}; + const captured = options.capturedVariables ?? {}; const signature = Object.keys(captured).reduce((p, v) => { const formatCapture = (obj: any) => `${v}=${obj instanceof RefField ? 'XXX' : obj.toString()}`; if (captured[v] instanceof Array) return p + (captured[v] as any).map(formatCapture); return p + formatCapture(captured[v]); }, ''); - const found = ScriptField.GetScriptFieldCache(script + ':' + signature); + const found = ScriptField.GetScriptFieldCache(script + ':' + signature); // if already compiled, found is the result; cache set below if (found) return found as CompiledScript; const { requiredType = '', addReturn = false, params = {}, capturedVariables = {}, typecheck = true } = options; if (options.params && !options.params.this) options.params.this = Doc.name; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 6b53eb1cc..425b67fa9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -155,7 +155,6 @@ padding: 0; z-index: 1; border: 1px solid $medium-gray; - //overflow: hidden; .schema-column-title { flex-grow: 2; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 27ca37c2b..c7c483df8 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -321,11 +321,13 @@ export class SchemaCellField extends ObservableReactComponent + staticDisplay = () => { return { // eslint-disable-next-line react/jsx-props-no-spreading - this._props.fieldContents ? : this.props.contents ? this._props.contents?.valueOf() : '' + this._props.fieldContents ? : '' } } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index d16cde1f8..83a136737 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -237,11 +237,11 @@ export class SchemaColumnHeader extends ObservableReactComponent
this._props.resizeColumn(e, this._props.columnIndex)} /> -
{this.editableView}
+
{this.editableView}
-
- {this.displayButton ? this.headerButton : null} +
+ {this.headerButton}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index c9feeac6b..077d95c57 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -97,10 +97,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return '' } - @computed get refSelectModeInfo() { - return this.schemaView._referenceSelectMode; - } - @computed get menuInfos() { const infos: Array = []; if (this.Document._lockedSchemaEditing) infos.push('lock'); @@ -178,7 +174,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { {this.schemaView?.columnKeys?.map((key, index) => ( { // private _fieldRef: SchemaCellField | null = null; + private _submittedValue: string = ''; constructor(props: SchemaTableCellProps) { super(props); @@ -157,19 +159,31 @@ export class SchemaTableCell extends ObservableReactComponent { - const idPattern = /idToDoc\((.*?)\)/g; let modField = field.slice(); + let eqSymbol: string = ''; + if (modField.startsWith('=')) {modField = modField.substring(1); eqSymbol += '=';} + if (modField.startsWith(':=')) {modField = modField.substring(2); eqSymbol += ':=';} + + const idPattern = /idToDoc\((.*?)\)/g; let matches; let results = new Array<[id: string, func: string]>(); while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); } results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());}) - if (modField.charAt(modField.length - 1) === ';') modField = modField.substring(0, modField.length - 1); + + for (let i = 0; i < modField.length; ++i){ + + } + + if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1); + + const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))} + if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1); const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}` const selfRefRegX = RegExp(selfRefPattern, 'g'); if (selfRefRegX.exec(modField) !== null) { return 'Invalid'} - return modField; + return eqSymbol + modField; } @computed get defaultCellContent() { @@ -196,7 +210,8 @@ export class SchemaTableCell extends ObservableReactComponent this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} + ////const script = ScriptCast(fieldProps.Document[this._props.fieldKey]).rawscript; + GetValue={() => ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''} SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); @@ -205,6 +220,7 @@ export class SchemaTableCell extends ObservableReactComponent { const field = this.fieldval; // prettier-ignore if (field instanceof Doc) return

{field.title?.toString()}

; - if (field === undefined) return

{''}

; + if (field === undefined) return

{''}

; if (field instanceof DateField) return

{field.date.toLocaleString()}

; if (field instanceof List) return
{field.map(f => Field.toString(f)).join(', ')}
; if (field instanceof WebField) return

{Field.toString(field.url.href)}

; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 66e210c03..bc6633f23 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -88,7 +88,7 @@ export class KeyValueBox extends ViewBoxBaseComponent() { const type: 'computed' | 'script' | false = rawvalue.startsWith(':=') ? 'computed' : rawvalue.startsWith('$=') ? 'script' : false; rawvalue = type ? rawvalue.substring(2) : rawvalue; rawvalue = rawvalue.replace(/.*\(\((.*)\)\)/, 'dashCallChat(_setCacheResult_, this, `$1`)'); - const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any) ? rawvalue : '`' + rawvalue + '`'; + const value = (["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any)) ? rawvalue : '`' + rawvalue + '`'; let script = ScriptField.CompileScript(rawvalue, {}, true, undefined, DocumentIconContainer.getTransformer()); if (!script.compiled) { -- cgit v1.2.3-70-g09d2 From db7e5ed3ac36f05787b809e2ae03c94f310ef3e4 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 28 Jun 2024 19:26:23 -0400 Subject: colkeys menu width conforms to column with --- .../collections/collectionSchema/CollectionSchemaView.scss | 9 +-------- .../collections/collectionSchema/CollectionSchemaView.tsx | 13 ++----------- 2 files changed, 3 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 425b67fa9..e3f3dafab 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -51,8 +51,6 @@ .schema-filter-menu { background: $light-gray; position: absolute; - min-width: 150px; - max-width: 300px; max-height: 300px; display: flex; overflow: hidden; @@ -60,11 +58,6 @@ align-items: flex-start; z-index: 5; - .schema-key-search-input { - width: calc(100% - 20px); - margin: 10px; - } - .schema-search-result { cursor: pointer; padding: 5px 10px; @@ -106,7 +99,7 @@ .schema-key-list { width: 100%; - max-height: 300px; + max-height: 250px; overflow-y: auto; } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index ee693078f..a3bc537d2 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -154,7 +154,6 @@ export class CollectionSchemaView extends CollectionSubView() { ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)); } @@ -1133,15 +1132,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get renderColumnMenu() { const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); return ( -
- {this.keysDropdown} -
- ); - } - - get renderKeysMenu() { - return ( -
+
{this.keysDropdown}
); @@ -1184,7 +1175,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get renderFilterMenu() { const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); return ( -
+
e.stopPropagation()} /> {this.renderFilterOptions}
Date: Tue, 2 Jul 2024 13:58:10 -0400 Subject: keymenu changes --- .../views/collections/collectionSchema/CollectionSchemaView.scss | 4 +++- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 7 ++----- 2 files changed, 5 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index e3f3dafab..c32661214 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -51,7 +51,9 @@ .schema-filter-menu { background: $light-gray; position: absolute; - max-height: 300px; + border: 1px solid $medium-gray; + border-bottom: 2px solid $medium-gray; + max-height: 201px; display: flex; overflow: hidden; flex-direction: column; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index ef3efea39..cc8b0fc7e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1159,11 +1159,8 @@ export class CollectionSchemaView extends CollectionSubView() {

{key} - {this.fieldInfos.get(key)!.fieldType ? ':' : ''} - - - {this.fieldInfos.get(key)!.fieldType} + :   {this.fieldInfos.get(key)!.description}

@@ -1313,7 +1310,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get docsWithDrag() { - let docs = this._docs; + let docs = this.docs.slice(); if (this.sortField){ const field = StrCast(this.layoutDoc.sortField); const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort -- cgit v1.2.3-70-g09d2 From 772c7a4c4d8867cbc33a673c3e3c6f3e330d395d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 10 Oct 2024 19:30:04 -0400 Subject: schema cell editing div height 100% --- src/client/views/collections/collectionSchema/CollectionSchemaView.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index c32661214..817ceac97 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -309,6 +309,7 @@ .schemaField-editing { outline: none; + height: 100%; } -- cgit v1.2.3-70-g09d2