From d673d063b1343e97b6f8f25d27347b64562fcfbe Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Wed, 7 Aug 2019 13:12:29 -0400
Subject: added filtering via script

---
 .../views/collections/CollectionTreeView.tsx       | 26 ++++++++++++++++------
 1 file changed, 19 insertions(+), 7 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 02b2583cd..17d043553 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -25,7 +25,7 @@ import { CollectionSchemaPreview } from './CollectionSchemaView';
 import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionTreeView.scss";
 import React = require("react");
-import { ComputedField } from '../../../new_fields/ScriptField';
+import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { KeyValueBox } from '../nodes/KeyValueBox';
 import { exportNamedDeclaration } from 'babel-types';
 
@@ -398,21 +398,33 @@ class TreeView extends React.Component<TreeViewProps> {
         panelWidth: () => number,
         renderDepth: number
     ) {
-        let docList = docs.filter(child => !child.excludeFromLibrary);
+        let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField);
+        if (viewSpecScript) {
+            let script = viewSpecScript.script;
+            docs = docs.filter(d => {
+                let res = script.run({ doc: d });
+                if (res.success) {
+                    return res.result;
+                }
+                else {
+                    console.log(res.error);
+                }
+            });
+        }
         let rowWidth = () => panelWidth() - 20;
-        return docList.map((child, i) => {
+        return docs.map((child, i) => {
             let pair = Doc.GetLayoutDataDocPair(containingCollection, dataDoc, key, child);
 
             let indent = i === 0 ? undefined : () => {
-                if (StrCast(docList[i - 1].layout).indexOf("CollectionView") !== -1) {
-                    let fieldKeysub = StrCast(docList[i - 1].layout).split("fieldKey")[1];
+                if (StrCast(docs[i - 1].layout).indexOf("CollectionView") !== -1) {
+                    let fieldKeysub = StrCast(docs[i - 1].layout).split("fieldKey")[1];
                     let fieldKey = fieldKeysub.split("\"")[1];
-                    Doc.AddDocToList(docList[i - 1], fieldKey, child);
+                    Doc.AddDocToList(docs[i - 1], fieldKey, child);
                     remove(child);
                 }
             };
             let addDocument = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
-                return add(doc, relativeTo ? relativeTo : docList[i], before !== undefined ? before : false);
+                return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false);
             };
             let rowHeight = () => {
                 let aspect = NumCast(child.nativeWidth, 0) / NumCast(child.nativeHeight, 0);
-- 
cgit v1.2.3-70-g09d2


From a887adb0080d2826b8a8757cd0f5c9fe451a0695 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Wed, 7 Aug 2019 14:21:52 -0400
Subject: moving computers

---
 .../views/collections/CollectionStackingView.tsx   |   2 +-
 .../views/collections/CollectionTreeView.tsx       |  13 +++
 .../views/collections/CollectionViewChromes.tsx    | 113 ++++++++++++++++++++-
 3 files changed, 126 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 4a751c84c..ccdffa899 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -266,7 +266,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     }
 
     onToggle = (checked: Boolean) => {
-        this.props.CollectionView.props.Document.chromeSatus = checked ? "collapsed" : "view-mode";
+        this.props.CollectionView.props.Document.chromeStatus = checked ? "collapsed" : "view-mode";
     }
 
     render() {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 17d043553..d7552fa99 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -398,9 +398,11 @@ class TreeView extends React.Component<TreeViewProps> {
         panelWidth: () => number,
         renderDepth: number
     ) {
+
         let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField);
         if (viewSpecScript) {
             let script = viewSpecScript.script;
+            console.log(viewSpecScript, script);
             docs = docs.filter(d => {
                 let res = script.run({ doc: d });
                 if (res.success) {
@@ -411,6 +413,17 @@ class TreeView extends React.Component<TreeViewProps> {
                 }
             });
         }
+
+        // sort children here
+
+        // schemaheaderfield should b just the thing we're sorting by
+        // sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
+        //     let descending = BoolCast(this.props.document.stackingHeadersSortDescending);
+        //     let firstEntry = descending ? b : a;
+        //     let secondEntry = descending ? a : b;
+        //     return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1;
+        // }
+
         let rowWidth = () => panelWidth() - 20;
         return docs.map((child, i) => {
             let pair = Doc.GetLayoutDataDocPair(containingCollection, dataDoc, key, child);
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 1b2561953..b0ba62173 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -182,6 +182,12 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                     CollectionView={this.props.CollectionView}
                     type={this.props.type}
                 />);
+            case CollectionViewType.Tree: return (
+                <CollectionTreeViewChrome
+                    key="collchrome"
+                    CollectionView={this.props.CollectionView}
+                    type={this.props.type}
+                />);
             default:
                 return null;
         }
@@ -437,4 +443,109 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionViewCh
             </div >
         );
     }
-}
\ No newline at end of file
+}
+
+@observer
+export class CollectionTreeViewChrome extends React.Component<CollectionViewChromeProps> {
+    @observable private _currentKey: string = "";
+    @observable private suggestions: string[] = [];
+
+    @computed private get descending() { return BoolCast(this.props.CollectionView.props.Document.stackingHeadersSortDescending); }
+    @computed get sectionFilter() { return StrCast(this.props.CollectionView.props.Document.sectionFilter); }
+
+    getKeySuggestions = async (value: string): Promise<string[]> => {
+        value = value.toLowerCase();
+        let docs: Doc | Doc[] | Promise<Doc> | Promise<Doc[]> | (() => DocLike)
+            = () => DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldExt ? this.props.CollectionView.props.fieldExt : this.props.CollectionView.props.fieldKey]);
+        if (typeof docs === "function") {
+            docs = docs();
+        }
+        docs = await docs;
+        if (docs instanceof Doc) {
+            return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
+        } else {
+            const keys = new Set<string>();
+            docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
+            return Array.from(keys).filter(key => key.toLowerCase().startsWith(value));
+        }
+    }
+
+    @action
+    onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => {
+        this._currentKey = newValue;
+    }
+
+    getSuggestionValue = (suggestion: string) => suggestion;
+
+    renderSuggestion = (suggestion: string) => {
+        return <p>{suggestion}</p>;
+    }
+
+    onSuggestionFetch = async ({ value }: { value: string }) => {
+        const sugg = await this.getKeySuggestions(value);
+        runInAction(() => {
+            this.suggestions = sugg;
+        });
+    }
+
+    @action
+    onSuggestionClear = () => {
+        this.suggestions = [];
+    }
+
+    setValue = (value: string) => {
+        this.props.CollectionView.props.Document.sectionFilter = value;
+        return true;
+    }
+
+    @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; };
+    @action resetValue = () => { this._currentKey = this.sectionFilter; };
+
+    render() {
+        return (
+            <div className="collectionStackingViewChrome-cont">
+                <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
+                    <div className="collectionStackingViewChrome-sortLabel">
+                        Sort
+                        </div>
+                    <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                        <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
+                    </div>
+                </button>
+                <div className="collectionStackingViewChrome-sectionFilter-cont">
+                    <div className="collectionStackingViewChrome-sectionFilter-label">
+                        GROUP ITEMS BY:
+                        </div>
+                    <div className="collectionStackingViewChrome-sectionFilter">
+                        <EditableView
+                            GetValue={() => this.sectionFilter}
+                            autosuggestProps={
+                                {
+                                    resetValue: this.resetValue,
+                                    value: this._currentKey,
+                                    onChange: this.onKeyChange,
+                                    autosuggestProps: {
+                                        inputProps:
+                                        {
+                                            value: this._currentKey,
+                                            onChange: this.onKeyChange
+                                        },
+                                        getSuggestionValue: this.getSuggestionValue,
+                                        suggestions: this.suggestions,
+                                        alwaysRenderSuggestions: true,
+                                        renderSuggestion: this.renderSuggestion,
+                                        onSuggestionsFetchRequested: this.onSuggestionFetch,
+                                        onSuggestionsClearRequested: this.onSuggestionClear
+                                    }
+                                }}
+                            oneLine
+                            SetValue={this.setValue}
+                            contents={this.sectionFilter ? this.sectionFilter : "N/A"}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
-- 
cgit v1.2.3-70-g09d2


From 8b29049575238966ec0592469262403b5fa8d432 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Wed, 7 Aug 2019 16:21:22 -0400
Subject: making progress on sorting, need to differentiate between diff types
 of sort values (e.g. boolean, string, number)

---
 .../views/collections/CollectionTreeView.tsx       | 37 +++++++++++++++-------
 1 file changed, 26 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index d7552fa99..45bcfaa06 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -28,6 +28,7 @@ import React = require("react");
 import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { KeyValueBox } from '../nodes/KeyValueBox';
 import { exportNamedDeclaration } from 'babel-types';
+import { number } from 'prop-types';
 
 
 export interface TreeViewProps {
@@ -398,11 +399,9 @@ class TreeView extends React.Component<TreeViewProps> {
         panelWidth: () => number,
         renderDepth: number
     ) {
-
         let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField);
         if (viewSpecScript) {
             let script = viewSpecScript.script;
-            console.log(viewSpecScript, script);
             docs = docs.filter(d => {
                 let res = script.run({ doc: d });
                 if (res.success) {
@@ -414,15 +413,27 @@ class TreeView extends React.Component<TreeViewProps> {
             });
         }
 
-        // sort children here
-
-        // schemaheaderfield should b just the thing we're sorting by
-        // sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
-        //     let descending = BoolCast(this.props.document.stackingHeadersSortDescending);
-        //     let firstEntry = descending ? b : a;
-        //     let secondEntry = descending ? a : b;
-        //     return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1;
-        // }
+        let descending = BoolCast(containingCollection.stackingHeadersSortDescending);
+        docs.sort(function (a, b): 1 | -1 {
+            let descA = descending ? b : a;
+            let descB = descending ? a : b;
+            let first = descA[String(containingCollection.sectionFilter)];
+            let second = descB[String(containingCollection.sectionFilter)];
+            // TODO find better way to sort how to sort..................
+            if (typeof first === 'number' && typeof second === 'number') {
+                return (first - second) > 0 ? 1 : -1;
+            }
+            if (typeof first === 'string' && typeof second === 'string') {
+                return first > second ? 1 : -1;
+            }
+            if (typeof first === 'boolean' && typeof second === 'boolean') {
+                // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
+                //     return Number(descA.x) > Number(descB.y) ? 1 : -1;
+                // }
+                return first > second ? 1 : -1;
+            }
+            return descending ? 1 : -1;
+        });
 
         let rowWidth = () => panelWidth() - 20;
         return docs.map((child, i) => {
@@ -567,6 +578,10 @@ export class CollectionTreeView extends CollectionSubView(Document) {
                 {this.props.Document.allowClear ? this.renderClearButton : (null)}
                 <ul className="no-indent" style={{ width: "max-content" }} >
                     {
+                        // this.props.Document.sectionFilter ?
+                        //     TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
+                        //         moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
+                        //     :
                         TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
                             moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
                     }
-- 
cgit v1.2.3-70-g09d2


From 329b79a62bcd2bb57c5c4cb3e805d10a1aceed35 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Fri, 9 Aug 2019 11:48:26 -0400
Subject: changed css, fixed flickering bug for boolean sorts

---
 .../views/collections/CollectionTreeView.tsx       | 11 ++--
 .../views/collections/CollectionViewChromes.scss   | 58 ++++++++++++++++++++++
 .../views/collections/CollectionViewChromes.tsx    | 14 +++---
 3 files changed, 69 insertions(+), 14 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index cfd4df9fc..1f19437be 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -27,6 +27,7 @@ import "./CollectionTreeView.scss";
 import React = require("react");
 import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { KeyValueBox } from '../nodes/KeyValueBox';
+import { exportNamedDeclaration } from 'babel-types';
 
 
 export interface TreeViewProps {
@@ -428,9 +429,9 @@ class TreeView extends React.Component<TreeViewProps> {
                 return first > second ? 1 : -1;
             }
             if (typeof first === 'boolean' && typeof second === 'boolean') {
-                // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
-                //     return Number(descA.x) > Number(descB.y) ? 1 : -1;
-                // }
+                if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
+                    return Number(descA.x) > Number(descB.x) ? 1 : -1;
+                }
                 return first > second ? 1 : -1;
             }
             return descending ? 1 : -1;
@@ -579,10 +580,6 @@ export class CollectionTreeView extends CollectionSubView(Document) {
                 {this.props.Document.allowClear ? this.renderClearButton : (null)}
                 <ul className="no-indent" style={{ width: "max-content" }} >
                     {
-                        // this.props.Document.sectionFilter ?
-                        //     TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
-                        //         moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
-                        //     :
                         TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
                             moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
                     }
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 793cb7a8b..d02daa366 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -220,4 +220,62 @@
             margin-left: 50px;
         }
     }
+}
+
+.collectionTreeViewChrome-cont {
+    display: flex;
+    justify-content: space-between;
+}
+
+.collectionTreeViewChrome-sort {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .collectionTreeViewChrome-sortIcon {
+        transition: transform .5s;
+        margin-left: 10px;
+    }
+}
+
+.collectionTreeViewChrome-sectionFilter-cont {
+    justify-self: right;
+    display: flex;
+    font-size: 75%;
+    letter-spacing: 2px;
+
+    .collectionTreeViewChrome-sectionFilter-label {
+        vertical-align: center;
+        padding: 10px;
+    }
+
+    .collectionTreeViewChrome-sectionFilter {
+        color: white;
+        width: 100px;
+        text-align: center;
+        background: rgb(238, 238, 238);
+
+        .editable-view-input,
+        input,
+        .editableView-container-editing-oneLine,
+        .editableView-container-editing {
+            padding: 12px 10px 11px 10px;
+            border: 0px;
+            color: grey;
+            text-align: center;
+            letter-spacing: 2px;
+            outline-color: black;
+            height: 100%;
+        }
+
+        .react-autosuggest__container {
+            margin: 0;
+            color: grey;
+            padding: 0px;
+        }
+    }
+}
+
+.collectionTreeViewChrome-sectionFilter:hover {
+    cursor: text;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 7787a8eed..1de2f060e 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -534,20 +534,20 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro
 
     render() {
         return (
-            <div className="collectionStackingViewChrome-cont">
-                <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
-                    <div className="collectionStackingViewChrome-sortLabel">
+            <div className="collectionTreeViewChrome-cont">
+                <button className="collectionTreeViewChrome-sort" onClick={this.toggleSort}>
+                    <div className="collectionTreeViewChrome-sortLabel">
                         Sort
                         </div>
-                    <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                    <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
                         <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
                     </div>
                 </button>
-                <div className="collectionStackingViewChrome-sectionFilter-cont">
-                    <div className="collectionStackingViewChrome-sectionFilter-label">
+                <div className="collectionTreeViewChrome-sectionFilter-cont">
+                    <div className="collectionTreeViewChrome-sectionFilter-label">
                         GROUP ITEMS BY:
                         </div>
-                    <div className="collectionStackingViewChrome-sectionFilter">
+                    <div className="collectionTreeViewChrome-sectionFilter">
                         <EditableView
                             GetValue={() => this.sectionFilter}
                             autosuggestProps={
-- 
cgit v1.2.3-70-g09d2


From e89bddbe1f4cc6508f9a66e168e5488874ace749 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Fri, 9 Aug 2019 12:30:44 -0400
Subject: got rid of unnecessary import

---
 src/client/views/collections/CollectionTreeView.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 1f19437be..a9de1d7c6 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -27,7 +27,6 @@ import "./CollectionTreeView.scss";
 import React = require("react");
 import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { KeyValueBox } from '../nodes/KeyValueBox';
-import { exportNamedDeclaration } from 'babel-types';
 
 
 export interface TreeViewProps {
-- 
cgit v1.2.3-70-g09d2


From 244952ccc52bf66ac34eeea7d5469d0ba6313aff Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Fri, 9 Aug 2019 13:32:37 -0400
Subject: commented out hotfix

---
 src/client/views/collections/CollectionTreeView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index a9de1d7c6..4b1fca18a 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -428,9 +428,9 @@ class TreeView extends React.Component<TreeViewProps> {
                 return first > second ? 1 : -1;
             }
             if (typeof first === 'boolean' && typeof second === 'boolean') {
-                if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
-                    return Number(descA.x) > Number(descB.x) ? 1 : -1;
-                }
+                // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
+                //     return Number(descA.x) > Number(descB.x) ? 1 : -1;
+                // }
                 return first > second ? 1 : -1;
             }
             return descending ? 1 : -1;
-- 
cgit v1.2.3-70-g09d2

