diff options
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 101 |
1 files changed, 83 insertions, 18 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index b1284fe31..d8f69b26a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -104,7 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _highlightedCells: Array<HTMLDivElement> = []; @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>(); @observable _docs: Doc[] = []; - + // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { return this._menuTarget.current; @@ -198,6 +198,11 @@ export class CollectionSchemaView extends CollectionSubView() { (docs) => this._docs = docs, {fireImmediately: true} ) + this._disposers.sortHighlight = reaction( + () => [this.sortField, this._docs], + () => {setTimeout(() => this.highlightSortedColumn(), 5)}, + {fireImmediately: true} + ) } componentWillUnmount() { @@ -285,6 +290,7 @@ export class CollectionSchemaView extends CollectionSubView() { break; } case 'P': { + this.highlightSortedColumn(); break; } default: @@ -475,8 +481,8 @@ export class CollectionSchemaView extends CollectionSubView() { const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; const cellEles = [ colRef, - ...this.docs - .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) + ...this.docsWithDrag.docs + .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc) || this.columnKeys.indexOf(this.sortField)) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; cellEles[0].style.borderTop = edgeStyle; @@ -487,6 +493,43 @@ export class CollectionSchemaView extends CollectionSubView() { cellEles.slice(-1)[0].style.borderBottom = edgeStyle; }); + highlightSortedColumn = (field?: string, descending?: boolean) => { + console.log('field: ' + field + ' desc: ' + descending); + let index = -1; + let highlightColors: string[] = []; + if (field || this.sortField){ + index = this.columnKeys.indexOf(field || this.sortField); + //console.log(index) + const rowCount: number = this._rowEles.size + 1; + const increment: number = 100/rowCount; + for (let i = 0; i < rowCount; ++i){ + const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i); + highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`); + } + } + + this._colEles.forEach((colRef, i) => { + const highlight: boolean = i === index; + const desc: boolean = descending || this.sortDesc; + //console.log(desc) + const cellEles = [ + colRef, + ...this.docsWithDrag.docs + .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) + .map(doc => this._rowEles.get(doc).children[1].children[i]), + ]; + const cellCount = cellEles.length; + for (let ele = 0; ele < cellCount; ++ele){ + const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : ''; + cellEles[ele].style.borderLeft = style; + cellEles[ele].style.borderRight = style; + } + cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : ''; + cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; + }); + + } + getCellElement = (doc: Doc, fieldKey: string) => { const index = this.columnKeys.indexOf(fieldKey); console.log(doc.title) @@ -545,6 +588,7 @@ export class CollectionSchemaView extends CollectionSubView() { cell.style.border = this._cellHighlightColors.get(cell)[0]; cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1]; }); + } @action @@ -577,7 +621,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.docs[i]; + const currDoc = this.docsWithDrag.docs[i]; if (!this._selectedDocs.includes(currDoc)) { this.selectCell(currDoc, this._selectedCol, false, true); } @@ -846,22 +890,46 @@ export class CollectionSchemaView extends CollectionSubView() { 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._docs = this.sortDocs(this.columnKeys[index], false), icon: 'arrow-down-a-z',}); // prettier-ignore - sortOptions.push({description: 'Sort Z-A', event: () => this._docs = this.sortDocs(this.columnKeys[index], true), icon: 'arrow-up-z-a'}); // prettier-ignore + sortOptions.push({ + description: 'Sort A-Z', + event: () => { + this.setColumnSort(undefined); + const field = this.columnKeys[index]; + this._docs = this.sortDocs(field, false); + setTimeout(() => this.highlightSortedColumn(field, false), 20); + setTimeout(() => this.highlightSortedColumn(), 500); + }, + icon: 'arrow-down-a-z',}); + sortOptions.push({ + description: 'Sort Z-A', + event: () => { + this.setColumnSort(undefined); + const field = this.columnKeys[index]; + this._docs = this.sortDocs(field, true); + setTimeout(() => this.highlightSortedColumn(field, true), 20); + setTimeout(() => this.highlightSortedColumn(), 500); + }, + icon: 'arrow-up-z-a'}); sortOptions.push({ description: 'Persistent Sort A-Z', event: () => { if (fieldSortedAsc){ - this.setColumnSort(undefined) - } else this.setColumnSort(this.columnKeys[index], false) + this.setColumnSort(undefined); + } else { + this.sortDocs(this.columnKeys[index], false); + 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) + this.setColumnSort(undefined); + } else { + this.sortDocs(this.columnKeys[index], true); + this.setColumnSort(this.columnKeys[index], true); + } }, icon: fieldSortedDesc ? 'lock' : 'lock-open'}); // prettier-ignore @@ -1120,11 +1188,9 @@ export class CollectionSchemaView extends CollectionSubView() { return docs; } - @action - sortDocs = (field: string, desc: boolean) => { - console.log('called') - const numbers: Doc[] = this.docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType)))); - const strings = this.docs.filter(doc => !numbers.includes(doc)); + sortDocs = (field: string, desc: boolean, persistent?: boolean) => { + const numbers: Doc[] = this._docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType)))); + const strings = this._docs.filter(doc => !numbers.includes(doc)); const sortedNums = numbers.sort((numOne, numTwo) => { const numA = Number(Field.toString(numOne[field] as FieldType)); @@ -1138,17 +1204,16 @@ export class CollectionSchemaView extends CollectionSubView() { } else sortedStrings = strings.slice().sort((docB, docA) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType))); const sortedDocs = desc ? sortedNums.concat(sortedStrings) : sortedStrings.concat(sortedNums); + if (!persistent) this._docs = sortedDocs; return sortedDocs; } @computed get docsWithDrag() { let docs = this._docs; - console.log('docrender called') if (this.sortField){ - console.log(true) const field = StrCast(this.layoutDoc.sortField); const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort - docs = this.sortDocs(field, desc); + docs = this.sortDocs(field, desc, true); } else { const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : []; docs = docs.filter(d => !draggedDocs.includes(d)); |