glib-web 0.5.77

package/components/mixins/list/autoload.js

@@ -0,0 +1,144 @@
+export default {
+  data: function() {
+    return {
+      topScrollHandler: null,
+      bottomScrollHandler: null,
+      nextPageUrl: null,
+      prevPageUrl: null,
+      request: null,
+      infiniteScroll: null
+    };
+  },
+  computed: {
+    bottomAnchorStyles() {
+      return {
+        display: this.infiniteScroll && this.nextPageUrl ? "block" : "none"
+      };
+    }
+  },
+  methods: {
+    enableInfiniteScrollIfApplicable: function() {
+      this.$removeViewportChangeListeners(this.topScrollHandler);
+      this.$removeViewportChangeListeners(this.bottomScrollHandler);
+
+      const prevPage = this.spec.prevPage || {};
+      const nextPage = this.spec.nextPage || {};
+
+      // const infiniteScroll = nextPage.autoload == "asNeeded";
+      // // const infiniteScroll = nextPage.autoLoad;
+      // if (infiniteScroll) {
+      //   const nextPageUrl = nextPage.url;
+      //   const onScrollToBottom = this.spec.onScrollToBottom;
+      //   if (nextPageUrl || onScrollToBottom) {
+      //     this._registerBottomScroll(nextPageUrl, onScrollToBottom);
+      //   }
+
+      //   const prevPageUrl = prevPage.url;
+      //   const onScrollToTop = this.spec.onScrollToTop;
+      //   if (prevPageUrl || onScrollToTop) {
+      //     this._registerTopScroll(prevPageUrl, onScrollToTop);
+      //   }
+      // }
+
+      this.infiniteScroll = nextPage.autoload == "asNeeded";
+      const onScrollToBottom = this.spec.onScrollToBottom;
+      const onScrollToTop = this.spec.onScrollToTop;
+
+      if (this.infiniteScroll) {
+        this.nextPageUrl = nextPage.url;
+        this.prevPageUrl = prevPage.url;
+      }
+
+      if (this.nextPageUrl || onScrollToBottom) {
+        this._registerBottomScroll(onScrollToBottom);
+      }
+
+      if (this.prevPageUrl || onScrollToTop) {
+        this._registerTopScroll(onScrollToTop);
+      }
+    },
+    _registerTopScroll(onScrollToTop) {
+      // TODO: Consider adding support for prevPageUrl
+      this.topScrollHandler = this.$onVisibilityChange(
+        this.$refs.topAnchor,
+        (el, visible) => {
+          if (visible) {
+            this._handleTopScroll(onScrollToTop);
+            // GLib.action.execute(onScrollToTop, null, this);
+          }
+        }
+      );
+
+      this.$addViewportChangeListeners(this.topScrollHandler);
+    },
+    _handleTopScroll(onScrollToTop) {
+      GLib.action.execute(onScrollToTop, null, this);
+    },
+    _registerBottomScroll(onScrollToBottom) {
+      this.bottomScrollHandler = this.$onVisibilityChange(
+        this.$refs.bottomAnchor,
+        (el, visible) => {
+          if (visible) {
+            this._handleBottomScroll(onScrollToBottom);
+          }
+        }
+      );
+
+      this.$addViewportChangeListeners(this.bottomScrollHandler);
+    },
+    _handleBottomScroll(onScrollToBottom) {
+      if (this.nextPageUrl) {
+        this.request = Utils.http.execute(
+          { url: this.nextPageUrl },
+          "GET",
+          this,
+          response => {
+            const nextPage = response.nextPage;
+            if (this.$type.isObject(nextPage)) {
+              this.nextPageUrl = response.nextPage.url;
+            } else {
+              this.nextPageUrl = null;
+            }
+
+            for (const section of response.sections) {
+              this.sections.push(section);
+            }
+            Utils.history.updatePage();
+          }
+        );
+      }
+
+      GLib.action.execute(onScrollToBottom, null, this);
+    },
+    autoloadAll(nextPage) {
+      const vm = this;
+
+      if (!this.$type.isObject(nextPage)) {
+        return;
+      }
+      if (nextPage.autoload !== "all") {
+        return;
+      }
+
+      let nextPageUrl = nextPage.url;
+
+      this.request = Utils.http.execute(
+        { url: nextPageUrl },
+        "GET",
+        vm,
+        function(response) {
+          for (const section of response.sections) {
+            vm.sections.push(section);
+          }
+          vm.autoloadAll(response.nextPage);
+        }
+      );
+    },
+    cancelAutoloadRequest() {
+      // Avoid old data coming in when this component gets reused.
+      if (this.request) {
+        this.request.cancel();
+      }
+    }
+  }
+};

package/components/mixins/longClick.js

@@ -0,0 +1,56 @@
+// From https://github.com/ittus/vue-long-click
+export default ({ delay = 400, interval = 50 }) => ({
+  bind: function(el, binding, vNode) {
+    if (typeof binding.value !== "function") {
+      const compName = vNode.context.name;
+      let warn = `[longclick:] provided expression '${binding.expression}' is not a function, but has to be`;
+      if (compName) {
+        warn += `Found in component '${compName}' `;
+      }
+      console.warn(warn) // eslint-disable-line
+      return;
+    }
+
+    let pressTimer = null;
+    let pressInterval = null;
+
+    const start = e => {
+      if (e.type === "mousedown" && e.button !== 0) {
+        return;
+      }
+
+      if (pressTimer === null) {
+        pressTimer = setTimeout(() => {
+          if (interval && interval > 0) {
+            pressInterval = setInterval(() => {
+              handler();
+            }, interval);
+          }
+          handler();
+          pressTimer = null;
+        }, delay);
+      }
+    };
+
+    // Cancel Timeout
+    const cancel = () => {
+      if (pressTimer !== null) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+      }
+      if (pressInterval) {
+        clearInterval(pressInterval);
+        pressInterval = null;
+      }
+    };
+    // Run Function
+    const handler = e => {
+      binding.value(e);
+    };
+
+    ["mousedown", "touchstart"].forEach(e => el.addEventListener(e, start));
+    ["click", "mouseup", "touchend", "touchcancel"].forEach(e => {
+      el.addEventListener(e, cancel);
+    });
+  }
+});

package/components/mixins/scrolling.js

@@ -0,0 +1,35 @@
+export default {
+  methods: {
+    _isElementInViewport(el) {
+      var rect = el.getBoundingClientRect();
+
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <=
+          (window.innerHeight ||
+            document.documentElement.clientHeight) /*or $(window).height() */ &&
+        rect.right <=
+          (window.innerWidth ||
+            document.documentElement.clientWidth) /*or $(window).width() */
+      );
+    },
+    // From https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
+    $onVisibilityChange(el, callback) {
+      const isElementInViewport = this._isElementInViewport;
+      var old_visible;
+      const handler = function() {
+        var visible = isElementInViewport(el);
+        if (visible != old_visible) {
+          old_visible = visible;
+          callback(el, visible);
+        }
+      };
+
+      // Make sure it executes right away (e.g. during onReady())
+      handler();
+
+      return handler;
+    }
+  }
+};

package/components/mixins/styles.js

@@ -0,0 +1,221 @@
+import Hash from "../../utils/hash";
+import Vue from "vue";
+
+var jsonLogic = require("json-logic-js");
+
+// jsonLogic.add_operation("add_ms", function(a, b) {
+//   if (Utils.type.isString(a)) {
+//     const newValue = new Date(new Date(a).getTime() + b * 1000);
+//     return newValue.toISOString();
+//   }
+//   return null;
+// });
+export default {
+  data: function() {
+    return {
+      _fieldModels: {},
+      fieldName: null,
+      fieldModel: null,
+
+      // Some components do not support null or empty string value, so we need to use an intermediary value.
+      // See https://github.com/vuetifyjs/vuetify/issues/8876
+      vuetifyEmptyString: "<EMPTY_STRING>"
+    };
+  },
+  computed: {
+    display() {
+      const conditions = this.spec.showIf;
+      if (conditions) {
+        return jsonLogic.apply(conditions, this.$data._fieldModels)
+          ? this.$displayValue()
+          : "none";
+      } else {
+        return this.$displayValue();
+      }
+    }
+  },
+  watch: {
+    fieldModel: function(val, oldVal) {
+      if (val === this.vuetifyEmptyString) {
+        val = "";
+      }
+      // Make the field property observable for dynamic showing/hiding
+      Vue.set(
+        this.$data._fieldModels,
+        this.fieldName,
+        this.$internalizeValue(val)
+      );
+
+      // this.$saveValue(val);
+      // Vue.set(this.$data._fieldModels, this.fieldName, val);
+    }
+  },
+  methods: {
+    // TODO: Deprecated
+    genericStyles(spec) {
+      return this.$styles(spec);
+    },
+    // NOTE: Styles are dynamic, do not save it in $ready().
+    $styles(spec) {
+      const properties = spec || this.spec;
+      const styles = {
+        // color: properties.color,
+        // "background-color": properties.backgroundColor,
+        // "text-align": properties.textAlign
+      };
+
+      Utils.type.ifString(properties.color, val => (styles["color"] = val));
+
+      Utils.type.ifString(
+        properties.backgroundColor,
+        val => (styles["background-color"] = val)
+      );
+
+      Utils.type.ifString(
+        properties.textAlign,
+        val => (styles["text-align"] = val)
+      );
+
+      // const padding = properties.padding;
+      // if (Utils.type.isObject(padding)) {
+      //   Utils.type.ifNumber(
+      //     padding.top,
+      //     top => (styles["padding-top"] = `${top}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.bottom,
+      //     bottom => (styles["padding-bottom"] = `${bottom}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.left,
+      //     left => (styles["padding-left"] = `${left}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.right,
+      //     right => (styles["padding-right"] = `${right}px`)
+      //   );
+      // }
+
+      Utils.type.ifObject(properties.padding, padding => {
+        Utils.type.ifNumber(
+          padding.top,
+          top => (styles["padding-top"] = `${top}px`)
+        );
+        Utils.type.ifNumber(
+          padding.bottom,
+          bottom => (styles["padding-bottom"] = `${bottom}px`)
+        );
+        Utils.type.ifNumber(
+          padding.left,
+          left => (styles["padding-left"] = `${left}px`)
+        );
+        Utils.type.ifNumber(
+          padding.right,
+          right => (styles["padding-right"] = `${right}px`)
+        );
+      });
+
+      Utils.type.ifString(
+        this.$length(properties.width),
+        val => (styles["width"] = val)
+      );
+      Utils.type.ifString(
+        this.$length(properties.height),
+        val => (styles["height"] = val)
+      );
+
+      Utils.type.ifObject(
+        properties.onClick,
+        () => (styles["cursor"] = "pointer")
+      );
+
+      // This is the main reason styles have to be used in a dynamic way.
+      this._updateDisplay(styles, properties);
+
+      return new Hash(styles);
+    },
+    $length: function(length) {
+      if (Utils.type.isString(length) || Utils.type.isNumber(length)) {
+        switch (length) {
+          case "wrapContent":
+            return null;
+          case "matchParent":
+            return "100%";
+          default:
+            return `${length}px`;
+        }
+      }
+      return null;
+    },
+    $builtinColor(styleClasses) {
+      let color = null;
+      Utils.type.ifArray(styleClasses, classes => {
+        for (const val of ["success", "info", "warning", "error"]) {
+          if (classes.remove(val)) {
+            color = val;
+          }
+        }
+      });
+      return color;
+    },
+    _updateDisplay(styles, properties) {
+      Utils.type.ifObject(
+        properties.showIf,
+        () => (styles["display"] = this.display)
+      );
+      Utils.type.ifObject(properties.valueIf, logic => {
+        const newValue = jsonLogic.apply(logic, this.$data._fieldModels);
+        this.fieldModel = this._sanitizeValue(this.$externalizeValue(newValue));
+      });
+    },
+    $displayValue() {
+      return "block"; // To be overridden
+    },
+    _sanitizeValue(val) {
+      return Utils.type.isNotNull(val) ? this.$sanitizeValue(val) : null;
+    },
+    $sanitizeValue(val) {
+      return val; // To be overridden
+    },
+    $internalizeValue(val) {
+      return val;
+    },
+    $externalizeValue(val) {
+      return val;
+    },
+    _linkFieldModels() {
+      const hasCondition = this.spec && this.spec.showIf;
+      const name = Utils.app.vueName(this);
+      const isField = name && name.startsWith("fields-");
+      if (hasCondition || isField) {
+        const form = this.$closest("panels-form");
+        if (form != null) {
+          this.$data._fieldModels = form.$data._fieldModels;
+        }
+
+        // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
+        // may be used without a form.
+        this.fieldName = this.spec.name;
+        this.fieldModel = this._sanitizeValue(this.spec.value);
+      }
+    },
+    $classes(spec) {
+      const properties = spec || this.spec;
+      const componentName = Utils.app.componentName(properties.view);
+      const classes = (properties.styleClasses || []).concat(componentName);
+
+      Utils.type.ifArray(properties.styleClasses, val => {
+        if (val.includes("card")) {
+          classes.push("v-card");
+          classes.push("v-sheet");
+          classes.push("theme--light");
+
+          if (val.includes("outlined")) {
+            classes.push("v-sheet--outlined");
+          }
+        }
+      });
+      return classes;
+    }
+  }
+};

package/components/mixins/table/autoload.js

@@ -0,0 +1,131 @@
+export default {
+  data: function() {
+    return {
+      topScrollHandler: null,
+      bottomScrollHandler: null,
+      nextPageUrl: null,
+      prevPageUrl: null,
+      request: null,
+      infiniteScroll: null
+    };
+  },
+  computed: {
+    bottomAnchorStyles() {
+      return {
+        display: this.infiniteScroll && this.nextPageUrl ? "block" : "none"
+      };
+    }
+  },
+  methods: {
+    enableInfiniteScrollIfApplicable: function() {
+      this.$removeViewportChangeListeners(this.topScrollHandler);
+      this.$removeViewportChangeListeners(this.bottomScrollHandler);
+
+      const prevPage = this.spec.prevPage || {};
+      const nextPage = this.spec.nextPage || {};
+
+      this.infiniteScroll = nextPage.autoload == "asNeeded";
+      const onScrollToBottom = this.spec.onScrollToBottom;
+      const onScrollToTop = this.spec.onScrollToTop;
+
+      if (this.infiniteScroll) {
+        this.nextPageUrl = nextPage.url;
+        this.prevPageUrl = prevPage.url;
+      }
+
+      if (this.nextPageUrl || onScrollToBottom) {
+        this._registerBottomScroll(onScrollToBottom);
+      }
+
+      if (this.prevPageUrl || onScrollToTop) {
+        this._registerTopScroll(onScrollToTop);
+      }
+    },
+    _registerTopScroll(onScrollToTop) {
+      // TODO: Consider adding support for prevPageUrl
+      this.topScrollHandler = this.$onVisibilityChange(
+        this.$refs.topAnchor,
+        (el, visible) => {
+          if (visible) {
+            this._handleTopScroll(onScrollToTop);
+          }
+        }
+      );
+
+      this.$addViewportChangeListeners(this.topScrollHandler);
+      // this.topScrollHandler();
+    },
+    _handleTopScroll(onScrollToTop) {
+      GLib.action.execute(onScrollToTop, null, this);
+    },
+    _registerBottomScroll(onScrollToBottom) {
+      this.bottomScrollHandler = this.$onVisibilityChange(
+        this.$refs.bottomAnchor,
+        (el, visible) => {
+          if (visible) {
+            this._handleBottomScroll(onScrollToBottom);
+          }
+        }
+      );
+
+      this.$addViewportChangeListeners(this.bottomScrollHandler);
+      // NOTE: Right now there is an issue where after popping to previus page, the page auto-loads from the beginning
+      // again, so we get duplicate rows.
+      // this.bottomScrollHandler();
+    },
+    _handleBottomScroll(onScrollToBottom) {
+      if (this.nextPageUrl) {
+        this.request = Utils.http.execute(
+          { url: this.nextPageUrl },
+          "GET",
+          this,
+          response => {
+            const nextPage = response.nextPage;
+            if (this.$type.isObject(nextPage)) {
+              this.nextPageUrl = response.nextPage.url;
+            } else {
+              this.nextPageUrl = null;
+            }
+
+            for (const section of response.sections) {
+              this.sections.push(section);
+            }
+            Utils.history.updatePage();
+          }
+        );
+      }
+
+      GLib.action.execute(onScrollToBottom, null, this);
+    },
+    autoloadAll(nextPage) {
+      const vm = this;
+
+      if (!this.$type.isObject(nextPage)) {
+        return;
+      }
+      if (nextPage.autoload !== "all") {
+        return;
+      }
+
+      let nextPageUrl = nextPage.url;
+
+      this.request = Utils.http.execute(
+        { url: nextPageUrl },
+        "GET",
+        vm,
+        function(response) {
+          for (const section of response.sections) {
+            vm.sections.push(section);
+          }
+          vm.autoloadAll(response.nextPage);
+        }
+      );
+    },
+    cancelAutoloadRequest() {
+      // Avoid old data coming in when this component gets reused.
+      if (this.request) {
+        this.request.cancel();
+      }
+    }
+  }
+};

package/components/mixins/table/export.js

@@ -0,0 +1,52 @@
+export default {
+  data: function () {
+    return {
+      exportable: false,
+      exportLabel: 'CSV',
+      exportFile: 'output',
+    }
+  },
+  methods: {
+    initCsvExport() {
+      let exportName = 'output'
+      const vm = this
+      Utils.type.ifObject(this.spec.export, obj => {
+        vm.exportable = true
+        
+        Utils.type.ifString(obj.label, val => {
+          vm.exportLabel = val
+        })
+        Utils.type.ifString(obj.fileName, val => {
+          exportName = val
+        })
+      })
+      
+      this.exportFile = `${exportName}.csv`
+    },
+    exportCsv(section) {
+      return 'data:text/csv;charset=' + document.characterSet + ',' + encodeURI(this._compileCsvRows(section));
+    },
+    _compileCsvRows(section) {
+      const lines = []
+      lines.push(this._compileCsvRow(section.header))
+      for (const row of section.rows) {
+        lines.push(this._compileCsvRow(row))
+      }
+      return lines.join("\n")
+    },
+    _compileCsvRow(row) {
+      return row.cellViews.map(view => this._escapeForCsv(view.text)).join(",")
+    },
+    _escapeForCsv(text) {
+      if (Utils.type.isString(text)) {
+        if (text === "") {
+          return '""'
+        } else if (text.contains('"') || text.contains("\n") || text.contains("\r") || text.contains(",")) {
+          return '"' + text.replace(/"/g, '""') + '"'
+        }
+        return text
+      }
+      return '""'
+    },
+  }
+}