diff options
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx | 71 |
1 files changed, 20 insertions, 51 deletions
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} |