Merge pull request #317 from dod-ccpo/approval-layout

Revised approval layout

atst/domain/reports.py

@@ -124,7 +124,7 @@ CUMULATIVE_BUDGET_AARDVARK = {
     "06/2018": {"spend": 41725, "cumulative": 116984},
     "07/2018": {"spend": 41328, "cumulative": 158312},
     "08/2018": {"spend": 47491, "cumulative": 205803},
-    "09/2018": {"spend": 45826, "cumulative": 251629},
+    "09/2018": {"spend": 36028, "cumulative": 241831},
 }
 
 MONTHLY_SPEND_BELUGA = {

atst/forms/internal_comment.py

@@ -7,6 +7,6 @@ from .forms import ValidatedForm
 class InternalCommentForm(ValidatedForm):
     text = TextAreaField(
         "CCPO Internal Notes",
-        description="You may add additional comments and notes for internal CCPO reference and follow-up here.",
+        description="Add comments or notes for internal CCPO reference and follow-up here.<strong>These comments <em>will not</em> be visible to the person making the JEDI request.</strong>",
         validators=[Optional()],
     )

atst/routes/requests/approval.py

@@ -12,6 +12,9 @@ from . import requests_bp
 from atst.domain.requests import Requests
 from atst.domain.exceptions import NotFoundError
 from atst.forms.ccpo_review import CCPOReviewForm
+from atst.forms.internal_comment import InternalCommentForm
+
+from datetime import date
 
 
 def map_ccpo_authorizing(user):
@@ -27,6 +30,22 @@ def render_approval(request, form=None):
         mo_data = map_ccpo_authorizing(g.current_user)
         form = CCPOReviewForm(data=mo_data)
 
+    internal_comment_form = InternalCommentForm(text=request.internal_comments_text)
+
+    # Dummy internal comments
+    comments = [
+        {
+            "time_created": date(2018, 9, 18),
+            "full_name_commenter": "Darth Vader",
+            "message": "We'll have no more of this Obi-Wan Kenobi jibberish...and don't talk to me about your mission, either. You're fortunate he doesn't blast you into a million pieces right here. ",
+        },
+        {
+            "time_created": date(2018, 9, 20),
+            "full_name_commenter": "Grand Moff Tarkin",
+            "message": "We'll have no more of this Obi-Wan Kenobi jibberish...and don't talk to me about your mission, either. You're fortunate he doesn't blast you into a million pieces right here. ",
+        },
+    ]
+
     return render_template(
         "requests/approval.html",
         data=data,
@@ -34,6 +53,8 @@ def render_approval(request, form=None):
         request=request,
         current_status=request.status.value,
         f=form or CCPOReviewForm(),
+        internal_comment_form=internal_comment_form,
+        comments=comments,
     )
 
 
@@ -76,3 +97,14 @@ def task_order_pdf_download(request_id):
 
     else:
         raise NotFoundError("task_order pdf")
+
+
+@requests_bp.route("/requests/internal_comments/<string:request_id>", methods=["POST"])
+def create_internal_comment(request_id):
+    # form = InternalCommentForm(http_request.form)
+    # if form.validate():
+    #     request = Requests.get(g.current_user, request_id)
+    #     Requests.update_internal_comments(g.current_user, request, form.data["text"])
+    return redirect(
+        url_for("requests.approval", request_id=request_id, _anchor="ccpo-notes")
+    )

js/components/forms/ccpo_approval.js

@@ -1,10 +1,12 @@
 import textinput from '../text_input'
+import LocalDatetime from '../local_datetime'
 
 export default {
   name: 'ccpo-approval',
 
   components: {
-    textinput
+    textinput,
+    LocalDatetime
   },
 
   data: function () {

styles/sections/_request_approval.scss

@@ -33,12 +33,19 @@
   }
 
   .request-approval__review {
+
+    .request-approval__review__heading {
+      border-top: 1px solid $color-gray-light;
+      padding-bottom: 0;
+    }
+
     .action-group {
       margin-bottom: $gap * 6;
     }
   }
 
-  .approval-log {
+  .approval-log,
+  .comment-log {
     ol {
       list-style: none;
       margin: 0;
@@ -57,7 +64,8 @@
         }
       }
     }
-    .approval-log__log-item {
+    .approval-log__log-item,
+    .comment-log__log-item {
       display: flex;
       flex-direction: column-reverse;
       justify-content: flex-end;
@@ -66,12 +74,14 @@
         flex-direction: row-reverse;
       }
 
-      .approval-log__log-item__header {
+      .approval-log__log-item__header,
+      .comment-log__log-item__header {
         @include h4;
         margin: 0 0 $gap 0;
       }
 
-      .approval-log__log-item__timestamp {
+      .approval-log__log-item__timestamp,
+      .comment-log__log-item__timestamp {
         @include h5;
         margin-right: $gap * 2;
         color: $color-gray;
@@ -105,5 +115,14 @@
     textarea {
       resize: vertical;
     }
+
+    .internal-notes__add-comment__heading {
+      padding-bottom: 0;
+      border-top: 1px solid $color-gray-light;
+    }
+
+    .usa-input__title {
+      @include hide;
+    }
   }
 }

templates/requests/approval.html

@@ -32,7 +32,60 @@
 
     </section>
 
-    {% if request.is_pending_ccpo_action %}
+    {{ Alert('Comments and comment form are fake!',
+      message="<p>Please note, the comments and comment form below are just mocked out. Submitting it will do nothing. These will be hooked up to real functionality shortly. </p><p><strong>Engineer: please remove this alert when you do your thing.</strong></p>",
+      level='warning'
+    ) }}
+
+    <section class='internal-notes' id='ccpo-notes'>
+      <form method="POST" action="{{ url_for('requests.create_internal_comment', request_id=request.id) }}">
+        <div class='panel'>
+          <div class='panel__heading panel__heading--divider'>
+            <h2>CCPO Internal Comments</h2>
+          </div>
+
+          <div class='comment-log'>
+            {% if comments %}
+            <ol>
+              {% for comment in comments %}
+                <li>
+                  <article class='comment-log__log-item'>
+                    <div>
+                      <h3 class='comment-log__log-item__header'>{{ comment.full_name_commenter }}</h3>
+                      <p>{{ comment.message }}</p>
+                    </div>
+                    {% set timestamp=comment.time_created | formattedDate("%Y-%m-%d %H:%M:%S %Z") %}
+                    <footer class='comment-log__log-item__timestamp'>
+                      <local-datetime timestamp='{{ timestamp }}'></local-datetime>
+                    </footer>
+                  </article>
+                </li>
+              {% endfor %}
+            </ol>
+            {% else %}
+              <div class='panel__content'>
+                <p class='h4'>No CCPO comments have been recorded yet.</p>
+              </div>
+            {% endif %}
+
+          </div>
+
+          <div class='panel__heading internal-notes__add-comment__heading'>
+            <h3 class='h3'>Add a comment</h2>
+          </div>
+
+          <div class='panel__content'>
+            {{ internal_comment_form.csrf_token }}
+            {{ TextInput(internal_comment_form.text, paragraph=True, noMaxWidth=True) }}
+          </div>
+        </div>
+         <div class='action-group action-group--tight'>
+          <button class='usa-button' type="submit">Save Notes</button>
+        </div>
+      </form>
+    </section>
+
+
     <section class='request-approval__review'>
       <form method="POST" action="{{ url_for("requests.submit_approval", request_id=request.id) }}" autocomplete="off">
         {{ f.csrf_token }}
@@ -40,8 +93,63 @@
         <ccpo-approval inline-template>
           <div>
             <div class='panel'>
+
+              <header class='panel__heading panel__heading--divider'>
+                <h2 class='request-approval__columns__heading'>CCPO Review Activity</h2>
+              </header>
+
+              <div class='approval-log'>
+                {% if reviews %}
+                <ol>
+                  {% for review in reviews %}
+                    <li>
+                      <article class='approval-log__log-item'>
+                        <div>
+                          {{ review.log_name }}
+                          <h3 class='approval-log__log-item__header'>{{ review.status.log_name }} by {{ review.full_name_reviewer }}</h3>
+                          {% if review.comment %}
+                            <p>{{ review.comment }}</p>
+                          {% endif %}
+
+                          <div class='approval-log__behalfs'>
+                            {% if review.lname_mao %}
+                              <div class='approval-log__behalf'>
+                                <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
+                                <span>{{ review.full_name_mao }}</span>
+                                <span>{{ review.email_mao }}</span>
+                                <span>{{ review.phone_mao }}</span>
+                              </div>
+                            {% endif %}
+
+                            {% if review.lname_ccpo %}
+                              <div class='approval-log__behalf'>
+                                <h3 class='approval-log__log-item__header'>CCPO approval on behalf of:</h3>
+                                <span>{{ review.full_name_ccpo }}</span>
+                              </div>
+                            {% endif %}
+                          </div>
+                        </div>
+                        {% set timestamp=review.status.time_created | formattedDate("%Y-%m-%d %H:%M:%S %Z") %}
+                        <footer class='approval-log__log-item__timestamp'>
+                          <local-datetime timestamp='{{ timestamp }}'></local-datetime>
+                        </footer>
+                      </article>
+                    </li>
+                  {% endfor %}
+                </ol>
+                {% else %}
+                  <div class='panel__content'>
+                    <p class='h4'>No CCPO approvals or request changes have been recorded yet.</p>
+                  </div>
+                {% endif %}
+              </div>
+
+              {% if request.is_pending_ccpo_action %}
+              <div class='panel__heading request-approval__review__heading'>
+                <h3 class='h3'>Review this Request</h2>
+              </div>
+
               <div class='panel__content'>
-                <h2>Review this Request</h2>
 
                 <div class='usa-input'>
                   <fieldset class='usa-input__choices usa-input__choices--inline'>
@@ -119,8 +227,11 @@
                   </div>
                 </div>
               </div>
+              {% endif %}
+
             </div>
 
+            {% if request.is_pending_ccpo_action %}
             <div v-if='approving || denying' class='action-group' v-cloak>
               <button v-if='approving' type="submit" name="approved" class='usa-button usa-button-big'>Approve Request</button>
               <button v-if='denying' type="submit" name="denied" class='usa-button usa-button-big'>Request Revisions</button>
@@ -129,65 +240,12 @@
                 <span>Cancel</span>
               </a>
             </div>
+            {% endif %}
+
           </div>
         </ccpo-approval>
       </form>
     </section>
-    {% endif %}
-
-    <section>
-      <div class='panel'>
-        <header class='panel__heading panel__heading--divider'>
-          <h2 class='h3 request-approval__columns__heading'>CCPO Activity Log</h2>
-        </header>
-
-        <div class='approval-log'>
-          {% if reviews %}
-          <ol>
-            {% for review in reviews %}
-              <li>
-                <article class='approval-log__log-item'>
-                  <div>
-                    {{ review.log_name }}
-                    <h3 class='approval-log__log-item__header'>{{ review.status.log_name }} by {{ review.full_name_reviewer }}</h3>
-                    {% if review.comment %}
-                      <p>{{ review.comment }}</p>
-                    {% endif %}
-
-                    <div class='approval-log__behalfs'>
-                      {% if review.lname_mao %}
-                        <div class='approval-log__behalf'>
-                          <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
-                          <span>{{ review.full_name_mao }}</span>
-                          <span>{{ review.email_mao }}</span>
-                          <span>{{ review.phone_mao }}</span>
-                        </div>
-                      {% endif %}
-
-                      {% if review.lname_ccpo %}
-                        <div class='approval-log__behalf'>
-                          <h3 class='approval-log__log-item__header'>CCPO approval on behalf of:</h3>
-                          <span>{{ review.full_name_ccpo }}</span>
-                        </div>
-                      {% endif %}
-                    </div>
-                  </div>
-                  {% set timestamp=review.status.time_created | formattedDate("%Y-%m-%d %H:%M:%S %Z") %}
-                  <footer class='approval-log__log-item__timestamp'>
-                    <local-datetime timestamp='{{ timestamp }}'></local-datetime>
-                  </footer>
-                </article>
-              </li>
-            {% endfor %}
-          </ol>
-          {% else %}
-            <div class='panel__content'>
-              <p class='h4'>No CCPO approvals or request changes have been recorded yet.</p>
-            </div>
-          {% endif %}
-        </div>
-      </div>
-    </section>
 
 </article>