glib-web 0.5.77

package/components/fields/stripeExternalAccount.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :style="genericStyles()" :class="$classes()">
+    <v-text-field
+      v-model="accountNumber"
+      label="Account Number"
+      placeholder="000123456"
+      :outlined="$classes().includes('outlined')"
+      :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense')"
+      :rules="accountNumberRules"
+      :error-messages="errorMessages"
+      @keyup="$onTyping({ duration: 200 })"
+    />
+
+    <div v-if="spec.country">
+      <div v-for="field in inputs[country].fields" :key="field.label">
+        <v-text-field
+          v-model="field.model"
+          :label="field.label"
+          :placeholder="field.placeholder"
+          :outlined="$classes().includes('outlined')"
+          :rounded="$classes().includes('rounded')"
+          :dense="$classes().includes('dense')"
+          :rules="field.rules"
+          @keyup="$onTyping({ duration: 200 })"
+        />
+      </div>
+    </div>
+
+    <input ref="token" type="hidden" :name="spec.name" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      routingNumber: null,
+      accountNumber: null,
+      inputs: {},
+      accountNumberRules: [value => !!value || "Account number required"],
+      errorMessages: null
+    };
+  },
+  created() {
+    this.country = this.spec.country.toLowerCase();
+    this.stripe = Stripe(this.spec.publicKey);
+    this.spec.onTypeEnd = { action: "component/createToken" };
+    this.registerCountry("nz", [], function() {
+      return "";
+    });
+    this.registerCountry(
+      "au",
+      [
+        {
+          label: "Bank State Number",
+          placeholder: "110000",
+          model: "",
+          rules: [value => !!value || "Bank state number required"]
+        }
+      ],
+      function() {
+        return this.fields[0].model;
+      }
+    );
+    this.registerCountry(
+      "ca",
+      [
+        {
+          label: "Transit",
+          placeholder: "12345",
+          model: "",
+          rules: [value => !!value || "Transit number required"]
+        },
+        {
+          label: "Institution",
+          placeholder: "678",
+          model: "",
+          rules: [value => !!value || "Institution number required"]
+        }
+      ],
+      function() {
+        return `${this.fields[0].model}-${this.fields[1].model}`;
+      }
+    );
+  },
+  methods: {
+    action_createToken() {
+      const token = this.$refs.token;
+      this.errorMessages = null;
+      this.routingNumber = this.inputs[this.country].makeRoutingNumber();
+      if (this.accountNumber) {
+        this.$dispatchEvent("forms/setBusy", { value: true });
+        const vm = this;
+        const bank = {
+          country: this.spec.country,
+          currency: this.spec.currency,
+          account_number: this.accountNumber,
+          account_holder_name: this.spec.accountHolderName,
+          account_holder_type: this.spec.accountHolderType
+        };
+
+        if (this.routingNumber) {
+          bank["routing_number"] = this.routingNumber;
+        }
+
+        this.stripe.createToken("bank_account", bank).then(response => {
+          if (response.token) {
+            token.value = response.token.id;
+          } else {
+            this.errorMessages = [response.error.message];
+            token.value = "";
+          }
+          vm.$dispatchEvent("forms/setBusy", { value: false });
+        });
+      }
+    },
+    /**
+     * Different countries have different ways of creating routing numbers.
+     * Canada, for example, requires transit numbers and institution numbers and then combined to create a routing number,
+     * while New Zealand does not use a routing number.
+     */
+    registerCountry(country = "", fields = [], makeRoutingNumber) {
+      this.inputs[country] = { fields, makeRoutingNumber };
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+v-text-field {
+  padding: 0 8px 0 8px;
+}
+</style>

package/components/fields/stripeToken.vue

@@ -0,0 +1,59 @@
+<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" />
+  </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
+    };
+  },
+  methods: {
+    _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 });
+      });
+    }
+  }
+};
+</script>

package/components/fields/submit.vue

@@ -0,0 +1,23 @@
+<template>
+  <common-button :spec="spec" type="submit" :disabled="$isBusy" />
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      data: this.$data
+    };
+  },
+  methods: {
+    $ready() {
+      this.$dispatchEvent("forms/addSubmit", this.$data);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/fields/text.vue

@@ -0,0 +1,144 @@
+<template>
+  <div :style="$styles()" :class="classes()">
+    <v-text-field
+      v-model="fieldModel"
+      :label="spec.label"
+      :name="fieldName"
+      :value="spec.value"
+      :hint="spec.hint"
+      :placeholder="spec.placeholder"
+      :maxlength="spec.maxLength || 255"
+      :disabled="spec.readOnly"
+      :type="variant.type"
+      :rules="rules"
+      :prepend-inner-icon="leftIconName"
+      :append-icon="variant.appendIcon"
+      :prefix="spec.leftText"
+      :suffix="spec.rightText"
+      :min="spec.min"
+      :max="spec.max"
+      :outlined="$classes().includes('outlined')"
+      :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense')"
+      :autofocus="spec.autoFocus || false"
+      validate-on-blur
+      @click:append="onRightIconClick"
+    />
+    <input
+      v-if="spec.readOnly"
+      type="hidden"
+      :name="fieldName"
+      :value="fieldModel"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    type: { type: String, required: true }
+  },
+  data() {
+    return {
+      variant: {},
+      rules: [],
+      fields: {
+        email: {
+          type: "email",
+          prependIcon: "email",
+          onRightIconClick: function() {},
+          rules: [
+            v =>
+              !v ||
+              /^\w+([.-\\+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+              "E-mail must be valid"
+          ]
+        },
+        number: {
+          type: "number",
+          prependIcon: "looks_one",
+          onRightIconClick: function() {},
+          rules: [v => !v || /^\-?[.\d]*$/.test(v) || "Must be a number"]
+        },
+        password: {
+          type: "password",
+          prependIcon: "lock",
+          appendIcon: "visibility",
+          onRightIconClick: function(vm) {
+            vm.togglePasswordVisibility();
+          },
+          rules: [v => !v || v.length >= 6 || "Password must be longer"]
+        },
+        url: {
+          type: "url",
+          prependIcon: "web",
+          onRightIconClick: function() {},
+          rules: [
+            // From https://gist.github.com/rodneyrehm/8013067
+            // Make sure to support unicode chars, e.g. https://www.facebook.com/%E5%86%B0%E5%8F%8B%E4%BE%86%E7%9C%8B%E7%90%83-103474391161721/
+            v =>
+              !v ||
+              /^(https?|ftp|torrent|image|irc):\/\/(-\.)?([^\s\/?\.#]+\.?)+(\/[^\s]*)?$/i.test(
+                v
+              ) ||
+              "Must be a valid URL"
+          ]
+        },
+        search: {
+          type: "url",
+          prependIcon: "search",
+          onRightIconClick: function() {},
+          rules: [
+            v => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL"
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    leftIconName() {
+      const icon = this.spec.leftIcon || {};
+      const materialIcon = icon.material || {};
+      return materialIcon.name;
+    }
+  },
+  methods: {
+    $ready() {
+      this.variant = this.fields[this.type] || {};
+      this.rules = this.$validation(this.variant.rules);
+    },
+    togglePasswordVisibility() {
+      const passwordField = this.fields["password"];
+      if (passwordField.appendIcon == "visibility") {
+        passwordField.type = "text";
+        passwordField.appendIcon = "visibility_off";
+      } else {
+        passwordField.type = "password";
+        passwordField.appendIcon = "visibility";
+      }
+    },
+    onRightIconClick() {
+      this.variant.onRightIconClick(this);
+    },
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.g-text-field--hintless {
+  .v-text-field {
+    .v-text-field__details {
+      min-height: 0;
+      margin-bottom: 0;
+
+      .v-messages {
+        min-height: 0;
+      }
+    }
+  }
+}
+</style>

package/components/fields/textarea.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :style="styles()" :class="classes()">
+    <v-textarea
+      v-model="fieldModel"
+      :label="spec.label"
+      :name="fieldName"
+      :value="spec.value"
+      :hint="spec.hint"
+      :placeholder="spec.placeholder"
+      :maxlength="spec.maxLength || 255"
+      :disabled="spec.readOnly"
+      :height="height"
+      :rules="$validation()"
+      counter
+      :outlined="$classes().includes('outlined')"
+      validate-on-blur
+      @keyup="$onTyping"
+    ></v-textarea>
+    <input
+      v-if="spec.readOnly"
+      type="hidden"
+      :name="fieldName"
+      :value="spec.value"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      // styles: null,
+      height: null
+    };
+  },
+  methods: {
+    styles() {
+      const styles = this.$styles();
+      this.height = styles.remove("height");
+      return styles;
+    },
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.v-text-field__details {
+  margin-top: 2px;
+}
+.text-bold {
+  font-weight: bold;
+}
+</style>

package/components/fields/timeZone.vue

@@ -0,0 +1,22 @@
+<template>
+  <fields-genericSelect :spec="spec" :default-value="defaultValue" />
+</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 }
+  },
+  computed: {
+    defaultValue() {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+  }
+};
+</script>

package/components/fields/timer.vue

@@ -0,0 +1,83 @@
+<template>
+  <div :style="$styles()" :class="classes()">
+    <v-text-field
+      v-model="fieldModel"
+      :label="spec.label"
+      :name="fieldName"
+      :disabled="true"
+      :outlined="$classes().includes('outlined')"
+      :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense')"
+    />
+    <input type="hidden" :name="fieldName" :value="fieldModel" />
+  </div>
+</template>
+
+<script>
+import actionCableMixin from "../mixins/ws/actionCable";
+
+export default {
+  mixins: [actionCableMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      timer: null,
+      minValue: -1000000,
+      maxValue: 1000000
+    };
+  },
+  methods: {
+    $ready() {
+      this.$wsInitActionCable(this.spec.actionCable);
+
+      Utils.type.ifNumber(this.spec.min, value => {
+        this.minValue = value;
+      });
+      Utils.type.ifNumber(this.spec.max, value => {
+        this.maxValue = value;
+      });
+
+      Utils.type.ifNumber(this.spec.value, value => {
+        if (value !== null) {
+          this.fieldModel = value;
+        }
+
+        this.timer = setInterval(() => {
+          this.adjustValue();
+        }, 1000);
+      });
+    },
+    adjustValue() {
+      if (this.spec.forward) {
+        if (this.fieldModel < this.maxValue) {
+          this.fieldModel += 1;
+        }
+      } else {
+        if (this.fieldModel > this.minValue) {
+          this.fieldModel -= 1;
+        }
+      }
+    },
+    $tearDown() {
+      console.log("Cleaning up timer...");
+      if (this.timer != null) {
+        clearInterval(this.timer);
+        console.log(`Timer stopped: ${this.timer}`);
+        this.timer == null;
+      }
+    },
+    action_set(spec) {
+      Utils.type.ifNumber(spec.value, value => {
+        this.fieldModel = value;
+      });
+    },
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/h1.vue

@@ -0,0 +1,28 @@
+<template>
+  <h1
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </h1>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h1 {
+  line-height: 1.5;
+} */
+</style>

package/components/h2.vue

@@ -0,0 +1,20 @@
+<template>
+  <h2 :style="textStyles()" :class="$classes()">{{ spec.text }}</h2>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h2 {
+  line-height: 1.5;
+} */
+</style>

package/components/h3.vue

@@ -0,0 +1,22 @@
+<template>
+  <h3 :id="spec.id" :style="textStyles()" :class="$classes()">
+    {{ spec.text }}
+  </h3>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h3 {
+  line-height: 1.5;
+} */
+</style>

package/components/h4.vue

@@ -0,0 +1,20 @@
+<template>
+  <h4 :style="textStyles()" :class="$classes()">{{ spec.text }}</h4>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h4 {
+  line-height: 1.5;
+} */
+</style>

package/components/h5.vue

@@ -0,0 +1,20 @@
+<template>
+  <h5 :style="textStyles()" :class="$classes()">{{ spec.text }}</h5>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h4 {
+  line-height: 1.5;
+} */
+</style>

package/components/h6.vue

@@ -0,0 +1,20 @@
+<template>
+  <h4 :style="textStyles()" :class="$classes()">{{ spec.text }}</h4>
+</template>
+
+<script>
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* h4 {
+  line-height: 1.5;
+} */
+</style>

package/components/hr.vue

@@ -0,0 +1,13 @@
+<template>
+  <hr :style="$styles()" :color="spec.color" />
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/html.vue

@@ -0,0 +1,13 @@
+<template>
+  <div v-html="spec.text"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>