Vue-ify requests listing page

atst/filters.py

@@ -77,6 +77,10 @@ def dateFromString(value, formatter="%m/%Y"):
     return datetime.datetime.strptime(value, formatter)
 
 
+def boolean(value):
+    return "true" if value else "false"
+
+
 def register_filters(app):
     app.jinja_env.filters["iconSvg"] = iconSvg
     app.jinja_env.filters["dollars"] = dollars
@@ -88,3 +92,4 @@ def register_filters(app):
     app.jinja_env.filters["renderList"] = renderList
     app.jinja_env.filters["formattedDate"] = formattedDate
     app.jinja_env.filters["dateFromString"] = dateFromString
+    app.jinja_env.filters["boolean"] = boolean

atst/models/request.py

@@ -237,6 +237,10 @@ class Request(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
             else None
         )
 
+    @property
+    def simple_status(self):
+        return self.latest_status.simple_name
+
     def __repr__(self):
         return "<Request(status='{}', name='{}', creator='{}', is_approved='{}', time_created='{}', id='{}')>".format(
             self.status_displayname,

atst/models/request_status_event.py

@@ -56,6 +56,15 @@ class RequestStatusEvent(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
         else:
             return self.displayname
 
+    @property
+    def simple_name(self):
+        if self.new_status in [RequestStatus.CHANGES_REQUESTED, RequestStatus.CHANGES_REQUESTED_TO_FINVER]:
+            return "denied"
+        elif self.new_status == [RequestStatus.PENDING_FINANCIAL_VERIFICATION, RequestStatus.APPROVED]:
+            return "accepted"
+        else:
+            return "pending"
+
     def __repr__(self):
         return "<RequestStatusEvent(log_name='{}', request='{}', id='{}')>".format(
             self.log_name, self.request_id, self.id

atst/routes/requests/index.py

@@ -55,6 +55,12 @@ class RequestsIndex(object):
             "extended_view": False,
         }
 
+    def _workspace_link_for_request(self, request):
+        if request.is_approved:
+            return url_for("workspaces.workspace_projects", workspace_id=request.workspace_id)
+        else:
+            return None
+
     def _map_request(self, request, viewing_role):
         time_created = pendulum.instance(request.time_created)
         is_new = time_created.add(days=1) > pendulum.now()
@@ -67,7 +73,9 @@ class RequestsIndex(object):
             "workspace_id": request.workspace.id if request.workspace else None,
             "name": request.displayname,
             "is_new": is_new,
+            "is_approved": request.is_approved,
             "status": request.status_displayname,
+            "simple_status": request.simple_status,
             "app_count": app_count,
             "last_submission_timestamp": request.last_submission_timestamp,
             "last_edited_timestamp": request.latest_revision.time_updated,
@@ -76,6 +84,7 @@ class RequestsIndex(object):
             "edit_link": url_for("requests.edit", request_id=request.id),
             "action_required": request.action_required_by == viewing_role,
             "dod_component": request.latest_revision.dod_component,
+            "workspace_link": self._workspace_link_for_request(request)
         }
 
 

js/components/forms/requests_list.js

@@ -0,0 +1,50 @@
+import Modal from '../../mixins/modal'
+
+export default {
+    name: 'requests-list',
+
+    mixins: [Modal],
+
+    components: {
+      Modal,
+    },
+
+    props: {
+      initialData: {
+        type: Array,
+        default: [],
+      },
+      isExtended: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    data: function () {
+      const requests = this.initialData
+      return {
+        requests,
+        searchValue: '',
+        statusValue: '',
+      }
+    },
+
+    mounted: function () {
+    },
+
+    computed: {
+      filteredRequests: function () {
+        return this.applySearch(this.searchValue)
+      }
+    },
+
+    methods: {
+      applySearch: function(query) {
+        return this.requests.filter(
+          (request) => query !== '' ?
+            request.name.toLowerCase().includes(query.toLowerCase()) :
+            true
+        )
+      }
+    },
+  }

js/index.js

@@ -22,6 +22,7 @@ import SpendTable from './components/tables/spend_table'
 import CcpoApproval from './components/forms/ccpo_approval'
 import MembersList from './components/forms/members_list'
 import LocalDatetime from './components/local_datetime'
+import RequestsList from './components/forms/requests_list'
 
 Vue.use(VTooltip)
 
@@ -46,6 +47,7 @@ const app = new Vue({
     LocalDatetime,
     EditEnvironmentRole,
     EditProjectRoles,
+    RequestsList,
   },
 
   mounted: function() {

templates/requests/index.html

@@ -5,6 +5,8 @@
 {% from "components/empty_state.html" import EmptyState %}
 
 {% block content %}
+  <requests-list inline-template v-bind:initial-data='{{ requests | tojson }}' v-bind:is-extended="{{ extended_view | boolean }}">
+    <div>
 
   {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
     <h1>Request submitted!</h1>
@@ -55,7 +57,6 @@
   ) }}
 
 {% else %}
-
   {% if extended_view %}
     <div class="row kpi">
       <div class="kpi__item col col--grow">
@@ -79,7 +80,7 @@
       <form class='search-bar'>
         <div class='usa-input search-input'>
           <label for='requests-search'>Search requests by Order ID</label>
-          <input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
+          <input v-model='searchValue' type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
           <button type="submit">
             <span class="hide">Search</span>
           </button>
@@ -87,11 +88,11 @@
 
         <div class='usa-input'>
           <label for='filter-status'>Filter requests by status</label>
-          <select id="filter-status" name="filter-status">
+          <select v-model="statusValue" id="filter-status" name="filter-status">
             <option value="" selected disabled>Filter by status</option>
-            <option value="">Active</option>
+            <option value="active">Active</option>
-            <option value="">Pending</option>
+            <option value="pending">Pending</option>
-            <option value="">Denied</option>
+            <option value="denied">Denied</option>
           </select>
         </div>
       </form>
@@ -114,39 +115,38 @@
             {% endif %}
           </tr>
         </thead>
-        <tbody>
+        <tbody v-for="r in filteredRequests">
-          {% for r in requests %}
           <tr>
             <th scope="row">
-              <a class='icon-link icon-link--large' href="{{ r.edit_link }}">{{ r.name }}</a>
+              <a class='icon-link icon-link--large' :href="r.edit_link">!{ r.name }</a>
-              {% if r.action_required %}<span class="label label--info">Action Required</span>{% endif %}
+              <span v-if="r.action_required" class="label label--info">Action Required</span>
             </th>
-            <td>{{ r.last_submission_timestamp | formattedDate }}</td>
+            <td>!{ r.last_submission_timestamp}</td>
             {% if extended_view %}
-              <td>{{ r.last_edited_timestamp | formattedDate }}</td>
+              <td>!{ r.last_edited_timestamp }</td>
-              <td>{{ r.full_name }}</td>
+              <td>!{ r.full_name }</td>
             {% endif %}
-            <td>{{ r.annual_usage | dollars }}</td>
+            <td>!{ r.annual_usage }</td>
             <td>
-              {% if r.status == 'Approved' %}
+              <a v-if="r.is_approved" class="icon-link icon-link--large" :href="r.workspace_link">
-                <a class="icon-link icon-link--large" href="{{ url_for('workspaces.workspace_projects', workspace_id=r.workspace_id) }}">
+                !{ r.status }
-                  {{ r.status }}
+              </a>
-                </a>
+              <span v-else>
-              {% else %}
+                !{ r.status }
-                {{ r.status }}
+              </span>
-              {% endif %}
             </td>
             {% if extended_view %}
-              <td>{{ r.dod_component }}</td>
+              <td>!{ r.dod_component }</td>
             {% endif %}
           </tr>
-          {% endfor %}
         </tbody>
       </table>
     </div>
   </div>
-
 {% endif %}
 
+</div>
+</requests-list>
+
 {% endblock %}