glib-web 3.8.2 → 3.10.1

package/actions/forms/submit.js

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

package/components/composable/dirtyState.js

@@ -1,27 +1,26 @@
 import { watchEffect } from "vue";
-import { vueApp, glibevent, dialogStates } from "../../store";
+import { glibevent, ctx } from "../../store";
 
 export function useDirtyState() {
-  const ctx = dialogStates.slice(-1)[0] || vueApp;
   const prompt = "Changes you made have not been saved. Are you sure?";
 
   const isDirty = () => {
-    return ctx.isFormDirty && !ctx.isFormSubmitted && !confirm(prompt);
+    return ctx().isFormDirty && !ctx().isFormSubmitted && !confirm(prompt);
   };
 
   const clearDirtyState = () => {
-    ctx.isFormDirty = false;
+    ctx().isFormDirty = false;
   };
 
   const updateDirtyState = (val, oldVal, spec) => {
     if (!spec.disableDirtyCheck && val != oldVal && val != spec.value) {
-      ctx.isFormDirty = true;
+      ctx().isFormDirty = true;
     }
   };
 
   const watchDirtyState = () => {
     return watchEffect(() => {
-      if (ctx.isFormDirty) {
+      if (ctx().isFormDirty) {
         window.onbeforeunload = () => !isDirty();
         glibevent.onbeforewindowsopen = () => !isDirty();
         glibevent.onbeforewindowsclose = () => !isDirty();

package/components/fields/dynamicGroup.vue

@@ -4,7 +4,7 @@
       <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 v-if="spec.titlePrefix">{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
+        <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }}{{ group.actualIndex }}</h4>
         <panels-responsive :spec="group" />
       </div>
     </div>
@@ -22,46 +22,47 @@ export default {
     return {
       groupValues: [],
       template: {},
-      templateViews: []
+      templateViews: [],
+      groupSpecs: []
     };
   },
-  computed: {
-    groupSpecs() {
-      return this.groupValues.map((group, groupIndex) => {
-        const viewSpecs = this.processTemplate(
-          this.mapFieldProperties(group),
-          groupIndex,
-          (viewSpec, name, properties) => {
-            // Always reattach the data model to avoid losing entered data.
-            return Object.assign({}, viewSpec, properties, {
-              name: name,
-              value: this.$data._fieldModels[name]
-            });
+  watch: {
+    spec: {
+      handler(spec) {
+        this.template = spec.template;
+        this.templateViews = this.template.childViews || [];
+
+        spec.groupFieldProperties.forEach((group, groupIndex) => {
+          group.forEach((properties) => {
+            const fullName = this.prefixFieldName(groupIndex, properties.name)
+            this.setFieldModel(fullName, properties.value)
+          })
+        });
+
+        this.groupValues = spec.groupFieldProperties;
+      },
+      immediate: true
+    },
+    groupValues: {
+      handler(groupValues) {
+        var actualIndex = 0
+        this.groupSpecs = groupValues.map((group, groupIndex) => {
+          if (!this.isDeleted(groupIndex)) {
+            ++actualIndex
           }
-        );
-        return Object.assign({}, this.template, { childViews: viewSpecs });
-      });
+
+          const viewSpecs = this.processTemplate(
+            this.mapFieldProperties(group),
+            groupIndex
+          );
+          return Object.assign({}, this.template, { childViews: viewSpecs, actualIndex: actualIndex });
+        });
+      },
+      immediate: true,
+      deep: true // Watch insertion and deletion
     }
   },
   methods: {
-    $ready() {
-      // this.groupValues = this.spec.value;
-      this.groupValues = this.spec.groupFieldProperties;
-
-      this.template = this.spec.template;
-      this.templateViews = this.template.childViews || [];
-
-      this.groupValues.forEach((group, groupIndex) => {
-        this.processTemplate(
-          this.mapFieldProperties(group),
-          groupIndex,
-          (viewSpec, fullName, properties) => {
-            // this.$data._fieldModels[name] = group[viewSpec.name];
-            this.$data._fieldModels[fullName] = properties.value;
-          }
-        );
-      });
-    },
     mapFieldProperties(group) {
       const fieldProperties = {};
       group.forEach(field => {
@@ -69,14 +70,60 @@ export default {
       });
       return fieldProperties;
     },
-    processTemplate(properties, groupIndex, process) {
-      return this.templateViews.map(viewSpec => {
-        if (Utils.type.isString(viewSpec.name)) {
-          // Process only if it is a field
-          const fullName = `${this.spec.name}[${groupIndex}][${viewSpec.name}]`;
-          return process(viewSpec, fullName, properties[viewSpec.name] || {});
+    // Replace every occurrence of `{{index}}` within any string.
+    populateIndexes(object, groupIndex) {
+      if (this.$type.isString(object)) {
+        return object.replace('{{index}}', groupIndex)
+      }
+      if (this.$type.isArray(object)) {
+        return object.map((o) => this.populateIndexes(o, groupIndex));
+
+      } else if (this.$type.isObject(object)) {
+        const newObject = {}
+        for (const key in object) {
+          newObject[key] = this.populateIndexes(object[key], groupIndex)
+        }
+        return newObject
+      }
+      return object
+    },
+    processTemplate(properties, groupIndex, processField, processNonField) {
+      return this.processViews(
+        this.templateViews, properties, groupIndex, processField, processNonField
+      )
+    },
+    prefixFieldName(groupIndex, fieldName) {
+      if (fieldName.search(/\[.*\]/) >= 0) {
+        return `${this.spec.name}[${groupIndex}]${fieldName}`;
+      } else {
+        return `${this.spec.name}[${groupIndex}][${fieldName}]`;
+      }
+    },
+    processField(viewSpec, name, groupIndex) {
+      const indexedName = this.populateIndexes(name, groupIndex)
+      Object.assign(viewSpec, {
+        name: indexedName,
+        value: this.getFieldModel(indexedName)
+      });
+      return viewSpec
+    },
+    processViews(viewSpecs, properties, groupIndex) {
+      return viewSpecs.map(origSpec => {
+        const viewSpec = Object.assign({}, origSpec)
+
+        viewSpec.showIf = this.populateIndexes(viewSpec.showIf, groupIndex)
+        viewSpec.loadIf = this.populateIndexes(viewSpec.loadIf, groupIndex)
+
+        if (Utils.type.isString(viewSpec.name)) { // This is a field
+          const fullName = this.prefixFieldName(groupIndex, viewSpec.name)
+          return this.processField(viewSpec, fullName, groupIndex);
         }
-        return viewSpec;
+
+        if (Utils.type.isObject(viewSpec.childViews)) {
+          viewSpec.childViews = this.processViews(viewSpec.childViews, properties, groupIndex)
+        }
+
+        return viewSpec
       });
     },
     addGroup() {
@@ -87,7 +134,7 @@ export default {
         {},
         () => {
           // Don't delete the group in order to maintain consistent indexes between model and view.
-          this.$set(this.groupValues[index], "_destroy", 1);
+          Object.assign(this.groupValues[index], { _destroy: 1 });
         },
         this
       );

package/components/mixins/styles.js

@@ -114,6 +114,12 @@ export default {
     genericStyles(spec) {
       return this.$styles(spec);
     },
+    setFieldModel(name, value) {
+      fieldModels[name] = value;
+    },
+    getFieldModel(name) {
+      return fieldModels[name];
+    },
     // _checkDirtyState(val, oldVal) {
     //   const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
     //   // Make sure value has changed and make sure that it is different from the original value.

package/components/panels/form.vue

@@ -86,7 +86,7 @@ export default {
       });
 
       this.$onEvent("forms/directSubmit", (e) => {
-        this.directSubmit(e.data.url);
+        this.directSubmit(e.data.url, e.data.method);
       });
     },
     $ready() {
@@ -141,9 +141,9 @@ export default {
         );
       });
     },
-    directSubmit(overrideUrl = null) {
-      if (overrideUrl) {
-        GLib.form.submitData(this.formElement, this, overrideUrl);
+    directSubmit(overrideUrl = null, overrideMethod = null) {
+      if (overrideUrl || overrideMethod) {
+        GLib.form.submitData(this.formElement, this, overrideUrl, overrideMethod);
       } else {
         this.validate(() => {
           GLib.form.submitData(this.formElement, this);

package/components/panels/list.vue

@@ -20,7 +20,7 @@
           :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
           @end="onDragEnd" item-key="id">
           <template #item="{ element }">
-            <component :is="template(element)" :spec="rowSpec(element)" :responsive-cols="spec.responsiveCols"
+            <component :is="template(element)" :spec="element" :responsive-cols="spec.responsiveCols"
               :data-dragRowId="element.id" />
           </template>
         </draggable>
@@ -48,6 +48,7 @@ import { vueApp } from "../../store";
 import draggable from "vuedraggable";
 import autoloadMixin from "../mixins/list/autoload.js";
 import ThumbnailTemplate from "../../templates/thumbnail.vue";
+import EditableTemplate from "../../templates/editable.vue";
 import FeaturedTemplate from "../../templates/featured.vue";
 import CommentTemplate from "../../templates/comment.vue";
 
@@ -55,6 +56,7 @@ export default {
   components: {
     draggable,
     "template-thumbnail": ThumbnailTemplate,
+    "template-editable": EditableTemplate,
     "template-featured": FeaturedTemplate,
     "template-commentOutgoing": CommentTemplate,
     "template-commentIncoming": CommentTemplate,
@@ -83,7 +85,9 @@ export default {
         this.enableInfiniteScrollIfApplicable(spec);
 
         for (const section of this.sections) {
-          section.rows = section.rows || [];
+          section.rows = (section.rows || []).map((row) => {
+            return this.rowSpec(row)
+          })
         }
       },
       immediate: true

package/nav/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog :model-value="model" :width="spec.width || 600" :dark="false" :fullscreen="fullscreen" :sm-and-down="false"
+  <v-dialog class="dialog-container" :model-value="model" :width="spec.width || 600" :dark="false" :fullscreen="fullscreen" :sm-and-down="false"
     :persistent="true" @click:outside="clickOutside">
     <v-card :style="hamburgerStyles" class="hamburger">
 
@@ -15,7 +15,7 @@
         </v-btn>
       </div>
 
-      <div class="dialogs-body relative">
+      <div class="dialog-body relative">
         <component :is="containerComponent" :spec="formSpec">
           <div v-if="message" class="dialog-message">
             <common-message :spec="{ message: message }" />
@@ -209,7 +209,8 @@ export default {
 }
 
 .dialog-message {
-  padding: 16px 16px 20px 16px;
+  padding: 0px 20px;
+  //padding: 16px 16px 20px 16px;
   /* white-space: pre-wrap; */
 }
 

package/package.json

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

package/store.js

@@ -19,6 +19,8 @@ export const vueApp = reactive({
 
 export const dialogStates = reactive([]);
 
+export const ctx = () => dialogStates.slice(-1)[0] || vueApp;
+
 export const glibevent = reactive({
     onbeforewindowsopen: null,
     onbeforewindowsclose: null,

package/templates/editable.vue

@@ -0,0 +1,236 @@
+<template>
+  <component :is="componentName" :href="$href()" class="thumbnail" :class="cssClasses" @[clickCondition]="$onClick()">
+    <panels-responsive :spec="spec.header" />
+    <div style="display:flex;">
+      <!-- <div v-if="spec.leftOuterButtons" style="display:flex; margin-top:10px;">
+        <template v-for="(item, index) in spec.leftOuterButtons" :key="index">
+          <common-button
+            :spec="buttonSpec(item)"
+            :disabled="$isBusy"
+          />
+        </template>
+      </div> -->
+
+      <v-list-item v-longclick="$onLongPress" class="item-content" :style="columnStyles()">
+        <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
+
+        <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
+        <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
+
+        <template v-slot:prepend>
+          <div style="display: flex">
+            <div v-if="spec.leftButtons">
+              <template v-for="(item, index) in spec.leftButtons" :key="index">
+                <glib-button :spec="buttonSpec(item)" :disabled="$isBusy" />
+              </template>
+            </div>
+
+            <common-icon v-if="spec.icon" :spec="spec.icon" />
+          </div>
+        </template>
+
+        <!-- <v-list-item-avatar
+          v-if="$type.isString(spec.imageUrl)"
+          :tile="!spec.avatar"
+          style="display:flex;"
+          class="left-thumbnail"
+          :size="spec.imageSize"
+        >
+          <img :src="spec.imageUrl" />
+        </v-list-item-avatar> -->
+
+        <!-- <div v-else class="left-icon">
+          <v-list-item-avatar v-if="$type.isObject(spec.icon)">
+            <common-icon :spec="spec.icon" />
+          </v-list-item-avatar>
+        </div> -->
+
+        <div>
+          <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>
+          <v-list-item-subtitle v-if="spec.subsubtitle">{{
+            spec.subsubtitle
+          }}</v-list-item-subtitle>
+
+          <div v-if="hasChips" class="chips">
+            <template v-for="(item, index) in chips" :key="index">
+              <common-chip :spec="item" />
+            </template>
+          </div>
+
+          <panels-responsive v-if="spec.body" :spec="spec.body" />
+        </div>
+
+        <template v-slot:append>
+          <template v-for="(item, index) in spec.rightButtons" :key="index">
+            <glib-button :spec="buttonSpec(item)" :disabled="$isBusy" />
+          </template>
+        </template>
+
+      </v-list-item>
+      <panels-responsive :spec="spec.right" />
+    </div>
+    <panels-responsive :spec="spec.footer" />
+  </component>
+</template>
+
+<script>
+import CheckField from "../components/fields/check.vue";
+
+export default {
+  components: {
+    "fields-check": CheckField
+  },
+  props: {
+    spec: { type: Object, required: true },
+    responsiveCols: { type: Number, default: () => 0 }
+  },
+  data() {
+    return {
+      // editButtons: []
+    };
+  },
+  computed: {
+    componentName() {
+      // Use `a` to enable "open in new tab".
+      return this.clickCondition ? "a" : "div";
+      // return "div"
+    },
+    cssClasses() {
+      return this.$classes(this.spec, "templates/thumbnail");
+    },
+    clickCondition() {
+      if (this.spec.onClick || this.spec.onLongPress) {
+        // This will show the clickable indication
+        return "click";
+      }
+      return null;
+    },
+    hasChips() {
+      return this.spec.chips && this.spec.chips.length > 0;
+    },
+    // Implemented as computed so that it gets reflected when reordering
+    chips() {
+      return (this.spec.chips || []).map(item => {
+        var color = null;
+        this.$type.ifArray(item.styleClasses, classes => {
+          for (const val of ["success", "info", "warning", "error"]) {
+            if (classes.includes(val)) {
+              color = val;
+            }
+          }
+        });
+        return Object.assign({}, item, { color: color, view: "chip" });
+      });
+    },
+    // Implemented as computed so that it gets reflected when navigating to another list containing check fields.
+    checkSpec() {
+      if (this.spec.fieldCheckName) {
+        return {
+          view: "fields/checkGroup",
+          name: this.spec.fieldCheckName,
+          checkValue: true,
+          valueIf: this.spec.fieldCheckValueIf,
+          padding: { left: 16 }
+        };
+      }
+      return null;
+    }
+    // cssStyles() {
+    //   const styles = this.$styles();
+    //   // switch(this.spec.align) {
+    //   //   case 'middle':
+    //   //     styles['align-items'] = 'center'
+    //   //     break
+    //   //   case 'bottom':
+    //   //     styles['align-items'] = 'flex-end'
+    //   //     break
+    //   //   default:
+    //   //     styles['align-items'] = 'flex-start'
+    //   // }
+    //   return styles;
+    // },
+  },
+  methods: {
+    $ready() {
+      // this.editButtons = this.spec.editButtons || [];
+    },
+    buttonSpec(item) {
+      // Classes should be coming from the backend
+      // const styleClasses = ["text", "x-small"]
+      // if (!item.text) {
+      //   styleClasses.push("icon")
+      // }
+
+      return Object.assign({}, item, {
+        view: "button"
+      });
+    },
+    columnStyles() {
+      if (this.responsiveCols) {
+        return `width: ${100 / this.responsiveCols}%; float: left;`;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.chips>* {
+  margin-right: 10px;
+}
+
+.v-list-item__content {
+  width: 100%;
+}
+
+.thumbnail {
+
+  // Override this when using the `right` property.
+  .item-content {
+    width: 100%;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+a.thumbnail {
+  color: inherit;
+  text-decoration: inherit;
+  display: block;
+}
+
+.item-content {
+  display: flex;
+
+  &.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+}
+
+@media (min-width: 600px) {
+  .left-thumbnail.v-avatar.v-list-item__avatar {
+    margin: 6px 6px 6px 6px;
+    width: 60px;
+    height: 60px;
+  }
+
+  .left-icon {
+    // margin-left: 16px;
+    margin-left: 4px;
+  }
+
+  // .left-universal {
+  //   padding-left: 16px;
+  // }
+  // .handle {
+  //   // margin-left: 10px;
+  //   cursor: move;
+  // }
+}
+</style>

package/templates/thumbnail.vue

@@ -14,11 +14,11 @@
       <v-list-item v-longclick="$onLongPress" class="item-content" :style="columnStyles()">
         <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
 
-        <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
-        <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
-
         <template v-slot:prepend>
           <div style="display: flex">
+            <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
+            <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
+
             <div v-if="spec.leftButtons">
               <template v-for="(item, index) in spec.leftButtons" :key="index">
                 <glib-button :spec="buttonSpec(item)" :disabled="$isBusy" />
@@ -46,8 +46,7 @@
         </div> -->
 
         <div>
-          <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-title>{{ spec.title }}</v-list-item-title>
 
           <v-list-item-subtitle v-if="spec.subtitle">{{
             spec.subtitle
@@ -71,8 +70,6 @@
           </template>
         </template>
 
-        <!-- Deprecated -->
-        <!-- <templates-menu :edit-buttons="editButtons" /> -->
       </v-list-item>
       <panels-responsive :spec="spec.right" />
     </div>
@@ -93,9 +90,24 @@ export default {
   },
   data() {
     return {
-      // editButtons: []
+      // checkSpec: null
     };
   },
+  // watch: {
+  //   spec: {
+  //     handler(spec) {
+  //       if (this.spec.fieldCheckName) {
+  //         this.checkSpec = {
+  //           view: "fields/checkGroup",
+  //           name: this.spec.fieldCheckName,
+  //           checkValue: true,
+  //           valueIf: this.spec.fieldCheckValueIf
+  //         };
+  //       }
+  //     },
+  //     immediate: true
+  //   }
+  // },
   computed: {
     componentName() {
       // Use `a` to enable "open in new tab".
@@ -136,8 +148,7 @@ export default {
           view: "fields/checkGroup",
           name: this.spec.fieldCheckName,
           checkValue: true,
-          valueIf: this.spec.fieldCheckValueIf,
-          padding: { left: 16 }
+          valueIf: this.spec.fieldCheckValueIf
         };
       }
       return null;

package/utils/form.js

@@ -1,22 +1,33 @@
-import { vueApp } from "../store";
+import { ctx } from "../store";
 
 export default class {
   // Execution flows:
   // 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, overrideUrl = null) {
+  static submitData(form, component, overrideUrl = null, overrideMethod = null) {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
+      if (overrideUrl) {
+        component.$data.url = overrideUrl
+      }
+
       // Prevent onUnload dirty prompt.
       // Utils.http.clearDirtyState();
-      vueApp.isFormDirty = false;
-      form.submit();
+
+      // Use nextTick to wait for overrideUrl get picked up.
+      component.$nextTick(() => {
+        ctx().isFormDirty = false;
+        form.submit();
+      });
     } else {
       const url = overrideUrl ? overrideUrl : form.getAttribute("action");
       const formData = new FormData(form);
-      const method = form.getAttribute("method");
+      const method = overrideMethod ? overrideMethod : form.getAttribute("method");
+
       if (method.toUpperCase() === "GET") {
+        // Don't include this token in GET requests.
+        formData.delete("authenticity_token")
         const data = {
           url: Utils.url.appendParams(url, formData)
         };

package/utils/http.js

@@ -1,7 +1,7 @@
 import Type from "./type";
 import Action from "../action";
 import { nextTick } from 'vue';
-import { vueApp } from "../store";
+import { ctx, vueApp } from "../store";
 
 let loading = false;
 
@@ -137,7 +137,8 @@ export default class {
   static reload(properties, component) {
     const currentUrl = window.location.href;
     const data = {
-      url: properties.url || currentUrl
+      url: properties.url || currentUrl,
+      formData: properties.formData
     };
 
     Utils.http.execute(data, "GET", component, (page, response) => {
@@ -257,8 +258,8 @@ export default class {
   static forceComponentUpdate(handler) {
     // GLib.component.clearRegistry();
     vueApp.isStale = true;
-    vueApp.isFormSubmitted = false;
-    vueApp.isFormDirty = false;
+    ctx().isFormSubmitted = false;
+    ctx().isFormDirty = false;
     handler();
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
@@ -272,7 +273,7 @@ export default class {
   // }
 
   static notifyFormSubmitted() {
-    vueApp.isFormSubmitted = true;
+    ctx().isFormSubmitted = true;
   }
 
   // `context` can be either window or dialog.

package/utils/url.js

@@ -100,6 +100,10 @@ export default class {
 
   // // https://gist.github.com/pirate/9298155edda679510723
   static _extractUrlParams(search) {
+    if (search.indexOf("?") <= -1) {
+      return {};
+    }
+
     const hashes = search.slice(search.indexOf("?") + 1).split("&");
     return hashes.reduce((params, hash) => {
       const split = hash.indexOf("=");