Use widgets to get checkboxes and add some vue

atst/forms/task_order.py

@@ -7,6 +7,7 @@ from wtforms.fields import (
     TextAreaField,
 )
 from wtforms.fields.html5 import DateField
+from wtforms.widgets import ListWidget, CheckboxInput
 
 from .forms import CacheableForm
 from .data import (
@@ -46,6 +47,8 @@ class AppInfoForm(CacheableForm):
         description="Which of these describes how complex your team's use of the cloud will be? (Select all that apply.)",
         choices=PROJECT_COMPLEXITY,
         default="",
+        widget=ListWidget(prefix_label=False),
+        option_widget=CheckboxInput()
     )
     complexity_other = StringField("Project Complexity Other")
     dev_team = SelectMultipleField(
@@ -53,6 +56,8 @@ class AppInfoForm(CacheableForm):
         description="Which people or teams will be completing the development work for your cloud applications?",
         choices=DEV_TEAM,
         default="",
+        widget=ListWidget(prefix_label=False),
+        option_widget=CheckboxInput()
     )
     dev_team_other = StringField("Development Team Other")
     team_experience = RadioField(

js/components/forms/poc.js

@@ -1,5 +1,4 @@
 import FormMixin from '../../mixins/form'
-import optionsinput from '../options_input'
 import textinput from '../text_input'
 import checkboxinput from '../checkbox_input'
 
@@ -9,7 +8,6 @@ export default {
   mixins: [FormMixin],
 
   components: {
-    optionsinput,
     textinput,
     checkboxinput,
   },

js/components/multi_checkbox_input.js

@@ -0,0 +1,44 @@
+import otherinput from '../components/other_input'
+import optionsinput from '../components/options_input'
+import textinput from '../components/text_input'
+
+export default {
+  name: 'multicheckboxinput',
+
+  components: {
+    otherinput,
+    optionsinput,
+    textinput,
+  },
+
+  props: {
+    name: String,
+    initialErrors: {
+      type: Array,
+      default: () => []
+    },
+    initialValue: Array,
+  },
+
+
+  data: function () {
+    const showError = (this.initialErrors && this.initialErrors.length) || false
+    return {
+      showError: showError,
+      showValid: !showError && !!this.initialValue,
+      validationError: this.initialErrors.join(' ')
+    }
+  },
+
+
+  methods: {
+    onInput: function (e) {
+      this.$root.$emit('field-change', {
+        value: e.target.value,
+        name: this.name
+      })
+      this.showError = false
+      this.showValid = true
+    }
+  }
+}

js/components/other_input.js

@@ -0,0 +1,29 @@
+import FormMixin from '../mixins/form'
+import textinput from '../components/text_input'
+
+export default {
+  name: 'otherinput',
+
+  mixins: [FormMixin],
+
+  components: {
+    textinput,
+  },
+
+  props: {
+    initialData: {
+      type: Array,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    const {
+      other = true
+    } = this.initialData
+
+    return {
+        other
+    }
+  }
+}

js/index.js

@@ -6,6 +6,8 @@ import Vue from 'vue/dist/vue'
 import VTooltip from 'v-tooltip'
 
 import optionsinput from './components/options_input'
+import multicheckboxinput from './components/multi_checkbox_input'
+import otherinput from './components/other_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
@@ -37,6 +39,8 @@ const app = new Vue({
   components: {
     toggler,
     optionsinput,
+    multicheckboxinput,
+    otherinput,
     textinput,
     checkboxinput,
     DetailsOfUse,

templates/task_orders/new/app_info.html

@@ -28,8 +28,16 @@
 <h3>About Your Project</h3>
 {{ OptionsInput(form.app_migration) }}
 {{ OptionsInput(form.native_apps) }}
-{{ OptionsInput(form.complexity) }}
-{{ TextInput(form.complexity_other) }}
+
+<multicheckboxinput inline-template>
+    <div>
+        {{ OptionsInput(form.complexity) }}
+        {{ TextInput(form.complexity_other) }}
+        <otherinput inline-template v-bind:initial-data='{{ form.complexity|tojson }}'>
+            <div v-if="other" class='form-col form-col--half'>{{ TextInput(form.complexity_other) }}</div>
+        </otherinput>
+    </div>
+</multicheckboxinput>
 
 <hr>