From 3d8ed6f4fd23f65b43cff9eeb7dd91589e496697 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 17 Mar 2022 16:45:56 -0400
Subject: about to merge speedups

---
 .../views/collections/CollectionNoteTakingView.tsx | 49 ++++++++++------------
 1 file changed, 23 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index ee1ea67d4..39efa5e1f 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -43,16 +43,17 @@ export type collectionNoteTakingViewProps = {
     numColumns?: number;
 };
 
+//TODO: where am I going to add columns?
+
 @observer
 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>();
     // 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 }[] = [];
-    // Doesn't look like this field is being used anywhere. Obsolete?
-    _columnStart: number = 0;
 
     //--------------------------------------------------------------------------------------------------------------//
     // TODO: these are things that I added but not sure that they actually belong here
@@ -61,7 +62,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
     _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 }
+    @computed get columnWidth() { return this.props.PanelWidth() - 2 * this.xMargin }
     //--------------------------------------------------------------------------------------------------------------//
 
     // Assuming that this is the current css cursor style
@@ -100,7 +101,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
             // just getting the style
-            const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() };
+            const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height(), margin: this.xMargin };
             // So we're choosing whether we're going to render a column or a masonry doc
             return <div className={"collectionNoteTakingView-columnDoc"} key={d[Id]} style={style} >
                 {this.getDisplayDoc(d, width)} 
@@ -108,15 +109,10 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         });
     }
 
-    // @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() {
-        // if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
+        if (!this.columnIndex || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
 
         if (this.columnHeaders === undefined) {
             setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
@@ -128,18 +124,24 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
         let changed = false;
         this.filteredChildren.map(d => {
             // need to set the section value
-            const sectionValue = d[this.columnIndex] as object;
+            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());
             const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
 
             // look for if header exists already
-            const existingHeader = columnHeaders.find(sh => sh.heading === castedSectionValue.toString());
+            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.toString());
+                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;
@@ -160,6 +162,13 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
 
     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 + 
@@ -168,6 +177,7 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
 
     componentWillUnmount() {
         super.componentWillUnmount();
+        this._pivotFieldDisposer?.();
         this._autoHeightDisposer?.();
     }
 
@@ -635,21 +645,8 @@ export class CollectionNoteTakingView extends CollectionSubView<StackingDocument
                         onPointerDown={this.onPointerDown}
                         onDrop={this.onExternalDrop.bind(this)}
                         onContextMenu={this.onContextMenu}
-                        // Todo: what is wheel? Are we talking about a mouse wheel?
                         onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
                         {this.renderedSections}
-                        <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}
-                                onClick={this.onToggle}
-                                defaultChecked={true}
-                                checkedChildren="edit"
-                                unCheckedChildren="view"
-                            />} */}
                     </div>
                 </div>
             </>
-- 
cgit v1.2.3-70-g09d2