glib-web 2.6.7 → 3.0.0

package/utils/history.js

@@ -1,4 +1,6 @@
-import Vue from "vue";
+import { nextTick } from "vue";
+import eventBus from "./eventBus";
+import { vueApp } from "../store";
 
 export default class {
   static saveInitialContent(content) {
@@ -20,7 +22,7 @@ export default class {
   }
 
   static _data(content) {
-    return { content: content, navigationCount: this.navigationCount };
+    return { content: JSON.parse(JSON.stringify(content)), navigationCount: this.navigationCount };
   }
 
   static pushPage(content, url) {
@@ -47,17 +49,19 @@ export default class {
       //   return false;
       // }
 
-      window.vueApp.isFormDirty = false;
+      vueApp.isFormDirty = false
 
       // Save scroll position of the current page when navigating through back/forward button
       this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;
 
       const data = event.state;
       data.content.__poppedState = true;
-      window.vueApp.page = data.content;
+      // 
+
+      vueApp.page = data.content
       vm.navigationCount = data.navigationCount;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         const scrollTop = this.bodyScrollTops[this.navigationCount];
         this._pageBody.scrollTop = scrollTop;
       });
@@ -68,8 +72,8 @@ export default class {
     return page.__poppedState == true;
   }
 
-  static updatePage(url = window.location.href) {
-    window.history.replaceState(this._data(window.vueApp.page), "", url);
+  static updatePage(page, url = window.location.href) {
+    window.history.replaceState(this._data(page), "", url);
   }
 
   static back() {
@@ -77,7 +81,7 @@ export default class {
       window.history.back();
       return true;
     } else {
-      console.debug("Reached beginning of navigation stack");
+      console.log("Reached beginning of navigation stack");
       return false;
     }
   }

package/utils/http.js

@@ -1,6 +1,8 @@
 import Type from "./type";
 import Action from "../action";
-import Vue from "vue";
+import eventBus from "./eventBus";
+import { nextTick } from 'vue'
+import { vueApp } from "../store";
 
 let loading = false;
 const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
@@ -31,8 +33,7 @@ export default class {
     const formData = new FormData();
     var params = data || {};
     for (const key in params) {
-      // formData.append(key, params[key]);
-      this._populateFormData(formData, key, params[key]);
+      formData.append(key, params[key]);
     }
 
     if (needCsrfToken && !Type.isString(params["authenticity_token"])) {
@@ -41,33 +42,8 @@ export default class {
     return formData;
   }
 
-  static _populateFormData(formData, key, value) {
-    if (GLib.type.isArray(value)) {
-      for (const item of value) {
-        this._populateFormData(formData, `${key}[]`, item);
-      }
-    } else if (GLib.type.isObject(value)) {
-      for (const innerKey in value) {
-        this._populateFormData(
-          formData,
-          `${key}[${innerKey}]`,
-          value[innerKey]
-        );
-      }
-    } else {
-      formData.append(key, value);
-    }
-  }
-
   static load(properties, component) {
-    const urlString = properties["url"];
-    let url;
-    try {
-      url = new URL(urlString);
-    } catch (e) {
-      console.warn("Invalid URL", urlString);
-      throw e;
-    }
+    const url = new URL(properties["url"]);
     const domainMatched = window.location.hostname == url.hostname;
 
     // If this is an external domain, we rely on `onUnload()` instead.
@@ -87,7 +63,9 @@ export default class {
 
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
-          window.vueApp.page = data;
+
+          vueApp.page = data
+
           Action.execute(properties["onOpen"], component);
         });
       });
@@ -99,7 +77,7 @@ export default class {
 
   static analyticsHeaders(component) {
     const pageAnalytics =
-      window.vueApp.temp.analytics || window.vueApp.page.analytics || {};
+      vueApp.temp.analytics || vueApp.page || {};
     const featureAnalytics = pageAnalytics.feature;
 
     const headers = {};
@@ -140,16 +118,16 @@ export default class {
 
     Utils.http.execute(data, "GET", component, (page, response) => {
       Utils.http.forceComponentUpdate(() => {
-        window.vueApp.page = page;
+        vueApp.page = page
         const redirectUrl = Utils.url.htmlUrl(response.url);
-        Utils.history.updatePage(redirectUrl);
+        Utils.history.updatePage(page, redirectUrl);
 
         GLib.action.execute(properties["onReload"], component);
       });
     });
   }
 
-  static execute(properties, methodName, component, jsonHandler, errorHandler) {
+  static execute(properties, methodName, component, jsonHandler) {
     this.startIndicator(component);
 
     // `fetch()` only supports uppercase
@@ -160,23 +138,18 @@ export default class {
       url = Utils.url.appendParams(url, body);
       body = null;
     }
-    console.debug(`${method} ${url}`);
+    console.log(`${method} ${url}`);
 
     const request = new HttpRequest();
     let response = null;
     const vm = this;
 
     const analyticsHeaders = this.analyticsHeaders(component);
-    const headers = Object.assign(
-      { Accept: "text/html" },
-      analyticsHeaders,
-      GLib.settings.headerAugmenter(url, method)
-    );
 
     fetch(url, {
       method: method,
       body: body,
-      headers: headers,
+      headers: Object.assign({ Accept: "text/html" }, analyticsHeaders),
       // Make sure to pass cookies for same origin URLs.
       // Needed for some browsers, e.g. Edge and Android's native.
       credentials: "same-origin",
@@ -185,12 +158,12 @@ export default class {
       .then(res => {
         vm.stopIndicator(component);
 
-        response = res;
         if (res.status >= 500) {
           throw "Server error";
         } else if (res.status >= 400) {
           throw "Not accessible";
         } else {
+          response = res;
           return res.json();
         }
       })
@@ -200,17 +173,9 @@ export default class {
       })
       .catch(error => {
         vm.stopIndicator(component);
-
         if (!request.canceled) {
-          const message = error.toString();
-
-          console.error("Error:", message);
-
-          if (errorHandler) {
-            errorHandler(error, response);
-          } else {
-            Utils.launch.snackbar.error(message, component);
-          }
+          console.error("Error:", error);
+          Utils.launch.snackbar.error(error, component);
         } else {
           console.info("Canceled");
         }
@@ -234,54 +199,47 @@ export default class {
     setTimeout(() => {
       if (loading) {
         loading = false;
-        window.vueApp.indicator = true;
+        vueApp.indicator = true
       }
     }, 200);
   }
 
   static _hideIndicator() {
     loading = false;
-    window.vueApp.indicator = false;
+    vueApp.indicator = false
   }
 
   // See generic.js
   static forceComponentUpdate(handler) {
     // GLib.component.clearRegistry();
-
-    const dirtyContext = this.dirtyContext();
-
-    window.vueApp.isStale = true;
+    vueApp.isStale = true
+    vueApp.isFormSubmitted = false
+    vueApp.isFormDirty = false
+    handler();
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
-    Vue.nextTick(() => {
-      dirtyContext.isFormSubmitted = false;
-      dirtyContext.isFormDirty = false;
-      handler();
-      window.vueApp.isStale = false;
+    nextTick(() => {
+      vueApp.isStale = false
     });
   }
 
   static promptIfDirtyOnUnload() {
     window.onbeforeunload = () => {
-      return this.dirtyContext().isFormDirty ? dirtyPrompt : null;
+      vueApp.isFormDirty ? dirtyPrompt : null;
     };
   }
 
-  static dirtyContext() {
-    return Utils.launch.dialog.topDialog() || window.vueApp;
-  }
-
   static clearDirtyState() {
-    this.dirtyContext().isFormDirty = false;
+    vueApp.isFormDirty = false
   }
 
   static notifyFormSubmitted() {
-    this.dirtyContext().isFormSubmitted = true;
+    vueApp.isFormSubmitted = true
   }
 
   // `context` can be either window or dialog.
   static proceedEvenWhenDirty() {
-    const dirtyContext = this.dirtyContext();
+    const dirtyContext = vueApp
     // Don't prompt if this is a result of form submission
     if (
       dirtyContext.isFormDirty &&

package/utils/launch.js

@@ -1,8 +1,12 @@
-import Vue from "vue";
-import Dialog from "../nav/dialog";
-import Sheet from "../nav/sheet";
-import Snackbar from "../nav/snackbar";
-import Vuetify from "vuetify";
+import { Vue } from "../index";
+import Dialog from "../nav/dialog.vue";
+import Sheet from "../nav/sheet.vue";
+import Snackbar from "../nav/snackbar.vue";
+import Popover from "../components/popover.vue";
+import { computePosition, shift, offset } from '@floating-ui/dom'
+import bus from "./eventBus";
+
+import { createApp, h } from "vue";
 
 export default class {
   static get dialog() {
@@ -16,11 +20,53 @@ export default class {
   static get snackbar() {
     return LaunchSnackbar;
   }
+
+  static get popover() {
+    return LaunchPopover;
+  }
+}
+
+class LaunchPopover {
+  static open(properties, component) {
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Popover, { spec: properties })
+        }
+      }
+    )
+    Object.assign(instance._context, Vue._context)
+
+    if (component) {
+      const placeholder = document.createElement('div')
+      component.$el.parentElement.appendChild(placeholder)
+      instance.mount(placeholder);
+
+      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
+
+      const floating = placeholder
+      const placement = properties.location || 'right'
+      const offsetSize = properties.offset || 8
+      computePosition(reference, floating, { placement: placement, middleware: [shift(), offset(offsetSize)] })
+        .then(({ x, y }) => {
+          Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, position: 'absolute', zIndex: 1000, display: 'block' })
+        })
+    } else {
+      console.error("A popover has to be displayed in a component");
+    }
+
+    return instance;
+  }
+
+  static close(properties) {
+    bus.$emit(`popover/close-${properties.key}`, properties)
+  }
 }
 
 class LaunchDialog {
   static closestBody(component) {
-    const dialog = component.$el.closest(".v-dialog");
+    const element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
+    const dialog = element.closest(".v-dialog");
     if (dialog) {
       return dialog.querySelector(".dialogs-body");
     }
@@ -44,30 +90,26 @@ class LaunchDialog {
       this.stack = [];
     }
 
+
     // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
-    const DialogClass = Vue.extend(Dialog);
-    const instance = new DialogClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const props = {
+      spec: properties,
+      stack: this.stack
+    }
+
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Dialog, props)
         }
-      }),
-      propsData: {
-        spec: properties,
-        stack: this.stack,
-        vueApp: window.vueApp
       }
-    });
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // const placeholder = component
-      //   .$dialogContainer()
-      //   .appendChild(document.createElement("div"));
-
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A dialog has to be displayed in a component");
     }
@@ -116,21 +158,19 @@ class LaunchDialog {
 
 class LaunchSheet {
   static open(properties, component) {
-    const SheetClass = Vue.extend(Sheet);
-    const instance = new SheetClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Sheet, { spec: properties })
         }
-      }),
-      propsData: { spec: properties }
-    });
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A sheet has to be displayed in a component");
     }
@@ -158,25 +198,22 @@ class LaunchSheet {
 
 class LaunchSnackbar {
   static open(properties, component) {
-    const SnackbarClass = Vue.extend(Snackbar);
-    const instance = new SnackbarClass({
-      vuetify: window.vueApp.vuetify,
-      propsData: { spec: properties, vueApp: window.vueApp }
-    });
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Snackbar, { spec: properties })
+        }
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // This doesn't seem to work when it is triggered from a list row's menu.
-      // const placeholder = component.$el.appendChild(
-      //   document.createElement("div")
-      // );
-
-      const placeholder = document.body.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
       instance.show = true;
     } else {
-      console.error("A snackbar has to be displayed in a component");
+      console.error("A Snackbar has to be displayed in a component");
     }
 
     return instance;

package/utils/private/ws.js

@@ -1,19 +1,21 @@
+import { vueApp } from "../../store";
+
 export default class {
   static handleResponse(payload, component) {
     if (!Utils.type.isObject(payload)) {
       return;
     }
 
-    const ws = window.vueApp.webSocket;
+    const ws = vueApp.webSocket;
     Utils.type.ifObject(payload.wsHeader, header => {
       Object.assign(ws.header, header);
-      console.debug("New header: ", ws.header);
+      console.log("New header: ", ws.header);
     });
 
     const actionName = payload.action;
     if (actionName.startsWith("component/")) {
       const methodName = actionName.replace(/^component\//, "");
-      console.debug(`Executing component action: ${methodName}`);
+      console.log(`Executing component action: ${methodName}`);
       component[`action_${methodName}`](payload);
     } else {
       GLib.action.execute(payload, component);

package/utils/public.js

@@ -5,8 +5,11 @@ import Type from "./type";
 import Form from "./form";
 import Component from "./component";
 import Hash from "./hash";
+import Queue from "./queue";
 import Settings from "./settings";
 
+const _queue = new Queue();
+
 export default class {
   static get action() {
     return Action;
@@ -32,4 +35,7 @@ export default class {
   static get settings() {
     return Settings;
   }
+  static get queue() {
+    return _queue;
+  }
 }

package/utils/queue.js

@@ -0,0 +1,102 @@
+// From https://stackoverflow.com/questions/47157428/how-to-implement-a-pseudo-blocking-async-queue-in-js-ts
+
+// const jobQueue = [];
+export default class {
+  constructor() {
+    // invariant: at least one of the arrays is empty
+    this.resolvers = [];
+    this.promises = [];
+  }
+  _add() {
+    this.promises.push(
+      new Promise(resolve => {
+        this.resolvers.push(resolve);
+      })
+    );
+  }
+  enqueue(t) {
+    // if (this.resolvers.length) this.resolvers.shift()(t);
+    // else this.promises.push(Promise.resolve(t));
+    if (!this.resolvers.length) this._add();
+    this.resolvers.shift()(t);
+  }
+  dequeue() {
+    if (!this.promises.length) this._add();
+    return this.promises.shift();
+  }
+  // now some utilities:
+  isEmpty() {
+    // there are no values available
+    return !this.promises.length; // this.length <= 0
+  }
+  isBlocked() {
+    // it's waiting for values
+    return !!this.resolvers.length; // this.length < 0
+  }
+  get length() {
+    return this.promises.length - this.resolvers.length;
+  }
+  sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  async start() {
+    // TODO: This is experimental
+    const delayBetweenJobs = 2000;
+
+    for await (const job of this) {
+      console.log("Executing job...");
+      job();
+      if (delayBetweenJobs) {
+        console.log("Waiting for next job1...");
+        await this.sleep(delayBetweenJobs);
+        console.log("Waiting for next job2...");
+      }
+    }
+  }
+  [Symbol.asyncIterator]() {
+    // Todo: Use AsyncIterator.from()
+    return {
+      next: () => this.dequeue().then(value => ({ done: false, value })),
+      [Symbol.asyncIterator]() {
+        return this;
+      }
+    };
+  }
+}
+
+// export default class {
+//   constructor() {
+//     this.jobQueue = [];
+//     this.timerHandle = null;
+//   }
+//   // static get csrfElement() {
+//   //   return document.querySelector(`meta[name="csrf-token"]`);
+//   // }
+
+//   // static getCsrf() {
+//   //   return this.csrfElement.getAttribute("content");
+//   // }
+
+//   // static setCsrf(value) {
+//   //   return this.csrfElement.setAttribute("content", value);
+//   // }
+
+//   start(interval) {
+//     this.timerHandle = setInterval(() => {
+//       console.log("DEQUQE1");
+//       const oldestJob = this.jobQueue.shift();
+//       if (oldestJob) {
+//         console.log("DEQUQE2");
+//         oldestJob();
+//       }
+//     }, interval);
+//   }
+
+//   stop() {
+//     clearInterval(this.timerHandle);
+//   }
+
+//   enqueue(job) {
+//     this.jobQueue.push(job);
+//   }
+// }

package/utils/settings.js

@@ -1,3 +1,5 @@
+import config from '../package.json';
+
 class MutableSettings {
   constructor() {
     this.reactive = true;
@@ -6,10 +8,6 @@ class MutableSettings {
     this.errorHandler = err => {
       console.error(err.message);
     };
-    this.headerAugmenter = (_url, _method) => {
-      // Set a custom augmenter to add custom HTTP headers.
-      return {};
-    };
   }
 }
 const settings = new MutableSettings();
@@ -28,16 +26,12 @@ export default class ImmutableSettings {
     return settings.errorHandler;
   }
 
-  static get headerAugmenter() {
-    return settings.headerAugmenter;
-  }
-
   static get env() {
     return process.env.NODE_ENV;
   }
 
   static get appVersion() {
-    return require("../package.json").version;
+    return config.version;
   }
 
   // static get build() {