Merge pull request #437 from dod-ccpo/request-filter-dod-component

Allow CCPO to filter requests by DOD component

atst/routes/requests/index.py

@@ -4,6 +4,7 @@ from flask import render_template, g, url_for
 from . import requests_bp
 from atst.domain.requests import Requests
 from atst.models.permissions import Permissions
+from atst.forms.data import SERVICE_BRANCHES
 
 
 class RequestsIndex(object):
@@ -20,7 +21,11 @@ class RequestsIndex(object):
         else:
             context = self._non_ccpo_view(self.user)
 
-        return {**context, "possible_statuses": Requests.possible_statuses()}
+        return {
+            **context,
+            "possible_statuses": Requests.possible_statuses(),
+            "possible_dod_components": [b[0] for b in SERVICE_BRANCHES[1:]],
+        }
 
     def _ccpo_view(self, user):
         requests = Requests.get_many()

js/components/forms/requests_list.js

@@ -23,6 +23,10 @@ export default {
         type: Array,
         default: [],
       },
+      dodComponents: {
+        type: Array,
+        default: [],
+      }
     },
 
     data: function () {
@@ -76,6 +80,7 @@ export default {
       return {
         searchValue: '',
         statusValue: '',
+        dodComponentValue: '',
         sort: {
           columnName: '',
           isAscending: true
@@ -88,7 +93,7 @@ export default {
       filteredRequests: function () {
         return pipe(
           partial(this.applySearch, [this.searchValue]),
-          partial(this.applyFilters, [this.statusValue]),
+          partial(this.applyFilters, [this.statusValue, this.dodComponentValue]),
           partial(this.applySort, [this.sort]),
         )(this.requests)
       }
@@ -106,11 +111,15 @@ export default {
             true
         )
       },
-      applyFilters: (status, requests) => {
+      applyFilters: (status, dodComponent, requests) => {
         return requests.filter(
           (request) => status !== '' ?
             request.status === status :
             true
+        ).filter(
+          (request) => dodComponent !== '' ?
+            request.dod_component === dodComponent :
+            true
         )
       },
       applySort: function(sort, requests) {

styles/components/_search_bar.scss

@@ -6,40 +6,45 @@
   padding: $gap;
   flex-wrap: wrap;
 
+  @media (min-width:1000px) {
+    flex-wrap: nowrap;
+  }
+
   .usa-input {
-    margin: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: 100%;
+    margin: $gap 0 0 $gap;
     height: $search-input-height;
     position: relative;
-    margin-top: $gap;
-
-    @include media($large-screen) {
-      flex-shrink: 1;
-      flex-basis: auto;
-      margin-top: 0;
-      margin-left: $gap;
-    }
 
     label {
       @include hide;
     }
+  }
 
-    &:first-child {
-      margin-left: 0;
-      margin-top: 0;
+  .search-bar__filters {
+    display: flex;
+    flex: 1;
+    flex-grow: 1;
+    flex-basis: 100%;
+
+    .usa-input {
+      @media (min-width:1000px) {
+        margin-top: 0;
+      }
+
+      &:first-child {
+        margin-left: 0;
+
+        @media (min-width:1000px) {
+          margin-left: $gap;
+        }
+      }
     }
   }
 
   .search-input {
-    @include media($medium-screen) {
-      flex-basis: 50%;
-    }
-
-    @media (min-width:800px) and (max-width:900px) {
-      flex-basis: auto;
-    }
+    margin-left: 0;
+    margin-top: 0;
+    flex-basis: 100%;
 
     input[type='search'] {
       width: auto;

templates/requests/index.html

@@ -37,7 +37,13 @@
     </div>
   {% endcall %}
 
-  <requests-list inline-template v-bind:requests='{{ requests | tojson }}' v-bind:is-extended='{{ extended_view | tojson }}' v-bind:statuses='{{ possible_statuses | tojson }}'>
+  <requests-list
+    inline-template
+    v-bind:requests='{{ requests | tojson }}'
+    v-bind:is-extended='{{ extended_view | tojson }}'
+    v-bind:statuses='{{ possible_statuses | tojson }}'
+    v-bind:dod-components='{{ possible_dod_components | tojson }}'
+  >
     <div>
 
 {% if num_action_required %}
@@ -88,13 +94,24 @@
           </button>
         </div>
 
-        <div class='usa-input'>
-          <label for='filter-status'>Filter requests by status</label>
-          <select v-model="statusValue" id="filter-status" name="filter-status">
-            <option value="" selected disabled>Filter by status</option>
-            <option value="">All</option>
-            <option v-for="status in statuses" :value="status">!{ status }</option>
-          </select>
+        <div class="search-bar__filters">
+          <div class='usa-input'>
+            <label for='filter-status'>Filter requests by status</label>
+            <select v-model="statusValue" id="filter-status" name="filter-status">
+              <option value="" selected disabled>Filter by status</option>
+              <option value="">All</option>
+              <option v-for="status in statuses" :value="status">!{ status }</option>
+            </select>
+          </div>
+
+          <div class='usa-input'>
+            <label for='filter-dod-component'>Filter requests by DOD component</label>
+            <select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
+              <option value="" selected disabled>Filter by DOD Component</option>
+              <option value="">All</option>
+              <option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
+            </select>
+          </div>
         </div>
       </form>
     {% endif %}