filters changes

10 files changed, 70 insertions, 26 deletions

diff --git a/.gitignore b/.gitignore
index 6d4b98289..aeb343fd1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ src/server/session_manager/logs/**/*.log
 *.crt
 *.key
 *.pfx
-*.properties
\ No newline at end of file
+*.properties
+debug.log
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 42cbc1fd6..ed4f697b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9062,9 +9062,9 @@
             "integrity": "sha512-vTgEjKjS89C5yHL5qWPpT6BzKuOVqABp+A3Szpbx34pIy3sngxlGaFpgHhfj6fKze1w0QKeOSDbU7SKu7wDvRQ=="
         },
         "mobx": {
-            "version": "5.15.4",
-            "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.4.tgz",
-            "integrity": "sha512-xRFJxSU2Im3nrGCdjSuOTFmxVDGeqOHL+TyADCGbT0k4HHqGmx5u2yaHNryvoORpI4DfbzjJ5jPmuv+d7sioFw=="
+            "version": "5.15.7",
+            "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.7.tgz",
+            "integrity": "sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw=="
         },
         "mobx-react": {
             "version": "5.4.4",
diff --git a/package.json b/package.json
index 13849c0f3..c7d674cf0 100644
--- a/package.json
+++ b/package.json
@@ -183,8 +183,8 @@
         "lodash": "^4.17.15",
         "material-ui": "^0.20.2",
         "mobile-detect": "^1.4.4",
-        "mobx": "^5.15.3",
-        "mobx-react": "^5.3.5",
+        "mobx": "^5.15.7",
+        "mobx-react": "^5.4.4",
         "mobx-react-devtools": "^6.1.1",
         "mobx-utils": "^5.6.1",
         "mongodb": "^3.5.9",
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f3fec9ae6..0d31060d4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -522,7 +522,7 @@ export class CurrentUserUtils {
             { title: "Import", target: Cast(doc.myImportPanel, Doc, null), icon: "upload", click: 'selectMainMenu(self)' },
             { title: "Sharing", target: Cast(doc.mySharedDocs, Doc, null), icon: "users", click: 'selectMainMenu(self)', watchedDocuments: doc.mySharedDocs as Doc },
             { title: "Tools", target: Cast(doc.myTools, Doc, null), icon: "wrench", click: 'selectMainMenu(self)' },
-            { title: "Filter", target: Cast(doc.currentFilter, Doc, null), icon: "filter", click: 'selectMainMenu(self)' },
+            // { title: "Filter", target: Cast(doc.currentFilter, Doc, null), icon: "filter", click: 'selectMainMenu(self)' },
             { title: "Pres. Trails", target: Cast(doc.myPresentations, Doc, null), icon: "pres-trail", click: 'selectMainMenu(self)' },
             { title: "Catalog", target: undefined as any, icon: "file", click: 'selectMainMenu(self)' },
             { title: "Help", target: undefined as any, icon: "question-circle", click: 'selectMainMenu(self)' },
@@ -790,7 +790,7 @@ export class CurrentUserUtils {
         doc.currentFilter === undefined;
         if (doc.currentFilter === undefined) {
             doc.currentFilter = new PrefetchProxy(Docs.Create.FilterDocument({
-                title: "FilterDoc", _height: 500,
+                title: `FilterDoc(${(doc.filterDocCount as number)++})`, _height: 500,
                 treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "none",
                 treeViewTruncateTitleWidth: 150, treeViewPreventOpen: false, ignoreClick: true,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same", system: true
@@ -999,6 +999,8 @@ export class CurrentUserUtils {
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
+        doc.savedFilters = new List<Doc>();
+        doc.filterDocCount = 0;
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupImportSidebar(doc);
@@ -1009,7 +1011,6 @@ export class CurrentUserUtils {
         await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
         await this.setupMenuPanel(doc, sharingDocumentId, linkDatabaseId);
         if (!doc.globalScriptDatabase) doc.globalScriptDatabase = Docs.Prototypes.MainScriptDocument();
-        // doc.savedFilters = new List<Doc>();
 
         setTimeout(() => this.setupDefaultPresentation(doc), 0); // presentation that's initially triggered
 
diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index 4a89cc69c..5953baec1 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -8,6 +8,8 @@
 }
 
 .editableView-container-editing-oneLine {
+    width: 100%;
+
     span {
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index ed7a8265f..828a2eb78 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -55,6 +55,7 @@ export interface EditableProps {
     color?: string | undefined;
     onDrop?: any;
     placeholder?: string;
+    fullWidth?: boolean; // used in PropertiesView to make the whole key:value input box clickable 
 }
 
 /**
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c6be7cae1..f0d3f1f3f 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -152,6 +152,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
                 <EditableView
                     key="editableView"
+                    oneLine
                     contents={"add key:value or #tags"}
                     height={13}
                     fontSize={10}
@@ -208,6 +209,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
                 <EditableView
                     key="editableView"
+                    oneLine
                     contents={"add key:value or #tags"}
                     height={13}
                     fontSize={10}
@@ -443,13 +445,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const titles = new Set<string>();
         SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title)));
         const title = Array.from(titles.keys()).length > 1 ? "--multiple selected--" : StrCast(this.selectedDoc?.title);
-        return <div className="editable-title"><EditableView
-            key="editableView"
-            contents={title}
-            height={25}
-            fontSize={14}
-            GetValue={() => title}
-            SetValue={this.setTitle} /> </div>;
+        return <div className="editable-title">
+            <EditableView
+                key="editableView"
+                contents={title}
+                height={25}
+                fontSize={14}
+                GetValue={() => title}
+                SetValue={this.setTitle} />
+        </div>;
     }
 
     @undoBatch
@@ -1016,6 +1020,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     // }
 
     render() {
+        // console.log(this.props.width);
         if (!this.selectedDoc && !this.isPres) {
             return <div className="propertiesView" style={{ width: this.props.width }}>
                 <div className="propertiesView-title" style={{ width: this.props.width }}>
diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss
index 144f161bc..4b4dfa8a4 100644
--- a/src/client/views/nodes/FilterBox.scss
+++ b/src/client/views/nodes/FilterBox.scss
@@ -27,11 +27,11 @@
     }
 }
 
-.filterBox-bottom {
-    // position: fixed;
-    // bottom: 0;
-    // width: 100%;
-}
+// .filterBox-bottom {
+    //     // position: fixed;
+    //     // bottom: 0;
+    //     // width: 100%;
+    // }
 
 
 .filterBox-saveBookmark {
@@ -44,6 +44,7 @@
     margin: 8px;
     display: flex;
     font-size: 11px;
+    cursor: pointer;
 
     &:hover {
         background-color: white;
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 63455e3d1..b06bfa8c3 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -33,12 +33,16 @@ const FilterBoxDocument = makeInterface(documentSchema);
 
 @observer
 export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDocument>(FilterBoxDocument) {
+    constructor(props: Readonly<FieldViewProps>) {
+        super(props);
+    }
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterBox, fieldKey); }
 
     public _filterBoolean = "AND";
     public _filterScope = "Current Dashboard";
     public _filterSelected = false;
     public _filterMatch = "matched";
+    private myFiltersRef = React.createRef<HTMLDivElement>();
 
     @computed get allDocs() {
         const allDocs = new Set<Doc>();
@@ -103,7 +107,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
      * Responds to clicking the check box in the flyout menu
      */
     facetClick = (facetHeader: string) => {
-        const targetDoc = SelectionManager.Views()[0].Document; // CollectionDockingView.Instance.props.Document;
+        const targetDoc = CollectionDockingView.Instance.props.Document; //SelectionManager.Views()[0].Document; 
         const found = this.activeAttributes.findIndex(doc => doc.title === facetHeader);
         if (found !== -1) {
             (this.dataDoc[this.props.fieldKey] as List<Doc>).splice(found, 1);
@@ -193,6 +197,10 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         console.log(this._filterMatch);
     }
 
+    @computed get yPos() {
+        return this.myFiltersRef.current?.getBoundingClientRect();
+    }
+
 
     @action
     changeSelected = (e: any) => {
@@ -206,6 +214,12 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         console.log(this._filterSelected);
     }
 
+    saveFilter = () => {
+        Doc.AddDocToList(Doc.UserDoc(), "savedFilters", this.props.Document);
+        console.log("saved filter");
+        console.log(Doc.UserDoc().savedFilters);
+    }
+
     render() {
         const facetCollection = this.props.Document;
         // const flyout = <div className="filterBox-flyout" style={{ width: `100%` }} onWheel={e => e.stopPropagation()}>
@@ -220,6 +234,16 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
 
         // const options = this._allFacets.filter(facet => !attributes.some(attribute => attribute.title === facet)).map(facet => ({ value: facet, label: facet }));
         const options = this._allFacets.map(facet => ({ value: facet, label: facet }));
+        // console.log(this.props.Document);
+        // console.log(Doc.UserDoc().currentFilter);
+        console.log(this.yPos);
+        console.log(this.myFiltersRef.current?.getBoundingClientRect());
+
+        const flyout = <>
+            <div className="nothing for now" onWheel={e => e.stopPropagation()}>
+                testing flyout
+            </div>
+        </>;
 
         return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}>
 
@@ -320,18 +344,27 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
 
                 <div style={{ display: "flex" }}>
                     <div className="filterBox-saveWrapper">
-                        <div className="filterBox-saveBookmark">
+                        <div className="filterBox-saveBookmark"
+                            onPointerDown={this.saveFilter}
+                        >
                             <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"save"} size={"sm"} />
                             <div>SAVE</div>
                         </div>
                     </div>
                     <div className="filterBox-saveWrapper">
-                        <div className="filterBox-saveBookmark">
+                        <div className="filterBox-saveBookmark" ref={this.myFiltersRef}>
                             <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} />
-                            <div>MY FILTERS</div>
+                            <Flyout className="myFilters-flyout" anchorPoint={anchorPoints.TOP} content={flyout}>
+                                <div>MY FILTERS</div>
+                            </Flyout>
                         </div>
                     </div>
                 </div>
+                <div
+                    style={{ width: 200, height: 200, backgroundColor: "black", color: "white" }}
+                >
+                    floot floot
+                </div>
             </div>
         </div>;
     }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 9aacf5375..493dd2ba4 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1062,7 +1062,7 @@ export namespace Doc {
     // all documents with the specified value for the specified key are included/excluded 
     // based on the modifiers :"check", "x", undefined
     export function setDocFilter(target: Opt<Doc>, key: string, value: any, modifiers?: "remove" | "match" | "check" | "x" | undefined) {
-        console.log("m8");
+        // console.log(key, value, modifiers);
         const container = target ?? CollectionDockingView.Instance.props.Document;
         const docFilters = Cast(container._docFilters, listSpec("string"), []);
         runInAction(() => {