Requests index rendering

templates/components.html

@@ -31,7 +31,17 @@
     </li>
 {%- endmacro %}
 
-{% macro EmptyState(self, message, actionLabel, actionHref, icon=None) -%}
+{% macro Modal() -%}
+<div class='modal'>
+  <div class='modal__dialog' role='dialog' aria-modal='true'>
+    <div class='modal__body'>
+        {{ caller() }}
+    </div>
+  </div>
+</div>
+{%- endmacro %}
+
+{% macro EmptyState(message, actionLabel, actionHref, icon=None) -%}
 <div class='empty-state'>
   <p>{{ message }}</p>
 
@@ -42,3 +52,41 @@
   <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
 </div>
 {%- endmacro %}
+
+{% macro Alert(title, message=None, actions=None, level='info') -%}
+{% set role = 'alertdialog' if actions else 'alert' %}
+{% set levels = {
+  'warning': {
+    'icon': 'alert',
+    'tone': 'assertive'
+  },
+  'error': {
+    'icon': 'alert',
+    'tone': 'assertive'
+  },
+  'info': {
+    'icon': 'info',
+    'tone': 'polite'
+  },
+  'success': {
+    'icon': 'ok',
+    'tone': 'polite'
+  }
+} %}
+
+<div class='alert alert--{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>
+  {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }}
+
+  <div class='alert__content'>
+    <h2 class='alert__title'>{{title}}</h2>
+
+    {% if message %}
+      <div class='alert__message'>{{ message | safe }}</div>
+    {% endif %}
+
+    {% if actions %}
+      <div class='alert__actions'>{{ actions | safe }}</div>
+    {% endif %}
+  </div>
+</div>
+{%- endmacro %}

templates/requests.html

@@ -1,8 +1,10 @@
-{% extends "base.html.to" %}
+{% extends "base.html" %}
+
+{% from "components.html" import Modal, Alert, EmptyState %}
 
 {% block modal %}
-  {% if modalOpen() %}
-    {% apply modal %}
+  {% if g.modalOpen %}
+    {% call Modal() %}
       <h1>Your request is now approved!</h1>
 
       <p>
@@ -17,34 +19,34 @@
         usage in sync with your budget.
       </p>
 
-      {% module Alert("You'll need these details: ",
+      {{ Alert("You'll need these details: ",
         message="<p>Task Order Number</p><p>Contracting Officer: Name, E-mail and Office</p>"
-      ) %}
+      ) }}
 
 
       <div class='action-group'>
         <a href='/requests' class='action-group__action usa-button'>Close</a>
       </div>
-    {% end %}
-  {% end %}
-{% end %}
+    {% endcall %}
+  {% endif %}
+{% endblock %}
 
 {% block content %}
 
 {% if not requests %}
 
-  {% module EmptyState(
+  {{ EmptyState(
     'There are currently no active requests for you to see.',
     actionLabel='Create a new JEDI Cloud Request',
     actionHref='/requests/new',
     icon='document'
-  )%}
+  ) }}
 
 {% else %}
 
-  {% module Alert('Pending Financial Verification',
+  {{ Alert('Pending Financial Verification',
     message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
-  ) %}
+  ) }}
 
   <div class="col col--grow">
 
@@ -84,10 +86,10 @@
           {% for r in requests %}
           <tr>
             <th scope="row">
-              <a class='icon-link icon-link--large' href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
+              <a class='icon-link icon-link--large' href="{{ url_for('requests.requests_form_update', screen=1, request_id=r['order_id']) if r["status"] != "approved" else url_for('requests.financial_verification', request_id=r['order_id']) }}">{{ r['order_id'] }}</a>
               {% if r['is_new'] %}<span class="usa-label">New</span>
             </th>
-            {% end %}
+            {% endif %}
             <td>{{ r['date'] }}</td>
             <td>{{ r['full_name'] }}</td>
             <td>{{ r['app_count'] }}</td>
@@ -97,13 +99,13 @@
               <a href="/request/approval" class='icon-link'>Approval</a>
             </td>
           </tr>
-          {% end %}
+          {% endfor %}
         </tbody>
       </table>
     </div>
   </div>
 
-{% end %}
+{% endif %}
 
-{% end %}
+{% endblock %}