glib-web 0.5.77

package/components/fields/radio.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-radio
+    :label="spec.label"
+    :value="spec.value.presence() || vuetifyEmptyString"
+    :off-icon="data.icon || '$vuetify.icons.radioOff'"
+    :on-icon="data.icon || '$vuetify.icons.radioOn'"
+    :class="$classes()"
+    :disabled="spec.readOnly"
+    @change="changed"
+  ></v-radio>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      groupElement: null,
+      data: { value: this.spec.value, icon: null }
+    };
+  },
+  methods: {
+    $ready() {
+      this.groupElement = this.$el.closest("[data-component=radioGroup]");
+
+      // Execute later to ensure the radioGroup has registered its event listener
+      const vm = this;
+      setTimeout(function() {
+        const ev = new Event("add");
+        ev.spec = vm.data;
+        vm.$type.ifObject(vm.groupElement, val => val.dispatchEvent(ev));
+      }, 100);
+    },
+    changed(event) {
+      // Execute later to ensure the checkbox's checked state has been updated.
+      const vm = this;
+      setTimeout(function() {
+        vm.$type.ifObject(vm.groupElement, val =>
+          val.dispatchEvent(new Event("change"))
+        );
+      }, 100);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.v-input--selection-controls {
+  .v-radio.vertical {
+    display: inline-block;
+    text-align: center;
+
+    .v-input--selection-controls__input {
+      margin-right: 0;
+    }
+
+    label {
+      display: block;
+    }
+  }
+}
+</style>

package/components/fields/radioGroup.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-radio-group
+    v-model="fieldModel"
+    data-component="radioGroup"
+    :name="fieldName"
+    :disabled="spec.readOnly"
+  >
+    <div v-for="(item, index) in spec.childViews" :key="index">
+      <ui-component :spec="item" />
+    </div>
+
+    <input
+      v-if="spec.readOnly"
+      type="hidden"
+      :name="fieldName"
+      :value="fieldModel"
+    />
+  </v-radio-group>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      // value: null,
+      radios: []
+    };
+  },
+  methods: {
+    $ready() {
+      // this.value = this.spec.value
+
+      const vm = this;
+      this.$el.addEventListener(
+        "change",
+        function(e) {
+          vm.radioChanged();
+        },
+        false
+      );
+      this.$el.addEventListener(
+        "add",
+        function(e) {
+          vm.radioAdded(e.spec);
+        },
+        false
+      );
+    },
+    radioChanged() {
+      if (
+        this.$type.isString(this.spec.iconOfBeforeSelected) &&
+        this.$type.isString(this.spec.iconOfSelected) &&
+        this.$type.isString(this.spec.iconOfAfterSelected)
+      ) {
+        let icon = this.value
+          ? this.spec.iconOfBeforeSelected
+          : this.spec.iconOfAfterSelected;
+        for (const radio of this.radios) {
+          if (this.value === radio.value) {
+            radio.icon = this.spec.iconOfSelected;
+            icon = this.spec.iconOfAfterSelected;
+          } else {
+            radio.icon = icon;
+          }
+        }
+      }
+    },
+    radioAdded(spec) {
+      this.radios.push(spec);
+      this.radioChanged();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* TODO: Review this after upgrading to vuetify 2.0 */
+div.v-input--radio-group {
+  margin-top: 0;
+}
+</style>
+
+<style>
+div.v-input--radio-group .v-messages {
+  min-height: 0;
+}
+div.v-input--radio-group.v-input--selection-controls .v-input__slot {
+  margin-bottom: 0;
+}
+</style>

package/components/fields/rating.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-rating
+      v-model="fieldModel"
+      :name="fieldName"
+      :value="spec.value"
+      empty-icon="star_outline"
+      full-icon="star"
+      half-icon="star_half"
+      :half-increments="spec.halfIncrements"
+      hover
+      length="5"
+      :readonly="spec.readOnly"
+      :color="spec.color"
+      :background-color="spec.color"
+      :size="spec.size"
+    ></v-rating>
+    <input type="hidden" :name="fieldName" :value="fieldModel" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: { spec: { type: Object, required: true } }
+};
+</script>

package/components/fields/richText.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <v-progress-linear v-if="showProgress" v-model="progress.value" />
+    <VueEditor
+      v-model="rawValue"
+      :editor-toolbar="customToolbar"
+      :use-custom-image-handler="true"
+      @text-change="separateOutImages"
+      @image-added="uploadImage"
+    />
+    <input type="hidden" :name="spec.name" :value="cleanValue" />
+    <input
+      v-for="(imageKey, index) in imageKeys"
+      :key="index"
+      type="hidden"
+      name="imageUrls[]"
+      :value="images[imageKey]"
+    />
+
+    <p>{{ cleanValue }}</p>
+
+    <ol>
+      <li v-for="(imageKey, index) in imageKeys" :key="index">
+        {{ images[imageKey] }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import Uploader from "../../utils/uploader";
+import { VueEditor } from "vue2-editor";
+// import EventController, {
+//   DISABLE_SUBMIT_BUTTON
+// } from "../../utils/global-event-controller";
+
+export default {
+  components: { VueEditor },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: () => ({
+    customToolbar: [
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image", "video"],
+      ["clean"]
+    ],
+    rawValue: "",
+    cleanValue: "",
+    images: {},
+    imageKeys: [],
+    progress: { value: -1 }
+  }),
+  // mounted: function () {
+  //   const vm = this
+  //   this.rawValue = (this.spec.value || "").replace(/\{\{image([0-9]+)\}\}/g, function (_, index) {
+  //     const image = vm.spec.images[index - 1]
+  //     if (image && vm.$type.isString(image.value) && vm.$type.isString(image.fileUrl)) {
+  //       const url = image.fileUrl
+  //       const key = url.hashCode().toString()
+  //       vm.images[key] = image.value
+  //       return `<img src="${url}">`
+  //     }
+  //     return "{{IMAGE_NOT_FOUND}}"
+  //   })
+  // },
+  computed: {
+    showProgress: function() {
+      return this.progress.value >= 0;
+    }
+  },
+  methods: {
+    $ready() {
+      const vm = this;
+      this.rawValue = (this.spec.value || "").replace(
+        /\{\{image([0-9]+)\}\}/g,
+        function(_, index) {
+          const image = vm.spec.images[index - 1];
+          if (
+            image &&
+            vm.$type.isString(image.value) &&
+            vm.$type.isString(image.fileUrl)
+          ) {
+            const url = image.fileUrl;
+            const key = url.hashCode().toString();
+            vm.images[key] = image.value;
+            return `<img src="${url}">`;
+          }
+          return "{{IMAGE_NOT_FOUND}}";
+        }
+      );
+    },
+    uploadImage: function(file, editor, cursorLocation) {
+      let vm = this;
+      const uploaderSpec = this.spec.imageUploader;
+      // const input = this.$refs.directUploadFile
+      const upload = new Uploader(
+        file,
+        uploaderSpec.directUploadUrl,
+        this.progress
+      );
+
+      if (upload.validateFile(uploaderSpec)) {
+        // TODO
+        // EventController.$emit(DISABLE_SUBMIT_BUTTON, true);
+
+        upload.start((error, blob) => {
+          if (error) {
+            // Handle the error
+          } else {
+            vm.insertImage(file, editor, cursorLocation, blob);
+          }
+
+          // TODO
+          // EventController.$emit(DISABLE_SUBMIT_BUTTON, false);
+        });
+      }
+    },
+    separateOutImages: function() {
+      const vm = this;
+      var index = 0;
+      vm.imageKeys.clear();
+      // TODO: Fix to avoid replacing <video src="">
+      this.cleanValue = this.rawValue.replace(/src="([^"]+)"/g, function(
+        _,
+        imageValue
+      ) {
+        // It seems that quill encodes '&' in the URL to '&amp;' which would screw up key matching.
+        var decodedValue = imageValue.replace(/&amp;/g, "&");
+        const key = decodedValue.hashCode().toString();
+        vm.imageKeys.push(key);
+        return `src="{{image${++index}}}"`;
+      });
+    },
+    insertImage: function(file, Editor, cursorLocation, blob) {
+      let vm = this;
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        // vm.fileUrl = e.target.result;
+        if (file.type.indexOf("image") !== -1) {
+          var image = new Image();
+          image.src = e.target.result;
+
+          image.onload = function() {
+            Editor.insertEmbed(cursorLocation, "image", image.src);
+          };
+
+          const key = image.src.hashCode().toString();
+          vm.images[key] = blob.signed_id;
+        }
+      };
+      reader.readAsDataURL(file);
+      vm.progress.value = -1;
+    }
+  }
+};
+</script>
+
+<style scoped>
+/*
+@import "~vue2-editor/dist/vue2-editor.css";
+@import '~quill/dist/quill.core.css';
+@import '~quill/dist/quill.snow.css';
+
+#editor-container {
+  height: 375px;
+}
+*/
+</style>

package/components/fields/select.vue

@@ -0,0 +1,17 @@
+<template>
+  <fields-genericSelect :spec="spec" />
+</template>
+
+<script>
+import SelectField from "./_select";
+
+export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-genericSelect": SelectField
+  },
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>

package/components/fields/stripe/stripeFields.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div ref="container">
+      <!-- A Stripe Element will be inserted here. -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    onComplete: {
+      type: Function,
+      required: true
+    },
+    onError: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      stripe: null,
+      card: null
+    };
+  },
+  watch: {
+    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
+      this.onComplete(this.stripe, this.card);
+    }
+  },
+  mounted() {
+    this.stripe = Stripe(this.spec.publicKey);
+    const elements = this.stripe.elements();
+
+    const style = {
+      base: {
+        fontSize: "16px",
+        color: "#32325d"
+      }
+    };
+
+    this.card = elements.create("card", { style: style });
+    this.card.mount(this.$refs.container);
+
+    this._registerEvent();
+  },
+  methods: {
+    _registerEvent() {
+      this.card.addEventListener("change", event => {
+        const error = event.error;
+        if (error) {
+          this.onError(error.message);
+        } else {
+          this.onError("");
+        }
+        if (event.complete) {
+          this.onComplete(this.stripe, this.card);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.outlined {
+  .StripeElement {
+    box-sizing: border-box;
+    height: 60px;
+    padding: 18px 12px;
+    border: 1px solid #999999;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 1px 3px 0 #e6ebf1;
+    -webkit-transition: box-shadow 150ms ease;
+    transition: box-shadow 150ms ease;
+  }
+  .StripeElement:hover {
+    border-color: #000000;
+    cursor: text;
+  }
+  .StripeElement--focus {
+    border-color: #1976d2;
+    border-width: 2px;
+  }
+  .StripeElement--invalid {
+    border-color: #f44336;
+    border-width: 2px;
+  }
+}
+</style>

package/components/fields/stripe/stripeIndividualFields.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="field">
+      <div class="outlined">
+        <div id="cardNumber" ref="cardNumber" class="input"></div>
+        <label for="cardNumber">{{ spec.label || "Card Number" }}</label>
+        <div class="baseline"></div>
+      </div>
+    </div>
+    <v-row>
+      <v-col>
+        <div class="field">
+          <div class="outlined">
+            <div id="cardExpiry" ref="cardExpiry" class="input"></div>
+            <label for="cardExpiry">Expiry Date</label>
+            <div class="baseline"></div>
+          </div>
+        </div>
+      </v-col>
+      <v-col>
+        <div class="field">
+          <div class="outlined">
+            <div id="cardCvc" ref="cardCvc" class="input"></div>
+            <label for="cardCvc">CVC</label>
+            <div class="baseline"></div>
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    onComplete: {
+      type: Function,
+      required: true
+    },
+    onError: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      stripe: null,
+      card: null,
+      errorMessages: []
+    };
+  },
+  watch: {
+    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
+      this.onComplete(this.stripe, this.card);
+    }
+  },
+  methods: {
+    $ready() {
+      this.stripe = Stripe(this.spec.publicKey);
+      const elements = this.stripe.elements();
+
+      const style = {
+        base: {
+          fontSize: "16px",
+          color: "#32325d"
+        }
+      };
+
+      const cardNumber = elements.create("cardNumber", {
+        showIcon: true,
+        style
+      });
+      cardNumber.mount(this.$refs.cardNumber);
+
+      const cardExpiry = elements.create("cardExpiry", {
+        style
+      });
+      cardExpiry.mount(this.$refs.cardExpiry);
+
+      const cardCvc = elements.create("cardCvc", {
+        style
+      });
+      cardCvc.mount(this.$refs.cardCvc);
+
+      this.card = cardNumber;
+      this._registerEvent([cardNumber, cardExpiry, cardCvc]);
+    },
+    _registerEvent(elements) {
+      elements.forEach((el, index) => {
+        el.addEventListener("change", event => {
+          const error = event.error;
+          if (error) {
+            this.errorMessages[index] = error.message;
+          } else {
+            this.errorMessages[index] = null;
+          }
+
+          this.onError(this.errorMessages.join(" "));
+          if (event.complete) {
+            this.onComplete(this.stripe, this.card);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.field {
+  position: relative;
+  width: 100%;
+  height: 60px;
+
+  label {
+    font-size: 16px;
+    font-weight: bolder;
+    color: #000000;
+    position: absolute;
+    left: 0;
+    bottom: 8px;
+    color: rgba(0, 0, 0, 0.6);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform-origin: 0 50%;
+    cursor: text;
+    pointer-events: none;
+  }
+
+  .input {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    padding-bottom: 7px;
+    color: #32325d;
+    background-color: transparent;
+  }
+
+  .baseline {
+    position: absolute;
+    width: 100%;
+  }
+
+  .input.StripeElement--focus + label {
+    color: #1976d2 !important;
+  }
+
+  .input.StripeElement--invalid + label {
+    color: #f44336 !important;
+  }
+
+  .input:hover + label + .baseline {
+    border-color: #000000;
+  }
+
+  .input.StripeElement--focus + label + .baseline {
+    border-color: #1976d2;
+    border-width: 2px;
+  }
+
+  .input.StripeElement--invalid + label + .baseline {
+    border-color: #f44336;
+    border-width: 2px;
+  }
+
+  .individual {
+    &:not(.outlined) {
+      label {
+        width: 100%;
+        transform: scale(0.75) translateY(-25px);
+      }
+
+      .baseline {
+        height: 1px;
+        left: 0;
+        bottom: 0;
+        border-bottom: solid 1px #999999;
+      }
+    }
+  }
+
+  .outlined {
+    label {
+      transform: scale(0.75) translateY(-52px);
+      background: white;
+      padding: 0 5px;
+      margin-left: 10px;
+      z-index: 10;
+    }
+
+    .baseline {
+      height: 60px;
+      border: solid 1px #999999;
+      border-radius: 4px;
+    }
+
+    .input {
+      padding: 0 12px;
+      transform: translateY(-20px);
+      z-index: 8;
+    }
+  }
+}
+</style>