glib-web 3.0.2 → 3.0.4

package/action.js

@@ -52,7 +52,6 @@ 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";
@@ -117,7 +116,6 @@ const actions = {
 
   "commands/copy": ActionCommandsCopy,
   "commands/custom": ActionCommandsCustom,
-  "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate,
@@ -134,43 +132,34 @@ 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/")) {
-        this.executeLocal(name, spec, component);
+        return this.executeLocal(name, spec, component);
       } else {
-        this.executeGlobal(name, spec, component, params);
+        return 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.log(`Invalid action: "${name}"`);
+      console.warn(`Invalid action: "${name}"`);
     }
   }
 
   static executeLocal(name, spec, component) {
     const methodName = name.replace(/^component\//, "");
     const componentName = GLib.component.vueName(component);
-    console.log(
+    console.debug(
       `Executing component action on ${componentName}: ${methodName}`
     );
     component[`action_${methodName}`](spec);
   }
 
   static executeGlobal(name, spec, component, params) {
-    this._executeInternal(name, spec, component, params, actions);
+    return this._executeInternal(name, spec, component, params, actions);
   }
 
   static _executeInternal(name, spec, component, params, registry) {
@@ -179,16 +168,13 @@ export default class Action {
     try {
       const action = new registry[actionName]();
       const logDisabled = action.logDisabled && action.logDisabled();
-      if (!logDisabled) {
-        console.log(`Executing "${actionName}"`);
+      if (!logDisabled && !spec.silent) {
+        console.debug(`Executing "${actionName}"`);
       }
-      action.execute(spec, component, params);
+      return action.execute(spec, component, params);
     } catch (e) {
-      GLib.settings.errorHandler(
-        new Error(
-          `Failed executing command "${actionName}". Error: ${e.message}`
-        )
-      );
+      GLib.settings.errorHandler(e, `Failed executing "${actionName}"`);
+      return null;
     }
   }
 
@@ -214,7 +200,7 @@ export default class Action {
   }
 
   static executeCustom(name, spec, component, params) {
-    this._executeInternal(name, spec, component, params, customActions);
+    return 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.log(`Logging ${suffix}:`, properties.name, params);
+      console.debug(`Logging ${suffix}:`, properties.name, params);
       firebase.analytics().logEvent(properties.name, params);
     } else {
-      console.log("Waiting for firebase to be initialized...");
+      console.debug("Waiting for firebase to be initialized...");
       setTimeout(() => {
         this.execute(properties);
       }, 100);

package/actions/auth/saveCsrfToken.js

@@ -1,11 +1,5 @@
-// 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

@@ -6,7 +6,9 @@ export default class {
       const ws = vueApp.actionCable;
       const channel = ws.channels[channelName];
 
-      console.log("Pushing to", channel);
+      // 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);
 
       Utils.type.ifString(properties.event, eventName => {
         if (channel) {

package/actions/http/get.js

@@ -1,22 +1,34 @@
 export default class {
-  execute(properties, controller) {
+  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) {
     const currentUrl = window.location.href;
-    // const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
-    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.type.ifString(spec.historyUrl, historyUrl => {
+      const cleanUrl = Utils.url.htmlUrl(historyUrl);
+      if (cleanUrl !== currentUrl) {
+        const data = Object.assign({}, window.vueApp.page, {
+          replayGetResponse: page.onResponse
+        });
 
-          // Utils.history.pushPage(data, historyUrl);
-          Utils.history.pushPage(data, cleanUrl);
-        }
-      });
-      GLib.action.handleResponse(page, controller);
+        Utils.history.pushPage(data, cleanUrl);
+      }
     });
+    GLib.action.handleResponse(page, component);
   }
-}
+}

package/actions/panels/scrollTo.js

@@ -1,20 +1,45 @@
 // Scroll the main body of the current window
 export default class {
-  execute(properties, component) {
+  execute(spec, component) {
     const pageBody =
       Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
 
-    const selector = `#${properties.viewId}`;
-    console.log("Scrolling to", selector);
+    const selector = `#${spec.viewId}`;
+    console.debug("Scrolling to", selector);
     const element = pageBody.querySelector(selector);
-    element.scrollIntoView({
-      behavior: properties["animate"] ? "smooth" : "auto"
-    });
+
+    this.scrollIfNeeded(element, spec, component);
 
     element.classList.add("glib-scrollto");
     element.classList.add("glib-scrollto--highlighted");
+  }
+
+  // From https://gist.github.com/hsablonniere/2581101
+  scrollIfNeeded(element, spec, component, centerIfNeeded = true) {
+    const vm = this;
+    const observerOptions = {
+      threshold: 1 // Trigger callback when 100% of the element becomes/unbecomes visible
+    };
+    new IntersectionObserver(function([entry]) {
+      const ratio = entry.intersectionRatio;
+      if (ratio < 1) {
+        const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
+        element.scrollIntoView({
+          block: place,
+          inline: place,
+          behavior: spec["animate"] ? "smooth" : "auto"
+        });
+      } else {
+        vm.onScrollEnd(element, spec, component);
+        this.disconnect();
+      }
+    }, observerOptions).observe(element);
+  }
+
+  onScrollEnd(element, spec, component) {
     setTimeout(() => {
       element.classList.remove("glib-scrollto--highlighted");
-    }, 500);
+    }, 300); // Allow time so the changes can be seen by human eyes.
+    GLib.action.execute(spec.onScroll, component);
   }
 }

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.log(`Scrolling ${target} to bottom`);
+    console.debug(`Scrolling ${target} to bottom`);
     pageBody.scrollTo({
       top: pageBody.scrollHeight,
       behavior: properties["animate"] ? "smooth" : "auto"

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.log("Use fallbackUrl", data.url);
+      console.debug("Use fallbackUrl", data.url);
     }
 
     // Allow time for history.back() to complete, which is important for actions that need

package/actions/ws/push.js

@@ -15,14 +15,14 @@ export default class {
           channel
             .push(eventName, payload)
             .receive("ok", resp => {
-              console.log(
+              console.debug(
                 `Push to '${topicName}/${eventName}' succeeded`,
                 resp
               );
               Utils.ws.handleResponse(resp.onResponse, component);
             })
             .receive("error", resp => {
-              console.log(`Push to '${topicName}/${eventName}' failed`, resp);
+              console.debug(`Push to '${topicName}/${eventName}' failed`, resp);
               Utils.ws.handleResponse(resp.onResponse, component);
             });
         } else {

package/app.vue

@@ -4,7 +4,7 @@
       <nav-appbar ref="appBar" :page="page" />
 
       <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
-        style="position: fixed; z-index: 4;">
+        style="position: fixed; z-index: 4">
       </v-progress-linear>
 
       <v-main :style="`height: ${mainHeight}px;`">
@@ -47,7 +47,7 @@ export default {
     return {
       title: "...",
       mainHeight: 0,
-      vueApp
+      vueApp,
     };
   },
   computed: {
@@ -62,7 +62,7 @@ export default {
     },
     containerComponent() {
       if (this.formSpec) {
-        this.name = 'panels-form'
+        this.name = "panels-form";
         return "panels-form";
       }
       return "div";
@@ -80,10 +80,10 @@ export default {
   watch: {
     "vueApp.indicator": function (val, oldVal) {
       document.title = val ? "..." : this.page.title;
-    }
+    },
   },
   created() {
-    console.log(
+    console.debug(
       `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
     );
     Utils.history.saveInitialContent(this.page);
@@ -137,7 +137,6 @@ export default {
       });
     },
     updateMainHeight() {
-      console.debug("Setting body height");
       this.mainHeight = window.innerHeight - this.$refs.appBar.$el.offsetHeight;
     },
   },
@@ -193,13 +192,13 @@ body,
 }
 
 // Don't override the default button's effect.
-.glib-clickable:not(.v-btn) {
+.glib-clickable:not(.v-btn):not(.disabled) {
   cursor: pointer;
 
   // // So that we can display a semi-transparent layer on hover (see below)
   position: relative;
 
-  &:hover:before {
+  &:not(.no-hover):hover:before {
     content: "\A";
     width: 100%;
     height: 100%;
@@ -227,7 +226,7 @@ body,
 }
 
 .popover-menu-item {
-  font-size: 14px;
+  font-size: 16px;
   padding: 8px 16px;
   width: 100%;
 }

package/components/_chip.vue

@@ -1,11 +1,24 @@
 <template>
   <common-badge :spec="spec">
     <div>
-      <v-chip v-if="spec.onClick" :style="genericStyles()" :color="color" :class="$classes()" :href="$href()"
-        @click="$onClick()" :variant="variant">
+      <v-chip
+        v-if="spec.onClick"
+        :style="genericStyles()"
+        :color="color"
+        :class="$classes()"
+        :href="$href()"
+        @click="$onClick()"
+        :variant="variant"
+      >
         {{ spec.text }}
       </v-chip>
-      <v-chip v-else :style="genericStyles()" :color="color" :class="$classes()" :variant="variant">
+      <v-chip
+        v-else
+        :style="genericStyles()"
+        :color="color"
+        :class="$classes()"
+        :variant="variant"
+      >
         {{ spec.text }}
       </v-chip>
     </div>
@@ -13,17 +26,17 @@
 </template>
 
 <script>
-import { colors, variants } from '../utils/constant'
+import { colors, variants } from "../utils/constant";
 
 export default {
   data: function () {
     return {
-      color: '',
-      variant: 'tonal'
-    }
+      color: "",
+      variant: "tonal",
+    };
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   // data: function() {
   //   return {
@@ -34,15 +47,15 @@ export default {
     $ready() {
       colors.forEach((value) => {
         if (this.$classes().includes(value)) this.color = value;
-      })
+      });
       variants.forEach((value) => {
         if (this.$classes().includes(value)) this.variant = value;
-      })
+      });
     },
     $registryEnabled() {
       return false;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -51,4 +64,8 @@ export default {
 .v-chip:not(.v-chip--clickable).theme--light:hover:before {
   opacity: 0;
 }
+.icon-wrapper {
+  display: flex;
+  padding-right: 2px;
+}
 </style>

package/components/_responsive.vue

@@ -1,9 +1,24 @@
 <template>
-  <component :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()" @click="$onClick()">
+  <component
+    :is="componentName"
+    :class="cssClasses"
+    :style="$styles()"
+    :href="$href()"
+    @click="$onClick()"
+  >
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
-        <glib-component v-if="isColumn(item)" :key="viewKey(item, index)" :spec="item" />
-        <div v-else :key="'else-' + viewKey(item, index)" class="full-width" :style="innerStyles">
+        <glib-component
+          v-if="isColumn(item)"
+          :key="viewKey(item, index)"
+          :spec="item"
+        />
+        <div
+          v-else
+          :key="'else-' + viewKey(item, index)"
+          class="full-width"
+          :style="innerStyles"
+        >
           <glib-component :spec="item" />
         </div>
       </template>
@@ -12,15 +27,14 @@
 </template>
 
 <script>
-
 export default {
   props: {
     spec: { type: Object, required: true },
-    eventHandlers: { type: Object, default: null }
+    eventHandlers: { type: Object, default: null },
   },
   data() {
     return {
-      innerStyles: {}
+      innerStyles: {},
     };
   },
   computed: {
@@ -30,7 +44,7 @@ export default {
     },
     componentName() {
       return this.spec.onClick ? "a" : "div";
-    }
+    },
   },
   methods: {
     $ready() {
@@ -45,7 +59,7 @@ export default {
         default:
           align = "flex-start";
       }
-      Object.assign(this.innerStyles, { 'align-items': align, height: 'auto' })
+      Object.assign(this.innerStyles, { "align-items": align, height: "auto" });
     },
     isColumn(item) {
       return item.view == "panels/column-v1";
@@ -53,8 +67,11 @@ export default {
     viewKey(item, index) {
       // Use view name for key to avoid component reuse issue
       return `view${index}_${item.view}`;
-    }
-  }
+    },
+    $registryEnabled() {
+      return false;
+    },
+  },
 };
 </script>
 

package/components/component.vue

@@ -209,7 +209,9 @@ export default {
   },
   data() {
     return {
-      name: null
+      name: null,
+      // See events#$recursiveUpdate().
+      $passthrough: true
     };
   },
   computed: {
@@ -240,7 +242,13 @@ export default {
       }
     },
     $update() {
-      this.$refs.delegate.$update();
+      this.$ready();
+
+      const delegate = this.$refs.delegate;
+      if (delegate) {
+        // Might be null if the component is getting removed as part of the update.
+        delegate.$update();
+      }
     },
     $registryEnabled() {
       return false;

package/components/datetime.vue

@@ -34,10 +34,8 @@ export default {
       }
     },
     $tearDown() {
-      console.log("TimeTicker destroyed");
       if (this.timer != null) {
         clearInterval(this.timer);
-        console.log(`Timer stopped: ${this.timer}`);
       }
     },
     tick() {

package/components/fields/check.vue

@@ -12,7 +12,7 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true },
+    spec: { type: Object, required: true }
   },
   data() {
     return {
@@ -23,12 +23,37 @@ export default {
   },
   methods: {
     $ready() {
+      this.updateData()
+    },
+    changed(event) {
+      // Execute later to ensure the checkbox's checked state has been updated.
+      setTimeout(() => {
+        this.$type.ifObject(this.groupElement, val =>
+          val.dispatchEvent(new Event("change"))
+        );
+      }, 100);
+
+      // setTimeout(() => {
+      this.$executeOnChange();
+      // }, 500);
+    },
+    $internalizeValue(val) {
+      if (val == this.spec.checkValue) {
+        return val;
+      }
+      return this.spec.uncheckValue;
+    },
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.updateData()
+    },
+    updateData() {
       this.groupElement = this.$el.closest("[data-component=checkGroup]");
 
       let groupName = null;
       this.$type.ifObject(
         this.groupElement,
-        (val) => (groupName = val.getAttribute("name"))
+        val => (groupName = val.getAttribute("name"))
       );
 
       this.fieldName = this.spec.name || groupName;
@@ -37,31 +62,14 @@ export default {
         ? this.spec.checkValue
         : this.spec.value;
 
-      Utils.type.ifArray(this.spec.styleClasses, (classes) => {
+      Utils.type.ifArray(this.spec.styleClasses, classes => {
         if (classes.remove("switch")) {
           this.fieldType = "switch";
         }
       });
-    },
-    changed(event) {
-      // Execute later to ensure the checkbox's checked state has been updated.
-      setTimeout(() => {
-        this.$type.ifObject(this.groupElement, (val) =>
-          val.dispatchEvent(new Event("change"))
-        );
-      }, 100);
-
-      setTimeout(() => {
-        this.$executeOnChange();
-      }, 500);
-    },
-    $internalizeValue(val) {
-      if (val == this.spec.checkValue) {
-        return val;
-      }
-      return this.spec.uncheckValue;
-    },
-  },
+      // this.fieldModel = this.spec.value;
+    }
+  }
 };
 </script>
 

package/components/fields/hidden.vue

@@ -10,8 +10,13 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
-  }
+    spec: { type: Object, required: true },
+  },
+  methods: {
+    $ready() {
+      this.fieldModel = this.spec.value;
+    },
+  },
 };
 </script>
 

package/components/fields/newRichText.vue

@@ -160,7 +160,7 @@ export default {
         upload.start((error, blob) => {
           if (error) {
             // Handle the error
-            console.log("Failed uploading image!");
+            console.warn("Failed uploading image!");
           } else {
             this.insertImage(file, blob, onComplete);
           }

package/components/fields/radioGroup.vue

@@ -31,12 +31,13 @@ export default {
     },
     childSpec(childView) {
       const cls = Object.assign({}, childView)
+      cls.styleClasses ||= []
       if (this.activeClass(cls)) {
         if (!cls.styleClasses.includes('radio--active')) {
           cls.styleClasses.push('radio--active')
         }
       } else {
-        cls.styleClasses = childView.styleClasses.filter((v) => v != 'radio--active')
+        cls.styleClasses = cls.styleClasses.filter((v) => v != 'radio--active')
       }
       return cls;
     },