diff options
Diffstat (limited to 'src')
3 files changed, 54 insertions, 25 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 033bc74d2..25a1b4819 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -325,17 +325,6 @@ 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(); - let matches; - let results = new Map<string, string>(); - while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); } - results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());}) - return modField; - } - @undoBatch removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; @@ -480,7 +469,7 @@ export class CollectionSchemaView extends CollectionSubView() { const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; const cellEles = [ colRef, - ...this.childDocs + ...this.docs .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; @@ -534,7 +523,6 @@ export class CollectionSchemaView extends CollectionSubView() { if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells.push(doc); - this._selectedCells.forEach(d => console.log(d.title)) const index = this.rowIndex(doc); if (!this) return; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 98a16deea..a8affb0d9 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -87,7 +87,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { ContextMenu.Instance.displayMenu(x, y, undefined, false); } - get menuBackgroundColor(){ + @computed get menuBackgroundColor(){ if (this.Document._lockedSchemaEditing){ if (this._props.isSelected()) return '#B0D1E7' else return '#F5F5F5' @@ -95,14 +95,22 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { return '' } - get menuInfos() { + @computed get menuInfos() { const infos: Array<IconProp> = []; if (this.Document._lockedSchemaEditing) infos.push('lock'); if (this.Document._childrenSharedWithSchema) infos.push('star'); return infos; } - cleanupField = (field: string) => this.schemaView.cleanupComputedField(field) + @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]); + toReturn[0] = selectedAbove; + toReturn[1] = selectedBelow; + return toReturn; + } + setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); @@ -111,6 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { selectedCells = () => this.schemaView?._selectedDocs; 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); render() { return ( <div @@ -121,9 +130,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; }}> - <div className="row-menu-infos"> - {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)} - </div> <div className="row-menu" style={{ @@ -149,10 +155,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { ) } /> + <div className="row-menu-infos"> + {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)} + </div> </div> <div className="row-cells"> {this.schemaView?.columnKeys?.map((key, index) => ( <SchemaTableCell + isolatedSelection={this.isolatedSelection} key={key} rowSelected={this._props.isSelected} Document={this.Document} @@ -170,7 +180,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { setColumnValues={this.setColumnValues} oneLine={BoolCast(this.schemaDoc?._singleLine)} menuTarget={this.schemaView.MenuTarget} - cleanupField={this.cleanupField} transform={() => { const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index; const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 791465741..c8bd48019 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -13,7 +13,7 @@ import Select from 'react-select'; import { ClientUtils, StopEvent, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; -import { Doc, DocListCast, Field } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types'; @@ -33,6 +33,7 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; +import { ContextMenu } from '../../ContextMenu'; export interface SchemaTableCellProps { Document: Doc; @@ -57,8 +58,8 @@ export interface SchemaTableCellProps { transform: () => Transform; autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click rootSelected?: () => boolean; - cleanupField: (field: string) => string; rowSelected: () => boolean; + isolatedSelection: [boolean, boolean]; } function selectedCell(props: SchemaTableCellProps) { @@ -137,13 +138,32 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro return { color, textDecoration, fieldProps, cursor, pointerEvents }; } + // openContextMenu = () => { + // const cm = ContextMenu.Instance; + // cm.clearItems(); + + + // } + + // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability + cleanupField = (field: string) => { + const idPattern = /idToDoc\((.*?)\)/g; + let modField = field.slice(); + let matches; + let results = new Map<string, string>(); + while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); } + results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());}) + if (!modField) modField = ''; + return modField; + } + @computed get defaultCellContent() { const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props); - return ( <div className="schemacell-edit-wrapper" + // onContextMenu={} style={{ color, textDecoration, @@ -157,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro contents={undefined} fieldContents={fieldProps} editing={selectedCell(this._props) ? undefined : false} - GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc + 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); @@ -201,6 +221,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } } + @computed get borderColor() { + const sides: Array<string | undefined> = []; + sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left + sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right + sides[2] = (!this._props.isolatedSelection[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top + sides[3] = (!this._props.isolatedSelection[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom + return sides; + } + render() { return ( <div @@ -220,7 +249,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, - border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined, + borderLeft: this.borderColor[0], + borderRight: this.borderColor[1], + borderTop: this.borderColor[2], + borderBottom: this.borderColor[3], backgroundColor: this.backgroundColor}}> {this.isDefault ? '' : this.content} </div> |