Hook up details of use form to Vue to show/hide migration fields

js/components/forms/details_of_use.js

@@ -0,0 +1,43 @@
+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 () {
+    return {
+      jedi_migration: this.initialData.jedi_migration
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  computed: {
+    isJediMigration: function () {
+      return this.jedi_migration === 'yes'
+    }
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}

js/index.js

@@ -3,12 +3,14 @@ import Vue from 'vue/dist/vue'
 
 import optionsinput from './components/options_input'
 import textinput from './components/text_input'
+import DetailsOfUse from './components/forms/details_of_use'
 
 const app = new Vue({
   el: '#app-root',
   components: {
     optionsinput,
     textinput,
+    DetailsOfUse,
   },
   methods: {
     closeModal: function(name) {

templates/requests/screen-1.html

@@ -17,6 +17,8 @@
   ) }}
 {% endif %}
 
+<details-of-use inline-template v-bind:initial-data='{{ f.data }}'>
+  <div>
 
     <p>We’d like to know a little about how you plan to use JEDI Cloud services to process your request. Please answer the following questions to the best of your ability. Note that the CCPO does not directly help with migrating systems to JEDI Cloud. These questions are for learning about your cloud readiness and financial usage of the JEDI Cloud; your estimates will not be used for any department level reporting.</p>
     <p><em>All fields are required, unless specified optional.</em></p>
@@ -28,6 +30,7 @@
     <h2>Cloud Readiness</h2>
     {{ TextInput(f.num_software_systems, validation='integer') }}
     {{ OptionsInput(f.jedi_migration) }}
+    <template v-if='isJediMigration' v-cloak>
       {{ OptionsInput(f.rationalization_software_systems) }}
       {{ OptionsInput(f.technical_support_team) }}
       {{ OptionsInput(f.organization_providing_assistance) }}
@@ -35,6 +38,7 @@
       {{ OptionsInput(f.data_transfers) }}
       {{ OptionsInput(f.expected_completion_date) }}
       {{ OptionsInput(f.cloud_native) }}
+    </template>
 
     <h2>Financial Usage</h2>
     {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
@@ -44,5 +48,7 @@
     {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
     {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
 
+  </div>
+</details-of-use>
 
 {% endblock %}