From 9e809f8748d1812bb03ec6471aa6f97467f8f75a Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 23 Apr 2024 16:20:08 -0400 Subject: fixes for rich text menu updates and setting parameters on text doc vs within in RTF. Lots of lint cleanup. --- .../collectionSchema/CollectionSchemaView.tsx | 181 +++++++++++++++------ 1 file changed, 130 insertions(+), 51 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 46bf56dc8..ee79812a1 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-restricted-syntax */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Popup, PopupTrigger, Type } from 'browndash-components'; import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; @@ -31,6 +32,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; + const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export const FInfotoColType: { [key: string]: ColumnType } = { @@ -90,12 +92,11 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get _selectedDocs() { const selected = SelectionManager.Docs.filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)); if (!selected.length) { - for (const sel of SelectionManager.Docs) { - const contextPath = DocumentManager.GetContextPath(sel, true); - if (contextPath.includes(this.Document)) { - const parentInd = contextPath.indexOf(this.Document); - return parentInd < contextPath.length - 1 ? [contextPath[parentInd + 1]] : []; - } + // 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 = SelectionManager.Docs.find(sel => DocumentManager.GetContextPath(sel, true).includes(this.Document)); + if (childOfSchemaDoc) { + const contextPath = DocumentManager.GetContextPath(childOfSchemaDoc, true); + return [contextPath[contextPath.indexOf(childOfSchemaDoc) - 1]]; // the schema doc that is "selected" by virtue of one of its children being selected } } return selected; @@ -158,7 +159,9 @@ export class CollectionSchemaView extends CollectionSubView() { Object.keys(proto).forEach(action(key => // check if any of its keys are new, and add them !this.fieldInfos.get(key) && this.fieldInfos.set(key, new FInfo("-no description-", key === 'author')))))); break; - case 'update': //let oldValue = change.oldValue; // fill this in if the entire child list will ever be reassigned with a new list + case 'update': // let oldValue = change.oldValue; // fill this in if the entire child list will ever be reassigned with a new list + break; + default: } }, true @@ -187,7 +190,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._selectedDocs.includes(newDoc)) { SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); } else { - this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1); + this.addDocToSelection(newDoc, e.shiftKey); this._selectedCell && (this._selectedCell[0] = newDoc); this.scrollToDoc(newDoc, {}); } @@ -206,7 +209,7 @@ export class CollectionSchemaView extends CollectionSubView() { const newDoc = this.sortedDocs.docs[firstIndex - 1]; if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); else { - this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1); + this.addDocToSelection(newDoc, e.shiftKey); this._selectedCell && (this._selectedCell[0] = newDoc); this.scrollToDoc(newDoc, {}); } @@ -235,7 +238,9 @@ export class CollectionSchemaView extends CollectionSubView() { } case 'Escape': { this.deselectCell(); + break; } + default: } } }; @@ -254,7 +259,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); } - let currKeys = [...this.columnKeys]; + const currKeys = [...this.columnKeys]; currKeys[index] = newKey; this.layoutDoc.schema_columnKeys = new List(currKeys); }; @@ -271,13 +276,16 @@ export class CollectionSchemaView extends CollectionSubView() { const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); this.layoutDoc.schema_columnWidths = new List(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth))); - let currKeys = this.columnKeys.slice(); + const currKeys = this.columnKeys.slice(); currKeys.splice(0, 0, key); this.layoutDoc.schema_columnKeys = new List(currKeys); }; @action - addNewKey = (key: string, defaultVal: any) => this.childDocs.forEach(doc => (doc[DocData][key] = defaultVal)); + addNewKey = (key: string, defaultVal: any) => + this.childDocs.forEach(doc => { + doc[DocData][key] = defaultVal; + }); @undoBatch removeColumn = (index: number) => { @@ -287,7 +295,7 @@ export class CollectionSchemaView extends CollectionSubView() { const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); this.layoutDoc.schema_columnWidths = new List(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth))); - let currKeys = this.columnKeys.slice(); + const currKeys = this.columnKeys.slice(); currKeys.splice(index, 1); this.layoutDoc.schema_columnKeys = new List(currKeys); }; @@ -295,7 +303,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action startResize = (e: any, index: number) => { this._displayColumnWidths = this.storedColumnWidths; - setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index), this.finishResize, emptyFunction); + setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index), this.finishResize, emptyFunction); }; @action @@ -334,11 +342,11 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch moveColumn = (fromIndex: number, toIndex: number) => { - let currKeys = this.columnKeys.slice(); + const currKeys = this.columnKeys.slice(); currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]); this.layoutDoc.schema_columnKeys = new List(currKeys); - let currWidths = this.storedColumnWidths.slice(); + const currWidths = this.storedColumnWidths.slice(); currWidths.splice(toIndex, 0, currWidths.splice(fromIndex, 1)[0]); this.layoutDoc.schema_columnWidths = new List(currWidths); }; @@ -352,7 +360,7 @@ export class CollectionSchemaView extends CollectionSubView() { document.removeEventListener('pointermove', this.highlightDropColumn); document.addEventListener('pointermove', this.highlightDropColumn); - let stopHighlight = (e: PointerEvent) => { + const stopHighlight = () => { document.removeEventListener('pointermove', this.highlightDropColumn); document.removeEventListener('pointerup', stopHighlight); }; @@ -405,7 +413,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { + addDocToSelection = (doc: Doc, extendSelection: boolean) => { const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); }; @@ -420,19 +428,25 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; - if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i); + if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true); } }; @action - selectCell = (doc: Doc, index: number) => (this._selectedCell = [doc, index]); + selectCell = (doc: Doc, index: number) => { + this._selectedCell = [doc, index]; + }; @action - deselectCell = () => (this._selectedCell = undefined); + deselectCell = () => { + this._selectedCell = undefined; + }; sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); - setDropIndex = (index: number) => (this._closestDropIndex = index); + setDropIndex = (index: number) => { + this._closestDropIndex = index; + }; onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { @@ -476,7 +490,7 @@ export class CollectionSchemaView extends CollectionSubView() { onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction); @action - onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { + onDividerMove = (e: PointerEvent) => { const nativeWidth = this._previewRef!.getBoundingClientRect(); const minWidth = 40; const maxWidth = 1000; @@ -506,37 +520,76 @@ export class CollectionSchemaView extends CollectionSubView() { const rect = found.getBoundingClientRect(); const localRect = this.ScreenToLocalBoxXf().transformBounds(rect.left, rect.top, rect.width, rect.height); if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this._props.PanelHeight()) { - let focusSpeed = options.zoomTime ?? 50; + const focusSpeed = options.zoomTime ?? 50; smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - this.rowHeightFunc(), options.easeFunc); return focusSpeed; } } + return undefined; }; @computed get fieldDefaultInput() { switch (this._newFieldType) { case ColumnType.Number: - return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + return ( + e.stopPropagation()} + onChange={action(e => { + this._newFieldDefault = e.target.value; + })} + /> + ); case ColumnType.Boolean: return ( <> - e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> + e.stopPropagation()} + onChange={action(e => { + this._newFieldDefault = e.target.checked; + })} + /> {this._newFieldDefault ? 'true' : 'false'} ); case ColumnType.String: - return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + return ( + e.stopPropagation()} + onChange={action(e => { + this._newFieldDefault = e.target.value; + })} + /> + ); + default: + return undefined; } } onSearchKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Enter': - this._menuKeys.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuKeys[0]) : action(() => (this._makeNewField = true))(); + this._menuKeys.length > 0 && this._menuValue.length > 0 + ? this.setKey(this._menuKeys[0]) + : action(() => { + this._makeNewField = true; + })(); break; case 'Escape': this.closeColumnMenu(); break; + default: } }; @@ -568,7 +621,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - closeColumnMenu = () => (this._columnMenuIndex = undefined); + closeColumnMenu = () => { + this._columnMenuIndex = undefined; + }; @action openFilterMenu = (index: number) => { @@ -577,7 +632,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - closeFilterMenu = () => (this._filterColumnIndex = undefined); + closeFilterMenu = () => { + this._filterColumnIndex = undefined; + }; openContextMenu = (x: number, y: number, index: number) => { this.closeColumnMenu(); @@ -607,7 +664,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); }; - getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] == field); + getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] === field); removeFieldFilters = (field: string) => { this.getFieldFilters(field).forEach(filter => Doc.setDocFilter(this.Document, field, filter.split(Doc.FilterSep)[1], 'remove')); @@ -619,11 +676,14 @@ export class CollectionSchemaView extends CollectionSubView() { case 'Escape': this.closeFilterMenu(); break; + default: } }; @action - updateFilterSearch = (e: React.ChangeEvent) => (this._filterSearchValue = e.target.value); + updateFilterSearch = (e: React.ChangeEvent) => { + this._filterSearchValue = e.target.value; + }; @computed get newFieldMenu() { return ( @@ -632,7 +692,7 @@ export class CollectionSchemaView extends CollectionSubView() { { this._newFieldType = ColumnType.Number; this._newFieldDefault = 0; @@ -644,7 +704,7 @@ export class CollectionSchemaView extends CollectionSubView() { { this._newFieldType = ColumnType.Boolean; this._newFieldDefault = false; @@ -656,7 +716,7 @@ export class CollectionSchemaView extends CollectionSubView() { { this._newFieldType = ColumnType.String; this._newFieldDefault = ''; @@ -668,7 +728,7 @@ export class CollectionSchemaView extends CollectionSubView() {
{this._newFieldWarning}
{ + onPointerDown={action(() => { if (this.documentKeys.includes(this._menuValue)) { this._newFieldWarning = 'Field already exists'; } else if (this._menuValue.length === 0) { @@ -733,7 +793,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get renderColumnMenu() { - const x = this._columnMenuIndex! == -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); return (
e.stopPropagation()} /> @@ -817,7 +877,7 @@ export class CollectionSchemaView extends CollectionSubView() { : [...this.childDocs].sort((docA, docB) => { const aStr = Field.toString(docA[field] as FieldType); const bStr = Field.toString(docB[field] as FieldType); - var out = 0; + let out = 0; if (aStr < bStr) out = -1; if (aStr > bStr) out = 1; if (desc) out *= -1; @@ -835,7 +895,7 @@ export class CollectionSchemaView extends CollectionSubView() { render() { return (
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)}> -
+
this.openColumnMenu(-1, true)} icon="plus" />} + toggle={ this.openColumnMenu(-1, true)} icon="plus" />} trigger={PopupTrigger.CLICK} type={Type.TERT} isOpen={this._columnMenuIndex !== -1 ? false : undefined} @@ -860,6 +920,7 @@ export class CollectionSchemaView extends CollectionSubView() {
{this.columnKeys.map((key, index) => ( {this._columnMenuIndex !== undefined && this._columnMenuIndex !== -1 && this.renderColumnMenu} {this._filterColumnIndex !== undefined && this.renderFilterMenu} - (this._tableContentRef = ref)} /> + { + // eslint-disable-next-line no-use-before-define + { + this._tableContentRef = ref; + }} + /> + } {this.layoutDoc.chromeHidden ? null : (
(value ? this.addRow(Docs.Create.TextDocument(value, { title: value, _layout_autoHeight: true })) : false), 'add text doc')} placeholder={"Type text to create note or ':' to create specific type"} - contents={'+ New Node'} + contents="+ New Node" menuCallback={this.menuCallback} height={CollectionSchemaView._newNodeInputHeight} />
)}
- {this.previewWidth > 0 &&
} + {this.previewWidth > 0 &&
} {this.previewWidth > 0 && ( -
(this._previewRef = ref)}> +
{ + this._previewRef = ref; + }}> {Array.from(this._selectedDocs).lastElement() && ( {this.props.childDocs().docs.map((doc: Doc, index: number) => (
- + { + // eslint-disable-next-line no-use-before-define + + }
))}
@@ -977,6 +1055,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent ); -- cgit v1.2.3-70-g09d2