stashing

3 files changed, 60 insertions, 85 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index fbb789894..3fd63d245 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -4,10 +4,9 @@ import { CursorProperty } from "csstype";
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { DataSym, Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
-import { collectionSchema, documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
-import { listSpec, makeInterface } from "../../../fields/Schema";
+import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
@@ -19,39 +18,32 @@ import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
-import { EditableView } from "../EditableView";
 import { LightboxView } from "../LightboxView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
 import { StyleProp } from "../StyleProvider";
+import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
 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 collectionNoteTakingViewProps = {
     chromeHidden?: boolean;
     viewType?: CollectionViewType;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
-    numColumns?: number;
 };
 
 //TODO: where am I going to add columns?
 
 @observer
-export class CollectionNoteTakingView extends CollectionSubView<StackingDocument, Partial<collectionNoteTakingViewProps>>(StackingDocument) {
+export class CollectionNoteTakingView extends CollectionSubView<Partial<collectionNoteTakingViewProps>>() {
     // used in a column dragger, likely due for the masonry grid view. We want to use this 
     _draggerRef = React.createRef<HTMLDivElement>();
     // Seems like we cause reaction in MobX get rid of our height once we exit this view
     _autoHeightDisposer?: IReactionDisposer;
-    _pivotFieldDisposer?: IReactionDisposer;
     // keeping track of documents. Updated on internal and external drops. What's the difference?
     _docXfs: { height: () => number, width: () => number, stackedDocTransform: () => Transform }[] = [];
 
@@ -59,9 +51,11 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
     // 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;
+    // this is the layout doc field that we're splitting on. Replaces pivot field
+    _columnIndex: string = "columnIndex";
+    @computed get columnIndex() { return this._columnIndex}
+    _numColumns: number = 1;
     @computed get numColumns() { return this._numColumns}
-    @computed get columnIndex() { return StrCast(this.layoutDoc._columnIndex); }
     @computed get columnWidth() { return this.props.PanelWidth() - 2 * this.xMargin }
     //--------------------------------------------------------------------------------------------------------------//
 
@@ -87,10 +81,9 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         super(props);
 
         if (this.columnHeaders === undefined) {
-          // TODO: need to set these equal to the indexes
-            this.layoutDoc._columnHeaders = new List<SchemaHeaderField>();
+            this.layoutDoc._columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("0")]);
         }
-
+        console.log(this.layoutDoc._columnHeaders)
     }
 
     children = (docs: Doc[]) => {
@@ -98,6 +91,11 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         this._docXfs.length = 0;
         // Go through each of the documents that are contained
         return docs.map((d, i) => {
+            if (d._columnIndex && parseInt(d._columnIndex.toString()) + 1 > this.numColumns) {
+              this._numColumns = parseInt(d._columnIndex.toString()) + 1;
+            } else if (d._columnIndex === undefined) {
+              d._columnIndex = 0;
+            }
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
             // just getting the style
@@ -109,27 +107,19 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         });
     }
 
-    // is sections that all collections inherit? I think this is how we show the masonry/columns
-    //TODO: this seems important
-    get Sections() {
+      //TODO: this seems important
+      get Sections() {
+        // appears that pivot field IS actually for sorting
         if (!this.columnIndex || 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 => {
-            // need to set the section value
-            console.log(d._columnIndex)
-            if (!d.hasOwnProperty("_columnIndex")) {
-              d._columnIndex = 0;
-              
-            }
-
             const sectionValue = (d[this.columnIndex] ? d[this.columnIndex] : `NO ${this.columnIndex.toUpperCase()} VALUE`) 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());
@@ -137,13 +127,11 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
 
             // look for if header exists already
             const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO ${this.columnIndex.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.columnIndex.toUpperCase()} VALUE`);
-                // const newSchemaHeader = new SchemaHeaderField(castedSectionValue.toString());
                 fields.set(newSchemaHeader, [d]);
                 columnHeaders.push(newSchemaHeader);
                 changed = true;
@@ -161,16 +149,44 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         changed && setTimeout(action(() => this.columnHeaders?.splice(0, this.columnHeaders.length, ...columnHeaders)), 0);
         return fields;
     }
+    //TODO: this seems important
+    // get Sections() {
+    //     // at the start, we likely will not have column headers
+    //     if (this.columnHeaders === undefined) {
+    //       console.log("columns weren't yet defined")
+    //       setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("0")]));
+    //       return new Map<SchemaHeaderField, Doc[]>();
+    //     }
+
+    //     // on later renders, we should have the column headers
+    //     const columnHeaders = Array.from(this.columnHeaders);
+    //     console.log(columnHeaders)
+    //     const fields = new Map<SchemaHeaderField, Doc[]>();
+    //     let changed = false;
+    //     this.filteredChildren.map(d => {
+    //         const sectionValue = (d._columnIndex ? d._columnIndex : `NO COLUMN VALUE`) 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;
+    //         const newSchemaHeader = new SchemaHeaderField(castedSectionValue.toString());
+    //         const currentDocs = fields.get(newSchemaHeader)
+    //         if (currentDocs) {
+    //           currentDocs.push(d)
+    //           fields.set(newSchemaHeader, currentDocs);
+    //         }
+    //         const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO COLUMN VALUE`));
+    //         if (existingHeader) {
+    //           columnHeaders.push(newSchemaHeader);
+    //           changed = true;
+    //         }
+    //     });
+    //     changed && setTimeout(action(() => this.columnHeaders?.splice(0, this.columnHeaders.length, ...columnHeaders)), 0);
+    //     return fields;
+    // }
 
     componentDidMount() {
         super.componentDidMount?.();
 
-        // reset section headers when a new filter is inputted
-        this._pivotFieldDisposer = reaction(
-          () => this.columnIndex,
-          () => this.layoutDoc._columnHeaders = new List()
-      );
-
         this._autoHeightDisposer = reaction(() => this.layoutDoc._autoHeight,
             autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER),
                 this.headerMargin + 
@@ -179,7 +195,6 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
 
     componentWillUnmount() {
         super.componentWillUnmount();
-        this._pivotFieldDisposer?.();
         this._autoHeightDisposer?.();
     }
 
@@ -354,35 +369,6 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         </div>;
     }
 
-    // TODO: plj
-    @action
-    onPointerOver = (e: React.PointerEvent) => {
-      // console.log("hovering over something")
-      if (DragManager.docsBeingDragged.length) {
-        // essentially copying code from onInternalDrop for this:
-        const doc = DragManager.docsBeingDragged[0]
-        // console.log(doc[LayoutSym]())
-
-        console.log(doc[DataSym])
-        console.log(Doc.IndexOf(doc, this.childDocs))
-
-      }
-      
-
-    }
-
-    //used in onPointerOver to swap two nodes in the rendered filtered children list
-    swapNodes = (i: number, j: number) => {
-      
-    }
-
-    //plj added this 
-    @action
-    onPointerDown = (e: React.PointerEvent) => {
-
-    }
-
-    // TODO: plj - look at this. Start with making changes to db, and then transition to client side 
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
@@ -473,13 +459,11 @@ 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.columnIndex;
+        const key = "columnIndex";
         let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
-        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];
-            }
+        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 <CollectionNoteTakingViewFieldColumn
@@ -507,7 +491,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
             DataDoc={this.props.DataDoc}
             renderChildren={this.children}
             columnWidth={this.columnWidth}
-            columnIndex={this.columnIndex}
+            columnIndex={this._columnIndex}
             numColumns={this.numColumns}
             gridGap={this.gridGap}
             key={heading?.heading ?? ""}
@@ -528,7 +512,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         if (value && this.columnHeaders) {
             const schemaHdrField = new SchemaHeaderField(value);
             this.columnHeaders.push(schemaHdrField);
-            DocUtils.addFieldEnumerations(undefined, this.columnIndex, [{ title: value, _backgroundColor: "schemaHdrField.color" }]);
+            DocUtils.addFieldEnumerations(undefined, this._columnIndex, [{ title: value, _backgroundColor: "schemaHdrField.color" }]);
             return true;
         }
         return false;
@@ -556,10 +540,8 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
     @computed get renderedSections() {
         TraceMobx();
         let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];
-        if (this.columnIndex) {
-            const entries = Array.from(this.Sections.entries());
-            sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
-        }
+        const entries = Array.from(this.Sections.entries());
+        sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
         // a section will have a header and a list of docs. Ok cool.
         return sections.map((section, i) => this.sectionStacking(section[0], section[1]));
     }
@@ -643,8 +625,6 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
                             pointerEvents: this.backgroundEvents ? "all" : undefined
                         }}
                         onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
-                        onPointerOver={this.onPointerOver}
-                        onPointerDown={this.onPointerDown}
                         onDrop={this.onExternalDrop.bind(this)}
                         onContextMenu={this.onContextMenu}
                         onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 535411118..0c3eef36d 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -284,12 +284,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                             {this.props.renderChildren(this.props.docList)}
                         </div>
                         {!this.props.chromeHidden && type !== DocumentType.PRES ?
-                        // TODO: this is the "new" button: see what you can work with here
-                        // change cursor to pointer for this, and update dragging cursor
-                        //TODO: there is a bug that occurs when adding a freeform document and trying to move it around 
-                        //TODO: would be great if there was additional space beyond the frame, so that you can actually see your
-                        // 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.numColumns, marginBottom: 10, marginLeft: 25 }}>
                                 <EditableView
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 999ee9416..54b0a2af3 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -26,6 +26,7 @@ import { CollectionGridView } from './collectionGrid/CollectionGridView';
 import { CollectionLinearView } from './collectionLinear';
 import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView';
 import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView';
+import { CollectionNoteTakingView } from './CollectionNoteTakingView';
 import { CollectionPileView } from './CollectionPileView';
 import { CollectionSchemaView } from "./collectionSchema/CollectionSchemaView";
 import { CollectionStackingView } from './CollectionStackingView';