Add macro for MultiCheckboxInput

templates/components/multi_checkbox_input.html

@@ -0,0 +1,52 @@
+{% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
+
+{% macro MultiCheckboxInput(field, tooltip, inline=False) -%}
+  <multicheckboxinput
+    name='{{ field.name }}'
+    inline-template
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
+    {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
+    key='{{ field.name }}'>
+    <div
+      v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+
+      <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
+        <legend>
+          <div class="usa-input__title">
+            {{ field.label | striptags}}
+            {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
+          </div>
+
+          {% if field.description %}
+            <span class='usa-input__help'>{{ field.description | safe }}</span>
+          {% endif %}
+
+          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+        </legend>
+
+        <ul>
+          {% for f in field.choices %}
+            <li>
+              <input type='checkbox' name='options' id='{{ field.name }}-{{ field.choices.index(f) }}'/>
+              <label for='{{ field.name }}-{{ field.choices.index(f) }}'>{{ f[1] }}</label>
+              {% if f[0] == 'other' %}
+                <input type='text' name='options' id='{{ field.name }}-other' aria-expanded='false'/>
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+
+
+
+        <template v-if='showError'>
+          <span class='usa-input__message' v-html='validationError'></span>
+        </template>
+
+      </fieldset>
+    </div>
+
+  </multicheckboxinput>
+
+{%- endmacro %}

templates/task_orders/new/app_info.html

@@ -3,6 +3,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/options_input.html" import OptionsInput %}
 {% from "components/date_input.html" import DateInput %}
+{% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
 
 {% block heading %}
   What You're Building
@@ -28,16 +29,7 @@
 <h3>About Your Project</h3>
 {{ OptionsInput(form.app_migration) }}
 {{ OptionsInput(form.native_apps) }}
-
-<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>
+{{ MultiCheckboxInput(form.complexity) }}
 
 <hr>