Use new checkboxinput for POC checkbox

atst/forms/poc.py

@@ -8,7 +8,7 @@ from .validators import IsNumber
 class POCForm(ValidatedForm):
 
     def validate(self, *args, **kwargs):
-        if self.am_poc.data == "yes":
+        if self.am_poc.data:
             # Prepend Optional validators so that the validation chain
             # halts if no data exists.
             self.fname_poc.validators.insert(0, Optional())

atst/routes/requests/jedi_request_flow.py

@@ -132,7 +132,7 @@ class JEDIRequestFlow(object):
             else self.current_user
         )
         if section == "primary_poc":
-            if data.get("am_poc") == "yes":
+            if data.get("am_poc"):
                 data = {
                     **data,
                     "dodid_poc": user.dod_id,

js/components/checkbox_input.js

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

js/components/forms/poc.js

@@ -1,5 +1,6 @@
 import optionsinput from '../options_input'
 import textinput from '../text_input'
+import checkboxinput from '../checkbox_input'
 
 export default {
   name: 'poc',
@@ -7,6 +8,7 @@ export default {
   components: {
     optionsinput,
     textinput,
+    checkboxinput,
   },
 
   props: {
@@ -18,7 +20,7 @@ export default {
 
   data: function () {
     const {
-      am_poc = 'no'
+      am_poc = false
     } = this.initialData
 
     return {
@@ -30,12 +32,6 @@ export default {
     this.$root.$on('field-change', this.handleFieldChange)
   },
 
-  computed: {
-    amPOC: function () {
-        return this.am_poc === 'yes'
-    },
-  },
-
   methods: {
     handleFieldChange: function (event) {
       const { value, name } = event

js/index.js

@@ -4,6 +4,7 @@ import VTooltip from 'v-tooltip'
 
 import optionsinput from './components/options_input'
 import textinput from './components/text_input'
+import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
 import poc from './components/forms/poc'
 
@@ -15,6 +16,7 @@ const app = new Vue({
   components: {
     optionsinput,
     textinput,
+    checkboxinput,
     DetailsOfUse,
     poc,
   },

templates/components/checkbox_input.html

@@ -1,37 +1,18 @@
-{% from "components/icon.html" import Icon %}
-{% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False) -%}
+{% macro CheckboxInput(field, inline=False) -%}
-  <optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
+  <checkboxinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
     <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
 
       <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
         <legend>
-          <div class="usa-input__title">
+          {{ field() }}
-            {{ field.label | striptags}}
+          {{ field.label }}
-            {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
-          </div>
 
           {% if field.description %}
             <span class='usa-input__help'>{{ field.description | safe }}</span>
           {% endif %}
-
-          {% if field.errors %}
-            {{ Icon('alert',classes="icon-validation") }}
-          {% endif %}
-        </legend>
-
-        {{ field() }}
-
-        {% if field.errors %}
-          {% for error in field.errors %}
-            <span class='usa-input__message'>{{ error }}</span>
-          {% endfor %}
-        {% endif %}
-
       </fieldset>
     </div>
-
+  </checkboxinput>
-  </optionsinput>
 
 {%- endmacro %}

templates/requests/screen-3.html

@@ -2,7 +2,7 @@
 
 {% from "components/alert.html" import Alert %}
 {% from "components/text_input.html" import TextInput %}
-{% from "components/options_input.html" import OptionsInput %}
+{% from "components/checkbox_input.html" import CheckboxInput %}
 
 {% block subtitle %}
 <h2>Designate a Workspace Owner</h2>
@@ -31,10 +31,9 @@
       <em>This POC may be you.</em>
     </p>
 
-    {{ f.am_poc() }}
+    {{ CheckboxInput(f.am_poc) }}
-    {{ f.am_poc.label }}
 
-    <template v-if="!amPOC" v-cloak>
+    <template v-if="!am_poc" v-cloak>
       {{ TextInput(f.fname_poc,placeholder='First Name') }}
       {{ TextInput(f.lname_poc,placeholder='Last Name') }}
       {{ TextInput(f.email_poc,placeholder='jane@mail.mil', validation='email') }}