glib-web 1.0.1 → 2.1.1

package/actions/forms/submit.js

@@ -1,5 +1,7 @@
 export default class {
   execute(properties, component) {
-    component.$dispatchEvent("forms/directSubmit");
+    component.$dispatchEvent("forms/directSubmit", {
+      url: properties.overrideUrl
+    });
   }
 }

package/components/fields/dynamicGroup.vue

@@ -1,20 +1,10 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
     <div v-for="(group, groupIndex) in groupSpecs" :key="`group${groupIndex}`">
-      <input
-        v-if="isDeleted(groupIndex)"
-        type="hidden"
-        :name="`${spec.name}[${groupIndex}][_destroy]`"
-        value="1"
-      />
+      <input v-if="isDeleted(groupIndex)" type="hidden" :name="`${spec.name}[${groupIndex}][_destroy]`" value="1" />
       <div :style="{ display: isDeleted(groupIndex) ? 'none' : 'block' }">
-        <v-icon
-          class="float-left mr-2"
-          color="error"
-          @click="removeGroup(groupIndex)"
-          >remove_circle</v-icon
-        >
-        <h4>{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
+        <v-icon class="float-left mr-2" color="error" @click="removeGroup(groupIndex)">remove_circle</v-icon>
+        <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
         <panels-responsive :spec="group" />
       </div>
     </div>

package/components/fields/richText.vue

@@ -5,7 +5,7 @@
       v-model="rawValue"
       :editor-toolbar="customToolbar"
       use-custom-image-handler
-      @text-change="separateOutImages"
+      @text-change="onChange"
       @image-added="uploadImage"
     />
     <input type="hidden" :name="spec.name" :value="produceValue" />
@@ -127,6 +127,22 @@ export default {
         });
       }
     },
+    onChange() {
+      this.separateOutImages();
+
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: this.fieldModel
+            }
+          };
+
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
+        });
+      });
+    },
     separateOutImages: function() {
       const vm = this;
       var index = 0;

package/components/map.vue

@@ -39,26 +39,35 @@
         :clickable="true"
         :title="String(marker.clusterSize || 1)"
         @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+      >
+      </gmap-marker>
     </gmap-cluster>
     <template v-else>
-      <gmap-marker
+      <gmap-custom-marker
         v-for="(marker, index) in markers"
         :key="index"
-        :position="{ lat: marker.latitude, lng: marker.longitude }"
-        :clickable="true"
-        @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+        :marker="{ lat: marker.latitude, lng: marker.longitude }"
+        @click.native="onMarkerClick(marker, index)"
+      >
+        <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+        <common-icon
+          v-else
+          class="marker"
+          :spec="{ material: { name: 'place', size: 40 }, color: '#c92b2a' }"
+        />
+      </gmap-custom-marker>
     </template>
   </gmap-map>
 </template>
 
 <script>
 import GmapCluster from "vue2-google-maps/dist/components/cluster";
+import GmapCustomMarker from "vue2-gmap-custom-marker";
 
 export default {
   components: {
-    "gmap-cluster": GmapCluster
+    "gmap-cluster": GmapCluster,
+    "gmap-custom-marker": GmapCustomMarker
   },
   props: {
     spec: { type: Object, required: true }
@@ -204,3 +213,11 @@ export default {
   // }
 };
 </script>
+
+<style lang="scss" scoped>
+.marker {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+</style>

package/components/panels/form.vue

@@ -64,7 +64,7 @@ export default {
       });
 
       this.$onEvent("forms/directSubmit", e => {
-        this.directSubmit();
+        this.directSubmit(e.data.url);
       });
     },
     $ready() {
@@ -117,10 +117,14 @@ export default {
         );
       });
     },
-    directSubmit() {
-      this.validate(() => {
-        GLib.form.submitData(this.formElement, this);
-      });
+    directSubmit(overrideUrl = null) {
+      if (overrideUrl) {
+        GLib.form.submitData(this.formElement, this, overrideUrl);
+      } else {
+        this.validate(() => {
+          GLib.form.submitData(this.formElement, this);
+        });
+      }
     },
     validate(onPassed) {
       if (this.$refs.form.validate()) {

package/components/panels/timeline.vue

@@ -1,42 +1,32 @@
 <template>
   <v-container :class="$classes()">
-    <v-timeline v-if="items" dense align-top>
+    <v-timeline v-if="events" dense align-top>
       <v-timeline-item
-        v-for="(item, item_key) in items"
-        :key="item_key"
+        v-for="(item, index) in events"
+        :key="index"
         color="white"
         fill-dot
         :small="$classes().includes('small')"
         :large="$classes().includes('large')"
-        :class="timelineItemClasses(item)"
+        class="my-6"
         :hide-dot="item.hide_dot"
       >
         <template v-slot:icon>
-          <div
-            :class="$classes().includes('outlined') ? 'outlined-dots' : ''"
-            :style="`border-color: ${dotColor(item)};`"
-          >
-            <div v-if="item.left_label" class="number-circle">
-              {{ item.left_label }}
+          <div :class="$classes().includes('outlined') ? 'outlined-dots' : ''">
+            <div v-if="item.label" class="number-circle">
+              {{ item.label }}
+            </div>
+            <div v-else class="icon">
+              <common-icon
+                :spec="{
+                  material: { name: item.icon, size: iconSize() },
+                  color: item.color
+                }"
+              />
             </div>
-            <!-- TODO: Use common-icon -->
-            <v-icon v-else size="24" :color="dotColor(item)">
-              {{ dotIcon(item) }}
-            </v-icon>
           </div>
         </template>
-
-        <div :class="item.subtitle ? 'mt-5' : 'mt-2'" class="content">
-          <div
-            :class="item.active ? 'font-weight-bold' : 'font-weight-regular'"
-          >
-            {{ item.label }}
-          </div>
-          <div class="font-weight-regular">
-            {{ item.subtitle }}
-          </div>
-          <panels-responsive v-if="item.active" :spec="spec" />
-        </div>
+        <panels-responsive :spec="{ childViews: [childViews[index]] }" />
       </v-timeline-item>
     </v-timeline>
   </v-container>
@@ -49,32 +39,17 @@ export default {
   },
   data() {
     return {
-      items: this.spec.items,
-      uncompletedIcon: this.spec.uncompletedIcon || "check_circle",
-      completedIcon: this.spec.completedIcon || "radio_button_unchecked",
-      completedColor: this.spec.completedColor || "blue",
-      uncompletedColor: this.spec.uncompletedColor || "grey"
+      events: null,
+      childViews: null
     };
   },
   methods: {
-    timelineItemClasses(item) {
-      let classes = !item.completed && !item.active ? "uncompleted" : "";
-
-      if (!this.$classes().includes("small")) {
-        classes += " my-6";
-      }
-
-      return classes;
-    },
-    dotColor(item) {
-      return !item.completed && !item.active
-        ? this.uncompletedColor
-        : this.completedColor;
+    $ready() {
+      this.events = this.spec.events;
+      this.childViews = this.spec.childViews;
     },
-    dotIcon(item) {
-      return item.active || item.completed
-        ? item.uncompletedIcon || this.uncompletedIcon
-        : item.completedIcon || this.completedIcon
+    iconSize() {
+      return this.$classes().includes("small") ? 16 : 24;
     }
   }
 };
@@ -84,18 +59,12 @@ export default {
 .v-timeline {
   padding-top: 0px;
 }
-
 .v-timeline-item {
   padding-bottom: 0px !important;
 }
 .container {
   padding-top: 0px;
 }
-.small {
-  > .number-circle {
-    font-size: 14px;
-  }
-}
 .outlined-dots {
   border-radius: 50%;
   width: 100%;
@@ -111,4 +80,18 @@ export default {
     box-shadow: none;
   }
 }
+.icon {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+// Size variations
+.number-circle {
+  font-size: 16px;
+}
+.small {
+  .number-circle {
+    font-size: 14px;
+  }
+}
 </style>

package/nav/appbar.vue

@@ -1,22 +1,11 @@
 <template>
   <div>
-    <nav-drawer
-      v-if="page.leftDrawer"
-      :trigger="drawerTrigger"
-      :permanent="isPermanent"
-      :spec="page.leftDrawer"
-    />
+    <nav-drawer v-if="page.leftDrawer" :trigger="drawerTrigger" :permanent="isPermanent" :spec="page.leftDrawer" />
 
-    <v-toolbar :style="style" :height="navBar.height" :class="cssClasses()">
-      <v-app-bar-nav-icon
-        v-if="page.leftDrawer && !isPermanent"
-        style="color: inherit;"
-        @click="drawerTrigger = new Date()"
-      ></v-app-bar-nav-icon>
-      <v-progress-circular
-        v-if="$root.vueApp.indicator"
-        indeterminate
-      ></v-progress-circular>
+    <v-toolbar v-if="navBar.height" :style="style" :height="navBar.height" :class="cssClasses()">
+      <v-app-bar-nav-icon v-if="page.leftDrawer && !isPermanent" style="color: inherit;"
+        @click="drawerTrigger = new Date()"></v-app-bar-nav-icon>
+      <v-progress-circular v-if="$root.vueApp.indicator" indeterminate></v-progress-circular>
       <div v-else>
         <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
         <v-toolbar-title v-else-if="navBar.showTitle">{{
@@ -28,35 +17,16 @@
       <!-- See https://codesandbox.io/embed/14ry9r3lll -->
       <v-toolbar-items class="hidden-sm-and-down">
         <template v-for="(btn, index) in navBar.rightButtons">
-          <common-dropdownMenu
-            v-if="btn.childButtons"
-            :key="index"
-            :spec="btn"
-            :disabled="$isBusy"
-          />
-          <common-button
-            v-else
-            :key="`right_${index}`"
-            :spec="buttonSpec(btn)"
-            :disabled="$isBusy"
-          />
+          <common-dropdownMenu v-if="btn.childButtons" :key="index" :spec="btn" :disabled="$isBusy" />
+          <common-button v-else :key="`right_${index}`" :spec="buttonSpec(btn)" :disabled="$isBusy" />
         </template>
       </v-toolbar-items>
 
-      <common-dropdownMenu
-        v-if="showMobileMenu"
-        class="hidden-md-and-up"
-        :spec="mobileMenu"
-      />
+      <common-dropdownMenu v-if="showMobileMenu" class="hidden-md-and-up" :spec="mobileMenu" />
 
       <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
 
-      <v-btn
-        v-if="viewSourceEnabled()"
-        icon
-        style="color: inherit;"
-        @click="viewSource"
-      >
+      <v-btn v-if="viewSourceEnabled()" icon style="color: inherit;" @click="viewSource">
         <v-icon>zoom_in</v-icon>
       </v-btn>
     </v-toolbar>
@@ -75,7 +45,7 @@ export default {
   props: {
     page: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       drawerTrigger: null,
       navBar: {},
@@ -84,11 +54,11 @@ export default {
     };
   },
   computed: {
-    style: function() {
+    style: function () {
       return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
     },
     // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
-    leftPadding: function() {
+    leftPadding: function () {
       switch (this.$vuetify.breakpoint.name) {
         case "lg":
         case "xl":
@@ -124,11 +94,11 @@ export default {
         styleClasses: styleClasses
       });
     },
-    viewSourceEnabled: function() {
+    viewSourceEnabled: function () {
       // return process.env.NODE_ENV === "development";
       return false;
     },
-    viewSource: function() {
+    viewSource: function () {
       const properties = { message: this.page };
       Utils.launch.dialog.open(Object.assign({}, properties));
     },
@@ -157,11 +127,13 @@ export default {
     &.icon {
       color: inherit;
     }
+
     &.text {
       color: inherit;
     }
   }
 }
+
 .pages-navBar {
   box-shadow: none !important;
 }

package/nav/drawer.vue

@@ -51,6 +51,7 @@
 // import UrlUtils from "../utils/url";
 import NavDrawerButton from "./drawerButton";
 import NavDrawerLabel from "./drawerLabel";
+import bus from "../utils/eventBus";
 
 export default {
   components: {
@@ -102,12 +103,10 @@ export default {
   methods: {
     $ready() {
       this.shrunk = this.mini = this.cssClasses.includes("mini");
-
-      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
-      this.$el.addEventListener("drawers/clickButton", () => {
-        if (!this.permanent) {
-          this.updateState(false);
-        }
+    },
+    $mounted() {
+      bus.$on("drawers/toggle", () => {
+        this.updateState(!this.state);
       });
     },
     updateState(state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "1.0.1",
+  "version": "2.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "vue-youtube": "^1.4.0",
     "vue2-editor": "^2.9.1",
     "vue2-google-maps": "^0.10.6",
+    "vue2-gmap-custom-marker": "^6.1.1",
     "vuedraggable": "^2.24.1",
     "vuetify": "2.3.9"
   },
@@ -44,4 +45,4 @@
     "eslint-plugin-vuetify": "^1.0.0-beta.3",
     "prettier": "^1.18.2"
   }
-}
+}

package/utils/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();

package/utils/form.js

@@ -3,14 +3,14 @@ export default class {
   // Button -> Button.onClick() -> Utils.http.execute() -- doesn't save autofill values
   // Button -> Button.onClick() -> form.submit() -- doesn't execute Form.onSubmit(), so cannot call Utils.http.execute() there
   // Submit -> Form.onSubmit() -> Utils.http.execute() -- save autofill values and auto-submit when ENTER is pressed
-  static submitData(form, component) {
+  static submitData(form, component, overrideUrl = null) {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
       // Prevent onUnload dirty prompt.
       Utils.http.clearDirtyState();
       form.submit();
     } else {
-      const url = form.getAttribute("action");
+      const url = overrideUrl ? overrideUrl : form.getAttribute("action");
       const formData = new FormData(form);
       const method = form.getAttribute("method");
       if (method.toUpperCase() === "GET") {