glib-web 2.6.7 → 3.0.0

package/action.js

@@ -52,12 +52,18 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 import ActionCommandsCustom from "./actions/commands/custom";
+import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
 import ActionToursStop from "./actions/tours/stop";
 
 import ActionComponentsUpdate from "./actions/components/update";
 
+import ActionPopoversOpen from "./actions/popovers/open"
+import ActionPopoversClose from "./actions/popovers/close"
+
+import { vueApp } from "./store";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
@@ -111,8 +117,12 @@ const actions = {
 
   "commands/copy": ActionCommandsCopy,
   "commands/custom": ActionCommandsCustom,
+  "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
+  "components/update": ActionComponentsUpdate,
+  "popovers/open": ActionPopoversOpen,
+  "popovers/close": ActionPopoversClose,
   "tours/stop": ActionToursStop,
   "components/update": ActionComponentsUpdate
 };
@@ -124,34 +134,43 @@ export default class Action {
     if (!TypeUtils.isObject(spec)) {
       return;
     }
-    if (!TypeUtils.isObject(component)) {
-      console.warn("Action requires a component");
-      return;
-    }
 
     const name = spec.action;
     if (TypeUtils.isString(name)) {
       if (name.startsWith("component/")) {
-        return this.executeLocal(name, spec, component);
+        this.executeLocal(name, spec, component);
       } else {
-        return this.executeGlobal(name, spec, component, params);
+        this.executeGlobal(name, spec, component, params);
       }
+
+      // const actionName = name.replace(/-v1$/, "");
+
+      // try {
+      //   const action = new actions[actionName]();
+      //   const logDisabled = action.logDisabled && action.logDisabled();
+      //   if (!logDisabled) {
+      //     console.log(`Executing "${actionName}"`);
+      //   }
+      //   action.execute(spec, null, component, params);
+      // } catch (e) {
+      //   console.log(`Failed executing command: "${e.message}"`);
+      // }
     } else {
-      console.warn(`Invalid action: "${name}"`);
+      console.log(`Invalid action: "${name}"`);
     }
   }
 
   static executeLocal(name, spec, component) {
     const methodName = name.replace(/^component\//, "");
     const componentName = GLib.component.vueName(component);
-    console.debug(
+    console.log(
       `Executing component action on ${componentName}: ${methodName}`
     );
     component[`action_${methodName}`](spec);
   }
 
   static executeGlobal(name, spec, component, params) {
-    return this._executeInternal(name, spec, component, params, actions);
+    this._executeInternal(name, spec, component, params, actions);
   }
 
   static _executeInternal(name, spec, component, params, registry) {
@@ -161,12 +180,15 @@ export default class Action {
       const action = new registry[actionName]();
       const logDisabled = action.logDisabled && action.logDisabled();
       if (!logDisabled) {
-        console.debug(`Executing "${actionName}"`);
+        console.log(`Executing "${actionName}"`);
       }
-      return action.execute(spec, component, params);
+      action.execute(spec, component, params);
     } catch (e) {
-      GLib.settings.errorHandler(e);
-      return null;
+      GLib.settings.errorHandler(
+        new Error(
+          `Failed executing command "${actionName}". Error: ${e.message}`
+        )
+      );
     }
   }
 
@@ -174,13 +196,13 @@ export default class Action {
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        window.vueApp.page = response;
+        vueApp.page = response
       });
     }
 
-    window.vueApp.temp.analytics = response.analytics;
+    vueApp.temp.analytics = response.analytics;
     GLib.action.execute(response.onResponse, component);
-    window.vueApp.temp.analytics = null;
+    vueApp.temp.analytics = null;
   }
 
   static registerCustom(actionName, action) {
@@ -192,7 +214,7 @@ export default class Action {
   }
 
   static executeCustom(name, spec, component, params) {
-    return this._executeInternal(name, spec, component, params, customActions);
+    this._executeInternal(name, spec, component, params, customActions);
   }
 }
 

package/actions/analytics/logEvent.js

@@ -14,10 +14,10 @@ export default class {
       const suffix = params.referer_group ? "w/ referer" : "w/o referer";
       params.build_env = Utils.settings.env;
       // params.build_version = Utils.settings.appVersion;
-      console.debug(`Logging ${suffix}:`, properties.name, params);
+      console.log(`Logging ${suffix}:`, properties.name, params);
       firebase.analytics().logEvent(properties.name, params);
     } else {
-      console.debug("Waiting for firebase to be initialized...");
+      console.log("Waiting for firebase to be initialized...");
       setTimeout(() => {
         this.execute(properties);
       }, 100);

package/actions/auth/saveCsrfToken.js

@@ -1,5 +1,11 @@
+// import Storage from '../../utils/storage'
+// import Keys from '../../keys'
+
 export default class {
   execute(properties, component) {
+    // console.log(properties['token'])
+    // Storage.setLocal(Keys.Db.csrfToken, properties['token'])
+
     Utils.dom.setCsrf(properties["token"]);
     Action.execute(properties["onSave"], component);
   }

package/actions/cables/push.js

@@ -1,12 +1,12 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component) {
     Utils.type.ifString(properties.channel, channelName => {
-      const ws = window.vueApp.actionCable;
+      const ws = vueApp.actionCable;
       const channel = ws.channels[channelName];
 
-      // TODO: Use logDisabled() that reads params from server to decide whether we want to print the log or not.
-      // This is because `push` action's logs are a bit sensitive.
-      console.debug("Pushing to", channel);
+      console.log("Pushing to", channel);
 
       Utils.type.ifString(properties.event, eventName => {
         if (channel) {

package/actions/commands/enqueue.js

@@ -0,0 +1,17 @@
+// import Hash from "../../utils/hash";
+
+export default class {
+  // async executeJob(spec, component) {
+  //   console.log("Waiting for next job1...");
+  //   GLib.action.execute(spec.onExecute, component);
+  //   await this.sleep(2000);
+  //   console.log("Waiting for next job2...");
+  // }
+  execute(spec, component) {
+    GLib.queue.enqueue(() => {
+      GLib.action.execute(spec.onExecute, component);
+      // console.log("Waiting for next job0...");
+      // this.executeJob(spec, component);
+    });
+  }
+}

package/actions/fields/reset.js

@@ -1,11 +1,11 @@
-import Vue from "vue";
+import { nextTick } from "vue";
 
 export default class {
   execute(properties, component) {
     const target = GLib.component.findById(properties.targetId);
     target.action_resetValue();
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       GLib.action.execute(properties["onReset"], component);
     });
   }

package/actions/http/get.js

@@ -1,34 +1,22 @@
 export default class {
-  execute(spec, component) {
-    return new Promise(resolve => {
-      GLib.http.execute(
-        spec,
-        "GET",
-        component,
-        (page, response) => {
-          this.handleSuccess(page, spec, component);
-          resolve({ page: page, response: response });
-        },
-        (error, response) => {
-          resolve({ error: error, response: response });
-        }
-      );
-    });
-  }
-
-  handleSuccess(page, spec, component) {
+  execute(properties, controller) {
     const currentUrl = window.location.href;
+    // const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
-    Utils.type.ifString(spec.historyUrl, historyUrl => {
-      const cleanUrl = Utils.url.htmlUrl(historyUrl);
-      if (cleanUrl !== currentUrl) {
-        const data = Object.assign({}, window.vueApp.page, {
-          replayGetResponse: page.onResponse
-        });
+    GLib.http.execute(properties, "GET", controller, (page, response) => {
+      Utils.type.ifString(properties.historyUrl, historyUrl => {
+        const cleanUrl = Utils.url.htmlUrl(historyUrl);
+        if (cleanUrl !== currentUrl) {
+          console.log("URL", cleanUrl, response.url, response);
+          const data = Object.assign({}, page, {
+            replayGetResponse: page.onResponse
+          });
 
-        Utils.history.pushPage(data, cleanUrl);
-      }
+          // Utils.history.pushPage(data, historyUrl);
+          Utils.history.pushPage(data, cleanUrl);
+        }
+      });
+      GLib.action.handleResponse(page, controller);
     });
-    GLib.action.handleResponse(page, component);
   }
 }

package/actions/panels/scrollTo.js

@@ -5,7 +5,7 @@ export default class {
       Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
 
     const selector = `#${properties.viewId}`;
-    console.debug("Scrolling to", selector);
+    console.log("Scrolling to", selector);
     const element = pageBody.querySelector(selector);
     element.scrollIntoView({
       behavior: properties["animate"] ? "smooth" : "auto"

package/actions/panels/scrollToBottom.js

@@ -4,7 +4,7 @@ export default class {
     // TODO: make this support any panelId
     const target = properties.panelId ? `_innerBody` : "_pageBody";
     const pageBody = Utils.history[target];
-    console.debug(`Scrolling ${target} to bottom`);
+    console.log(`Scrolling ${target} to bottom`);
     pageBody.scrollTo({
       top: pageBody.scrollHeight,
       behavior: properties["animate"] ? "smooth" : "auto"

package/actions/popovers/close.js

@@ -0,0 +1,5 @@
+export default class {
+    execute(properties, component) {
+        Utils.launch.popover.close(properties);
+    }
+}

package/actions/popovers/open.js

@@ -0,0 +1,9 @@
+import { nextTick } from "vue";
+import bus from "../../utils/eventBus";
+
+export default class {
+    execute(properties, component) {
+        Utils.launch.popover.open(properties, component);
+
+    }
+}

package/actions/windows/closeWithReload.js

@@ -6,7 +6,7 @@ export default class {
     const data = Object.assign({}, properties);
     if (!Utils.history.back()) {
       data.url = fallbackUrl;
-      console.debug("Use fallbackUrl", data.url);
+      console.log("Use fallbackUrl", data.url);
     }
 
     // Allow time for history.back() to complete, which is important for actions that need

package/actions/windows/refreshState.js

@@ -1,5 +1,7 @@
+import { vueApp } from '../../store'
+
 export default class {
   execute(properties) {
-    window.vueApp.stateUpdatedAt = Date.now();
+    vueApp.stateUpdatedAt = Date.now
   }
 }

package/actions/ws/push.js

@@ -1,7 +1,9 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component, params) {
     Utils.type.ifString(properties.topic, topicName => {
-      const ws = window.vueApp.webSocket;
+      const ws = vueApp.webSocket;
       const channel = ws.channels[topicName];
 
       Utils.type.ifString(properties.event, eventName => {
@@ -13,14 +15,14 @@ export default class {
           channel
             .push(eventName, payload)
             .receive("ok", resp => {
-              console.debug(
+              console.log(
                 `Push to '${topicName}/${eventName}' succeeded`,
                 resp
               );
               Utils.ws.handleResponse(resp.onResponse, component);
             })
             .receive("error", resp => {
-              console.debug(`Push to '${topicName}/${eventName}' failed`, resp);
+              console.log(`Push to '${topicName}/${eventName}' failed`, resp);
               Utils.ws.handleResponse(resp.onResponse, component);
             });
         } else {

package/app.vue

@@ -1,25 +1,14 @@
 <template>
   <v-app :class="page.styleClasses">
-    <component
-      :is="containerComponent"
-      :spec="formSpec"
-      :style="'height: 100%;'"
-    >
+    <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
       <nav-appbar ref="appBar" :page="page" />
 
-      <v-progress-linear
-        v-if="$root.vueApp.indicator"
-        :indeterminate="true"
-        height="5"
-        style="position: fixed; z-index: 4;"
-      >
+      <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
+        style="position: fixed; z-index: 4;">
       </v-progress-linear>
 
       <v-main :style="`height: ${mainHeight}px;`">
-        <v-container
-          :fluid="page.template == 'fullWidth'"
-          :class="containerClasses"
-        >
+        <v-container :fluid="page.template == 'fullWidth'" :class="containerClasses">
           <div class="pages-header">
             <panels-responsive :spec="header" />
           </div>
@@ -38,25 +27,27 @@
 </template>
 
 <script>
-import NavAppBar from "./nav/appbar";
+import NavAppBar from "./nav/appbar.vue";
 import Utils from "./utils/helper";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
-import FormPanel from "./components/panels/form";
+import FormPanel from "./components/panels/form.vue";
+import { vueApp } from "./store";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
-    "panels-form": FormPanel
+    "panels-form": FormPanel,
   },
   mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
-    page: { type: Object, required: true }
+    page: { type: Object, required: true },
   },
   data() {
     return {
       title: "...",
-      mainHeight: 0
+      mainHeight: 0,
+      vueApp
     };
   },
   computed: {
@@ -71,6 +62,7 @@ export default {
     },
     containerComponent() {
       if (this.formSpec) {
+        this.name = 'panels-form'
         return "panels-form";
       }
       return "div";
@@ -83,15 +75,15 @@ export default {
     // Use computed to ensure that the spec gets updated when the user navigates to another page.
     formSpec() {
       return this.page.fullPageForm;
-    }
+    },
   },
   watch: {
-    "$root.indicator": function(val, oldVal) {
+    "vueApp.indicator": function (val, oldVal) {
       document.title = val ? "..." : this.page.title;
     }
   },
   created() {
-    console.debug(
+    console.log(
       `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
     );
     Utils.history.saveInitialContent(this.page);
@@ -102,7 +94,7 @@ export default {
     $mounted() {
       window.addEventListener(
         "resize",
-        event => {
+        (event) => {
           this.updateMainHeight();
         },
         true
@@ -145,9 +137,10 @@ export default {
       });
     },
     updateMainHeight() {
+      console.debug("Setting body height");
       this.mainHeight = window.innerHeight - this.$refs.appBar.$el.offsetHeight;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -165,6 +158,7 @@ export default {
 body {
   // Hide superfluous scrollbar (Edge)
   -ms-overflow-style: none;
+
   * {
     -ms-overflow-style: initial;
   }
@@ -174,6 +168,7 @@ body {
     display: none;
   }
 }
+
 html {
   // Hide superfluous scrollbar (Firefox)
   scrollbar-width: none;
@@ -185,17 +180,20 @@ body,
 #app {
   height: 100%;
 }
+
 /******/
 
 /*** panels/scrollTo support ***/
 .glib-scrollto {
   transition: background 0.5s;
 }
+
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
+
 // Don't override the default button's effect.
-.glib-clickable:not(.v-btn):not(.disabled) {
+.glib-clickable:not(.v-btn) {
   cursor: pointer;
 
   // // So that we can display a semi-transparent layer on hover (see below)
@@ -215,9 +213,42 @@ body,
     background: rgba(100, 100, 100, 0.2);
   }
 }
+
 .glib-clickable.theme--light.v-list-item:hover:before {
   opacity: 1; // Override Vuetify
 }
+
+.popover-menu {
+  padding: 8px 0;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  height: fit-content;
+}
+
+.popover-menu-item {
+  font-size: 14px;
+  padding: 8px 16px;
+  width: 100%;
+}
+
+.popover-menu-item:hover {
+  background-color: #f3f4f6;
+}
+
+.v-input__details {
+  min-height: 0;
+  margin-bottom: 0;
+
+  .v-messages {
+    min-height: 0;
+  }
+}
+
+.v-label {
+  opacity: 1;
+}
+
 /******/
 </style>
 
@@ -236,5 +267,6 @@ body,
   /* overflow-y: auto; */
   overflow-y: overlay;
 }
+
 /******/
 </style>

package/components/_badge.vue

@@ -1,10 +1,5 @@
 <template>
-  <v-badge
-    :color="badge.backgroundColor || 'red'"
-    overlap
-    :value="badgeExists()"
-    :style="styles()"
-  >
+  <v-badge :color="badge.backgroundColor || 'red'" overlap :model-value="badgeExists()" :style="styles()">
     <template v-slot:badge>{{ badge.text }}</template>
     <slot />
   </v-badge>

package/components/_button.vue

@@ -1,46 +1,32 @@
 <template>
-  <common-badge :spec="spec">
-    <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
+  <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
          located in a list row that has href. -->
-    <v-btn
-      :type="type"
-      :disabled="disabled || $isBusy || spec.disabled"
-      :style="styles()"
-      :class="classes()"
-      :href="$href()"
-      :rel="$rel()"
-      :text="linkStyling || $classes().includes('text')"
-      :small="linkStyling || $classes().includes('small')"
-      :icon="$classes().includes('icon')"
-      :outlined="$classes().includes('outlined')"
-      :tile="$classes().includes('tile')"
-      :rounded="$classes().includes('rounded')"
-      :depressed="$classes().includes('depressed')"
-      @click.prevent="
-        type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
-      "
-      v-on="eventHandlers"
-    >
-      <span><common-icon :spec="spec.icon || {}"/></span>
-      <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
-        {{ spec.text }}
-      </div>
-    </v-btn>
-  </common-badge>
+  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="classes()"
+    :href="$href()" :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null" @click.prevent="
+      type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
+      ">
+    <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span>
+    <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
+      {{ spec.text }}
+    </div>
+  </v-btn>
 </template>
 
 <script>
+import { variants } from '../utils/constant'
+
 export default {
   props: {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
-    disabled: { type: Boolean, required: true },
+    disabled: { type: Boolean },
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },
-  data: function() {
+  data: function () {
     return {
-      linkStyling: false
+      linkStyling: false,
+      variant: 'elevated'
     };
   },
   methods: {
@@ -48,6 +34,13 @@ export default {
       this.$type.ifArray(this.spec.styleClasses, val => {
         this.linkStyling = val.includes("link");
       });
+
+      const vm = this
+      variants.forEach((value) => {
+        if (vm.$classes().includes(value)) {
+          vm.variant = value
+        }
+      })
     },
     styles() {
       const styles = this.$styles();
@@ -83,6 +76,7 @@ button {
   min-width: 0;
   margin: 0;
 }
+
 .v-btn {
   &.link {
     text-transform: none !important;
@@ -95,19 +89,24 @@ button {
     font-size: 16px;
     line-height: 1;
     min-width: auto;
+    box-shadow: none !important;
   }
 }
+
 .v-btn--rounded {
   // Override .v-application.rounded
   border-radius: 28px !important;
 }
+
 .v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
   min-width: 0;
   padding: 0;
 }
+
 .v-banner__wrapper .v-btn.v-size--default {
   font-size: 12px;
 }
+
 .breadcrumbs .v-btn.link {
   display: inline-table;
   justify-content: left;
@@ -118,6 +117,7 @@ button {
   .v-banner__wrapper.v-btn.v-size--default {
     font-size: 0.875rem;
   }
+
   .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
     min-width: 64px;
     padding: 0 16px;