pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Patrick Smith 2018-08-10 10:53:46 -04:00
parent 687af77e33
commit 86391e4ab5
3 changed files with 73 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
js/components/forms/details_of_use.js Normal file
View File

@ -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
}
},
}
}

2
js/index.js
View File

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

50
templates/requests/screen-1.html
View File

@ -17,32 +17,38 @@
) }} ) }}
{% endif %} {% 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>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> <p><em>All fields are required, unless specified optional.</em></p>
<h2>General</h2> <h2>General</h2>
{{ OptionsInput(f.dod_component) }} {{ OptionsInput(f.dod_component) }}
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }} {{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
<h2>Cloud Readiness</h2> <h2>Cloud Readiness</h2>
{{ TextInput(f.num_software_systems, validation='integer') }} {{ TextInput(f.num_software_systems, validation='integer') }}
{{ OptionsInput(f.jedi_migration) }} {{ OptionsInput(f.jedi_migration) }}
{{ OptionsInput(f.rationalization_software_systems) }} <template v-if='isJediMigration' v-cloak>
{{ OptionsInput(f.technical_support_team) }} {{ OptionsInput(f.rationalization_software_systems) }}
{{ OptionsInput(f.organization_providing_assistance) }} {{ OptionsInput(f.technical_support_team) }}
{{ OptionsInput(f.engineering_assessment) }} {{ OptionsInput(f.organization_providing_assistance) }}
{{ OptionsInput(f.data_transfers) }} {{ OptionsInput(f.engineering_assessment) }}
{{ OptionsInput(f.expected_completion_date) }} {{ OptionsInput(f.data_transfers) }}
{{ OptionsInput(f.cloud_native) }} {{ OptionsInput(f.expected_completion_date) }}
{{ OptionsInput(f.cloud_native) }}
</template>
<h2>Financial Usage</h2> <h2>Financial Usage</h2>
{{ TextInput(f.estimated_monthly_spend, validation='dollars') }} {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
<p>So this means you are spending approximately <b>$X</b> annually</p> <p>So this means you are spending approximately <b>$X</b> annually</p>
{{ TextInput(f.dollar_value, validation='dollars') }} {{ TextInput(f.dollar_value, validation='dollars') }}
{{ TextInput(f.number_user_sessions, validation='integer') }} {{ TextInput(f.number_user_sessions, validation='integer') }}
{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }} {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }} {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
</div>
</details-of-use>
{% endblock %} {% endblock %}