Merge branch 'master' into ui/tooltips

js/components/forms/details_of_use.js

@@ -0,0 +1,71 @@
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import { conformToMask } from 'vue-text-mask'
+
+import textinput from '../text_input'
+import optionsinput from '../options_input'
+
+export default {
+  name: 'details-of-use',
+
+  components: {
+    textinput,
+    optionsinput,
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    const {
+      estimated_monthly_spend = 0,
+      jedi_migration = '',
+      technical_support_team = ''
+    } = this.initialData
+
+    return {
+      estimated_monthly_spend,
+      jedi_migration,
+      technical_support_team
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  computed: {
+    annualSpend: function () {
+      const monthlySpend = this.estimated_monthly_spend || 0
+      return monthlySpend * 12
+    },
+    annualSpendStr: function () {
+      return this.formatDollars(this.annualSpend)
+    },
+    jediMigrationOptionSelected: function () {
+      return this.jedi_migration !== ''
+    },
+    isJediMigration: function () {
+      return this.jedi_migration === 'yes'
+    },
+    hasTechnicalSupportTeam: function () {
+      return this.technical_support_team === 'yes'
+    }
+  },
+
+  methods: {
+    formatDollars: function (intValue) {
+      const mask = createNumberMask({ prefix: '$', allowDecimal: true })
+      return conformToMask(intValue.toString(), mask).conformedValue
+    },
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}

js/components/options_input.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'optionsinput',
+
+  props: {
+    name: String
+  },
+
+  methods: {
+    onInput: function (e) {
+      this.$root.$emit('field-change', {
+        value: e.target.value,
+        name: this.name
+      })
+    }
+  }
+}

js/components/text_input.js

@@ -89,8 +89,8 @@ export default {
       this.showValid = valid
 
       // Emit a change event
-      this.$emit('fieldChange', {
-        value,
+      this.$root.$emit('field-change', {
+        value: this._rawValue(value),
         valid,
         name: this.name
       })

js/index.js

@@ -2,7 +2,9 @@ import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 import VTooltip from 'v-tooltip'
 
+import optionsinput from './components/options_input'
 import textinput from './components/text_input'
+import DetailsOfUse from './components/forms/details_of_use'
 
 Vue.use(VTooltip)
 
@@ -10,7 +12,9 @@ Vue.use(VTooltip)
 const app = new Vue({
   el: '#app-root',
   components: {
-    textinput
+    optionsinput,
+    textinput,
+    DetailsOfUse,
   },
   methods: {
     closeModal: function(name) {
@@ -35,5 +39,6 @@ const app = new Vue({
       const modal = modalOpen.getAttribute("data-modal");
       this.modals[modal] = true;
     }
-  }
+  },
+  delimiters: ['!{', '}']
 })