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

Revised approval layout
2018-09-24 11:00:21 -04:00 · 2018-09-24 11:00:21 -04:00 · 97cfdd038f
commit 97cfdd038f
parent 53f107cdff 1663fbd6c3
6 changed files with 175 additions and 64 deletions
--- a/atst/domain/reports.py
+++ b/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 = {
--- a/atst/forms/internal_comment.py
+++ b/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()],
    )
--- a/atst/routes/requests/approval.py
+++ b/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")
+    )
--- a/js/components/forms/ccpo_approval.js
+++ b/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 () {
--- a/styles/sections/_request_approval.scss
+++ b/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;
+    }
  }
 }
--- a/templates/requests/approval.html
+++ b/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>