From b68097d665c64d0332c7189c86687e2d5e735d78 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Thu, 20 Dec 2018 13:54:51 -0500
Subject: [PATCH] Use widgets to get checkboxes and add some vue

---
 atst/forms/task_order.py                |  5 +++
 js/components/forms/poc.js              |  2 --
 js/components/multi_checkbox_input.js   | 44 +++++++++++++++++++++++++
 js/components/other_input.js            | 29 ++++++++++++++++
 js/index.js                             |  4 +++
 templates/task_orders/new/app_info.html | 12 +++++--
 6 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 js/components/multi_checkbox_input.js
 create mode 100644 js/components/other_input.js

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index 903149fe..f565cbf4 100644
--- a/atst/forms/task_order.py
+++ b/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(
diff --git a/js/components/forms/poc.js b/js/components/forms/poc.js
index 8b60c0b6..91b5dbfc 100644
--- a/js/components/forms/poc.js
+++ b/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,
   },
diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js
new file mode 100644
index 00000000..f5e7ccbd
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/js/components/other_input.js b/js/components/other_input.js
new file mode 100644
index 00000000..c2431b85
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/js/index.js b/js/index.js
index 1cfea514..39271984 100644
--- a/js/index.js
+++ b/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,
diff --git a/templates/task_orders/new/app_info.html b/templates/task_orders/new/app_info.html
index 09a088a7..dc8e6d02 100644
--- a/templates/task_orders/new/app_info.html
+++ b/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>