view SO review screen / DD-254 page

templates/components/multi_checkbox_input.html

@@ -1,31 +1,39 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro MultiCheckboxInput(field, other_input_field, tooltip, inline=False) -%}
+{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False) -%}
   <multicheckboxinput
     v-cloak
     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 %}
-    {% if other_input_field.data and other_input_field.data != "None" %}initial-other-value="{{ other_input_field.data }}"{% endif %}
+    {% if other_input_field and other_input_field.data and other_input_field.data != "None" %}
+      initial-other-value="{{ other_input_field.data }}"
+    {% endif %}
     key='{{ field.name }}'>
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
+      {% set validation_icons %}
+          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+      {% endset %}
+
       <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 %}
+            {% if not field.description %}
+              {{ validation_icons }}
+            {% endif %}
           </div>
 
           {% if field.description %}
             <span class='usa-input__help'>{{ field.description | safe }}</span>
+            {{ validation_icons }}
           {% endif %}
-
-          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
         </legend>
 
         <ul>
@@ -38,9 +46,11 @@
                 <input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='other' v-model="selections"/>
                 <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
 
-                <div v-show="otherChecked">
-                  <input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other'  v-model:value="otherText" aria-expanded='false' />
-                </div>
+                {% if other_input_field %}
+                  <div v-show="otherChecked">
+                    <input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other'  v-model:value="otherText" aria-expanded='false' />
+                  </div>
+                {% endif %}
               {% endif %}
             </li>
           {% endfor %}

templates/portfolios/task_orders/show.html

@@ -132,10 +132,13 @@
           button_text='Edit',
           complete=all_sections_complete) %}
         {% endcall %}
+        {% set is_so = user == task_order.security_officer %}
         {{ Step(
           description="task_orders.view.steps.security" | translate({
             "security_officer": officer_name(task_order.security_officer)
           }) | safe,
+          button_url=is_so and url_for("portfolios.so_review", portfolio_id=portfolio.id, task_order_id=task_order.id),
+          button_text=is_so and 'Edit',
           complete=False) }}
         {% call Step(
           description="task_orders.view.steps.record" | translate({

templates/portfolios/task_orders/so_review.html

@@ -0,0 +1,31 @@
+{% extends 'portfolios/base.html' %}
+
+{% from "components/text_input.html" import TextInput %}
+{% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
+
+{% block content %}
+
+<div class="col">
+  <div class="panel">
+
+    <div class="panel__heading">
+      <h1 class="subheading">
+        <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
+      </h1>
+    </div>
+
+    <div class="panel__content">
+      <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
+      {{ TextInput(form.certifying_official) }}
+      {{ TextInput(form.co_title) }}
+      {{ TextInput(form.co_phone, placeholder='(123) 456-7890', validation='usPhone') }}
+      {{ TextInput(form.co_address, paragraph=True) }}
+
+      <hr>
+
+      {{ MultiCheckboxInput(form.required_distribution) }}
+    </div>
+  </div>
+</div>
+
+{% endblock %}