glib-web 0.6.16 → 0.7.1

package/actions/windows/open.js

@@ -1,5 +1,5 @@
 export default class {
   execute(properties, component) {
-    Utils.http.load(properties, null, component);
+    Utils.http.load(properties, component);
   }
 }

package/actions/windows/reload.js

@@ -1,21 +1,6 @@
 export default class {
   execute(properties, component) {
     if (Utils.settings.reactive) {
-      // const currentUrl = window.location.href;
-      // const data = {
-      //   url: properties.url || currentUrl
-      // };
-
-      // Utils.http.execute(data, "GET", component, (page, response) => {
-      //   Utils.http.forceComponentUpdate(() => {
-      //     window.vueApp.page = page;
-      //     const redirectUrl = Utils.url.htmlUrl(response.url);
-      //     Utils.history.updatePage(redirectUrl);
-
-      //     GLib.action.execute(properties["onReload"], null, component);
-      //   });
-      // });
-
       Utils.http.reload(properties, component);
     } else {
       window.location.reload();

package/app.vue

@@ -80,6 +80,7 @@ export default {
     );
     Utils.history.saveInitialContent(this.page);
     Utils.history.restoreOnBackOrForward();
+    Utils.http.promptIfDirtyOnUnload();
   },
   methods: {
     $ready: function() {

package/components/avatar.vue

@@ -1,18 +1,43 @@
 <template>
-  <v-avatar :style="genericStyles()" :class="$classes()" :size="spec.size">
-    <v-img :src="spec.url || spec.base64Data" @click="$onClick()"> </v-img>
-  </v-avatar>
-
-  <!-- <v-avatar :width="genericStyles().remove('width')" :height="genericStyles().remove('height')">
-    <v-img :src="spec.url || spec.base64Data" :style="genericStyles()" @click='$onClick()'>
-    </v-img>
-  </v-avatar> -->
+  <v-tooltip
+    :disabled="tooltip.disabled"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <v-avatar
+        :style="genericStyles()"
+        :class="$classes()"
+        :size="spec.size"
+        v-on="on"
+      >
+        <v-img :src="spec.url || spec.base64Data" @click="$onClick()"> </v-img>
+      </v-avatar>
+    </template>
+    <span>{{ tooltip.text }}</span>
+  </v-tooltip>
 </template>
 
 <script>
+import TooltipMixins from "./mixins/tooltip";
+
 export default {
+  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      styles: {},
+      tooltip: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+    }
   }
 };
 </script>

package/components/image.vue

@@ -1,34 +1,45 @@
 <template>
-  <!-- TODO: Add support for href and :rel="$rel()" -->
-  <v-img :src="spec.url || spec.base64Data" :style="styles" @click="$onClick()">
-    <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
-  </v-img>
+  <v-tooltip
+    :disabled="tooltip.disabled"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <!-- TODO: Add support for href and :rel="$rel()" -->
+      <v-img
+        :src="spec.url || spec.base64Data"
+        :style="styles"
+        v-on="on"
+        @click="$onClick()"
+      >
+        <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
+      </v-img>
+    </template>
+    <span>{{ tooltip.text }}</span>
+  </v-tooltip>
 </template>
 
 <script>
 import Vue from "vue";
+import TooltipMixins from "./mixins/tooltip";
 
 export default {
+  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      styles: {}
+      styles: {},
+      tooltip: {}
     };
   },
-  // computed: {
-  //   isOnClickPresent() {
-  //     return this.spec.hasOwnProperty('onClick')
-  //   }
-  // },
   methods: {
-    // styles: function() {
-    //   // const styles = this.genericStyles(Object.assign({ height: 210 }, this.spec))
-    //   const styles = this.genericStyles(Object.assign({}, this.spec));
-    //   return styles;
-    // }
     $ready() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+
       const styles = this.genericStyles(Object.assign({}, this.spec));
       this.styles = styles;
 

package/components/mixins/styles.js

@@ -46,8 +46,18 @@ export default {
         this.$internalizeValue(val)
       );
 
-      // this.$saveValue(val);
-      // Vue.set(this.$data._fieldModels, this.fieldName, val);
+      // Make sure value has changed and make sure that it is different from the original value.
+      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
+      // from `null` to `this.spec.value`).
+      if (
+        !window.vueApp.page.disableDirtyPrompt &&
+        !window.vueApp.isFormDirty &&
+        val != oldVal &&
+        val != this.spec.value
+      ) {
+        console.log("Form is now dirty");
+        window.vueApp.isFormDirty = true;
+      }
     }
   },
   methods: {

package/components/mixins/table/import.js

@@ -42,7 +42,6 @@ export default {
         };
         Utils.http.execute(data, "POST", vm, response => {
           GLib.action.handleResponse(response, vm);
-          // Action.execute(response["onResponse"], target, vm);
           vm._submitEachRow(rows, target);
         });
       }

package/components/panels/horizontal.vue

@@ -14,13 +14,22 @@ export default {
   computed: {
     cssClasses: function() {
       const classes = this.$classes().concat("layouts-horizontal");
-      switch (this.spec.distribution) {
+      const distribution = this.spec.distribution;
+      switch (distribution) {
         case "fillEqually":
           classes.push("layouts-horizontal--fill-equally");
           break;
         case "spaceEqually":
           classes.push("layouts-horizontal--space-equally");
           break;
+        default:
+          Utils.type.ifString(distribution, distribution => {
+            // Uses Material Design spacings: https://vuetifyjs.com/en/styles/spacing/#how-it-works
+            if (distribution.startsWith("overlap")) {
+              classes.push(`layouts-horizontal--${distribution}`);
+            }
+          });
+          break;
       }
       return classes;
     },
@@ -67,7 +76,19 @@ export default {
 .layouts-horizontal--space-equally > * {
   flex: initial;
 }
-/* .layouts-horizontal > div {
-  display: inline-block;
-} */
+.layouts-horizontal--overlap-1 > *:not(:first-child) {
+  margin-left: -4px;
+}
+.layouts-horizontal--overlap-2 > *:not(:first-child) {
+  margin-left: -8px;
+}
+.layouts-horizontal--overlap-3 > *:not(:first-child) {
+  margin-left: -12px;
+}
+.layouts-horizontal--overlap-4 > *:not(:first-child) {
+  margin-left: -16px;
+}
+.layouts-horizontal--overlap-5 > *:not(:first-child) {
+  margin-left: -20px;
+}
 </style>

package/components/panels/list.vue

@@ -28,7 +28,7 @@
 
             <component
               :is="template(row)"
-              :spec="row"
+              :spec="rowSpec(row)"
               :responsive-cols="spec.responsiveCols"
               :index="rowIndex"
             />
@@ -113,6 +113,18 @@ export default {
         section.rows = section.rows || [];
       }
     },
+    rowSpec(row) {
+      if (this.spec.fieldPrefix) {
+        const prefix = `${this.spec.fieldPrefix}[${row.recordId}]`;
+        return Object.assign({}, row, {
+          fieldCheckName: `${prefix}[checked]`,
+          fieldTitleName: this.spec.fieldTitleName
+            ? `${prefix}[${this.spec.fieldTitleName}]`
+            : null
+        });
+      }
+      return row;
+    },
     action_loadNext(spec) {
       console.log("TODO: load new comments and append to this list", spec);
       // TODO

package/index.js

@@ -160,6 +160,10 @@ document.addEventListener("DOMContentLoaded", () => {
     indicator: false,
     // Rename to isPageStale
     isStale: false,
+    /// Dirty form handling
+    isFormSubmitted: false,
+    isFormDirty: false,
+    ///
     stateUpdatedAt: null,
     webSocket: { channels: {}, header: {} },
     actionCable: { channels: {} },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.6.16",
+  "version": "0.7.1",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/comment.vue

@@ -5,11 +5,7 @@
         <v-card-title v-if="mode === 'system'" class="caption">{{
           spec.subtitle
         }}</v-card-title>
-        <v-avatar
-          v-if="spec.imageUrl && mode !== 'outgoing'"
-          class="avatar"
-          size="30px"
-        >
+        <v-avatar v-if="spec.imageUrl" class="avatar" size="30px">
           <img :src="spec.imageUrl" alt="avatar" />
         </v-avatar>
         <v-card-title
@@ -156,47 +152,71 @@ export default {
     padding-top: 4px;
     align-self: start;
   }
+
+  > .avatar {
+    grid-row: 1/2;
+    grid-column: 1/2;
+    padding: 0;
+    justify-self: center;
+  }
+
+  > .subtitle {
+    grid-row: 1/2;
+    grid-column: 2/3;
+    padding: 0;
+  }
 }
-.avatar {
-  grid-row: 1/2;
-  grid-column: 1/2;
-  padding: 0;
-  justify-self: center;
-}
-.subtitle {
-  grid-row: 1/2;
-  grid-column: 2/3;
-  padding: 0;
-}
+
 .outgoing {
   display: grid;
-  grid-template-rows: auto 1fr;
-  grid-column: 2/5;
+  grid-template-columns: 36px auto 36px;
+  grid-template-rows: 1fr auto 0.5fr;
+  grid-column: 4/4;
 
   > * {
     justify-self: end;
+    grid-column: 2/3;
+  }
+
+  > .chips {
+    grid-row: 4/4;
   }
 
   > .comment-bubble {
     background-color: #0084ff;
     color: #fff;
     border-radius: 10px 10px 0px 10px !important;
-    grid-row: 1/2;
+    grid-row: 2/2;
   }
 
   > .comment-image {
     max-width: 100%;
     height: 300px;
     border-radius: 10px !important;
-    grid-row: 1/2;
+    grid-row: 2/2;
     padding: 0px !important;
     cursor: pointer;
   }
 
   > .subsubtitle {
-    grid-row: 2/3;
+    grid-row: 3/4;
     padding: 0;
     color: #9e9e9e;
+    padding-top: 4px;
+    align-self: start;
+  }
+
+  > .avatar {
+    grid-row: 1/2;
+    grid-column: 3/4;
+    padding: 0;
+    justify-self: end;
+  }
+
+  > .subtitle {
+    grid-row: 1/2;
+    grid-column: 2/3;
+    padding: 0;
   }
 }
 </style>

package/templates/thumbnail.vue

@@ -23,6 +23,12 @@
     >
       <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
 
+      <v-checkbox
+        v-if="spec.fieldCheckName"
+        :name="spec.fieldCheckName"
+        :value="true"
+      ></v-checkbox>
+
       <div v-if="spec.leftButtons" class="left-universal">
         <template v-for="(item, index) in spec.leftButtons">
           <common-button
@@ -52,7 +58,13 @@
       </div>
 
       <v-list-item-content style="display:flex;">
-        <v-list-item-title>{{ spec.title }}</v-list-item-title>
+        <v-text-field
+          v-if="spec.fieldTitleName"
+          :name="spec.fieldTitleName"
+          :value="spec.title"
+        />
+        <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
+
         <v-list-item-subtitle v-if="spec.subtitle">{{
           spec.subtitle
         }}</v-list-item-subtitle>

package/utils/form.js

@@ -4,7 +4,7 @@ export default class {
   // 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) {
-    // Analogous to Rails' form_with's local
+    // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
       form.submit();
     } else {
@@ -15,13 +15,14 @@ export default class {
         const data = {
           url: Utils.url.appendParams(url, formData)
         };
-        Utils.http.load(data, null, component);
+        Utils.http.load(data, component);
       } else {
         const data = {
           url: url,
           formData: formData
         };
         Utils.http.execute(data, method, component, response => {
+          Utils.http.notifyFormSubmitted();
           GLib.action.handleResponse(response, component);
         });
       }

package/utils/history.js

@@ -35,6 +35,15 @@ export default class {
   static restoreOnBackOrForward() {
     const vm = this;
     window.onpopstate = event => {
+      // TODO: Ideally display a prompt when dirty
+      // if (Utils.http.proceedEvenWhenDirty()) {
+      //   event.preventDefault();
+      //   history.go(1);
+      //   return false;
+      // }
+
+      window.vueApp.isFormDirty = false;
+
       // Save scroll position of the current page when navigating through back/forward button
       this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;
 

package/utils/http.js

@@ -2,6 +2,7 @@ import Type from "./type";
 import Action from "../action";
 
 let loading = false;
+const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
 
 class HttpRequest {
   constructor() {
@@ -38,9 +39,15 @@ export default class {
     return formData;
   }
 
-  static load(properties, target, component) {
+  static load(properties, component) {
     const url = new URL(properties["url"]);
     const domainMatched = window.location.hostname == url.hostname;
+
+    // If this is an external domain, we rely on `onUnload()` instead.
+    if (domainMatched && !this.proceedEvenWhenDirty()) {
+      return;
+    }
+
     if (Utils.settings.reactive && domainMatched) {
       const currentUrl = window.location.href;
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
@@ -202,8 +209,32 @@ export default class {
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
     setTimeout(() => {
+      window.vueApp.isFormSubmitted = false;
+      window.vueApp.isFormDirty = false;
       handler();
       window.vueApp.isStale = false;
     }, 0);
   }
+
+  static promptIfDirtyOnUnload() {
+    window.onbeforeunload = function() {
+      return window.vueApp.isFormDirty ? dirtyPrompt : null;
+    };
+  }
+
+  static notifyFormSubmitted() {
+    window.vueApp.isFormSubmitted = true;
+  }
+
+  static proceedEvenWhenDirty() {
+    // Don't prompt if this is a result of form submission
+    if (
+      window.vueApp.isFormDirty &&
+      !window.vueApp.isFormSubmitted &&
+      !confirm(dirtyPrompt)
+    ) {
+      return false;
+    }
+    return true;
+  }
 }

package/utils/uploader.js

@@ -5,13 +5,6 @@ import mimeType from "../utils/mime_type";
 const MB_SIZE = 1000;
 
 export default class Uploader {
-  // constructor(input, file, url) {
-  //   this.input = input
-  //   this.file = file
-  //   this.url = url
-  //   this.upload = new DirectUpload(this.file, this.url, this)
-  // }
-
   constructor(file, url, progress) {
     this.file = file;
     this.url = url;