From 3b5cecea920b62a5d1633d8c6603b3b152794611 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 13 May 2024 00:54:49 -0400 Subject: editable column header started --- .../collectionSchema/SchemaColumnHeader.tsx | 90 ++++++++++++++++++++-- 1 file changed, 85 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 6b5a34ec0..dad0c214b 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,14 +1,20 @@ /* eslint-disable react/no-unused-prop-types */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { setupMoveUpEvents } from '../../../../ClientUtils'; +import { returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Colors } from '../../global/globalEnums'; import './CollectionSchemaView.scss'; +import { EditableView } from '../../EditableView'; +import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; +import { FieldViewProps } from '../../nodes/FieldView'; export interface SchemaColumnHeaderProps { + autoFocus?: boolean; + oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs + allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit) columnKeys: string[]; columnWidths: number[]; columnIndex: number; @@ -26,6 +32,9 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends React.Component { + + @observable _editing: boolean = false; + get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } @@ -44,10 +53,81 @@ export class SchemaColumnHeader extends React.Component }; @action - onPointerDown = (e: React.PointerEvent) => { + setupDrag = (e: React.PointerEvent) => { this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction); }; + public static renderProps(props: SchemaColumnHeaderProps) { + const { Document, fieldKey, getFinfo, columnWidth, isContentActive } = props; + let protoCount = 0; + let doc: Doc | undefined = Document; + while (doc) { + if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) { + break; + } + protoCount++; + doc = DocCast(doc.proto); + } + const parenCount = Math.max(0, protoCount - 1); + const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells + const textDecoration = color !== 'black' && parenCount ? 'underline' : ''; + const fieldProps: FieldViewProps = { + childFilters: returnEmptyFilter, + childFiltersByRanges: returnEmptyFilter, + docViewPath: returnEmptyDocViewList, + searchFilterDocs: returnEmptyDoclist, + styleProvider: DefaultStyleProvider, + isSelected: returnFalse, + setHeight: returnFalse, + select: emptyFunction, + dragAction: dropActionType.move, + renderDepth: 1, + noSidebar: true, + isContentActive: returnFalse, + whenChildContentsActiveChanged: emptyFunction, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + addDocTab: SchemaTableCell.addFieldDoc, + pinToPres: returnZero, + Document: DocCast(Document.rootDocument, Document), + fieldKey: fieldKey, + PanelWidth: columnWidth, + PanelHeight: props.rowHeight, + rootSelected: props.rootSelected, + }; + const readOnly = getFinfo(fieldKey)?.readOnly ?? false; + const cursor = !readOnly ? 'text' : 'default'; + const pointerEvents = 'all'; + return { color, textDecoration, fieldProps, cursor, pointerEvents }; + } + + @computed get editableView() { + const { color, textDecoration, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); + + return this.props.autoFocus && r?.setIsFocused(true)} + oneLine={this.props.oneLine} + allowCRs={this.props.allowCRs} + contents={undefined} + fieldContents={fieldProps} + editing={this._editing ? undefined : false} + GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //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); + this._props.finishEdit?.(); + return true; + } + const hasNoLayout = Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto + const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout); + this._props.finishEdit?.(); + return ret; + }, 'edit schema cell')} + /> + } + render() { return (
style={{ width: this.props.columnWidths[this.props.columnIndex], }} - onPointerDown={this.onPointerDown} + onPointerDown={this.setupDrag} ref={col => { if (col) { this.props.setColRef(this.props.columnIndex, col); } }}>
this.props.resizeColumn(e, this.props.columnIndex)} /> -
{this.fieldKey}
+
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}> -- cgit v1.2.3-70-g09d2 From 58692ef043125ebd3113d81f3ca7161a7e6521cb Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 13 May 2024 18:44:23 -0400 Subject: equation parser works but occasional call stack error --- src/client/documents/Documents.ts | 1 + src/client/util/DocumentManager.ts | 11 ++ src/client/util/Scripting.ts | 1 - .../collectionSchema/CollectionSchemaView.tsx | 10 +- .../collectionSchema/SchemaColumnHeader.tsx | 140 +++++++++++---------- src/client/views/nodes/DocumentIcon.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 1 + 7 files changed, 92 insertions(+), 74 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 3cc0d5604..5e1b173dc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -178,6 +178,7 @@ export class DocumentOptions { map_pitch?: NUMt = new NumInfo('pitch of a map view', false); map_bearing?: NUMt = new NumInfo('bearing of a map view', false); map_style?: STRt = new StrInfo('mapbox style for a map view', false); + identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false); date_range?: STRt = new StrInfo('date range for calendar', false); diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 97051207b..8dba54541 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -46,6 +46,7 @@ export class DocumentManager { DocumentView.addViewRenderedCb = this.AddViewRenderedCb; DocumentView.getFirstDocumentView = this.getFirstDocumentView; DocumentView.getDocumentView = this.getDocumentView; + DocumentView.getDocViewIndex = this.getDocViewIndex; DocumentView.getContextPath = DocumentManager.GetContextPath; DocumentView.getLightboxDocumentView = this.getLightboxDocumentView; observe(Doc.CurrentlyLoading, change => { @@ -138,6 +139,16 @@ export class DocumentManager { ); } + public getDocViewIndex(target: Doc): number { + const docViewArray = DocumentManager.Instance.DocumentViews; + for (let i = 0; i < docViewArray.length; ++i){ + if (docViewArray[i].Document == target){ + return i; + } + } + return -1; + } + public getLightboxDocumentView = (toFind: Doc): DocumentView | undefined => { const views: DocumentView[] = []; DocumentManager.Instance.DocumentViews.forEach(view => DocumentView.LightboxContains(view) && Doc.AreProtosEqual(view.Document, toFind) && views.push(view)); diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 6948469cc..6ef592ef2 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -88,7 +88,6 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an if (!options.editable) { batch = Doc.MakeReadOnly(); } - const result = compiledFunction.apply(thisParam, params).apply(thisParam, argsArray); batch?.end(); return { success: true, result }; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c9d5307c9..deeba3c7a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -312,10 +312,10 @@ export class CollectionSchemaView extends CollectionSubView() { let matches; let results = new Map(); while ((matches = idPattern.exec(field)) !== null) { - results.set(matches[0], matches[1]); + results.set(matches[0], matches[1].replace(/"/g, '')); } results.forEach((id, funcId) => { - modField = modField.replace(funcId, 'd' + (this.rowIndex(IdToDoc(id)) + 1).toString()); + modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString()); }) return modField; } @@ -549,7 +549,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => { this.populateCellTags(); - console.log(this.getCellTag(doc, col)); + //docs.findIndex(doc); if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells && this._selectedCells.push(doc); @@ -1211,6 +1211,10 @@ export class CollectionSchemaView extends CollectionSubView() { {this.columnKeys.map((key, index) => ( CollectionSchemaView._minColWidth} //TODO: update + Document={this.Document} key={index} columnIndex={index} columnKeys={this.columnKeys} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index dad0c214b..b498a4850 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -3,15 +3,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; +import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Colors } from '../../global/globalEnums'; import './CollectionSchemaView.scss'; import { EditableView } from '../../EditableView'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; import { FieldViewProps } from '../../nodes/FieldView'; +import { Doc, Field } from '../../../../fields/Doc'; +import { dropActionType } from '../../../util/DropActionTypes'; +import { Transform } from 'prosemirror-transform'; +import { SchemaTableCell } from './SchemaTableCell'; +import { DocCast } from '../../../../fields/Types'; +import { computedFn } from 'mobx-utils'; +import { CollectionSchemaView } from './CollectionSchemaView'; +import { SnappingManager } from '../../../util/SnappingManager'; +import { undoable } from '../../../util/UndoManager'; +import { FInfo } from '../../../documents/Documents'; export interface SchemaColumnHeaderProps { + Document: Doc; autoFocus?: boolean; oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit) @@ -20,6 +31,8 @@ export interface SchemaColumnHeaderProps { columnIndex: number; sortField: string; sortDesc: boolean; + schemaView: CollectionSchemaView; + //cleanupField: (s: string) => string; isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined; setSort: (field: string | undefined, desc?: boolean) => void; removeColumn: (index: number) => void; @@ -28,6 +41,10 @@ export interface SchemaColumnHeaderProps { dragColumn: (e: any, index: number) => boolean; openContextMenu: (x: number, y: number, index: number) => void; setColRef: (index: number, ref: HTMLDivElement) => void; + rootSelected?: () => boolean; + columnWidth: () => number; + finishEdit?: () => void; // notify container that edit is over (eg. to hide view in DashFieldView) + //transform: () => Transform; } @observer @@ -39,6 +56,9 @@ export class SchemaColumnHeader extends React.Component return this.props.columnKeys[this.props.columnIndex]; } + // getFinfo = computedFn((fieldKey: string) => this.props.schemaView?.fieldInfos.get(fieldKey)); + // setColumnValues = (field: string, value: string) => this.props.schemaView?.setColumnValues(field, value); + @action sortClicked = (e: React.PointerEvent) => { e.stopPropagation(); @@ -57,76 +77,58 @@ export class SchemaColumnHeader extends React.Component this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction); }; - public static renderProps(props: SchemaColumnHeaderProps) { - const { Document, fieldKey, getFinfo, columnWidth, isContentActive } = props; - let protoCount = 0; - let doc: Doc | undefined = Document; - while (doc) { - if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) { - break; - } - protoCount++; - doc = DocCast(doc.proto); - } - const parenCount = Math.max(0, protoCount - 1); - const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells - const textDecoration = color !== 'black' && parenCount ? 'underline' : ''; - const fieldProps: FieldViewProps = { - childFilters: returnEmptyFilter, - childFiltersByRanges: returnEmptyFilter, - docViewPath: returnEmptyDocViewList, - searchFilterDocs: returnEmptyDoclist, - styleProvider: DefaultStyleProvider, - isSelected: returnFalse, - setHeight: returnFalse, - select: emptyFunction, - dragAction: dropActionType.move, - renderDepth: 1, - noSidebar: true, - isContentActive: returnFalse, - whenChildContentsActiveChanged: emptyFunction, - ScreenToLocalTransform: Transform.Identity, - focus: emptyFunction, - addDocTab: SchemaTableCell.addFieldDoc, - pinToPres: returnZero, - Document: DocCast(Document.rootDocument, Document), - fieldKey: fieldKey, - PanelWidth: columnWidth, - PanelHeight: props.rowHeight, - rootSelected: props.rootSelected, - }; - const readOnly = getFinfo(fieldKey)?.readOnly ?? false; - const cursor = !readOnly ? 'text' : 'default'; - const pointerEvents = 'all'; - return { color, textDecoration, fieldProps, cursor, pointerEvents }; - } - - @computed get editableView() { - const { color, textDecoration, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); - - return this.props.autoFocus && r?.setIsFocused(true)} - oneLine={this.props.oneLine} - allowCRs={this.props.allowCRs} - contents={undefined} - fieldContents={fieldProps} - editing={this._editing ? undefined : false} - GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //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); - this._props.finishEdit?.(); - return true; - } - const hasNoLayout = Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto - const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout); - this._props.finishEdit?.(); - return ret; - }, 'edit schema cell')} - /> - } + // return this.props.autoFocus && r?.setIsFocused(true)} + // oneLine={this.props.oneLine} + // allowCRs={this.props.allowCRs} + // contents={undefined} + // fieldContents={fieldProps} + // editing={this._editing ? undefined : false} + // GetValue={() => this.props.cleanupField(Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc + // SetValue={undoable((value: string, enterKey?: boolean) => { + // if (enterKey) this.setColumnValues(this.fieldKey.replace(/^_/, ''), value); + // this.props.finishEdit?.(); + // return true; + // }, 'edit schema cell')} + // /> + // } render() { return ( diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx index 23d934edb..bfca6cad8 100644 --- a/src/client/views/nodes/DocumentIcon.tsx +++ b/src/client/views/nodes/DocumentIcon.tsx @@ -47,7 +47,7 @@ export class DocumentIcon extends ObservableReactComponent { } } -@observer +@observer export class DocumentIconContainer extends React.Component { public static getTransformer(): Transformer { const usedDocuments = new Set(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8df28a770..32480447d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1025,6 +1025,7 @@ export class DocumentView extends DocComponent() { public static getViews = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []) as DocumentView[]; public static getFirstDocumentView: (toFind: Doc) => DocumentView | undefined; public static getDocumentView: (target: Doc | undefined, preferredCollection?: DocumentView) => Opt; + public static getDocViewIndex: (target: Doc) => number; public static getContextPath: (doc: Opt, includeExistingViews?: boolean) => Doc[]; public static getLightboxDocumentView: (toFind: Doc) => Opt; public static showDocumentView: (targetDocView: DocumentView, options: FocusViewOptions) => Promise; -- cgit v1.2.3-70-g09d2 From 4770a958a7b1003d636a4f9ea2cfdb76558e61b9 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 13 May 2024 23:13:15 -0400 Subject: columnheader editing progress --- src/client/views/EditableView.tsx | 2 +- .../collectionSchema/CollectionSchemaView.tsx | 11 +- .../collectionSchema/SchemaColumnHeader.tsx | 144 +++++++++++---------- .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- 4 files changed, 88 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 684b948af..05c926399 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -155,7 +155,7 @@ export class EditableView extends ObservableReactComponent { case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': - e.stopPropagation(); + //e.stopPropagation(); break; case 'Shift': case 'Alt': diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d844fdefc..d74cb56cf 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -275,6 +275,7 @@ export class CollectionSchemaView extends CollectionSubView() { changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { this.addNewKey(newKey, defaultVal); + console.log("added") } const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. @@ -745,15 +746,23 @@ export class CollectionSchemaView extends CollectionSubView() { @action setKey = (key: string, defaultVal?: any) => { + console.log("setKey called with" + key) if (this._makeNewColumn) { this.addColumn(key, defaultVal); + this._makeNewColumn = false; } else { this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); + console.log("changed") } this.closeColumnMenu(); }; - setColumnValues = (key: string, value: string) => { + setColumnValue = () => { + + } + + setCellValues = (key: string, value: string) => { + console.log("field: " + key + " vale: " + value); const selectedDocs: Doc[] = []; this.childDocs.forEach(doc => { const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index b498a4850..b74b2ace9 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -8,11 +8,12 @@ import { emptyFunction } from '../../../../Utils'; import { Colors } from '../../global/globalEnums'; import './CollectionSchemaView.scss'; import { EditableView } from '../../EditableView'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; import { FieldViewProps } from '../../nodes/FieldView'; import { Doc, Field } from '../../../../fields/Doc'; import { dropActionType } from '../../../util/DropActionTypes'; -import { Transform } from 'prosemirror-transform'; +import { Transform } from '../../../util/Transform'; import { SchemaTableCell } from './SchemaTableCell'; import { DocCast } from '../../../../fields/Types'; import { computedFn } from 'mobx-utils'; @@ -48,110 +49,117 @@ export interface SchemaColumnHeaderProps { } @observer -export class SchemaColumnHeader extends React.Component { +export class SchemaColumnHeader extends ObservableReactComponent { @observable _editing: boolean = false; get fieldKey() { - return this.props.columnKeys[this.props.columnIndex]; + return this._props.columnKeys[this._props.columnIndex]; } - // getFinfo = computedFn((fieldKey: string) => this.props.schemaView?.fieldInfos.get(fieldKey)); - // setColumnValues = (field: string, value: string) => this.props.schemaView?.setColumnValues(field, value); + getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey)); + setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);} @action sortClicked = (e: React.PointerEvent) => { e.stopPropagation(); e.preventDefault(); - if (this.props.sortField === this.fieldKey && this.props.sortDesc) { - this.props.setSort(undefined); - } else if (this.props.sortField === this.fieldKey) { - this.props.setSort(this.fieldKey, true); + if (this._props.sortField === this.fieldKey && this._props.sortDesc) { + this._props.setSort(undefined); + } else if (this._props.sortField === this.fieldKey) { + this._props.setSort(this.fieldKey, true); } else { - this.props.setSort(this.fieldKey, false); + this._props.setSort(this.fieldKey, false); } }; @action setupDrag = (e: React.PointerEvent) => { - this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction); + this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction); }; - // public static renderProps(props: SchemaColumnHeaderProps) { - // const { columnKeys, columnWidth, isContentActive, Document } = props; - // const fieldKey = columnKeys[props.columnIndex]; - // const color = 'black'; // color of text in cells - // const fieldProps: FieldViewProps = { - // childFilters: returnEmptyFilter, - // childFiltersByRanges: returnEmptyFilter, - // docViewPath: returnEmptyDocViewList, - // searchFilterDocs: returnEmptyDoclist, - // styleProvider: DefaultStyleProvider, - // isSelected: returnFalse, - // setHeight: returnFalse, - // select: emptyFunction, - // dragAction: dropActionType.move, - // renderDepth: 1, - // noSidebar: true, - // isContentActive: returnFalse, - // whenChildContentsActiveChanged: emptyFunction, - // ScreenToLocalTransform: Transform.Identity, - // focus: emptyFunction, - // addDocTab: SchemaTableCell.addFieldDoc, - // pinToPres: returnZero, - // Document: DocCast(Document.rootDocument, Document), - // fieldKey: fieldKey, - // PanelWidth: columnWidth, - // PanelHeight: props.rowHeight, - // rootSelected: props.rootSelected, - // }; - // const readOnly = getFinfo(fieldKey)?.readOnly ?? false; - // const cursor = !readOnly ? 'text' : 'default'; - // const pointerEvents = 'all'; - // return { color, fieldProps, cursor, pointerEvents }; - // } + renderProps = (props: SchemaColumnHeaderProps) => { + const { columnKeys, columnWidth, Document } = props; + const fieldKey = columnKeys[props.columnIndex]; + const color = 'black'; // color of text in cells + const fieldProps: FieldViewProps = { + childFilters: returnEmptyFilter, + childFiltersByRanges: returnEmptyFilter, + docViewPath: returnEmptyDocViewList, + searchFilterDocs: returnEmptyDoclist, + styleProvider: DefaultStyleProvider, + isSelected: returnFalse, + setHeight: returnFalse, + select: emptyFunction, + dragAction: dropActionType.move, + renderDepth: 1, + noSidebar: true, + isContentActive: returnFalse, + whenChildContentsActiveChanged: emptyFunction, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + addDocTab: SchemaTableCell.addFieldDoc, + pinToPres: returnZero, + Document: DocCast(Document.rootDocument, Document), + fieldKey: fieldKey, + PanelWidth: columnWidth, + PanelHeight: props.rowHeight, + rootSelected: props.rootSelected, + }; + const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false; + const cursor = !readOnly ? 'text' : 'default'; + const pointerEvents = 'all'; + return { color, fieldProps, cursor, pointerEvents }; + } + + @computed get editableView() { + const { color, fieldProps, pointerEvents } = this.renderProps(this._props); - // @computed get editableView() { - // const { color, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); + return
+ this._props.autoFocus && r?.setIsFocused(true)} + oneLine={this._props.oneLine} + allowCRs={this._props.allowCRs} + contents={undefined} + fieldContents={fieldProps} + editing={this._editing ? undefined : false} + GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')} + SetValue={undoable((value: string) => { + this.setColumnValues(value, value); + this._props.finishEdit?.(); + return true; + }, 'edit column header')} + /> +
+ } - // return this.props.autoFocus && r?.setIsFocused(true)} - // oneLine={this.props.oneLine} - // allowCRs={this.props.allowCRs} - // contents={undefined} - // fieldContents={fieldProps} - // editing={this._editing ? undefined : false} - // GetValue={() => this.props.cleanupField(Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc - // SetValue={undoable((value: string, enterKey?: boolean) => { - // if (enterKey) this.setColumnValues(this.fieldKey.replace(/^_/, ''), value); - // this.props.finishEdit?.(); - // return true; - // }, 'edit schema cell')} - // /> - // } + staticView = () => { + return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
+ } render() { return (
{ if (col) { - this.props.setColRef(this.props.columnIndex, col); + this._props.setColRef(this._props.columnIndex, col); } }}> -
this.props.resizeColumn(e, this.props.columnIndex)} /> -
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
+
this._props.resizeColumn(e, this._props.columnIndex)} /> + +
{this._editing ? this.editableView : this.staticView()}
-
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/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 3295c9ab1..908939ecc 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -59,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCells = () => this.schemaView?._selectedDocs; - setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; + setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false; setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); render() { -- cgit v1.2.3-70-g09d2 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 --- src/client/views/EditableView.tsx | 10 ++++-- .../collectionSchema/CollectionSchemaView.scss | 12 +++++++ .../collectionSchema/CollectionSchemaView.tsx | 39 ++-------------------- .../collectionSchema/SchemaColumnHeader.tsx | 34 ++++++++++++------- .../collectionSchema/SchemaTableCell.tsx | 2 +- 5 files changed, 45 insertions(+), 52 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 05c926399..1eec11e64 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -54,6 +54,8 @@ export interface EditableProps { background?: string | undefined; placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc + + isColHeader?: boolean; } /** @@ -135,7 +137,9 @@ export class EditableView extends ObservableReactComponent { if (!e.currentTarget.value) this._props.OnEmpty?.(); break; case 'Enter': + console.log("enter press detected") if (this._props.allowCRs !== true) { + console.log("noCrs??") e.stopPropagation(); if (!e.ctrlKey) { this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); @@ -242,9 +246,9 @@ export class EditableView extends ObservableReactComponent { /> ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? ( { this._inputref = r; }} // prettier-ignore - style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }} + style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}} placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this._props.GetValue()} @@ -277,7 +281,7 @@ export class EditableView extends ObservableReactComponent { render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if (this._editing && gval !== undefined) { + if ((this._editing && gval !== undefined) || this._props.isColHeader) { return this._props.sizeToContent ? (
{gval}
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); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d74cb56cf..2d181a772 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -277,6 +277,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); console.log("added") } + console.log("changed " + index) const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; @@ -321,39 +322,6 @@ export class CollectionSchemaView extends CollectionSubView() { return modField; } - // @action - // setupAutoUpdate = (equation: string, doc: Doc) => { - // return autorun(() => { - // const result = this.parsedEquationResult(equation, doc); - // doc[DocData][equation] = result; - // }); - // } - - // parseEquation = (eq: string): [string, Map] => { - // const variablePattern = /[a-z]+/gi; - // const tagRefPattern = /{([^}]*)}/g; - // const docTagRefPairs = new Map(); - // let modifiedEq = eq; - // let match; - - // while (match = tagRefPattern.exec(eq)) { - // const ref = match[1]; - // const [doc, key] = this.getCellInfoFromTag(ref); - // docTagRefPairs.set(ref, doc); - // const replacement = `docTagRefPairs.get('${ref}').${key}`; - // modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement); - // } - - // modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`); - - // return [modifiedEq, docTagRefPairs]; - // } - - // parsedEquationResult = (eq: [string, Map], doc: any): number => { - // const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]); - // return func(doc, eq[1]); - // } - @undoBatch removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; @@ -745,14 +713,13 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - setKey = (key: string, defaultVal?: any) => { + setKey = (key: string, defaultVal?: any, index?: number) => { console.log("setKey called with" + key) if (this._makeNewColumn) { this.addColumn(key, defaultVal); this._makeNewColumn = false; } else { - this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); - console.log("changed") + this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal); } this.closeColumnMenu(); }; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index b74b2ace9..794d5d8ac 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -53,12 +53,12 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.schemaView?.fieldInfos.get(fieldKey)); - setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);} + setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @action sortClicked = (e: React.PointerEvent) => { @@ -108,24 +108,34 @@ export class SchemaColumnHeader extends ObservableReactComponent + return
this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} allowCRs={this._props.allowCRs} contents={undefined} fieldContents={fieldProps} - editing={this._editing ? undefined : false} - GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')} - SetValue={undoable((value: string) => { - this.setColumnValues(value, value); + editing={undefined} + isColHeader={true} + GetValue={() => {console.log(this.fieldKey); return this.fieldKey}} + SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { + if (shiftKey && enterKey) { + this.setColumnValues(value, value); + this._props.finishEdit?.(); + return true; + } this._props.finishEdit?.(); return true; }, 'edit column header')} @@ -133,9 +143,9 @@ export class SchemaColumnHeader extends ObservableReactComponent } - staticView = () => { - return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
- } + // staticView = () => { + // return
{this._editing = true; console.log(this._editing)}}>{this.fieldKey}
+ // } render() { return ( @@ -152,7 +162,7 @@ export class SchemaColumnHeader extends ObservableReactComponent
this._props.resizeColumn(e, this._props.columnIndex)} /> -
{this._editing ? this.editableView : this.staticView()}
+
{this.editableView}
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 733cf3722..51a92ff35 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -194,7 +194,7 @@ export class SchemaTableCell extends ObservableReactComponent { const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; - if (this._props.isRowActive?.() !== false) { + if (this._props.isRowActive?.()) { if (selectedCell(this._props) && ctrl) { this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 04b650dee835be1a4446a2499b8acd525b92daf9 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 14 May 2024 16:25:36 -0400 Subject: removed logs; added some comments; added safeguard against duplicate fields --- src/client/views/EditableView.tsx | 2 -- .../collectionSchema/CollectionSchemaView.tsx | 18 ++++++++---------- .../collectionSchema/SchemaColumnHeader.tsx | 12 +++++------- 3 files changed, 13 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 1eec11e64..011b6c77a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -137,9 +137,7 @@ export class EditableView extends ObservableReactComponent { if (!e.currentTarget.value) this._props.OnEmpty?.(); break; case 'Enter': - console.log("enter press detected") if (this._props.allowCRs !== true) { - console.log("noCrs??") e.stopPropagation(); if (!e.ctrlKey) { this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 2d181a772..3d7c7882e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -275,9 +275,7 @@ export class CollectionSchemaView extends CollectionSubView() { changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { this.addNewKey(newKey, defaultVal); - console.log("added") } - console.log("changed " + index) const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; @@ -308,6 +306,7 @@ export class CollectionSchemaView extends CollectionSubView() { }); } + // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability cleanupComputedField = (field: string) => { const idPattern = /idToDoc\((.*?)\)/g; let modField = field.slice(); @@ -403,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; findColDropIndex = (mouseX: number) => { - let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + 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) { @@ -466,7 +465,7 @@ export class CollectionSchemaView extends CollectionSubView() { const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; const cellEles = [ colRef, - ...this.childDocs // + ...this.childDocs .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; @@ -714,7 +713,11 @@ export class CollectionSchemaView extends CollectionSubView() { @action setKey = (key: string, defaultVal?: any, index?: number) => { - console.log("setKey called with" + key) + if (this.columnKeys.includes(key)){ + this._newFieldWarning = 'Field already exists'; + return; + } + if (this._makeNewColumn) { this.addColumn(key, defaultVal); this._makeNewColumn = false; @@ -724,12 +727,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.closeColumnMenu(); }; - setColumnValue = () => { - - } - setCellValues = (key: string, value: string) => { - console.log("field: " + key + " vale: " + value); const selectedDocs: Doc[] = []; this.childDocs.forEach(doc => { const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 794d5d8ac..58ac4e45d 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -25,8 +25,6 @@ import { FInfo } from '../../../documents/Documents'; export interface SchemaColumnHeaderProps { Document: Doc; autoFocus?: boolean; - oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs - allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit) columnKeys: string[]; columnWidths: number[]; columnIndex: number; @@ -123,20 +121,20 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.autoFocus && r?.setIsFocused(true)} - oneLine={this._props.oneLine} - allowCRs={this._props.allowCRs} + oneLine={true} + allowCRs={false} contents={undefined} fieldContents={fieldProps} editing={undefined} - isColHeader={true} + isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value GetValue={() => {console.log(this.fieldKey); return this.fieldKey}} SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { - if (shiftKey && enterKey) { + if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column this.setColumnValues(value, value); this._props.finishEdit?.(); return true; } - this._props.finishEdit?.(); + this._props.finishEdit?.(); // else save new value to header field return true; }, 'edit column header')} /> -- 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/SchemaColumnHeader.tsx') 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/SchemaColumnHeader.tsx') 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/SchemaColumnHeader.tsx') 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: Tue, 4 Jun 2024 14:17:50 -0400 Subject: key search on update --- src/client/views/EditableView.tsx | 3 ++- .../collections/collectionSchema/CollectionSchemaView.tsx | 7 ++----- .../views/collections/collectionSchema/SchemaColumnHeader.tsx | 11 +++++++---- 3 files changed, 11 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 5b691c507..c79cabd6a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -57,6 +57,7 @@ export interface EditableProps { showKeyNotVal?: boolean; updateAlt?: (newAlt: string) => void; + updateSearch?: (value: string) => void; } /** @@ -122,6 +123,7 @@ export class EditableView extends ObservableReactComponent { } else if (!this._overlayDisposer) { this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } + this._props.updateSearch && this._props.updateSearch(targVal); }; @action @@ -183,7 +185,6 @@ 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.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 92cc58f54..f5422bce1 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -791,9 +791,8 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - updateKeySearch = (e: React.ChangeEvent) => { - this._menuValue = e.target.value; - this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); + updateKeySearch = (val: string) => { + this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(val.toLowerCase())); }; getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] === field); @@ -920,7 +919,6 @@ export class CollectionSchemaView extends CollectionSubView() { const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); return (
- e.stopPropagation()} /> {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
); @@ -929,7 +927,6 @@ export class CollectionSchemaView extends CollectionSubView() { get renderKeysMenu() { return (
- e.stopPropagation()} /> {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 4f9d53d18..32abc1780 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -61,6 +61,7 @@ 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);} @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} + @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} @action sortClicked = (e: React.PointerEvent) => { @@ -76,8 +77,10 @@ export class SchemaColumnHeader extends ObservableReactComponent { - this._props.schemaView.openColumnMenu(this._props.columnIndex, false) - this._displayKeysDropdown = true; + if (this.isDefaultTitle(this.fieldKey)){ + this._props.schemaView.openColumnMenu(this._props.columnIndex, false) + this._displayKeysDropdown = true; + } } @action @@ -122,7 +125,7 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.schemaView.openColumnMenu(this._props.columnIndex, false)} + return
this.openKeyDropdown()} style={{ color, width: '100%', @@ -136,6 +139,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { if (this.isDefaultTitle(this.fieldKey)) return ''; @@ -149,7 +153,6 @@ export class SchemaColumnHeader extends ObservableReactComponent Date: Wed, 5 Jun 2024 01:42:26 -0400 Subject: adding collection content to schema started --- .../collectionSchema/CollectionSchemaView.tsx | 16 +++++++++++----- .../collections/collectionSchema/SchemaColumnHeader.tsx | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index f5422bce1..6b97cb97c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -92,6 +92,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colBeingDragged: boolean = false; @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap>(); + @observable _lentDocs: Doc[] = []; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -1020,17 +1021,22 @@ export class CollectionSchemaView extends CollectionSubView() { } rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); - sortedDocsFunc = () => this.sortedDocs; isContentActive = () => this._props.isSelected() || this._props.isContentActive(); screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); + displayedDocsFunc = () => { + let docs: Doc[] = this._lentDocs.slice(); + docs = docs.concat(this.sortedDocs.docs); + return docs; + } _oldWheel: any; render() { return (
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} - onPointerMove={e => this.onPointerMove(e)} > + onPointerMove={e => this.onPointerMove(e)} + onPointerDown={() => this.closeColumnMenu()}>
{ this._tableContentRef = ref; @@ -1208,7 +1214,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent void; - childDocs: () => { docs: Doc[] }; + childDocs: () => Doc[]; rowHeight: () => number; } @@ -1217,7 +1223,7 @@ class CollectionSchemaViewDocs extends React.Component - {this.props.childDocs().docs.map((doc: Doc, index: number) => ( + {this.props.childDocs().map((doc: Doc, index: number) => (
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 32abc1780..03cf64fc8 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -147,7 +147,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { - if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column + if (enterKey) { // if shift & enter, set value of each cell in column this.setColumnValues(value, ''); this._altTitle = undefined; this._props.finishEdit?.(); -- cgit v1.2.3-70-g09d2 From a9ec444d00a02a5e04f3c022fd4d0bea08efe196 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> 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/SchemaColumnHeader.tsx') 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 97977e7156eb852c20422fa995bbf96529dfb4e5 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 7 Jun 2024 19:36:59 -0400 Subject: sort overhaul for columnheader menu cleanup (sort is now a single action, not a persistent toggle; more like google sheets now) --- src/client/views/EditableView.scss | 3 +- src/client/views/EditableView.tsx | 5 +- src/client/views/MainView.tsx | 3 + .../collectionSchema/CollectionSchemaView.tsx | 106 +++++++++++---------- .../collectionSchema/SchemaColumnHeader.tsx | 16 ---- .../collections/collectionSchema/SchemaRowBox.tsx | 7 +- 6 files changed, 69 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss index e492068c8..d2f11f5e1 100644 --- a/src/client/views/EditableView.scss +++ b/src/client/views/EditableView.scss @@ -34,9 +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 5b690bf33..1652e6cd7 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -10,6 +10,7 @@ import { DocumentIconContainer } from './nodes/DocumentIcon'; import { FieldView, FieldViewProps } from './nodes/FieldView'; import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; +import { Padding } from 'browndash-components'; export interface EditableProps { /** @@ -293,10 +294,10 @@ export class EditableView extends ObservableReactComponent { // eslint-disable-next-line jsx-a11y/no-autofocus /> } else { - toDisplay = ( { // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 31d88fb87..5fe9332f4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -278,6 +278,9 @@ export class MainView extends ObservableReactComponent<{}> { library.add( ...[ + fa.faSort, + fa.faArrowUpZA, + fa.faArrowDownAZ, fa.faExclamationCircle, fa.faEdit, fa.faArrowDownShortWide, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 03e7ed5f3..a2f88eb80 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -37,6 +37,7 @@ import { Func } from 'mocha'; import { CollectionView } from '../CollectionView'; import { listSpec } from '../../../../fields/Schema'; import { GetEffectiveAcl } from '../../../../fields/util'; +import { ContextMenuProps } from '../../ContextMenuItem'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -96,6 +97,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap>(); @observable _lentDocs: Doc[] = []; + @observable _docs: Doc[] = this.childDocs; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -195,7 +197,7 @@ export class CollectionSchemaView extends CollectionSubView() { // ViewBoxInterface overrides override isUnstyledView = returnTrue; // used by style provider : turns off opacity, animation effects, scaling - rowIndex = (doc: Doc) => this.sortedDocs.docs.indexOf(doc); + rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc); @action onKeyDown = (e: KeyboardEvent) => { @@ -205,9 +207,9 @@ export class CollectionSchemaView extends CollectionSubView() { { const lastDoc = this._selectedDocs.lastElement(); const lastIndex = this.rowIndex(lastDoc); - const curDoc = this.sortedDocs.docs[lastIndex]; + const curDoc = this.displayedDocs.docs[lastIndex]; if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { - const newDoc = this.sortedDocs.docs[lastIndex + 1]; + const newDoc = this.displayedDocs.docs[lastIndex + 1]; if (this._selectedDocs.includes(newDoc)) { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); @@ -224,9 +226,9 @@ export class CollectionSchemaView extends CollectionSubView() { { const firstDoc = this._selectedDocs.lastElement(); const firstIndex = this.rowIndex(firstDoc); - const curDoc = this.sortedDocs.docs[firstIndex]; + const curDoc = this.displayedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { - const newDoc = this.sortedDocs.docs[firstIndex - 1]; + const newDoc = this.displayedDocs.docs[firstIndex - 1]; if (this._selectedDocs.includes(newDoc)) { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); @@ -269,12 +271,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action changeSelectedCellColumn = () => {}; - @undoBatch - setColumnSort = (field: string | undefined, desc: boolean = false) => { - this.layoutDoc.sortField = field; - this.layoutDoc.sortDesc = desc; - }; - addRow = (doc: Doc | Doc[]) => this.addDocument(doc); @undoBatch @@ -512,7 +508,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.sortedDocs.docs[i]; + const currDoc = this.displayedDocs.docs[i]; if (!this._selectedDocs.includes(currDoc)) { this.selectCell(currDoc, this._selectedCol, false, true); } @@ -552,7 +548,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._lowestSelectedIndex = -1; }; - sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); + sortedSelectedDocs = () => this.displayedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); @computed get rowDropIndex() { @@ -584,9 +580,8 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - const sortedDocs = this.sortedDocs.docs.slice(); -const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.includes(doc)); - this.dataDoc[this.fieldKey ?? 'data'] = new List([...this.sortedDocs.docs]); + const docs = this.displayedDocs.docs.slice(); + this._docs = docs; this.clearSelection(); draggedDocs.forEach(doc => { DocumentView.addViewRenderedCb(doc, dv => dv.select(true)); @@ -639,16 +634,13 @@ const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs. return undefined; }; - addDocsFromChildCollection = (collection: Doc) => { - const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]); - childDocs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)}); + addDocsFromOtherCollection = (docs: Doc[]) => { + docs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)}); + this._docs = this.childDocs.slice().concat(this._lentDocs); } - - removeChildCollectionDocs = (collection: Doc) => { - const children = DocListCast(collection[Doc.LayoutFieldKey(collection)]); - console.log('before: ' + this._lentDocs) - this._lentDocs.filter((doc: Doc) => !children.includes(doc)); - console.log('after: ' + this._lentDocs) + removeDocsFromOtherCollection = (docs: Doc[]) => { + this._lentDocs.filter((doc: Doc) => !docs.includes(doc)); + this._docs = this.childDocs.slice().concat(this._lentDocs); } @computed get fieldDefaultInput() { @@ -784,27 +776,46 @@ const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs. this._filterColumnIndex = undefined; }; + @undoBatch + setColumnSort = (field: string | undefined, desc: boolean = false) => { + this.layoutDoc.sortField = field; + this.layoutDoc.sortDesc = desc; + }; + openContextMenu = (x: number, y: number, index: number) => { this.closeColumnMenu(); this.closeFilterMenu(); + const cm = ContextMenu.Instance; + cm.clearItems(); - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ + const revealOptions = cm.findByDescription('Sort column') + const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : []; + sortOptions.push({description: 'Sort A-Z', event: () => this.sortDocs(this._docs, this.columnKeys[index], false), icon: 'arrow-down-a-z',}); // prettier-ignore + sortOptions.push({description: 'Sort Z-A', event: () => this.sortDocs(this._docs, this.columnKeys[index], true), icon: 'arrow-up-z-a'}); // prettier-ignore + + cm.addItem({ description: `Change field`, event: () => this.openColumnMenu(index, false), icon: 'pencil-alt', }); - ContextMenu.Instance.addItem({ + cm.addItem({ description: 'Filter field', event: () => this.openFilterMenu(index), icon: 'filter', }); - ContextMenu.Instance.addItem({ + cm.addItem({ + description: 'Sort column', + addDivider: false, + noexpand: true, + subitems: sortOptions, + icon: 'sort' + }); + cm.addItem({ description: 'Delete column', event: () => this.removeColumn(index), icon: 'trash', }); - ContextMenu.Instance.displayMenu(x, y, undefined, false); + cm.displayMenu(x, y, undefined, false); }; @action @@ -1014,34 +1025,33 @@ const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs. } }; - @computed get sortedDocs() { + @computed get displayedDocs() { const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; - const field = StrCast(this.layoutDoc.sortField); - const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort - const staticDocs = this.childDocs.filter(d => !draggedDocs.includes(d)).concat(this._lentDocs.filter(d => !draggedDocs.includes(d))); - const docs = !field - ? staticDocs - : [...staticDocs].sort((docA, docB) => { - // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b - const aStr = Field.toString(docA[field] as FieldType); - const bStr = Field.toString(docB[field] as FieldType); - let out = 0; - if (aStr < bStr) out = -1; - if (aStr > bStr) out = 1; - if (desc) out *= -1; - return out; - }); - + const docs = this._docs.filter(d => !draggedDocs.includes(d)); docs.splice(this.rowDropIndex, 0, ...draggedDocs); return { docs }; } + @action + sortDocs = (docs: Doc[], field: string, desc: boolean) => { + docs = docs.sort((docA, docB) => { + // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b + const aStr = Field.toString(docA[field] as FieldType); + const bStr = Field.toString(docB[field] as FieldType); + let out = 0; + if (aStr < bStr) out = -1; + if (aStr > bStr) out = 1; + if (desc) out *= -1; + return out; + }); + } + rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); isContentActive = () => this._props.isSelected() || this._props.isContentActive(); screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - displayedDocsFunc = () => this.sortedDocs.docs; + displayedDocsFunc = () => this.displayedDocs.docs; _oldWheel: any; render() { return ( diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index bda9fc9b7..dd4a13776 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -68,19 +68,6 @@ export class SchemaColumnHeader extends ObservableReactComponent {this._altTitle = newAlt;} @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} - @action - sortClicked = (e: React.PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (this._props.sortField === this.fieldKey && this._props.sortDesc) { - this._props.setSort(undefined); - } else if (this._props.sortField === this.fieldKey) { - this._props.setSort(this.fieldKey, true); - } else { - this._props.setSort(this.fieldKey, false); - } - }; - openKeyDropdown = () => { this._props.schemaView.openColumnMenu(this._props.columnIndex, false) } @@ -190,9 +177,6 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
-
- -
); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 099670022..665704de1 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 } from '../../../../fields/Doc'; +import { Doc, DocListCast } from '../../../../fields/Doc'; import { BoolCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoable } from '../../../util/UndoManager'; @@ -73,13 +73,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { event: () => this._props.addDocTab(this.Document, OpenWhere.addRight), icon: 'magnifying-glass', }); - if (this.Document['type'] === 'collection') { + const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]) + if (this.Document['type'] === 'collection' && childDocs.length) { ContextMenu.Instance.addItem({ description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema', event: () => { this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; this.Document._childrenSharedWithSchema ? - this.schemaView.addDocsFromChildCollection(this.Document) : this.schemaView.removeChildCollectionDocs(this.Document); + this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs); }, icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus', }); -- cgit v1.2.3-70-g09d2 From 99b0ce24e4d56100746016995c20f9bb9c109072 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 10 Jun 2024 04:01:01 -0400 Subject: adding/removing children from collection works (probably buggy); backspace delete broken --- src/client/documents/Documents.ts | 2 +- .../collectionSchema/CollectionSchemaView.tsx | 34 ++++++++++++++++++---- .../collectionSchema/SchemaColumnHeader.tsx | 23 +++++++++++++-- .../collections/collectionSchema/SchemaRowBox.tsx | 9 +++--- 4 files changed, 53 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 365af66b7..4908d2952 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -227,7 +227,7 @@ export class DocumentOptions { _header_pointerEvents?: PEVt = new PEInfo('types of events the header of a custom text document can consume'); _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged"); _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"); + _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false); dataViz_title?: string; dataViz_line?: string; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index a2f88eb80..f501993b5 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 { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components'; -import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx'; +import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; @@ -65,6 +65,7 @@ export class CollectionSchemaView extends CollectionSubView() { constructor(props: any) { super(props); makeObservable(this); + this.importAddedDocs(); } static _rowHeight: number = 50; @@ -106,7 +107,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get _selectedDocs() { // get all selected documents then filter out any whose parent is not this schema document - const selected = DocumentView.SelectedDocs().filter(doc => this.childDocs.includes(doc)); + const selected = DocumentView.SelectedDocs().filter(doc => this._docs.includes(doc)); if (!selected.length) { // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window) const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document)); @@ -197,6 +198,22 @@ export class CollectionSchemaView extends CollectionSubView() { // ViewBoxInterface overrides override isUnstyledView = returnTrue; // used by style provider : turns off opacity, animation effects, scaling + importAddedDocs = () => { + const collections = this.childDocs.filter((doc: Doc) => doc.type === 'collection'); + collections.forEach((doc: Doc) => { + const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); + doc._childrenSharedWithSchema && this.addDocsFromOtherCollection(childDocs); + }); + } + + removeDoc = (doc: Doc) => { + console.log('called') + this.removeDocument(doc); + if (doc instanceof Doc) { + console.log('doc is doc') + this._docs = this._docs.filter(d => d !== doc)}; + } + rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc); @action @@ -256,13 +273,17 @@ export class CollectionSchemaView extends CollectionSubView() { } break; case 'Backspace': { - undoable(() => this.removeDocument(this._selectedDocs), 'delete schema row'); + undoable(() => {this._selectedDocs.forEach(d => this._docs.includes(d) && this.removeDoc(d));}, 'delete schema row'); break; } case 'Escape': { this.deselectAllCells(); break; } + case 'P': { + this.importAddedDocs(); + break; + } default: } } @@ -635,11 +656,12 @@ export class CollectionSchemaView extends CollectionSubView() { }; addDocsFromOtherCollection = (docs: Doc[]) => { - docs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)}); + docs.forEach((doc: Doc) => !this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)); this._docs = this.childDocs.slice().concat(this._lentDocs); } + removeDocsFromOtherCollection = (docs: Doc[]) => { - this._lentDocs.filter((doc: Doc) => !docs.includes(doc)); + this._lentDocs = this._lentDocs.filter((doc: Doc) => !docs.includes(doc)); this._docs = this.childDocs.slice().concat(this._lentDocs); } @@ -1032,7 +1054,7 @@ export class CollectionSchemaView extends CollectionSubView() { return { docs }; } - @action + @action sortDocs = (docs: Doc[], field: string, desc: boolean) => { docs = docs.sort((docA, docB) => { // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index dd4a13776..dbbf76ea7 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -22,6 +22,7 @@ import { SnappingManager } from '../../../util/SnappingManager'; import { undoable } from '../../../util/UndoManager'; import { FInfo } from '../../../documents/Documents'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; +import { IconButton, Size } from 'browndash-components'; export interface SchemaColumnHeaderProps { Document: Doc; @@ -174,10 +175,26 @@ export class SchemaColumnHeader extends ObservableReactComponent{this.editableView}
-
this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}> - +
+ } + size={Size.XSMALL} + color={'black'} + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex) + }, 'open column menu') + ) + } + />
-
+
); } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 665704de1..cdd47f644 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -60,7 +60,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ description: `Close doc`, - event: () => this._props.removeDocument?.(this.Document), + event: () => this.schemaView.removeDoc(this.Document), icon: 'minus', }); ContextMenu.Instance.addItem({ @@ -74,13 +74,12 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { icon: 'magnifying-glass', }); const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]) - if (this.Document['type'] === 'collection' && childDocs.length) { + if (this.Document.type === 'collection' && childDocs.length) { ContextMenu.Instance.addItem({ description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema', event: () => { this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; - this.Document._childrenSharedWithSchema ? - this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs); + this.Document._childrenSharedWithSchema ? this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs); }, icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus', }); @@ -115,7 +114,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { }}> } + icon={ } size={Size.XSMALL} color={'black'} onPointerDown={e => -- cgit v1.2.3-70-g09d2 From 4b604b5118a1aac89d977c832c81495ec2c9aa19 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:56:51 -0400 Subject: lock row editing --- src/client/documents/Documents.ts | 1 + src/client/views/EditableView.tsx | 2 ++ .../collectionSchema/CollectionSchemaView.tsx | 11 ++------ .../collectionSchema/SchemaColumnHeader.tsx | 1 + .../collections/collectionSchema/SchemaRowBox.tsx | 15 ++++++++-- .../collectionSchema/SchemaTableCell.tsx | 33 ++++++++++++---------- 6 files changed, 37 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4908d2952..dabbf9591 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -228,6 +228,7 @@ export class DocumentOptions { _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged"); _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); dataViz_title?: string; dataViz_line?: string; diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 1652e6cd7..c05812e1a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -57,6 +57,7 @@ export interface EditableProps { wrap?: string; // nowrap, pre-wrap, etc schemaHeader?: boolean; + onClick?: () => void; updateAlt?: (newAlt: string) => void; updateSearch?: (value: string) => void; } @@ -187,6 +188,7 @@ export class EditableView extends ObservableReactComponent { @action onClick = (e?: React.MouseEvent) => { + this._props.onClick && this._props.onClick(); if (this._props.editing !== false) { e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 7302a7c22..48287c3ec 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -208,7 +208,7 @@ export class CollectionSchemaView extends CollectionSubView() { removeDoc = (doc: Doc) => { this.removeDocument(doc); - this._docs = this._docs.filter(d => d !== doc); + this._docs = this._docs.filter(d => d !== doc) } rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc); @@ -739,13 +739,8 @@ export class CollectionSchemaView extends CollectionSubView() { }; setCellValues = (key: string, value: string) => { - const selectedDocs: Doc[] = []; - this.childDocs.forEach(doc => { - const isSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); - isSelected && selectedDocs.push(doc); - }); - if (selectedDocs.length === 1) this.childDocs.forEach(doc => Doc.SetField(doc, key, value)); // if only one cell selected, fill all - else selectedDocs.forEach(doc => Doc.SetField(doc, key, value)); // else only fill selected cells + if (this._selectedCells.length === 1) this.childDocs.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; }; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index dbbf76ea7..3719840ff 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -126,6 +126,7 @@ export class SchemaColumnHeader extends ObservableReactComponent() { icon: 'minus', }); ContextMenu.Instance.addItem({ - description: this.Document._lockedPosition ? 'Unlock doc interactions' : 'Lock doc interactions', - event: () => Doc.toggleLockedPosition(this.Document), - icon: this.Document._lockedPosition ? 'lock-open' : 'lock', + description: this.Document._lockedSchemaEditing ? 'Unlock field editing' : 'Lock field editing', + event: () => this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing, + icon: this.Document._lockedSchemaEditing ? 'lock-open' : 'lock', }); ContextMenu.Instance.addItem({ description: 'Open preview', @@ -87,6 +87,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { ContextMenu.Instance.displayMenu(x, y, undefined, false); } + get menuBackgroundColor(){ + if (this.Document._lockedSchemaEditing){ + if (this._props.isSelected()) return '#B0D1E7' + else return '#F5F5F5' + } + return '' + } + cleanupField = (field: string) => this.schemaView.cleanupComputedField(field) setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); selectedCol = () => this.schemaView._selectedCol; @@ -111,6 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { style={{ width: CollectionSchemaView._rowMenuWidth, pointerEvents: !this._props.isContentActive() ? 'none' : undefined, + backgroundColor: this.menuBackgroundColor }}> { @@ -89,9 +101,7 @@ export class SchemaTableCell extends ObservableReactComponent selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} @@ -190,14 +201,6 @@ export class SchemaTableCell extends ObservableReactComponent - {this.defaultKey ? '' : this.content} + {this.isDefault ? '' : this.content}
); } -- cgit v1.2.3-70-g09d2 From 03f9fd4beb2bd3efa8f88c71bdbaf52dbec82e66 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:56:42 -0400 Subject: sub-collection doc adding refactor complete except for small bug --- .../collectionSchema/CollectionSchemaView.tsx | 51 +++++++++--------- .../collectionSchema/SchemaColumnHeader.tsx | 60 +++++++++++++++------- .../collections/collectionSchema/SchemaRowBox.tsx | 1 - 3 files changed, 65 insertions(+), 47 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 48287c3ec..1952f59f5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -65,7 +65,6 @@ export class CollectionSchemaView extends CollectionSubView() { constructor(props: any) { super(props); makeObservable(this); - this.importAddedDocs(); } static _rowHeight: number = 50; @@ -97,7 +96,6 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colBeingDragged: boolean = false; @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap>(); - @observable _lentDocs: Doc[] = []; @observable _docs: Doc[] = this.childDocs; // target HTMLelement portal for showing a popup menu to edit cell values. @@ -150,7 +148,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get rowHeights() { - return this.childDocs.concat(this._lentDocs).map(() => this.rowHeightFunc()); + return this.docs.map(() => this.rowHeightFunc()); } @computed get displayColumnWidths() { @@ -198,14 +196,6 @@ export class CollectionSchemaView extends CollectionSubView() { // ViewBoxInterface overrides override isUnstyledView = returnTrue; // used by style provider : turns off opacity, animation effects, scaling - importAddedDocs = () => { - const collections = this.childDocs.filter((doc: Doc) => doc.type === 'collection'); - collections.forEach((doc: Doc) => { - const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); - doc._childrenSharedWithSchema && this.addDocsFromOtherCollection(childDocs); - }); - } - removeDoc = (doc: Doc) => { this.removeDocument(doc); this._docs = this._docs.filter(d => d !== doc) @@ -278,7 +268,6 @@ export class CollectionSchemaView extends CollectionSubView() { break; } case 'P': { - this.importAddedDocs(); break; } default: @@ -651,16 +640,6 @@ export class CollectionSchemaView extends CollectionSubView() { return undefined; }; - addDocsFromOtherCollection = (docs: Doc[]) => { - docs.forEach((doc: Doc) => !this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)); - this._docs = this.childDocs.slice().concat(this._lentDocs); - } - - removeDocsFromOtherCollection = (docs: Doc[]) => { - this._lentDocs = this._lentDocs.filter((doc: Doc) => !docs.includes(doc)); - this._docs = this.childDocs.slice().concat(this._lentDocs); - } - @computed get fieldDefaultInput() { switch (this._newFieldType) { case ColumnType.Number: @@ -739,7 +718,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.childDocs.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; }; @@ -1038,16 +1017,36 @@ export class CollectionSchemaView extends CollectionSubView() { } }; + displayedSubCollectionDocs = (doc: Doc) => { + const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); + const displayedCollections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema); + let toReturn: Doc[] = [...childDocs]; + displayedCollections.forEach(d => toReturn = toReturn.concat(this.displayedSubCollectionDocs(d))); + return toReturn; + } + + @computed get docs() { + let docsFromChildren: Doc[] = []; + const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema); + displayedCollections.forEach(d => { + let docsNotAlreadyDisplayed = this.displayedSubCollectionDocs(d).filter(dc => !this._docs.includes(dc)); + docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed); + }); + let docs = this._docs.concat(docsFromChildren); + return docs; + } + @computed get displayedDocs() { const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; - const docs = this._docs.filter(d => !draggedDocs.includes(d)); + let docs = [...this.docs]; + docs = docs.filter(d => !draggedDocs.includes(d)); docs.splice(this.rowDropIndex, 0, ...draggedDocs); return { docs }; } @action sortDocs = (docs: Doc[], field: string, desc: boolean) => { - docs = docs.sort((docA, docB) => { + this._docs = docs.sort((docA, docB) => { // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b const aStr = Field.toString(docA[field] as FieldType); const bStr = Field.toString(docB[field] as FieldType); @@ -1115,8 +1114,6 @@ export class CollectionSchemaView extends CollectionSubView() { columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.displayColumnWidths} - sortField={this.sortField} - sortDesc={this.sortDesc} setSort={this.setColumnSort} rowHeight={this.rowHeightFunc} removeColumn={this.removeColumn} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 3719840ff..0da186f81 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -30,8 +30,6 @@ export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; - sortField: string; - sortDesc: boolean; schemaView: CollectionSchemaView; keysDropdown: React.JSX.Element; //cleanupField: (s: string) => string; @@ -158,6 +156,46 @@ export class SchemaColumnHeader extends ObservableReactComponent} + size={Size.XSMALL} + color={'black'} + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + this._props.schemaView.removeColumn(this._props.columnIndex); + }, 'open column menu') + ) + } + />) + : (} + size={Size.XSMALL} + color={'black'} + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex) + }, 'open column menu') + ) + } + />) + + return toRender; + } + render() { return (
- } - size={Size.XSMALL} - color={'black'} - onPointerDown={e => - setupMoveUpEvents( - this, - e, - returnFalse, - emptyFunction, - undoable(clickEv => { - clickEv.stopPropagation(); - this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex) - }, 'open column menu') - ) - } - /> + {this.headerButton}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 58964d9fb..a0d3144ce 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -79,7 +79,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema', event: () => { this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; - this.Document._childrenSharedWithSchema ? this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs); }, icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus', }); -- cgit v1.2.3-70-g09d2 From 707a1a4cba9f0af9ee07b487eddf0f4ca85c8a78 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 12 Jun 2024 03:28:07 -0400 Subject: col menu icon now shows only on hover --- .../collections/collectionSchema/CollectionSchemaView.tsx | 8 ++++---- .../collections/collectionSchema/SchemaColumnHeader.tsx | 14 +++++++++++--- .../views/collections/collectionSchema/SchemaRowBox.tsx | 5 +++-- 3 files changed, 18 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 25a1b4819..affa70a62 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -209,7 +209,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._docs = this._docs.filter(d => d !== doc) } - rowIndex = (doc: Doc) => this.draggedSpliceDocs.docs.indexOf(doc); + rowIndex = (doc: Doc) => this.docsWithDrag.docs.indexOf(doc); @action onKeyDown = (e: KeyboardEvent) => { @@ -581,7 +581,7 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - const docs = this.draggedSpliceDocs.docs.slice(); + const docs = this.docsWithDrag.docs.slice(); this._docs = docs; this.clearSelection(); draggedDocs.forEach(doc => { @@ -1031,7 +1031,7 @@ export class CollectionSchemaView extends CollectionSubView() { return docs; } - @computed get draggedSpliceDocs() { + @computed get docsWithDrag() { const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; let docs = [...this.docs]; docs = docs.filter(d => !draggedDocs.includes(d)); @@ -1058,7 +1058,7 @@ export class CollectionSchemaView extends CollectionSubView() { screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - displayedDocsFunc = () => this.draggedSpliceDocs.docs; + displayedDocsFunc = () => this.docsWithDrag.docs; _oldWheel: any; render() { return ( diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 0da186f81..0fe0033d4 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unused-prop-types */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils'; @@ -51,7 +51,7 @@ export interface SchemaColumnHeaderProps { export class SchemaColumnHeader extends ObservableReactComponent { @observable _altTitle: string | undefined = undefined; - @observable _displayKeysDropdown: boolean = false; + @observable _showMenuIcon: boolean = false; @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; @@ -59,6 +59,7 @@ export class SchemaColumnHeader extends ObservableReactComponent this._showMenuIcon = true; + @action handlePointerLeave = () => this._showMenuIcon = false; + + @computed get displayButton() {return this._showMenuIcon;} + render() { return (
{this.handlePointerEnter()}} + onPointerLeave={() => {this.handlePointerLeave()}} onPointerDown={this.setupDrag} ref={col => { if (col) { @@ -215,7 +223,7 @@ export class SchemaColumnHeader extends ObservableReactComponent
- {this.headerButton} + {this.displayButton ? this.headerButton : null}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index a8affb0d9..107e29754 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -104,8 +104,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { @computed get isolatedSelection() { const toReturn: [boolean, boolean] = [true, true]; - const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex + 1]); - const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex - 1]); + const docs = this.schemaView.docsWithDrag.docs; + const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex + 1]); + const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex - 1]); toReturn[0] = selectedAbove; toReturn[1] = selectedBelow; return toReturn; -- cgit v1.2.3-70-g09d2 From 60a4ccfe2ab6337c064da8a303336f1872f5e9a6 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 12 Jun 2024 21:16:17 -0400 Subject: cell value parser for highlighting cells used in equation works; need to implement actual VU --- src/client/views/EditableView.tsx | 16 ++++---- .../collectionSchema/CollectionSchemaView.tsx | 48 +++++++++++++++++++--- .../collectionSchema/SchemaColumnHeader.tsx | 6 ++- .../collections/collectionSchema/SchemaRowBox.tsx | 2 + .../collectionSchema/SchemaTableCell.tsx | 5 +++ 5 files changed, 63 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c05812e1a..f8d6596d8 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -11,6 +11,7 @@ import { FieldView, FieldViewProps } from './nodes/FieldView'; import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; import { Padding } from 'browndash-components'; +import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader'; export interface EditableProps { /** @@ -56,7 +57,7 @@ export interface EditableProps { placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc - schemaHeader?: boolean; + schemaFieldType?: SchemaFieldType; onClick?: () => void; updateAlt?: (newAlt: string) => void; updateSearch?: (value: string) => void; @@ -71,19 +72,18 @@ export interface EditableProps { export class EditableView extends ObservableReactComponent { private _ref = React.createRef(); private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null; + private _disposers: { [name: string]: IReactionDisposer } = {}; _overlayDisposer?: () => void; - _editingDisposer?: IReactionDisposer; + _highlightsDisposer?: () => void; @observable _editing: boolean = false; constructor(props: EditableProps) { super(props); makeObservable(this); - this._editing = !!this._props.editing; - if (this._props.schemaHeader) this._editing = true; } componentDidMount(): void { - this._editingDisposer = reaction( + this._disposers.editing = reaction( () => this._editing, editing => { if (editing) { @@ -91,7 +91,7 @@ export class EditableView extends ObservableReactComponent { if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) { this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); - } + } }); } else { this._overlayDisposer?.(); @@ -114,7 +114,7 @@ export class EditableView extends ObservableReactComponent { componentWillUnmount() { this._overlayDisposer?.(); - this._editingDisposer?.(); + this._disposers.editing?.(); this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); } @@ -287,7 +287,7 @@ export class EditableView extends ObservableReactComponent { staticDisplay = () => { let toDisplay; const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if (this._props.schemaHeader){ + if (this._props.schemaFieldType === SchemaFieldType.Header){ toDisplay = { + const index = this.columnKeys.indexOf(fieldKey); + console.log(doc.title) + const cell = this._rowEles.get(doc).children[1].children[index]; + return cell; + } + + findCellRefs = (text: string) => { + const pattern = /(this|d(\d+))\.(\w+)/g; + interface Match { docRef: string; field: string; } + + const matches: Match[] = []; + let match: RegExpExecArray | null; + + while ((match = pattern.exec(text)) !== null) { + const docRef = match[1] === 'this' ? match[1] : match[2]; + matches.push({ docRef, field: match[3] }); + } + + const cells: Array = []; + matches.forEach((match: Match) => { + const {docRef, field} = match; + const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document; + if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))} + }) + + console.log(cells); + + return cells; + } + + + @action addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref); @@ -1012,22 +1046,26 @@ export class CollectionSchemaView extends CollectionSubView() { } }; - displayedSubCollectionDocs = (doc: Doc) => { + subCollectionDocs = (doc: Doc, displayed: boolean) => { const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); - const displayedCollections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema); + let collections: Array = []; + if (displayed) collections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema); + else collections = childDocs.filter(d => d.type === 'collection' && !d._childrenSharedWithSchema); let toReturn: Doc[] = [...childDocs]; - displayedCollections.forEach(d => toReturn = toReturn.concat(this.displayedSubCollectionDocs(d))); + collections.forEach(d => toReturn = toReturn.concat(this.subCollectionDocs(d, displayed))); return toReturn; } - + @computed get docs() { let docsFromChildren: Doc[] = []; + const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema); displayedCollections.forEach(d => { - let docsNotAlreadyDisplayed = this.displayedSubCollectionDocs(d).filter(dc => !this._docs.includes(dc)); + let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._docs.includes(dc)); docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed); }); let docs = this._docs.concat(docsFromChildren); + return docs; } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 0fe0033d4..f0debaec2 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -24,6 +24,10 @@ import { FInfo } from '../../../documents/Documents'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { IconButton, Size } from 'browndash-components'; +export enum SchemaFieldType { + Header, Cell +} + export interface SchemaColumnHeaderProps { Document: Doc; autoFocus?: boolean; @@ -131,7 +135,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return ''; else if (this._altTitle) return this._altTitle; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 107e29754..f6d99b47e 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -121,6 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); + findCellRefs = (text: string) => this.schemaView?.findCellRefs(text); render() { return (
() {
{this.schemaView?.columnKeys?.map((key, index) => ( boolean; rowSelected: () => boolean; isolatedSelection: [boolean, boolean]; + getCellRefs: (text: string) => any; } function selectedCell(props: SchemaTableCellProps) { @@ -72,6 +73,9 @@ function selectedCell(props: SchemaTableCellProps) { @observer export class SchemaTableCell extends ObservableReactComponent { + + @observable _highlighted: boolean = false; + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); @@ -186,6 +190,7 @@ export class SchemaTableCell extends ObservableReactComponent Date: Mon, 17 Jun 2024 14:58:18 -0400 Subject: persistent sort option added, still need UI indication; some header bugs/weirdness fixed --- src/client/views/EditableView.tsx | 10 +++- .../collectionSchema/CollectionSchemaView.tsx | 69 +++++++++++++++++----- .../collectionSchema/SchemaColumnHeader.tsx | 20 ++++++- .../collectionSchema/SchemaTableCell.tsx | 2 +- 4 files changed, 80 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index f5271f749..78977bcb8 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -239,6 +239,12 @@ export class EditableView extends ObservableReactComponent { return wasFocused !== this._editing; }; + @action + setIsEditing = (value: boolean) => { + this._editing = value; + return this._editing; + } + renderEditor() { return this._props.autosuggestProps ? ( {
{this.renderEditor()}
) : ( -
- {this.renderEditor()} -
+ this.renderEditor() ); } setTimeout(() => this._props.autosuggestProps?.resetValue()); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d75f076d2..c66623bda 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -41,6 +41,7 @@ import { ContextMenuProps } from '../../ContextMenuItem'; import { truncate } from 'lodash'; import { DocumentManager } from '../../../util/DocumentManager'; import { TbHemispherePlus } from 'react-icons/tb'; +import { docs_v1 } from 'googleapis'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -400,6 +401,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action dragColumn = (e: PointerEvent, index: number) => { + this.closeColumnMenu(); this._draggedColIndex = index; this._colBeingDragged = true; const dragData = new DragManager.ColumnDragData(index); @@ -584,6 +586,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => { + this.closeColumnMenu(); if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells.push(doc); @@ -839,10 +842,28 @@ export class CollectionSchemaView extends CollectionSubView() { const cm = ContextMenu.Instance; cm.clearItems(); + const fieldSortedAsc = (this.sortField === this.columnKeys[index] && !this.sortDesc); + const fieldSortedDesc = (this.sortField === this.columnKeys[index] && this.sortDesc); const revealOptions = cm.findByDescription('Sort column') const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : []; sortOptions.push({description: 'Sort A-Z', event: () => this.sortDocs(this._docs, this.columnKeys[index], false), icon: 'arrow-down-a-z',}); // prettier-ignore sortOptions.push({description: 'Sort Z-A', event: () => this.sortDocs(this._docs, this.columnKeys[index], true), icon: 'arrow-up-z-a'}); // prettier-ignore + sortOptions.push({ + description: 'Persistent Sort A-Z', + event: () => { + if (fieldSortedAsc){ + this.setColumnSort(undefined) + } else this.setColumnSort(this.columnKeys[index], false) + }, + icon: fieldSortedAsc ? 'lock' : 'lock-open'}); // prettier-ignore + sortOptions.push({ + description: 'Persistent Sort Z-A', + event: () => { + if (fieldSortedDesc){ + this.setColumnSort(undefined) + } else this.setColumnSort(this.columnKeys[index], true) + }, + icon: fieldSortedDesc ? 'lock' : 'lock-open'}); // prettier-ignore cm.addItem({ description: `Change field`, @@ -1100,25 +1121,45 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get docsWithDrag() { - const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; - let docs = [...this.docs]; - docs = docs.filter(d => !draggedDocs.includes(d)); - docs.splice(this.rowDropIndex, 0, ...draggedDocs); + let docs = this._docs; + if (this.sortField){ + const field = StrCast(this.layoutDoc.sortField); + const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort + docs = this._docs.slice().sort((docA, docB) => { + // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b + const aStr = Field.toString(docA[field] as FieldType); + const bStr = Field.toString(docB[field] as FieldType); + let out = 0; + if (aStr < bStr) out = -1; + if (aStr > bStr) out = 1; + if (desc) out *= -1; + return out; + }); + } else { + const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; + docs = docs.filter(d => !draggedDocs.includes(d)); + docs.splice(this.rowDropIndex, 0, ...draggedDocs); + } + return { docs }; } @action sortDocs = (docs: Doc[], field: string, desc: boolean) => { - this._docs = docs.sort((docA, docB) => { - // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b - const aStr = Field.toString(docA[field] as FieldType); - const bStr = Field.toString(docB[field] as FieldType); - let out = 0; - if (aStr < bStr) out = -1; - if (aStr > bStr) out = 1; - if (desc) out *= -1; - return out; - }); + const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}); + this._docs = this._docs.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType))); + + + // this._docs = docs.sort((docA, docB) => { + // // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b + // const aStr = Field.toString(docA[field] as FieldType); + // const bStr = Field.toString(docB[field] as FieldType); + // let out = 0; + // if (aStr < bStr) out = -1; + // if (aStr > bStr) out = 1; + // if (desc) out *= -1; + // return out; + // }); } rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index f0debaec2..d16cde1f8 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -54,6 +54,7 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends ObservableReactComponent { + private _inputRef: EditableView | null = null; @observable _altTitle: string | undefined = undefined; @observable _showMenuIcon: boolean = false; @@ -118,14 +119,17 @@ export class SchemaColumnHeader extends ObservableReactComponent {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}} + return
{ + SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown(); + this._props.schemaView.deselectAllCells(); + }} style={{ color, width: '100%', pointerEvents, }}> this._props.autoFocus && r?.setIsFocused(true)} + ref={r => {this._inputRef = r; this._props.autoFocus && r?.setIsFocused(true)}} oneLine={true} allowCRs={false} contents={undefined} @@ -215,7 +219,17 @@ export class SchemaColumnHeader extends ObservableReactComponent {this.handlePointerEnter()}} onPointerLeave={() => {this.handlePointerLeave()}} - onPointerDown={this.setupDrag} + onPointerDown={e => { + this.setupDrag(e); + setupMoveUpEvents( + this, + e, + e => {return this._inputRef?.setIsEditing(false) ?? false}, + emptyFunction, + emptyFunction, + ); + } + } ref={col => { if (col) { this._props.setColRef(this._props.columnIndex, col); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 79f9067e2..17fff7bf1 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -177,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent - selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} -- 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/SchemaColumnHeader.tsx') 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 21a9278abe3bab3a7da7eef079a27169cc2cd49c Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 28 Jun 2024 13:24:40 -0400 Subject: col drag stutter fixed --- src/client/util/Scripting.ts | 8 +-- .../collectionSchema/CollectionSchemaView.tsx | 70 ++++++++++++++-------- .../collectionSchema/SchemaColumnHeader.tsx | 2 + .../collectionSchema/SchemaTableCell.tsx | 6 +- 4 files changed, 52 insertions(+), 34 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index c7aa56c1e..5202e62a3 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -183,10 +183,10 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde ); } -ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer()); -//addreturn = true -//capturedvariables = undefined -// +// ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer()); +// //addreturn = true +// //capturedvariables = undefined +// // export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult { const captured = options.capturedVariables ?? {}; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 497c781fd..93347f067 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -95,7 +95,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterSearchValue: string = ''; @observable _selectedCol: number = 0; @observable _selectedCells: Array = []; - @observable _mouseCoordinates = { x: 0, y: 0 }; + @observable _mouseCoordinates = { x: 0, y: 0, prevX: 0, prevY: 0 }; @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; @@ -413,7 +413,7 @@ export class CollectionSchemaView extends CollectionSubView() { dragColumn = (e: PointerEvent, index: number) => { this.closeColumnMenu(); this._draggedColIndex = index; - this._colBeingDragged = true; + this.setColDrag(true); const dragData = new DragManager.ColumnDragData(index); const dragEles = [this._colEles[index]]; this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index])); @@ -499,6 +499,26 @@ export class CollectionSchemaView extends CollectionSubView() { }); }); + removeDragHighlight = () => { + this._colEles.forEach((colRef, i) => { + const sorted = i === this.columnKeys.indexOf(this.sortField); + if (sorted) return; + + colRef.style.borderLeft = ''; + colRef.style.borderRight = ''; + colRef.style.borderTop = ''; + + this.childDocs.forEach(doc => { + const cell = this._rowEles.get(doc).children[1].children[i]; + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) { + cell.style.borderLeft = ''; + cell.style.borderRight = ''; + cell.style.borderBottom = ''; + } + }); + }); + } + highlightSortedColumn = (field?: string, descending?: boolean) => { let index = -1; let highlightColors: string[] = []; @@ -703,28 +723,11 @@ export class CollectionSchemaView extends CollectionSubView() { return this.findRowDropIndex(mouseY); } + @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { - this._colBeingDragged = false; + this.setColDrag(false); e.stopPropagation(); - - this._colEles.forEach((colRef, i) => { - const sorted = i === this.columnKeys.indexOf(this.sortField); - if (sorted) return; - - colRef.style.borderLeft = ''; - colRef.style.borderRight = ''; - colRef.style.borderTop = ''; - - this.childDocs.forEach(doc => { - const cell = this._rowEles.get(doc).children[1].children[i]; - if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) { - cell.style.borderLeft = ''; - cell.style.borderRight = ''; - cell.style.borderBottom = ''; - } - }); - }); return true; } @@ -1196,18 +1199,33 @@ export class CollectionSchemaView extends CollectionSubView() { ); } + @action setColDrag = (beingDragged: boolean) => { + this._colBeingDragged = beingDragged; + !beingDragged && this.removeDragHighlight(); + } + + @action updateMouseCoordinates = (e: React.PointerEvent) => { + const prevX = this._mouseCoordinates.x; + const prevY = this._mouseCoordinates.y; + this._mouseCoordinates = { x: e.clientX, y: e.clientY, prevX: prevX, prevY: prevY }; + } + @action onPointerMove = (e: React.PointerEvent) => { if (DragManager.docsBeingDragged.length) { - this._mouseCoordinates = { x: e.clientX, y: e.clientY }; + this.updateMouseCoordinates(e); } if (this._colBeingDragged) { + this.updateMouseCoordinates(e); const newIndex = this.findColDropIndex(e.clientX); - if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); - this._draggedColIndex = newIndex || this._draggedColIndex; + const direction: number = this._mouseCoordinates.x > this._mouseCoordinates.prevX ? 1 : 0; + if (newIndex !== undefined && ((newIndex > this._draggedColIndex && direction === 1) || (newIndex < this._draggedColIndex && direction === 0))) { + this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); + this._draggedColIndex = newIndex !== undefined ? newIndex : this._draggedColIndex; + } this.highlightSortedColumn(); //TODO: Make this more efficient this.restoreCellHighlights(); - !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); + !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(this._draggedColIndex); } }; @@ -1286,7 +1304,7 @@ export class CollectionSchemaView extends CollectionSubView() {
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)} - onPointerDown={() => this.closeColumnMenu()}> + onPointerDown={() => {this.closeColumnMenu(); this.setColDrag(false)}}>
+ +
this._props.resizeColumn(e, this._props.columnIndex)} />
); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index c0e1743a5..d06e2a147 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -16,7 +16,7 @@ import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, DateCast, DocCast, FieldValue, ScriptCast, StrCast, toList } from '../../../../fields/Types'; +import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { FInfo, FInfoFieldType } from '../../../documents/Documents'; import { dropActionType } from '../../../util/DropActionTypes'; @@ -35,7 +35,6 @@ import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { ContextMenu } from '../../ContextMenu'; import { SchemaCellField } from './SchemaCellField'; -import { ComputedField } from '../../../../fields/ScriptField'; export interface SchemaTableCellProps { Document: Doc; @@ -210,8 +209,7 @@ export class SchemaTableCell extends ObservableReactComponent ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''} + GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); -- cgit v1.2.3-70-g09d2 From 0080670351d472a5cdf01841a47ea98e0027fb53 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 28 Jun 2024 19:36:44 -0400 Subject: dragging col stops editing of schema header --- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 3 +++ src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx | 5 +++++ 2 files changed, 8 insertions(+) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index a3bc537d2..e4ffc5b13 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -67,6 +67,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _documentOptions: DocumentOptions = new DocumentOptions(); private _tableContentRef: HTMLDivElement | null = null; private _menuTarget = React.createRef(); + private _headerRefs: SchemaColumnHeader[] = []; constructor(props: any) { super(props); @@ -411,6 +412,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action dragColumn = (e: PointerEvent, index: number) => { this.closeColumnMenu(); + this._headerRefs.forEach(ref => ref.stopEditing()); this._draggedColIndex = index; this.setColDrag(true); const dragData = new DragManager.ColumnDragData(index); @@ -1331,6 +1333,7 @@ export class CollectionSchemaView extends CollectionSubView() { r && this._headerRefs.push(r)} keysDropdown={(this.keysDropdown)} schemaView={this} columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index e98a2c778..382d7487b 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -23,6 +23,7 @@ import { undoable } from '../../../util/UndoManager'; import { FInfo } from '../../../documents/Documents'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { IconButton, Size } from 'browndash-components'; +import { TbHospital } from 'react-icons/tb'; export enum SchemaFieldType { Header, Cell @@ -72,6 +73,10 @@ export class SchemaColumnHeader extends ObservableReactComponent {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} + @action stopEditing = () => { + this._inputRef?.setIsEditing(false); + this._inputRef?.setIsFocused(false); + } openKeyDropdown = () => { this._props.schemaView.openColumnMenu(this._props.columnIndex, false) -- cgit v1.2.3-70-g09d2 From 821e10405c13e125ea439450b7a66090f0c118fa Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 30 Jun 2024 18:47:20 -0400 Subject: adding columns to left/right of other column --- .../collectionSchema/CollectionSchemaView.tsx | 30 ++++++++++++++-------- .../collectionSchema/SchemaColumnHeader.tsx | 1 - 2 files changed, 20 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index bcb94e10d..49cb86732 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -332,19 +332,19 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - addColumn = (key?: string, defaultVal?: any) => { + addColumn = (index: number = 0, 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(); - currWidths.splice(0, 0, newColWidth); + currWidths.splice(index, 0, newColWidth); const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); 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()); + currKeys.splice(index, 0, key); + this.changeColumnKey(index, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString()); this.layoutDoc.schema_columnKeys = new List(currKeys); }; @@ -524,7 +524,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.childDocs.forEach(doc => { const cell = this._rowEles.get(doc).children[1].children[i]; - if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) { + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell)) && cell) { cell.style.borderLeft = ''; cell.style.borderRight = ''; cell.style.borderBottom = ''; @@ -539,7 +539,7 @@ export class CollectionSchemaView extends CollectionSubView() { const rowCount: number = this._docs.length + 1; if (field || this.sortField){ index = this.columnKeys.indexOf(field || this.sortField); - const increment: number = 100/rowCount; + const increment: number = 110/rowCount; for (let i = 1; i <= rowCount; ++i){ const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i); highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`); @@ -601,8 +601,9 @@ export class CollectionSchemaView extends CollectionSubView() { removeCellHighlights = () => { this._highlightedCellsInfo.forEach(info => { const doc = info[0]; - const cell = this.getCellElement(doc, info[1]); - if (!this._selectedDocs.includes(doc)) cell.style.border = ''; + const field = info[1]; + const cell = this.getCellElement(doc, field); + if (!(this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field))) cell.style.border = ''; cell.style.backgroundColor = '';}); this._highlightedCellsInfo = []; } @@ -625,7 +626,6 @@ export class CollectionSchemaView extends CollectionSubView() { this.removeCellHighlights(); const cellsToHighlight = this.findCellRefs(text); - console.log(cellsToHighlight); this._highlightedCellsInfo = [...cellsToHighlight]; for (let i = 0; i < this._highlightedCellsInfo.length; ++i) { @@ -865,7 +865,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (this.columnKeys.includes(key)) return; if (this._makeNewColumn) { - this.addColumn(key, defaultVal); + this.addColumn(this.columnKeys.indexOf(key), key, defaultVal); this._makeNewColumn = false; } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal); @@ -1005,6 +1005,16 @@ export class CollectionSchemaView extends CollectionSubView() { subitems: sortOptions, icon: 'sort' }); + cm.addItem({ + description: 'Add column to left', + event: () => this.addColumn(index), + icon: 'plus', + }); + cm.addItem({ + description: 'Add column to right', + event: () => this.addColumn(index + 1), + icon: 'plus', + }); cm.addItem({ description: 'Delete column', event: () => this.removeColumn(index), diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 382d7487b..70db3d1f5 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -66,7 +66,6 @@ export class SchemaColumnHeader extends ObservableReactComponent this._props.schemaView?.fieldInfos.get(fieldKey)); -- cgit v1.2.3-70-g09d2 From c528298bf2375daff4ba8de170870eddf331aa4e Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 30 Jun 2024 19:08:37 -0400 Subject: removing column closes menu and stops editing --- .../collections/collectionSchema/CollectionSchemaView.tsx | 6 +++++- .../collections/collectionSchema/SchemaColumnHeader.tsx | 14 ++++---------- 2 files changed, 9 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 49cb86732..1b23e3c40 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -358,6 +358,10 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; + if (this._columnMenuIndex === index) { + this._headerRefs[index].toggleEditing(false); + this.closeColumnMenu(); + } const currWidths = this.storedColumnWidths.slice(); currWidths.splice(index, 1); const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); @@ -425,7 +429,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action dragColumn = (e: PointerEvent, index: number) => { this.closeColumnMenu(); - this._headerRefs.forEach(ref => ref.stopEditing()); + this._headerRefs.forEach(ref => ref.toggleEditing(false)); this._draggedColIndex = index; this.setColDrag(true); const dragData = new DragManager.ColumnDragData(index); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 70db3d1f5..2b56ae881 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -71,15 +71,9 @@ 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);} @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} - @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} - @action stopEditing = () => { - this._inputRef?.setIsEditing(false); - this._inputRef?.setIsFocused(false); - } - - openKeyDropdown = () => { - this._props.schemaView.openColumnMenu(this._props.columnIndex, false) - } + updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} + toggleEditing = (editing: boolean) => {this._inputRef?.setIsEditing(editing); this._inputRef?.setIsFocused(editing);} + openKeyDropdown = () => {this._props.schemaView.openColumnMenu(this._props.columnIndex, false)} @action setupDrag = (e: React.PointerEvent) => { @@ -89,7 +83,7 @@ export class SchemaColumnHeader extends ObservableReactComponent { const { columnKeys, columnWidth, Document } = props; const fieldKey = columnKeys[props.columnIndex]; - const color = 'black'; // color of text in cells + const color = 'black'; const fieldProps: FieldViewProps = { childFilters: returnEmptyFilter, childFiltersByRanges: returnEmptyFilter, -- cgit v1.2.3-70-g09d2 From c9e3b7679247b615b1821d913b2648a0c1560c5a Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 1 Jul 2024 13:18:22 -0400 Subject: keymenu no longer opened on dragged col drop --- .../collections/collectionSchema/CollectionSchemaView.tsx | 4 ++-- .../collections/collectionSchema/SchemaColumnHeader.tsx | 12 +++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 2f62b1c8d..d0b531ad6 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -434,7 +434,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.closeColumnMenu(); this._headerRefs.forEach(ref => ref.toggleEditing(false)); this._draggedColIndex = index; - this.setColDrag(true); + this.setColDrag(true); const dragData = new DragManager.ColumnDragData(index); const dragEles = [this._colEles[index]]; this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index])); @@ -741,7 +741,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { - this.setColDrag(false); + setTimeout(() => {this.setColDrag(false);}); e.stopPropagation(); return true; } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 2b56ae881..22237f448 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -23,7 +23,6 @@ import { undoable } from '../../../util/UndoManager'; import { FInfo } from '../../../documents/Documents'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { IconButton, Size } from 'browndash-components'; -import { TbHospital } from 'react-icons/tb'; export enum SchemaFieldType { Header, Cell @@ -70,10 +69,13 @@ 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);} - @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;} - updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)} - toggleEditing = (editing: boolean) => {this._inputRef?.setIsEditing(editing); this._inputRef?.setIsFocused(editing);} - openKeyDropdown = () => {this._props.schemaView.openColumnMenu(this._props.columnIndex, false)} + @action updateAlt = (newAlt: string) => {this._altTitle = newAlt}; + updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}; + openKeyDropdown = () => {console.log('caled'); console.log(this._props.schemaView._colBeingDragged); !this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}; + toggleEditing = (editing: boolean) => { + this._inputRef?.setIsEditing(editing); + this._inputRef?.setIsFocused(editing); + }; @action setupDrag = (e: React.PointerEvent) => { -- cgit v1.2.3-70-g09d2 From a4199d30b81c464fd7ff15eee1fc56f432ee53a3 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 1 Jul 2024 14:52:35 -0400 Subject: fonticonbox no longer added when dragged from tools menu --- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 4 +++- src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d0b531ad6..7a90b3505 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -44,6 +44,7 @@ import { TbHemispherePlus } from 'react-icons/tb'; import { docs_v1 } from 'googleapis'; import { SchemaCellField } from './SchemaCellField'; import { threadId } from 'worker_threads'; +import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -740,6 +741,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + console.log('called') if (de.complete.columnDragData) { setTimeout(() => {this.setColDrag(false);}); e.stopPropagation(); @@ -1301,7 +1303,7 @@ export class CollectionSchemaView extends CollectionSubView() { const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort docs = this.sortDocs(field, desc, true); } else { - const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; + const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged.filter(doc => !(doc.type === 'fonticonbox')) : []; docs = docs.filter(d => !draggedDocs.includes(d)); docs.splice(this.rowDropIndex, 0, ...draggedDocs); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 22237f448..4f5b3005d 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -71,7 +71,7 @@ export class SchemaColumnHeader extends ObservableReactComponent {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @action updateAlt = (newAlt: string) => {this._altTitle = newAlt}; updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}; - openKeyDropdown = () => {console.log('caled'); console.log(this._props.schemaView._colBeingDragged); !this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}; + openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}; toggleEditing = (editing: boolean) => { this._inputRef?.setIsEditing(editing); this._inputRef?.setIsFocused(editing); -- cgit v1.2.3-70-g09d2 From c69f325a6640d5843fabce5488a49e74d3efbba1 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 2 Jul 2024 01:20:15 -0400 Subject: resizer right working --- .../collections/collectionSchema/CollectionSchemaView.tsx | 11 +++++++---- .../views/collections/collectionSchema/SchemaColumnHeader.tsx | 6 +++--- 2 files changed, 10 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index a6a5df4b9..ef3efea39 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -377,20 +377,23 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - startResize = (e: any, index: number) => { + startResize = (e: any, index: number, rightSide: boolean) => { this._displayColumnWidths = this.storedColumnWidths; - setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index), this.finishResize, emptyFunction); + setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index, rightSide), this.finishResize, emptyFunction); }; @action - resizeColumn = (e: PointerEvent, index: number) => { + resizeColumn = (e: PointerEvent, index: number, rightSide: boolean) => { if (this._displayColumnWidths) { let shrinking; let growing; let change = e.movementX; - if (index !== 0) { + if (rightSide && (index !== this._displayColumnWidths.length - 1)) { + growing = change < 0 ? index + 1: index; + shrinking = change < 0 ? index : index + 1; + } else if (index !== 0) { growing = change < 0 ? index : index - 1; shrinking = change < 0 ? index - 1 : index; } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 4f5b3005d..40509c41b 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -41,7 +41,7 @@ export interface SchemaColumnHeaderProps { setSort: (field: string | undefined, desc?: boolean) => void; removeColumn: (index: number) => void; rowHeight: () => number; - resizeColumn: (e: any, index: number) => void; + resizeColumn: (e: any, index: number, isRight: boolean) => void; dragColumn: (e: any, index: number) => boolean; openContextMenu: (x: number, y: number, index: number) => void; setColRef: (index: number, ref: HTMLDivElement) => void; @@ -235,7 +235,7 @@ export class SchemaColumnHeader extends ObservableReactComponent -
this._props.resizeColumn(e, this._props.columnIndex)} /> +
this._props.resizeColumn(e, this._props.columnIndex, false)} />
{this.editableView}
@@ -245,7 +245,7 @@ export class SchemaColumnHeader extends ObservableReactComponent
-
this._props.resizeColumn(e, this._props.columnIndex)} /> +
this._props.resizeColumn(e, this._props.columnIndex, true)} />
); } -- cgit v1.2.3-70-g09d2 From e7235baa7ed998908dec8bf48e4c244594aa76bb Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 8 Sep 2024 18:42:12 -0400 Subject: schema changes reverted --- .../collectionSchema/CollectionSchemaView.tsx | 3 +- .../collectionSchema/SchemaCellField.tsx | 123 +-------------------- .../collectionSchema/SchemaColumnHeader.tsx | 2 +- .../collections/collectionSchema/SchemaRowBox.tsx | 5 +- .../collectionSchema/SchemaTableCell.tsx | 2 +- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 9 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 7 files changed, 16 insertions(+), 130 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 12c342b9f..59ccec71f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -46,7 +46,6 @@ import { SchemaCellField } from './SchemaCellField'; import { threadId } from 'worker_threads'; import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox'; -// eslint-disable-next-line @typescript-eslint/no-var-requires const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export const FInfotoColType: { [key: string]: ColumnType } = { @@ -1539,4 +1538,4 @@ class CollectionSchemaViewDocs extends React.Component ); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 3be9167fe..e1059b8fc 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -8,15 +8,6 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; import { Doc } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; -import { date } from "serializr"; -import { createRoot } from "react-dom/client"; -import DatePicker from "react-datepicker"; -import { emptyFunction } from "../../../../Utils"; -import { DateField } from "../../../../fields/DateField"; - -enum EleType { - plainText, fieldReference, date, boolean -} export interface SchemaCellFieldProps { contents: any; @@ -43,7 +34,6 @@ export class SchemaCellField extends ObservableReactComponent { - // if (!this._inputref) return; - - // const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); - - // dateRefs.forEach(ref => { - // const root = createRoot(ref); - // root.render(); - // }) - // } - - generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { + generateSpan = (text: string, cell: HTMLDivElement | undefined) => { const selfRef = text === this.selfRefPattern; - const color: string | undefined = cell?.style.borderTop.replace('2px solid', ''); - return ( - - {text} - - ); + return `${text}`; } makeSpans = (content: string) => { - const spans: JSX.Element[] = []; let chunkedText = content; const pattern = /(this|d(\d+))\.(\w+)/g; @@ -170,93 +140,17 @@ export class SchemaCellField extends ObservableReactComponent { - chunkedText = chunkedText.replace(match, ''); - spans.push(this.generateSpan(match, cells.get(match))); + chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); ++matchNum; }) - chunkedText = chunkedText.replace(/{{date}}/g, `placeholder text`); - return chunkedText; } - verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => { - const pattern = /(this|d(\d+))\.(\w+)/g; - let matchedText: string = ''; - let matchedCell: HTMLDivElement | undefined = undefined; - let match: RegExpExecArray | null; - - while ((match = pattern.exec(text)) !== null) { - const cells = this._props.getCells(match[0]); - if (cells.length) { - matchedText = match[0]; - matchedCell = cells[0]; - } - } - - if (!matchedText && !matchedCell) return undefined; - else return [matchedText, matchedCell]; - } - - elementsFromText = (chunks: string[]): JSX.Element[] => { - const eles: any[] = []; - - chunks.forEach(text => { - const cellRef = this.verifyCellRef(text); - if (cellRef) { - eles.push(this.generateSpan(cellRef[0], cellRef[1])); - } else if (text && !text.replace('{{date}}', '')){ - eles.push(); - } else if (text && !text.replace('{{boolean}}', '')) { - eles.push(boolean thing); - } else { - eles.push({text}); - } - }); - - return eles; - } - - parseElements = (content: string) => { - let string: string = content; - if (string.startsWith(':')) string = string.slice(1); - if (string.startsWith('=')) string = string.slice(1); - - const chunks: string[] = []; - - let subStr: string = ''; - let currChar = ''; - for (let i = 0; i < string.length; i++){ - currChar = string[i]; - if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { - chunks.push(subStr); - subStr = currChar; - } else { - subStr += currChar; - } - } - - if (subStr) {chunks.push(subStr)}; - - return this.elementsFromText(chunks); - } - - // ` | undefined) => { - // if ((value?.nativeEvent as any).shiftKey) { - // this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); - // } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); - // })} - // />` - @action setContent = (content: string, restoreCursorPos?: boolean) => { const pos = this.cursorPosition; - this._displayedContent = content; - this._displayedElements = this.parseElements(content); + this._displayedContent = this.makeSpans(content); restoreCursorPos && setTimeout(() => this.setCursorPosition(pos)); } @@ -339,9 +233,8 @@ export class SchemaCellField extends ObservableReactComponent this.parseElements(this._displayedContent).length) this.setContent(targVal, true); + if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; this.setupRefSelect(this.refSelectConditionMet); - console.log(this.parseElements(targVal)); }; setupRefSelect = (enabled: boolean) => { @@ -458,12 +351,8 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} onPointerUp={e => e.stopPropagation} onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} - suppressContentEditableWarning={true} - //dangerouslySetInnerHTML={{ __html: this._displayedContent }} + dangerouslySetInnerHTML={{ __html: this._displayedContent }} > - {this._displayedElements.map((ele, index) => { - return {ele}; - })}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 40509c41b..9f6478041 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -249,4 +249,4 @@ export class SchemaColumnHeader extends ObservableReactComponent ); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 72f5d8c25..ec94a8077 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -24,7 +24,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState'; import { TbShieldX } from 'react-icons/tb'; -import { DocumentType } from '../../../documents/DocumentTypes'; interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -78,7 +77,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { icon: 'minus', }); const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]) - if (childDocs.length) { + if (this.Document.type === 'collection' && childDocs.length) { ContextMenu.Instance.addItem({ description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema', event: () => { @@ -197,4 +196,4 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 7d29e40cc..e2a05da7f 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent -
+
{pointerEvents === 'none' ? null : ( diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index dcdd52c73..8273f3e09 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -375,7 +375,6 @@ export class DocCreatorMenu extends ObservableReactComponent { if (res && this._callCount === origCount) { this._suggestedTemplates = []; - this._GPTLoading = false; const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res); this.createGeneratedTemplates(templates, 500, 500); } @@ -714,7 +713,7 @@ export class DocCreatorMenu extends ObservableReactComponent { try { const renderedImages: Doc[] = await Promise.all( calls.map(async ([fieldNum, col]) => { - const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc; + const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc; const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT); console.log(sysPrompt, prompt); @@ -852,7 +851,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); if (res && this._callCount === origCount) { - this._GPTLoading = false; const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res); const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = []; @@ -889,7 +887,7 @@ export class DocCreatorMenu extends ObservableReactComponent { const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises); - setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) }); + setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates); this._GPTLoading = false }); }; @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => { @@ -908,6 +906,7 @@ export class DocCreatorMenu extends ObservableReactComponent {
{this._expandedPreview ?
+