glib-web 0.5.77

package/components/fields/country/regions.js

@@ -0,0 +1,12 @@
+export default {
+  'Australia': [
+    'Australian Capital Territory',
+    'New South Wales',
+    'Northern Territory',
+    'Queensland',
+    'South Australia',
+    'Tasmania',
+    'Victoria',
+    'Western Australia'
+  ]
+}

package/components/fields/creditCard.vue

@@ -0,0 +1,105 @@
+<template>
+  <div :style="genericStyles()" :class="$classes()">
+    <StripeIndividualFields
+      v-if="$classes().includes('individual')"
+      :spec="spec"
+      :on-complete="_retrieveToken"
+      :on-error="_displayError"
+    />
+    <StripeFields
+      v-else
+      :spec="spec"
+      :on-complete="_retrieveToken"
+      :on-error="_displayError"
+    />
+    <div ref="error" style="color: red;"></div>
+    <!-- <input ref="token" type="hidden" :name="spec.name" /> -->
+
+    <input
+      type="hidden"
+      :name="spec.name + '[payment_method_id]'"
+      :value="paymentMethodId"
+    />
+    <input type="hidden" :name="spec.name + '[brand]'" :value="brand" />
+    <input type="hidden" :name="spec.name + '[country]'" :value="country" />
+    <input type="hidden" :name="spec.name + '[last4]'" :value="last4" />
+  </div>
+</template>
+
+<script>
+import StripeIndividualFields from "./stripe/stripeIndividualFields.vue";
+import StripeFields from "./stripe/stripeFields.vue";
+
+export default {
+  components: {
+    StripeIndividualFields,
+    StripeFields
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      stripe: null,
+      card: null,
+      paymentMethodId: null,
+      brand: null,
+      country: null,
+      last4: null
+    };
+  },
+  methods: {
+    $ready() {
+      this.paymentMethodId = null;
+      this.brand = null;
+      this.country = null;
+      this.last4 = null;
+    },
+    _displayError(message) {
+      const displayError = this.$refs.error;
+      displayError.textContent = message;
+    },
+    _retrieveToken(stripe, card) {
+      // this.$dispatchEvent("forms/setBusy", { value: true });
+      // const vm = this;
+      // stripe.createToken(card).then(function(result) {
+      //   if (result.error) {
+      //     vm._displayError(result.error.message);
+      //   } else {
+      //     vm._displayError("");
+      //     const token = result.token;
+      //     vm.$refs.token.setAttribute("value", token.id);
+      //   }
+      //   vm.$dispatchEvent("forms/setBusy", { value: false });
+      // });
+
+      this._createPaymentMethod(stripe, card);
+    },
+    _createPaymentMethod(stripe, card) {
+      this.$dispatchEvent("forms/setBusy", { value: true });
+
+      let vm = this;
+      stripe.createPaymentMethod("card", card).then(function(result) {
+        if (result.error) {
+          vm._displayError(result.error.message);
+
+          // // Show error in payment form
+          // vm.displayError.textContent = result.error.message;
+          // vm.clearData();
+          // setTimeout(function() {
+          //   vm.retrieveToken.status = "complete";
+          // }, 50);
+        } else {
+          vm._displayError("");
+
+          vm.paymentMethodId = result.paymentMethod.id;
+          vm.brand = result.paymentMethod.card.brand;
+          vm.country = result.paymentMethod.card.country;
+          vm.last4 = result.paymentMethod.card.last4;
+        }
+        vm.$dispatchEvent("forms/setBusy", { value: false });
+      });
+    }
+  }
+};
+</script>

package/components/fields/date.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
+  <fields-patternText
+    :spec="spec"
+    type="date"
+    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
+  />
+</template>
+
+<script>
+import PatternTextField from "./_patternText";
+
+export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-patternText": PatternTextField
+  },
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/fields/datetime.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
+  <!-- <v-text-field
+    :label="spec.label"
+    :name="spec.name"
+    :value="value"
+    type="datetime-local"
+    :readonly="spec.readOnly || false"
+    :disabled="spec.readOnly"
+    :min="spec.min"
+    :max="spec.max"
+    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
+    :outlined="$classes().includes('outlined')"
+    :style="genericStyles()"
+  /> -->
+  <fields-patternText
+    :spec="spec"
+    type="datetime-local"
+    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
+    :value="value"
+  />
+</template>
+
+<script>
+import PatternTextField from "./_patternText";
+
+export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-patternText": PatternTextField
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      value: null
+    };
+  }
+  // methods: {
+  //   $ready() {
+  //     this.value = this.spec.value.slice(0, 16);
+  //     // this.value = moment(this.spec.value).format('YYYY-MM-DDThh:mm')
+  //   }
+  // }
+};
+</script>
+
+<style scoped></style>

package/components/fields/dynamicGroup.vue

@@ -0,0 +1,106 @@
+<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"
+      />
+      <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>
+        <panels-responsive :spec="group" />
+      </div>
+    </div>
+
+    <v-icon color="success" @click="addGroup()">add_circle</v-icon>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      groupValues: [],
+      template: {},
+      templateViews: []
+    };
+  },
+  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]
+            });
+          }
+        );
+        return Object.assign({}, this.template, { childViews: viewSpecs });
+      });
+    }
+  },
+  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 => {
+        fieldProperties[field.name] = field;
+      });
+      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] || {});
+        }
+        return viewSpec;
+      });
+    },
+    addGroup() {
+      this.groupValues.push([{}]);
+    },
+    removeGroup(index) {
+      Utils.launch.sheet.confirm({}, () => {
+        // Don't delete the group in order to maintain consistent indexes between model and view.
+        this.$set(this.groupValues[index], "_destroy", 1);
+      });
+    },
+    isDeleted(index) {
+      return this.groupValues[index]._destroy;
+    }
+  }
+};
+</script>

package/components/fields/dynamicSelect.vue

@@ -0,0 +1,173 @@
+<template>
+  <div :style="genericStyles()">
+    <v-autocomplete
+      ref="autocomplete"
+      v-model="model"
+      :items="allItems"
+      :loading="$isBusy"
+      :search-input.sync="search"
+      :label="spec.label"
+      hide-no-data
+      hide-selected
+      no-filter
+      return-object
+      :chips="true"
+      :deletable-chips="true"
+      :multiple="spec.multiple"
+    >
+      <template v-slot:item="data">
+        {{ data.item.title }} - {{ data.item.subtitle }}
+      </template>
+
+      <v-list-item
+        v-if="!$isBusy && nextPageUrl"
+        slot="append-item"
+        class="load-more"
+      >
+        <v-list-item-content class="text-content" @click="loadMore">
+          <v-list-item-title>Load More</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-autocomplete>
+
+    <input
+      v-for="(item, index) in values"
+      :key="index"
+      type="hidden"
+      :name="spec.name"
+      :value="item.value"
+    />
+  </div>
+</template>
+
+<script>
+import Http from "../../utils/http";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      model: null,
+      search: null,
+      nextPageUrl: null,
+      keyword: "",
+      items: [],
+      allItems: [],
+      http: null,
+      lastTypedAt: null
+    };
+  },
+  computed: {
+    values() {
+      if (this.model) {
+        // Depends on whether the field is single or multiple
+        return this.$type.isArray(this.model) ? this.model : [this.model];
+      }
+      // To avoid empty param error
+      return [{ value: null }];
+    }
+  },
+  watch: {
+    // From https://codepen.io/pen/?&editable=true&editors=101
+    search(val) {
+      // if (this.http) {
+      //   this.http.cancel();
+      //   this.http = null;
+      // }
+      // this.keyword = val;
+
+      if (!val || val.length <= 0) {
+        return;
+      }
+
+      // This is not necessary if the server is efficient, but the speed improvement can
+      // be noticeable for a server which is slow in handling all the requests (including
+      // the canceled ones)
+      this.lastTypedAt = Date.now();
+
+      const delay = 500;
+      setTimeout(() => {
+        const lastTypedDistance = Date.now() - this.lastTypedAt;
+        // If the user has stopped typing
+        if (lastTypedDistance >= delay) {
+          if (this.http) {
+            this.http.cancel();
+            this.http = null;
+          }
+          this.keyword = val;
+
+          this.loadItems(this.spec.url, false);
+        }
+      }, delay);
+    },
+    model(val) {
+      this.updateAllItems();
+    }
+  },
+  methods: {
+    $ready() {
+      const selectedItems = this.spec.selectedOptions;
+      this.model = this.spec.multiple ? selectedItems : selectedItems[0];
+      this.updateAllItems();
+      this.loadItems(this.spec.url, false);
+    },
+    loadMore() {
+      if (this.nextPageUrl) {
+        this.loadItems(this.nextPageUrl, true);
+      }
+    },
+    loadItems(url, append) {
+      const vm = this;
+      this.http = Http.execute(
+        { url: `${url}&q=${this.keyword}` },
+        "GET",
+        this,
+        (data, response) => {
+          this.nextPageUrl = data.nextPageUrl;
+
+          const rows = this.normalizedRows(data);
+          if (append) {
+            vm.items = vm.items.concat(rows);
+          } else {
+            vm.items = rows;
+          }
+
+          vm.updateAllItems();
+
+          // This causes `Cannot set property 'scrollTop' of undefined` presumably when dropdown is not shown.
+          if (append) {
+            // Workaround to refresh list after adding new items
+            // See https://github.com/vuetifyjs/vuetify/issues/4867
+            setTimeout(() => {
+              this.$refs.autocomplete.onScroll();
+            });
+          }
+        }
+      );
+    },
+    updateAllItems() {
+      // Make sure selected items/values are in the mix so they can be displayed in the select field.
+      this.allItems = this.values.concat(this.items);
+    },
+    normalizedRows(data) {
+      return data.rows.map(row => {
+        const extra = row.extra;
+        row.value = extra.value;
+        row.text = extra.text;
+        return row;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.load-more {
+  cursor: pointer;
+}
+.load-more:hover {
+  background-color: lightgray;
+}
+</style>

package/components/fields/file.vue

@@ -0,0 +1,166 @@
+<template>
+  <div ref="fileUploadContainer" class="mb-3" :style="$styles()">
+    <label class="v-label v-label--active">{{ spec.label }}</label>
+    <div class="preview-container">
+      <v-avatar
+        v-if="placeholder.type == 'avatar'"
+        :style="genericStyles(placeholder)"
+      >
+        <img :src="fileImage || placeholder.url" />
+      </v-avatar>
+      <img
+        v-else-if="placeholder.type == 'image'"
+        class="square-image"
+        :style="genericStyles(placeholder)"
+        :src="fileImage || placeholder.url"
+      />
+      <span v-else>{{ fileTitle }}</span>
+
+      <span class="action-container">
+        <v-btn icon @click="triggerUpload">
+          <v-icon>edit</v-icon>
+        </v-btn>
+
+        <v-btn icon @click="removeImage">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </span>
+    </div>
+    <input
+      ref="directUploadFile"
+      style="display: none;"
+      type="file"
+      @change="uploadFiles"
+    />
+
+    <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
+    <v-progress-linear v-if="showProgress" v-model="progress.value" />
+    <!-- <div v-show='uploaded'>
+      <v-layout align-center justify-space-between row>
+        <v-chip @click='removeImage' class='mr-2' color='red' text-color="white">X</v-chip>
+        <span ref='fileName' class='w-full mr-2'></span>
+        <img ref='fileImage' class='place-image-preview' />
+      </v-layout>
+    </div> -->
+    <input type="hidden" :name="spec.name" :value="fileValue" />
+  </div>
+</template>
+
+<script>
+// import * as ActiveStorage from "@rails/activestorage"
+import Uploader from "../../utils/uploader";
+// import EventController, {
+//   DISABLE_SUBMIT_BUTTON
+// } from "../../utils/global-event-controller";
+
+// ActiveStorage.start()
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      uploaded: false,
+      progress: { value: -1 },
+      fileTitle: null,
+      fileImage: null,
+      fileValue: null,
+      inputElement: null,
+      placeholder: {}
+    };
+  },
+  computed: {
+    showProgress: function() {
+      return this.progress.value >= 0;
+    }
+  },
+  methods: {
+    $ready() {
+      if (Utils.type.isString(this.spec.value)) {
+        this.uploaded = true;
+        this.fileTitle = this.spec.fileTitle;
+        this.fileImage = this.spec.fileUrl;
+        this.fileValue = this.spec.value;
+      }
+
+      this.placeholder = this.spec.placeholderView || {};
+      this.inputElement = this.$refs.directUploadFile;
+    },
+    triggerUpload() {
+      this.inputElement.click();
+    },
+    removeImage() {
+      this.uploaded = false;
+      this.fileTitle = null;
+      this.fileImage = null;
+      this.fileValue = null;
+    },
+    displayImagePreview(file, blob) {
+      let reader = new FileReader();
+      reader.onload = e => {
+        this.fileTitle = file.name;
+        this.fileImage = e.target.result;
+        this.fileValue = blob.signed_id;
+      };
+      reader.readAsDataURL(file);
+    },
+    uploadFile(file) {
+      const upload = new Uploader(
+        file,
+        this.spec.directUploadUrl,
+        this.progress
+      );
+
+      const input = this.inputElement;
+      if (upload.validateFile(this.spec)) {
+        this.$dispatchEvent("forms/setBusy", { value: true });
+
+        // TODO: Delete
+        // EventController.$emit(DISABLE_SUBMIT_BUTTON, true);
+
+        input.disabled = true;
+        upload.start((error, blob) => {
+          if (error) {
+            Utils.launch.snackbar.error(error);
+          } else {
+            this.uploaded = true;
+            this.progress.value = -1;
+            this.displayImagePreview(file, blob);
+          }
+
+          input.disabled = false;
+          input.value = null;
+          // EventController.$emit(DISABLE_SUBMIT_BUTTON, false);
+
+          this.$dispatchEvent("forms/setBusy", { value: false });
+        });
+      } else {
+        input.value = null;
+      }
+    },
+    uploadFiles(e) {
+      Array.from(e.target.files).forEach(file => this.uploadFile(file));
+    }
+    // toggleDisplayProgressIndicator() {
+    //   this.showProgress = !this.showProgress
+    // },
+    // updateProgressIndicator(e) {
+    //   this.valueProgress = e.detail.progress
+    // }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.preview-container {
+  .action-container {
+    padding-left: 10px;
+  }
+
+  .square-image {
+    // height: 50px;
+    vertical-align: middle;
+  }
+}
+</style>