From 0513a1bda8dc923ef5e72ecac0d3d61680b9e60e Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Wed, 21 Aug 2019 18:09:10 -0400
Subject: masonry is kinda collapsible

---
 src/client/views/EditableView.tsx                  | 17 +++++++
 .../collections/CollectionMasonryViewFieldRow.tsx  | 57 ++++++++++++++--------
 2 files changed, 53 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c3612fee9..87af19062 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import { observable, action, trace } from 'mobx';
 import "./EditableView.scss";
 import * as Autosuggest from 'react-autosuggest';
+import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField';
 
 export interface EditableProps {
     /**
@@ -40,6 +41,8 @@ export interface EditableProps {
     editing?: boolean;
     onClick?: (e: React.MouseEvent) => boolean;
     isEditingCallback?: (isEditing: boolean) => void;
+    // HeadingObject: SchemaHeaderField | undefined;
+    // HeadingsHack: number;
 }
 
 /**
@@ -50,6 +53,8 @@ export interface EditableProps {
 @observer
 export class EditableView extends React.Component<EditableProps> {
     @observable _editing: boolean = false;
+    @observable _collapsed: boolean = false;
+    @observable _headingsHack: number = 1;
 
     constructor(props: EditableProps) {
         super(props);
@@ -66,6 +71,15 @@ export class EditableView extends React.Component<EditableProps> {
         }
     }
 
+    // collapseSection() {
+    //     if (this.props.HeadingObject) {
+    //         this._headingsHack++;
+    //         this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed);
+    //         this._collapsed = !this._collapsed;
+    //         console.log("THIS IS COLLAPSE FROM EDITABLEVIEW" + this._collapsed);
+    //     }
+    // }
+
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Tab") {
@@ -93,6 +107,9 @@ export class EditableView extends React.Component<EditableProps> {
     @action
     onClick = (e: React.MouseEvent) => {
         e.nativeEvent.stopPropagation();
+        // if (e.ctrlKey) {
+        //     this.collapseSection();
+        // }
         if (!this.props.onClick || !this.props.onClick(e)) {
             this._editing = true;
             this.props.isEditingCallback && this.props.isEditingCallback(true);
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index dbd7f9e3c..8943fea3b 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -246,6 +246,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         );
     }
 
+    @observable private collapsed: boolean = false;
+
     @observable _headingsHack: number = 1;
     render() {
         let cols = this.props.rows();
@@ -261,19 +263,31 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             GetValue: () => evContents,
             SetValue: this.headingChanged,
             contents: evContents,
-            oneLine: true
+            oneLine: true,
+            // HeadingObject: this.props.headingObject,
+            // HeadingsHack: this._headingsHack
         };
         let newEditableViewProps = {
             GetValue: () => "",
             SetValue: this.addDocument,
-            contents: "+ NEW"
+            contents: "+ NEW",
+            // HeadingObject: this.props.headingObject,
+            // HeadingsHack: this._headingsHack
         };
         // let headingView = this.props.headingObject ?
         let headingView =
             <div>
                 <div key={`${this.props.heading}`} className="collectionStackingView-sectionHeader" style={{ background: this.props.color }}
-                // onClick={action(() => this._headingsHack++ && instHeading.setCollapsed(!instHeading.collapsed))} 
+                    onClick={action(() => {
+                        if (this.props.headingObject) {
+                            this._headingsHack++;
+                            this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed);
+                            this.collapsed = !this.collapsed;
+                            console.log("value of collapse: " + this.collapsed);
+                        }
+                    })}
                 >
+                    {this.props.heading}
                     <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.` : ""}
@@ -282,7 +296,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
                             color: "grey"
                         }}>
-                        <EditableView {...headerEditableViewProps} />
+                        {<EditableView {...headerEditableViewProps} />}
                         {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
                             <div className="collectionStackingView-sectionColor">
                                 <Flyout anchorPoint={anchorPoints.TOP_CENTER} content={this.renderColorPicker()}>
@@ -309,25 +323,26 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                 onPointerLeave={this.pointerLeaveRow}
             >
                 {headingView}
-                {
-                    <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
-                        style={{
-                            padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
-                            width: this.props.parent.NodeWidth,
-                            gridGap: this.props.parent.gridGap,
-                            gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
-                        }}>
-                        {this.masonryChildren(this.props.docList)}
-                        {this.props.parent.columnDragger}
+                {this.collapsed ? (null) :
+                    <div>
+                        <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
+                            style={{
+                                padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
+                                width: this.props.parent.NodeWidth,
+                                gridGap: this.props.parent.gridGap,
+                                gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
+                            }}>
+                            {this.masonryChildren(this.props.docList)}
+                            {this.props.parent.columnDragger}
+                        </div>
+                        {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
+                            <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
+                                style={{ width: style.columnWidth / style.numGroupColumns }}>
+                                <EditableView {...newEditableViewProps} />
+                            </div> : null
+                        }
                     </div>
                 }
-                { //controls the +NEW for each row
-                    (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
-                        <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                            style={{ width: style.columnWidth / style.numGroupColumns }}>
-                            <EditableView {...newEditableViewProps} />
-                        </div> : null
-                }
             </div >
         );
     }
-- 
cgit v1.2.3-70-g09d2