From f49b67d0dd6d19ede060cb7361229c22b84f0e19 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Fri, 7 Jun 2019 13:13:20 -0400
Subject: [PATCH] Create SubmitConfirmation modal

- includes html component and js component
- styling on modal is not ready
---
 atst/routes/task_orders/index.py              | 26 +++++++++++++--
 js/components/submit_confirmation.js          | 21 ++++++++++++
 js/index.js                                   |  2 ++
 styles/components/_modal.scss                 |  2 +-
 templates/components/submit_confirmation.html | 32 +++++++++++++++++++
 templates/portfolios/task_orders/review.html  | 19 +++++++++--
 6 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 js/components/submit_confirmation.js
 create mode 100644 templates/components/submit_confirmation.html

diff --git a/atst/routes/task_orders/index.py b/atst/routes/task_orders/index.py
index 47a0ff56..2a230719 100644
--- a/atst/routes/task_orders/index.py
+++ b/atst/routes/task_orders/index.py
@@ -1,11 +1,14 @@
-from flask import g, render_template
+from datetime import date
+
+from flask import g, render_template, url_for, redirect
 
 from . import task_orders_bp
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.domain.portfolios import Portfolios
 from atst.domain.task_orders import TaskOrders
-from atst.models.task_order import Status
 from atst.models import Permissions
+from atst.models.task_order import Status
+from atst.forms.task_order import TaskOrderForm, SignatureForm
 
 
 @task_orders_bp.route("/task_orders/<task_order_id>")
@@ -25,7 +28,24 @@ def view_task_order(task_order_id):
 @user_can(Permissions.VIEW_TASK_ORDER_DETAILS, message="review task order details")
 def review_task_order(task_order_id):
     task_order = TaskOrders.get(task_order_id)
-    return render_template("portfolios/task_orders/review.html", task_order=task_order)
+    to_form = TaskOrderForm(number=task_order.number)
+    signature_form = SignatureForm()
+    return render_template(
+        "portfolios/task_orders/review.html",
+        task_order=task_order,
+        to_form=to_form,
+        signature_form=signature_form,
+    )
+
+
+# TODO write test, verify permission
+@task_orders_bp.route("/task_orders/<task_order_id>/submit", methods=["POST"])
+@user_can(Permissions.CREATE_TASK_ORDER, "submit task order")
+def submit_task_order(task_order_id):
+    task_order = TaskOrders.get(task_order_id)
+    return redirect(
+        url_for("task_orders.portfolio_funding", portfolio_id=task_order.portfolio.id)
+    )
 
 
 @task_orders_bp.route("/portfolios/<portfolio_id>/task_orders")
diff --git a/js/components/submit_confirmation.js b/js/components/submit_confirmation.js
new file mode 100644
index 00000000..fd367a1a
--- /dev/null
+++ b/js/components/submit_confirmation.js
@@ -0,0 +1,21 @@
+import checkboxinput from './checkbox_input'
+
+export default {
+  name: 'submit-confirmation',
+
+  components: {
+    checkboxinput,
+  },
+
+  data: function() {
+    return {
+      valid: false,
+    }
+  },
+
+  methods: {
+    toggleValid: function() {
+      this.valid = !this.valid
+    },
+  },
+}
diff --git a/js/index.js b/js/index.js
index 2f167883..3a84820e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -37,6 +37,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
 import DateSelector from './components/date_selector'
 import SidenavToggler from './components/sidenav_toggler'
 import BaseForm from './components/forms/base_form'
+import SubmitConfirmation from './components/submit_confirmation'
 import DeleteConfirmation from './components/delete_confirmation'
 import NewEnvironment from './components/forms/new_environment'
 import EnvironmentRole from './components/environment_role'
@@ -81,6 +82,7 @@ const app = new Vue({
     SidenavToggler,
     BaseForm,
     DeleteConfirmation,
+    SubmitConfirmation,
     nestedcheckboxinput,
     NewEnvironment,
     EnvironmentRole,
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index be6e221f..c6e163b5 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -8,7 +8,7 @@ body {
 
 .modal {
   position: fixed;
-  z-index: 6;
+  z-index: 11;
   left: 0;
   right: 0;
   top: 0;
diff --git a/templates/components/submit_confirmation.html b/templates/components/submit_confirmation.html
new file mode 100644
index 00000000..8a1127ae
--- /dev/null
+++ b/templates/components/submit_confirmation.html
@@ -0,0 +1,32 @@
+{% from "components/alert.html" import Alert %}
+{% from "components/checkbox_input.html" import CheckboxInput %}
+
+{% macro SubmitConfirmation(modal_id, submit_text, submit_action, form, task_order) %}
+  <submit-confirmation inline-template name="{{ modal_id }}" key="{{ modal_id }}">
+    <div>
+      <div class="usa-input">
+        <label for="{{ modal_id }}-deleted-text">
+          <span class="usa-input__help">
+            Signature confirmation: Task Order #{{task_order.number}}
+          </span>
+          {{ Alert('',
+            message="All task orders require a Contracting Officer signature."
+          ) }}
+        </label>
+        <span v-on:change="toggleValid">
+          {{ CheckboxInput(field=form.signature) }}
+        </span>
+      </div>
+      <div class="action-group">
+        <form method="POST" action="{{ submit_action }}">
+          {{ form.csrf_token }}
+          <button class="usa-button usa-button-primary" v-bind:disabled="!valid">
+            {{ submit_text }}
+          </button>
+          <button v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="usa-button usa-button-secondary">{{ "common.cancel" | translate }}</button>
+        </form>
+
+      </div>
+    </div>
+  </submit-confirmation>
+{% endmacro %}
diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html
index 37105715..e52d1704 100644
--- a/templates/portfolios/task_orders/review.html
+++ b/templates/portfolios/task_orders/review.html
@@ -1,14 +1,29 @@
 {% from "components/icon.html" import Icon %}
-{% from "components/totals_box.html" import TotalsBox %}
+{% from "components/modal.html" import Modal %}
 {% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
 {% from "components/sticky_cta.html" import StickyCTA %}
+{% from "components/submit_confirmation.html" import SubmitConfirmation %}
+{% from "components/totals_box.html" import TotalsBox %}
 
 {% extends 'portfolios/base.html' %}
 
 {% block portfolio_content %}
+  {% set submit_modal_id = "submit-to-1" %}
+  {% call Modal(name=submit_modal_id) %}
+    {{
+      SubmitConfirmation(
+        modal_id=submit_modal_id,
+        submit_text="Confirm & Submit",
+        submit_action=url_for('task_orders.submit_task_order', task_order_id=task_order.id),
+        form=signature_form,
+        task_order=task_order,
+      )
+    }}
+  {% endcall %}
+
   {% call StickyCTA(text="Review Funding") %}
       <a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button usa-button-secondary" type="submit">Edit</a>
-      <a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button usa-button-primary" type="submit">Submit task order</a>
+      <a v-on:click="openModal('submit-to-1')" class="usa-button usa-button-primary" type="submit">Submit task order</a>
   {% endcall %}
 
   <div class="task-order-summary">