glib-web 2.2.1 → 2.3.1

package/action.js

@@ -49,6 +49,7 @@ import ActionsCreditCard from "./actions/auth/creditCard";
 import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
+import ActionCommandsCustom from "./actions/commands/custom";
 
 import ActionToursStart from "./actions/tours/start";
 
@@ -102,11 +103,16 @@ const actions = {
   "auth/creditCard": ActionsCreditCard,
 
   "analytics/logEvent": ActionsAnalyticsLogEvent,
+
   "commands/copy": ActionCommandsCopy,
+  "commands/custom": ActionCommandsCustom,
+
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate
 };
 
+const customActions = {};
+
 export default class Action {
   static execute(spec, component, params = {}) {
     if (!TypeUtils.isObject(spec)) {
@@ -148,17 +154,21 @@ export default class Action {
   }
 
   static executeGlobal(name, spec, component, params) {
+    this._executeInternal(name, spec, component, params, actions);
+  }
+
+  static _executeInternal(name, spec, component, params, registry) {
     const actionName = name.replace(/-v1$/, "");
 
     try {
-      const action = new actions[actionName]();
+      const action = new registry[actionName]();
       const logDisabled = action.logDisabled && action.logDisabled();
       if (!logDisabled) {
         console.log(`Executing "${actionName}"`);
       }
       action.execute(spec, component, params);
     } catch (e) {
-      console.log(
+      console.error(
         "Failed executing command",
         actionName,
         `Error: '${e.message}'`
@@ -178,6 +188,18 @@ export default class Action {
     GLib.action.execute(response.onResponse, component);
     window.vueApp.temp.analytics = null;
   }
+
+  static registerCustom(actionName, action) {
+    if (customActions[actionName]) {
+      console.error("Command already registered", actionName);
+    } else {
+      customActions[actionName] = action;
+    }
+  }
+
+  static executeCustom(name, spec, component, params) {
+    this._executeInternal(name, spec, component, params, customActions);
+  }
 }
 
 window.Action = Action;

package/actions/commands/custom.js

@@ -0,0 +1,10 @@
+import Hash from "../../utils/hash";
+
+export default class {
+  execute(spec, component) {
+    const properties = new Hash(spec.properties);
+    // `spec` might contain params that were coming from other actions (e.g. `formData`).
+    Object.assign(properties, spec);
+    GLib.action.executeCustom(spec.name, properties, component);
+  }
+}

package/actions/components/update.js

@@ -5,11 +5,14 @@ export default class {
     if (!spec.views.length > 1) {
       console.warn("Make sure views only have 1 child!");
     }
-    const target = component.updatables[spec.targetId];
-    if (!target) console.error("no component found :" + spec.targetId);
+    // const target = component.updatables[spec.targetId];
+    // if (!target) console.error("no component found :" + spec.targetId);
 
-    Object.assign(target.spec, spec.views[0]);
-    this.updateComponent(target);
+    const target = GLib.component.findById(spec.targetId);
+    if (target) {
+      Object.assign(target.spec, spec.views[0]);
+      this.updateComponent(target);
+    }
   }
 
   updateComponent(component) {

package/app.vue

@@ -1,7 +1,11 @@
 <template>
   <v-app :class="page.styleClasses">
-    <component :is="containerComponent" :spec="formSpec">
-      <nav-appbar :page="page" />
+    <component
+      :is="containerComponent"
+      :spec="formSpec"
+      :style="'height: 100%;'"
+    >
+      <nav-appbar ref="appBar" :page="page" />
 
       <v-progress-linear
         v-if="$root.vueApp.indicator"
@@ -11,29 +15,24 @@
       >
       </v-progress-linear>
 
-      <div class="pages-header">
-        <layouts-content
-          :template="page.template"
-          :spec="header"
-          :full-height="false"
-        />
-      </div>
-
-      <div id="page_body" class="pages-body body-wrapper">
-        <layouts-content
-          :template="page.template"
-          :spec="body"
-          :full-height="true"
-        />
-      </div>
-
-      <div class="pages-footer">
-        <layouts-content
-          :template="page.template"
-          :spec="footer"
-          :full-height="false"
-        />
-      </div>
+      <v-main :style="`height: ${mainHeight}px;`">
+        <v-container
+          :fluid="page.template == 'fullWidth'"
+          :class="containerClasses"
+        >
+          <div class="pages-header">
+            <panels-responsive :spec="header" />
+          </div>
+
+          <div id="page_body" class="pages-body body-wrapper">
+            <panels-responsive :spec="body" />
+          </div>
+
+          <div class="pages-footer">
+            <panels-responsive :spec="footer" />
+          </div>
+        </v-container>
+      </v-main>
     </component>
   </v-app>
 </template>
@@ -41,7 +40,6 @@
 <script>
 import NavAppBar from "./nav/appbar";
 import Utils from "./utils/helper";
-import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form";
@@ -49,7 +47,6 @@ import FormPanel from "./components/panels/form";
 export default {
   components: {
     "nav-appbar": NavAppBar,
-    "layouts-content": ContentLayout,
     "panels-form": FormPanel
   },
   mixins: [phoenixSocketMixin, actionCableMixin],
@@ -58,7 +55,8 @@ export default {
   },
   data() {
     return {
-      title: "..."
+      title: "...",
+      mainHeight: 0
     };
   },
   computed: {
@@ -77,6 +75,11 @@ export default {
       }
       return "div";
     },
+    containerClasses() {
+      const classes = ["hamburger"];
+      classes.push(this.page.containerStyleClasses || []);
+      return classes;
+    },
     // Use computed to ensure that the spec gets updated when the user navigates to another page.
     formSpec() {
       return this.page.fullPageForm;
@@ -96,6 +99,15 @@ export default {
     Utils.http.promptIfDirtyOnUnload();
   },
   methods: {
+    $mounted() {
+      window.addEventListener(
+        "resize",
+        event => {
+          this.updateMainHeight();
+        },
+        true
+      );
+    },
     $ready() {
       document.title = this.page.title;
 
@@ -125,6 +137,15 @@ export default {
           GLib.action.execute(this.page.onLoad, this);
         });
       }
+
+      // Use nextTick() to allow time for the appBar to complete initialization.
+      this.$nextTick(() => {
+        this.updateMainHeight();
+      });
+    },
+    updateMainHeight() {
+      console.debug("Setting body height");
+      this.mainHeight = window.innerHeight - this.$refs.appBar.$el.offsetHeight;
     }
   }
 };
@@ -178,11 +199,12 @@ body,
 
 <style scoped>
 /*** Header/footer support ***/
-.application--wrap {
+.hamburger {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
+  padding: 0;
 }
 
 .body-wrapper {

package/components/_button.vue

@@ -15,6 +15,7 @@
       :rounded="$classes().includes('rounded')"
       :depressed="$classes().includes('depressed')"
       @click="type == 'submit' ? null : $onClick()"
+      v-on="eventHandlers"
     >
       <span><common-icon :spec="spec.icon || {}"/></span>
       <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
@@ -30,7 +31,8 @@ export default {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
     disabled: { type: Boolean, required: true },
-    hideTextOnXs: { type: Boolean }
+    hideTextOnXs: { type: Boolean },
+    eventHandlers: { type: Object, default: null }
   },
   data: function() {
     return {

package/components/_chip.vue

@@ -1,37 +1,29 @@
 <template>
-  <v-tooltip
-    :disabled="!spec.tooltip"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <common-tooltip :spec="spec">
     <template v-slot:activator="{ on }">
-      <span v-on="on">
-        <common-badge :spec="spec">
-          <v-chip
-            v-if="spec.onClick"
-            :style="genericStyles()"
-            :class="$classes()"
-            :href="$href()"
-            @click="$onClick()"
-          >
-            {{ spec.text }}
-          </v-chip>
-          <v-chip v-else :style="genericStyles()" :class="$classes()">
-            {{ spec.text }}
-          </v-chip>
-        </common-badge>
-      </span>
+      <common-badge :spec="spec">
+        <v-chip
+          v-if="spec.onClick"
+          :style="genericStyles()"
+          :class="$classes()"
+          :href="$href()"
+          @click="$onClick()"
+          v-on="on"
+        >
+          {{ spec.text }}
+        </v-chip>
+        <v-chip v-else :style="genericStyles()" :class="$classes()" v-on="on">
+          {{ spec.text }}
+        </v-chip>
+      </common-badge>
     </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
+// import TooltipMixins from "./mixins/tooltip";
 export default {
-  mixins: [TooltipMixins],
+  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
@@ -50,7 +42,7 @@ export default {
 
 <style lang="scss" scoped>
 // Prevent hover effect if the chip is not clickable.
-span.theme--light.v-chip:hover:before {
+.v-chip:not(.v-chip--clickable).theme--light:hover:before {
   opacity: 0;
 }
 </style>

package/components/_responsive.vue

@@ -5,6 +5,7 @@
     :style="$styles()"
     :href="$href()"
     @click="$onClick()"
+    v-on="eventHandlers"
   >
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
@@ -31,13 +32,8 @@ import Vue from "vue";
 
 export default {
   props: {
-    spec: {
-      type: Object,
-      required: true,
-      default: function() {
-        return {};
-      }
-    }
+    spec: { type: Object, required: true },
+    eventHandlers: { type: Object, default: null }
   },
   data() {
     return {
@@ -46,12 +42,18 @@ export default {
   },
   computed: {
     cssClasses() {
-      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
-      this.spec.view = this.spec.view || "panels/responsive";
-      return this.$classes();
+      // Provide a default name so the panel will not be nameless when used in predefined layouts (e.g. page.body, list.header, etc.)
+      return this.$classes(
+        Object.assign(
+          {
+            view: "panels/responsive"
+          },
+          this.spec
+        )
+      );
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   },
   methods: {
@@ -91,7 +93,7 @@ export default {
   display: flex;
   flex-direction: column;
 }
-/* Needed to ensure that split's sub panels have the same height */
+// Needed to ensure that split's sub panels have the same height
 .full-height {
   height: 100%;
 }

package/components/_tooltip.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-tooltip
+    :disabled="tooltip.disabled"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <!-- Pass the slot props through to the caller using the same slot name (i.e. `activator`) -->
+      <slot name="activator" :on="on" />
+    </template>
+    <span> {{ tooltip.text }} </span>
+  </v-tooltip>
+</template>
+
+<script>
+// import tooltipMixin from "./mixins/tooltip";
+
+export default {
+  // mixins: [tooltipMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      tooltip: {},
+      childSpec: Object.assign({}, this.spec, { id: undefined })
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+      this.childSpec = Object.assign({}, this.spec, { id: undefined });
+    },
+    // $initAccessories() {
+    //   this.tooltip = this.spec.tooltip || { disabled: true };
+    // },
+    tooltipPositionMatches(position) {
+      if (this.spec.tooltip && this.spec.tooltip.position) {
+        return position == this.spec.tooltip.position;
+      } else {
+        return position == "bottom";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/avatar.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-tooltip
-    :disabled="tooltip.disabled"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <common-tooltip :spec="spec">
     <template v-slot:activator="{ on }">
       <common-badge :spec="spec">
         <v-avatar :size="spec.size">
@@ -14,31 +8,18 @@
             :style="$styles()"
             :src="spec.url || spec.base64Data"
             @click="$onClick()"
+            v-on="on"
           />
         </v-avatar>
       </common-badge>
     </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
-
 export default {
-  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      styles: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.$initAccessories();
-    }
   }
 };
 </script>

package/components/button.vue

@@ -1,41 +1,15 @@
 <template>
-  <div>
-    <v-tooltip
-      :disabled="tooltip.disabled"
-      :top="tooltipPositionMatches('top')"
-      :right="tooltipPositionMatches('right')"
-      :bottom="tooltipPositionMatches('bottom')"
-      :left="tooltipPositionMatches('left')"
-    >
-      <template v-slot:activator="{ on }">
-        <div v-on="on">
-          <common-button :spec="childSpec" :disabled="$isBusy" />
-        </div>
-      </template>
-      <span> {{ tooltip.text }} </span>
-    </v-tooltip>
-  </div>
+  <common-tooltip :spec="spec">
+    <template v-slot:activator="{ on }">
+      <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" />
+    </template>
+  </common-tooltip>
 </template>
 
 <script>
-import tooltipMixin from "./mixins/tooltip";
-
 export default {
-  mixins: [tooltipMixin],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      tooltip: {},
-      childSpec: Object.assign({}, this.spec, { id: undefined })
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-      this.childSpec = Object.assign({}, this.spec, { id: undefined });
-    }
   }
 };
 </script>

package/components/charts/column.vue

@@ -10,10 +10,10 @@
 // https://chartkick.com/vue
 
 import annotation from "../mixins/chart/annotation.js";
-import tooltip from "../mixins/chart/tooltip.js";
+// import tooltip from "../mixins/chart/tooltip.js";
 
 export default {
-  mixins: [annotation, tooltip],
+  mixins: [annotation],
   props: {
     spec: { type: Object, required: true }
   },

package/components/charts/line.vue

@@ -9,10 +9,10 @@
 
 <script>
 import annotation from "../mixins/chart/annotation.js";
-import tooltip from "../mixins/chart/tooltip.js";
+// import tooltip from "../mixins/chart/tooltip.js";
 
 export default {
-  mixins: [annotation, tooltip],
+  mixins: [annotation],
   props: {
     spec: { type: Object, required: true }
   },

package/components/chip.vue

@@ -3,28 +3,9 @@
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
 export default {
-  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      tooltip: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || {};
-    }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-// Prevent hover effect if the chip is not clickable.
-span.theme--light.v-chip:hover:before {
-  opacity: 0;
-}
-</style>

package/components/fields/_select.vue

@@ -60,12 +60,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.options = this.normalizedOptions();
-      this.append = this.spec.append || {};
-      this.rules = this.$validation();
-      if (this.defaultValue) {
-        this.fieldModel = this.defaultValue;
-      }
+      this.updateData();
     },
     normalizedOptions() {
       return this.spec.options.map(i => {
@@ -88,6 +83,17 @@ export default {
           GLib.action.execute(onChange, this);
         });
       });
+    },
+    updateData() {
+      this.options = this.normalizedOptions();
+      this.append = this.spec.append || {};
+      this.rules = this.$validation();
+      if (this.defaultValue) {
+        this.fieldModel = this.defaultValue;
+      }
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/fields/radio.vue

@@ -1,13 +1,17 @@
 <template>
-  <div :class="$classes()">
-    <v-tooltip
+  <common-tooltip :spec="spec">
+    <template v-slot:activator="{ on }">
+      <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
+
+      <div :class="$classes()">
+        <!-- <v-tooltip
       :disabled="tooltip.disabled"
       :top="tooltipPositionMatches('top')"
       :right="tooltipPositionMatches('right')"
       :bottom="tooltipPositionMatches('bottom')"
       :left="tooltipPositionMatches('left')"
     >
-      <template v-slot:activator="{ on }">
+      <template v-slot:activator="{ on }"> -->
         <v-radio
           :label="spec.label"
           :value="spec.value.presence() || vuetifyEmptyString"
@@ -22,29 +26,31 @@
             <glib-component :spec="item" />
           </div>
         </div>
-      </template>
+        <!-- </template>
       <span>{{ tooltip.text }}</span>
-    </v-tooltip>
-  </div>
+    </v-tooltip> -->
+      </div>
+    </template>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "../mixins/tooltip";
+// import TooltipMixins from "../mixins/tooltip";
 
 export default {
-  mixins: [TooltipMixins],
+  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      tooltip: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-    }
   }
+  // data() {
+  //   return {
+  //     tooltip: {}
+  //   };
+  // },
+  // methods: {
+  //   $ready() {
+  //     this.tooltip = this.spec.tooltip || { disabled: true };
+  //   }
+  // }
 };
 </script>