diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 178 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx | 71 |
2 files changed, 69 insertions, 180 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 8bccb0c0a..ee1ea67d4 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -24,41 +24,46 @@ import { LightboxView } from "../LightboxView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView"; import { StyleProp } from "../StyleProvider"; -import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow"; import "./CollectionStackingView.scss"; import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; import internal = require("events"); +import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn"; const _global = (window /* browser */ || global /* node */) as any; type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>; const StackingDocument = makeInterface(collectionSchema, documentSchema); -export type collectionStackingViewProps = { +export type collectionNoteTakingViewProps = { chromeHidden?: boolean; - // view type is stacking viewType?: CollectionViewType; NativeWidth?: () => number; NativeHeight?: () => number; + numColumns?: number; }; @observer -export class CollectionNoteTakingView extends CollectionSubView<StackingDocument, Partial<collectionStackingViewProps>>(StackingDocument) { - // do we need a masonry grid here? We think that they are sharing data - _masonryGridRef: HTMLDivElement | null = null; +export class CollectionNoteTakingView extends CollectionSubView<StackingDocument, Partial<collectionNoteTakingViewProps>>(StackingDocument) { // used in a column dragger, likely due for the masonry grid view. We want to use this _draggerRef = React.createRef<HTMLDivElement>(); - // Not sure what a pivot field is. Seems like we cause reaction in MobX get rid of it once we exit this view - _pivotFieldDisposer?: IReactionDisposer; // Seems like we cause reaction in MobX get rid of our height once we exit this view _autoHeightDisposer?: IReactionDisposer; // keeping track of documents. Updated on internal and external drops. What's the difference? _docXfs: { height: () => number, width: () => number, stackedDocTransform: () => Transform }[] = []; // Doesn't look like this field is being used anywhere. Obsolete? _columnStart: number = 0; - // map of node headers to their heights. Used in Masonry - @observable _heightMap = new Map<string, number>(); + + //--------------------------------------------------------------------------------------------------------------// + // TODO: these are things that I added but not sure that they actually belong here + // We may not need to actually keep track of the numColumns + _noteTakingRef: HTMLDivElement | null = null; + _numColumns: number = this.props.numColumns ? this.props.numColumns : 1; + @computed get numColumns() { return this._numColumns} + @computed get columnIndex() { return StrCast(this.layoutDoc._columnIndex); } + @computed get columnWidth() { return Number.MAX_VALUE } + //--------------------------------------------------------------------------------------------------------------// + // Assuming that this is the current css cursor style @observable _cursor: CursorProperty = "grab"; // gets reset whenever we scroll. Not sure what it is @@ -67,8 +72,6 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument @computed get chromeHidden() { return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); } // it looks like this gets the column headers that Mehek was showing just now @computed get columnHeaders() { return Cast(this.layoutDoc._columnHeaders, listSpec(SchemaHeaderField), null); } - // Still not sure what a pivot is, but it appears that we can actually filter docs somehow? - @computed get pivotField() { return StrCast(this.layoutDoc._pivotField); } // filteredChildren is what you want to work with. It's the list of things that you're currently displaying @computed get filteredChildren() { return this.childLayoutPairs.filter(pair => (pair.layout instanceof Doc) && !pair.layout.hidden).map(pair => pair.layout); } // how much margin we give the header @@ -76,18 +79,6 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); } @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); } @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); } - // are we stacking or masonry? - //TODO: we might need to remove the notetaking view type - @computed get isStackingView() { return ((this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking) || ((this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.NoteTaking); } - // this is the number of StackingViewFieldColumns that we have - @computed get numGroupColumns() { return (this.isStackingView || CollectionViewType.NoteTaking)? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } - // reveals a button to add a group in masonry view - @computed get showAddAGroup() { return this.pivotField && !this.chromeHidden; } - // columnWidth handles the margin on the left and right side of the documents - @computed get columnWidth() { - return Math.min(this.props.PanelWidth() - 2 * this.xMargin, - (this.isStackingView || CollectionViewType.NoteTaking) ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250)); - } @computed get NodeWidth() { return this.props.PanelWidth() - this.gridGap; } @@ -95,77 +86,60 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument super(props); if (this.columnHeaders === undefined) { - // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out? - // here we're making an empty list of column headers (again, what Mehek showed us) + // TODO: need to set these equal to the indexes this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(); } + } - // TODO: plj - these are the children children = (docs: Doc[]) => { - //TODO: can somebody explain me to what exactly TraceMobX is? TraceMobx(); - // appears that we are going to reset the _docXfs. TODO: what is Xfs? this._docXfs.length = 0; // Go through each of the documents that are contained return docs.map((d, i) => { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); - // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns - const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); // just getting the style - const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; + const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() }; // So we're choosing whether we're going to render a column or a masonry doc - return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} > - {/* <div className="hoverButtons"> */} - {/* We'll want to add an onPointerDown that uses DragManager.DocumentDragData - -- we also want to remember to preventDefault (so other drag events are not recognized over this one) - -- Design discussion as to whether we want dragging to be on the document itself or with a drag button - -- Do we want clicking on this button to do anything as well? - -- Design Question: Schema view also has the notion of a drag manager (different from this one), do we want - the same functionality? - -- Problem: This only shows when the outer container is selected... - */} - {/* <div className="buttonWrapper"> - <FontAwesomeIcon icon={"grip-vertical"} onPointerDown={ e => e.stopPropagation()} /> - </div> - </div> */} - {/* some sort of filtering is being done here to actually get layout and make the doc look pretty*/} + return <div className={"collectionNoteTakingView-columnDoc"} key={d[Id]} style={style} > {this.getDisplayDoc(d, width)} </div> }); } - @action - setDocHeight = (key: string, sectionHeight: number) => { - this._heightMap.set(key, sectionHeight); - } + + // @action + // setDocHeight = (key: string, sectionHeight: number) => { + // this._heightMap.set(key, sectionHeight); + // } // is sections that all collections inherit? I think this is how we show the masonry/columns //TODO: this seems important get Sections() { - // appears that pivot field IS actually for sorting - if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>(); + // if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>(); if (this.columnHeaders === undefined) { setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0); return new Map<SchemaHeaderField, Doc[]>(); } + const columnHeaders = Array.from(this.columnHeaders); const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); let changed = false; this.filteredChildren.map(d => { - const sectionValue = (d[this.pivotField] ? d[this.pivotField] : `NO ${this.pivotField.toUpperCase()} VALUE`) as object; + // need to set the section value + const sectionValue = d[this.columnIndex] as object; // the next five lines ensures that floating point rounding errors don't create more than one section -syip const parsed = parseInt(sectionValue.toString()); const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue; // look for if header exists already - const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO ${this.pivotField.toUpperCase()} VALUE`)); + const existingHeader = columnHeaders.find(sh => sh.heading === castedSectionValue.toString()); if (existingHeader) { fields.get(existingHeader)!.push(d); } else { - const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `NO ${this.pivotField.toUpperCase()} VALUE`); + const newSchemaHeader = new SchemaHeaderField(castedSectionValue.toString()); fields.set(newSchemaHeader, [d]); columnHeaders.push(newSchemaHeader); changed = true; @@ -186,23 +160,14 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument componentDidMount() { super.componentDidMount?.(); - - // reset section headers when a new filter is inputted - this._pivotFieldDisposer = reaction( - () => this.pivotField, - () => this.layoutDoc._columnHeaders = new List() - ); - //TODO: where the heck are we getting filters from? this._autoHeightDisposer = reaction(() => this.layoutDoc._autoHeight, autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), - this.headerMargin + (this.isStackingView ? - Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))) : - this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0))))); + this.headerMargin + + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", ""))))))); } componentWillUnmount() { super.componentWillUnmount(); - this._pivotFieldDisposer?.(); this._autoHeightDisposer?.(); } @@ -211,7 +176,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; } createRef = (ele: HTMLDivElement | null) => { - this._masonryGridRef = ele; + this._noteTakingRef = ele; this.createDashEventsTarget(ele!); //so the whole grid is the drop target? } @@ -334,7 +299,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument if (this.columnWidth < 150){ margin = 0; } - const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2); + const maxWidth = (this.columnWidth / this.numColumns) - (margin * 2); if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) { return Math.min(d[WidthSym](), maxWidth); } @@ -348,7 +313,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0); const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0); if (nw && nh) { - const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1); + const colWid = this.columnWidth / this.numColumns; const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid); return Math.min( maxHeight, @@ -422,7 +387,8 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height()); if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { dropInd = i; - const axis = this.isStackingView ? 1 : 0; + //TODO: not sure what the axis should actually be. Had a ternary previously with 0/1 + const axis = 1; dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } }); @@ -495,16 +461,16 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument refList: any[] = []; // what a section looks like if we're in stacking view sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { - const key = this.pivotField; + const key = this.columnIndex; let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; - if (this.pivotField) { + if (this.columnIndex) { const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]); if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) { type = types[0]; } } //TODO: I think that we only have one of these atm - return <CollectionStackingViewFieldColumn + return <CollectionNoteTakingViewFieldColumn unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)} observeHeight={ref => { if (ref) { @@ -529,9 +495,9 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument DataDoc={this.props.DataDoc} renderChildren={this.children} columnWidth={this.columnWidth} - numGroupColumns={this.numGroupColumns} + columnIndex={this.columnIndex} + numColumns={this.numColumns} gridGap={this.gridGap} - pivotField={this.pivotField} key={heading?.heading ?? ""} headings={this.headings} heading={heading?.heading ?? ""} @@ -544,55 +510,13 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument />; } - // what a section looks like if we're in masonry. Shouldn't actually need to use this. - // sectionMasonry = (heading: SchemaHeaderField | undefined, docList: Doc[], first: boolean) => { - // const key = this.pivotField; - // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; - // const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]); - // if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) { - // type = types[0]; - // } - // const rows = () => !this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, - // Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); - // return <CollectionMasonryViewFieldRow - // showHandle={first} - // Document={this.props.Document} - // chromeHidden={this.chromeHidden} - // pivotField={this.pivotField} - // unobserveHeight={(ref) => this.refList.splice(this.refList.indexOf(ref), 1)} - // observeHeight={(ref) => { - // if (ref) { - // this.refList.push(ref); - // this.observer = new _global.ResizeObserver(action((entries: any) => { - // if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { - // const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0); - // this.props.setHeight(this.headerMargin + height); - // } - // })); - // this.observer.observe(ref); - // } - // }} - // key={heading ? heading.heading : ""} - // rows={rows} - // headings={this.headings} - // heading={heading ? heading.heading : ""} - // headingObject={heading} - // docList={docList} - // parent={this} - // type={type} - // createDropTarget={this.createDashEventsTarget} - // screenToLocalTransform={this.props.ScreenToLocalTransform} - // setDocHeight={this.setDocHeight} - // />; - // } - @action // What are we adding a group to? addGroup = (value: string) => { if (value && this.columnHeaders) { const schemaHdrField = new SchemaHeaderField(value); this.columnHeaders.push(schemaHdrField); - DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); + DocUtils.addFieldEnumerations(undefined, this.columnIndex, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); return true; } return false; @@ -620,7 +544,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument @computed get renderedSections() { TraceMobx(); let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]]; - if (this.pivotField) { + if (this.columnIndex) { const entries = Array.from(this.Sections.entries()); sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries; } @@ -699,7 +623,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument } </div> : null} <div className="collectionStackingMasonry-cont" > - <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"} + <div className={"collectionNoteTakingView"} ref={this.createRef} style={{ overflowY: this.props.isContentActive() ? "auto" : "hidden", @@ -713,15 +637,11 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument onContextMenu={this.onContextMenu} // Todo: what is wheel? Are we talking about a mouse wheel? onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > - {/* so it appears that we are actually rendering the sections. Maybe this is what we're looking for? */} {this.renderedSections} - {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed - Or it's because we aren't passing a pivot field */} - {!this.showAddAGroup ? (null) : - <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" - style={{ width: !this.isStackingView ? "100%" : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}> - <EditableView {...editableViewProps} /> - </div>} + <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" + style={{ width: this.columnWidth / this.numColumns - 10, marginTop: 10 }}> + <EditableView {...editableViewProps} /> + </div> {/* {this.chromeHidden || !this.props.isSelected() ? (null) : <Switch onChange={this.onToggle} diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx index c191445e7..535411118 100644 --- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx @@ -3,13 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Id } from "../../../fields/FieldSymbols"; import { RichTextField } from "../../../fields/RichTextField"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { ScriptField } from "../../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { NumCast } from "../../../fields/Types"; import { ImageField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils"; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager } from "../../util/DragManager"; @@ -19,30 +20,27 @@ import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; -import "./CollectionStackingView.scss"; import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox"; -import { Id } from "../../../fields/FieldSymbols"; +import "./CollectionStackingView.scss"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -// So this is how we are storing a column interface CSVFieldColumnProps { Document: Doc; DataDoc: Opt<Doc>; docList: Doc[]; heading: string; - pivotField: string; + columnIndex: string; chromeHidden?: boolean; columnHeaders: SchemaHeaderField[] | undefined; headingObject: SchemaHeaderField | undefined; yMargin: number; columnWidth: number; - numGroupColumns: number; + numColumns: number; gridGap: number; type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined; headings: () => object[]; - // I think that stacking view actually has a single column and then supposedly you can add more columns? Unsure renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -52,15 +50,15 @@ interface CSVFieldColumnProps { } @observer -export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldColumnProps> { +export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFieldColumnProps> { @observable private _background = "inherit"; private dropDisposer?: DragManager.DragDropDisposer; private _headerRef: React.RefObject<HTMLDivElement> = React.createRef(); - @observable _paletteOn = false; + // @observable _paletteOn = false; @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; - @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; + // @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; _ele: HTMLElement | null = null; // This is likely similar to what we will be doing. Why do we need to make these refs? @@ -81,8 +79,9 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @undoBatch columnDrop = action((e: Event, de: DragManager.DropEvent) => { const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; - drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); + drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.columnIndex, drop.val, false)); }); + getValue = (value: string): any => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; @@ -92,13 +91,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC } @action - headingChanged = (value: string, shiftDown?: boolean) => { + headingChanged = (value: string) => { const castedValue = this.getValue(value); if (castedValue) { if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { return false; } - this.props.docList.forEach(d => d[this.props.pivotField] = castedValue); + this.props.docList.forEach(d => d[this.props.columnIndex] = castedValue); if (this.props.headingObject) { this.props.headingObject.setHeading(castedValue.toString()); this._heading = this.props.headingObject.heading; @@ -108,12 +107,6 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC return false; } - @action - changeColumnColor = (color: string) => { - this.props.headingObject?.setColor(color); - this._color = color; - } - @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4"); @action pointerLeave = () => this._background = "inherit"; textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true); @@ -121,7 +114,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; - const key = this.props.pivotField; + const key = this.props.columnIndex; const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _fitWidth: true, title: value, _autoHeight: true }); newDoc[key] = this.getValue(this.props.heading); const maxHeading = this.props.docList.reduce((maxHeading, doc) => NumCast(doc.heading) > maxHeading ? NumCast(doc.heading) : maxHeading, 0); @@ -134,7 +127,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @action deleteColumn = () => { - this.props.docList.forEach(d => d[this.props.pivotField] = undefined); + this.props.docList.forEach(d => d[this.props.columnIndex] = undefined); if (this.props.columnHeaders && this.props.headingObject) { const index = this.props.columnHeaders.indexOf(this.props.headingObject); this.props.columnHeaders.splice(index, 1); @@ -157,7 +150,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC alias._pivotField = undefined; let value = this.getValue(this._heading); value = typeof value === "string" ? `"${value}"` : value; - alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name }); + alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.columnIndex} === ${value}`, { doc: Doc.name }); if (alias.viewSpecScript) { DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY); return true; @@ -165,21 +158,6 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC return false; } - renderColorPicker = () => { - const gray = "#f1efeb"; - const selected = this.props.headingObject ? this.props.headingObject.color : gray; - const colors = ["pink2", "purple4", "bluegreen1", "yellow4", "gray", "red2", "bluegreen7", "bluegreen5", "orange1"]; - return <div className="collectionStackingView-colorPicker"> - <div className="colorOptions"> - {colors.map(col => { - const palette = PastelSchemaPalette.get(col); - return <div className={"colorPicker" + (selected === palette ? " active" : "")} - style={{ backgroundColor: palette }} onClick={() => this.changeColumnColor(palette!)} />; - })} - </div> - </div>; - } - renderMenu = () => { return <div className="collectionStackingView-optionPicker"> <div className="optionOptions"> @@ -246,7 +224,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC } @computed get innards() { TraceMobx(); - const key = this.props.pivotField; + const key = this.props.columnIndex; const headings = this.props.headings(); const heading = this._heading; const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin; @@ -264,22 +242,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC Further, it does not have a color and cannot be deleted. */} <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown} title={evContents === `NO ${key.toUpperCase()} VALUE` ? - `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""} - style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "inherit" }}> + `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}> <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} toggle={this.toggleVisibility} /> - {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : - <div className="collectionStackingView-sectionColor"> - <button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}> - <FontAwesomeIcon icon="palette" size="lg" /> - </button> - {this._paletteOn ? this.renderColorPicker() : (null)} - </div> - } {<button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}> <FontAwesomeIcon icon="trash" size="lg" /> </button>} @@ -294,7 +263,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC } </div> </div> : (null); - const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; + const templatecols = `${this.props.columnWidth / this.props.numColumns}px `; const type = this.props.Document.type; return <> {this.props.Document._columnsHideIfEmpty ? (null) : headingView} @@ -322,7 +291,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC // bottom note //TODO: ok, so we are using a single column, and this is it! <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" - style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10, marginLeft: 25 }}> + style={{ width: this.props.columnWidth / this.props.numColumns, marginBottom: 10, marginLeft: 25 }}> <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} |