datafolder 1.0.5 → 1.0.6

package/static/datafolderui/query-editor.js

@@ -1,234 +1,214 @@
 import {
-    w2popup
+    w2popup as o
 } from "../w2ui/src/w2compat.js";
 
 import {
-    h
+    h as n
 } from "./hscrpt.js";
 
 import {
-    rpc
+    rpc as i
 } from "./QyUIUtils.js";
 
-import {} from "./list-input.js";
-
-import {} from "./kv-input.js";
-
 import {
-    setWidth
+    setWidth as s
 } from "./QyUIUtils.js";
 
-import {} from "./display-tree.js";
+import "./display-tree.js";
+
+let a = "localStorage_queryFun_map", u = new Event("run");
+
+async function l(t, e) {
+    var {
+        queryId: r,
+        displayTree: o
+    } = t, {
+        tree: e,
+        count: n,
+        error: s
+    } = (++t.queryId, await i("evalCode", e));
+    r + 1 == t.queryId && (s ? o.showMsg(s) : o.showTree(e, n));
+}
+
+function c(s) {
+    return s.body = n("div", {
+        classList: "container-fluid",
+        style: "margin-top:1px;"
+    }, [ s.codemirror = n("code-mirror", {
+        changeCallback: t => {
+            var e = s, {
+                titleSet: r,
+                funName: o,
+                queryFunctions: n
+            } = e;
+            r && t.docChanged && (r = t.state.doc.toString(), t = e.textChanged = r != n[o], 
+            p(b(r) + (t ? "*" : "")));
+        }
+    }) ]);
+}
+
+function d(t, e) {
+    var {
+        queryInput: r,
+        codemirror: o,
+        queryFunctions: n
+    } = t, n = n[t.funName = e] ?? "";
+    r.value = n, t.titleSet = !1, o.text = n, p(e), o.clearHistory(), Object.assign(t, {
+        titleSet: !0,
+        textChanged: !1
+    });
+}
+
+function p(t) {
+    var e = document.querySelector("#w2ui-popup .w2ui-popup-title");
+    e && (e.innerText = t);
+}
+
+function m(t, e) {
+    var {
+        dropDownUL: r,
+        dropdownItemMap: o
+    } = t;
+    e in o || (o = o[e] = n("li", [ n("span", {
+        classList: "dropdown-item",
+        style: "cursor:pointer;",
+        onclick: () => d(t, e)
+    }, [ e ]) ]), r.append(o));
+}
 
-import {} from "./num-input.js";
+function g(t) {
+    localStorage.setItem(a, JSON.stringify(t));
+}
 
-let historyQueryList = [ {
-    folder: [ '"flights"', '"*"', 1, "(x) => x >= 5 && x <= 7" ],
-    value: {
-        $or: '[{ _from: "airports/BIS" }, { _to: "airports/BIS" }]'
-    },
-    view: [ '"**"' ]
-}, {
-    folder: [ '"flights"', '"*"', 1, "(x) => x >= 1 && x <= 7" ],
-    value: {
-        $or: '[{ _from: "airports/BIS" }, { _to: "airports/BIS" }]'
-    },
-    view: [ '"Distance"' ]
-}, {
-    folder: [ '"airbnb"', '"Loft"', '"Entire home/apt"', '"Real Bed"' ],
-    value: {
-        address: '{ street: "Porto, Porto, Portugal" }'
-    },
-    view: [ '"name"' ],
-    limit: 9,
-    cursor: 9
-} ], eventRun = new Event("run");
+function y(t) {
+    var {
+        queryFunctions: e,
+        codemirror: r,
+        textChanged: o
+    } = t;
+    o && (o = r.text, o) && (m(t, r = b(o)), e[r] = o, g(e), d(t, r));
+}
+
+function f(t) {
+    var e, r, o, {
+        queryFunctions: n,
+        codemirror: s
+    } = t, s = s.text;
+    s && (s = b(s), r = s, (o = (e = (e = t).dropdownItemMap)[r]) && (o.remove(), 
+    delete e[r]), delete n[s], g(n), d(t, Object.keys(n)[0]));
+}
+
+function b(t) {
+    t = /^\s*function\s+(\w+)\(/.exec(t);
+    return t ? t[1] : void 0;
+}
 
 customElements.define("query-editor", class extends HTMLElement {
     constructor() {
         super();
     }
     compose() {
-        this.append(this._createEditor(), h("div", {
+        var t = this, e = {
+            getFlightsByDate: `function getFlightsByDate() {
+    return dataFolder.queryTree(["flights", "*", 1, (x) => x >= 5 && x <= 7], {
+        $or: [{ _from: "airports/BIS" }, { _to: "airports/BIS" }],
+    });
+}`,
+            getFlightDistances: `function getFlightDistances() {
+    return dataFolder.queryTree(
+        ["flights", "*", 1, (x) => x >= 1 && x <= 7],
+        {
+            $or: [{ _from: "airports/BIS" }, { _to: "airports/BIS" }],
+        },
+        ["Distance"],
+    );
+}
+`,
+            getHotels: `function getHotels() {
+    return dataFolder.queryTree(
+        ["airbnb", "Loft", "Entire home/apt", "Real Bed"],
+        {
+            address: { street: "Porto, Porto, Portugal" },
+        },
+        ["name"],
+        9,
+        9,
+    );
+}`
+        }, r = localStorage.getItem(a);
+        r && Object.assign(e, JSON.parse(r)), Object.assign(t, {
+            queryFunctions: e,
+            queryId: 0,
+            funName: "getFlightsByDate",
+            dropdownItemMap: {}
+        }), this.append(n("div", {
             classList: "btn-toolbar",
             role: "toolbar",
             style: {
                 "border-bottom": "1px solid #e4e4e4"
             }
-        }, [ this._createDropDownButton(), this._createQueryInput(), this._createEditButton(), this._createRunButton(), this._createSaveButton() ]), this._createDisplayTree()), 
-        this._createBody(), Object.assign(this, {
-            queryId: 0
-        });
-    }
-    onSizeChange() {
-        setWidth(this.queryInput, this.editButton.parentElement.offsetLeft - this.queryInput.parentElement.offsetLeft), 
-        this.displayTree.onSizeChange();
-    }
-    get queryText() {
-        var {
-            folderList: t,
-            matchKVList: e,
-            viewList: r,
-            limitInput: s,
-            cursorInput: i
-        } = this;
-        return `{folder:${t.text},value:${e.text},view:${r.text} ${s.text} ${i.text}}`;
-    }
-    _createDisplayTree() {
-        return h("div", [ this.displayTree = h("display-tree") ]);
-    }
-    _createSaveButton() {
-        return h("div", {
-            classList: "btn-group btn-group-sm me-2",
-            role: "group"
-        }, [ h("button", {
-            classList: "btn btn-primary",
-            type: "button",
-            onclick: () => {
-                console.log("Save");
-            }
-        }, [ "Save" ]) ]);
-    }
-    _createEditButton() {
-        return h("div", {
-            classList: "btn-group btn-group-sm me-2",
-            role: "group"
-        }, [ this.editButton = h("button", {
-            classList: "btn btn-primary",
-            type: "button",
-            onclick: () => this._toggleEditor()
-        }, [ "Edit" ]) ]);
-    }
-    _createRunButton() {
-        return h("div", {
-            classList: "btn-group btn-group-sm me-2",
-            role: "group"
-        }, [ h("button", {
-            classList: "btn btn-primary",
-            type: "button",
-            onclick: () => this._queryFiles()
-        }, [ "Run" ]) ]);
-    }
-    _createQueryInput() {
-        return h("div", {
+        }, [ (t => {
+            var e, r = t.dropDownUL = n("ul", {
+                classList: "dropdown-menu"
+            }), o = t;
+            for (e in o.queryFunctions) m(o, e);
+            return n("div", {
+                classList: "btn-group btn-grou-sm"
+            }, [ n("button", {
+                classList: "btn btn-success dropdown-toggle",
+                type: "button",
+                "data-bs-toggle": "dropdown"
+            }, [ n("i", {
+                classList: "bi bi-clock"
+            }) ]), r ]);
+        })(r = this), (t => n("div", {
             classList: "input-group me-auto"
-        }, [ this.queryInput = h("input", {
+        }, [ t.queryInput = n("input", {
             id: "queryInput",
             type: "text",
             classList: "form-control",
             attrs: {
                 readonly: !0
             }
-        }) ]);
-    }
-    _createEditor() {
-        return h("textarea", {
-            style: "height:50px;width:100%"
-        });
-    }
-    _createDropDownButton() {
-        return h("div", {
-            classList: "btn-group btn-grou-sm"
-        }, [ h("button", {
-            classList: "btn btn-success dropdown-toggle",
-            type: "button",
-            "data-bs-toggle": "dropdown"
-        }, [ h("i", {
-            classList: "bi bi-clock"
-        }) ]), h("ul", {
-            classList: "dropdown-menu"
-        }, this._createHistoryDropDownList()) ]);
-    }
-    _createHistoryDropDownList() {
-        return historyQueryList.map(t => h("li", [ h("span", {
-            classList: "dropdown-item",
-            style: "cursor:pointer;",
-            onclick: () => this._setQueryFromHistory(t)
-        }, [ JSON.stringify(t) ]) ]));
-    }
-    async _queryFiles() {
-        let {
-            queryText,
-            queryId,
-            displayTree
-        } = this;
-        try {
-            eval("((x)=>x)(" + queryText + ")");
-        } catch (exception) {
-            return void displayTree.showMsg(exception.message);
-        }
-        ++this.queryId;
-        let {
-            tree,
-            count
-        } = await rpc("queryFiles", queryText);
-        queryId + 1 == this.queryId && displayTree.showTree(tree, count);
-    }
-    _toggleEditor() {
-        "closed" == w2popup.status ? w2popup.open({
-            title: "Edit Query",
-            body: this._getPopupBody(),
-            blockPage: !1,
-            resizable: !0,
-            width: 700,
-            height: 290,
-            actions: {
-                Run: () => {
-                    this.dispatchEvent(eventRun), this._queryFiles();
-                },
-                Save: () => {}
-            }
-        }) : w2popup.close();
-    }
-    _createBody() {
-        var {
-            folder: t,
-            value: e,
-            view: r
-        } = historyQueryList[0], s = this.body = h("div", {
-            classList: "container-fluid"
-        }), i = {
-            input: () => this._updateQueryText()
-        }, t = h("list-input", {
-            label: "folder",
-            on: i
-        }).set(t), e = h("kv-input", {
-            label: "value",
-            on: i
-        }).set(e), r = h("list-input", {
-            label: "view",
-            on: i
-        }).set(r), i = h("div", {
-            classList: "row align-items-center p-1"
-        }, [ this.limitInput = h("num-input", {
-            label: "limit",
-            on: i
-        }), this.cursorInput = h("num-input", {
-            label: "cursor",
-            on: i
-        }) ]);
-        return s.append(t, e, r, i), Object.assign(this, {
-            folderList: t,
-            matchKVList: e,
-            viewList: r
-        }), this._updateQueryText(), s;
+        }) ]))(r), ...(r => {
+            var t = [ [ "Edit", () => {
+                var t, e = r;
+                "closed" == o.status ? (t = {
+                    Run: () => {
+                        e.dispatchEvent(u), l(e, e.codemirror.text);
+                    },
+                    Save: () => y(e),
+                    Delete: () => f(e)
+                }, o.open({
+                    title: e.funName,
+                    body: (t => t.body || c(t))(e),
+                    blockPage: !1,
+                    resizable: !0,
+                    width: 800,
+                    height: 400,
+                    actions: t
+                })) : o.close();
+            } ], [ "Run", () => l(r, r.queryInput.value) ], [ "Save", () => y(r) ], [ "Delete", () => f(r) ] ].map(([ t, e ]) => n("div", {
+                classList: "btn-group btn-group-sm me-2",
+                role: "group"
+            }, [ n("button", {
+                classList: "btn btn-primary",
+                type: "button",
+                onclick: e
+            }, [ t ]) ]));
+            return r.firstButton = t[0], t.map(t => n("div", {
+                classList: "btn-group btn-group-sm me-2",
+                role: "group"
+            }, [ t ]));
+        })(r) ]), n("div", [ this.displayTree = n("display-tree") ])), c(this), 
+        d(this, this.funName);
     }
-    _getPopupBody() {
-        return this.body || this._createBody();
-    }
-    _updateQueryText() {
-        this.queryInput.value = this.queryText;
-    }
-    _setQueryFromHistory(t) {
+    onSizeChange() {
         var {
-            folderList: e,
-            matchKVList: r,
-            viewList: s
-        } = this, {
-            folder: t,
-            value: i,
-            view: o
-        } = t;
-        e.set(t), r.set(i), s.set(o), this._updateQueryText();
+            queryInput: t,
+            firstButton: e,
+            displayTree: r
+        } = this;
+        s(t, e.parentElement.offsetLeft - t.parentElement.offsetLeft), r.onSizeChange();
     }
 });