diff options
Diffstat (limited to 'src')
4 files changed, 80 insertions, 21 deletions
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<EditableProps> { return wasFocused !== this._editing; }; + @action + setIsEditing = (value: boolean) => { + this._editing = value; + return this._editing; + } + renderEditor() { return this._props.autosuggestProps ? ( <Autosuggest @@ -328,9 +334,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div> </div> ) : ( - <div > - {this.renderEditor()} - </div> + 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<SchemaColumnHeaderProps> { + private _inputRef: EditableView | null = null; @observable _altTitle: string | undefined = undefined; @observable _showMenuIcon: boolean = false; @@ -118,14 +119,17 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea @computed get editableView() { const { color, fieldProps, pointerEvents } = this.renderProps(this._props); - return <div className='schema-column-edit-wrapper' onPointerUp={() => {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}} + return <div className='schema-column-edit-wrapper' onPointerUp={() => { + SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown(); + this._props.schemaView.deselectAllCells(); + }} style={{ color, width: '100%', pointerEvents, }}> <EditableView - ref={r => 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<SchemaColumnHea }} onPointerEnter={() => {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<SchemaTableCellPro width: '100%', pointerEvents: this.lockedInteraction ? 'none' : pointerEvents, }}> - <SchemaCellField + <EditableView highlightCells={this.adjustedHighlight} ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} |