From 4dde11d0c6cd76f5295c485a72d4042bba723520 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Wed, 7 Nov 2018 11:29:58 -0500
Subject: [PATCH 1/4] Allow CCPO to filter requests by DOD component

---
 atst/routes/requests/index.py        |  7 ++++++-
 js/components/forms/requests_list.js | 13 +++++++++++--
 templates/requests/index.html        | 17 ++++++++++++++++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/atst/routes/requests/index.py b/atst/routes/requests/index.py
index 97225681..2a785aee 100644
--- a/atst/routes/requests/index.py
+++ b/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()
diff --git a/js/components/forms/requests_list.js b/js/components/forms/requests_list.js
index c3b07518..1e3d586f 100644
--- a/js/components/forms/requests_list.js
+++ b/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) {
diff --git a/templates/requests/index.html b/templates/requests/index.html
index acba403f..03c3b441 100644
--- a/templates/requests/index.html
+++ b/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 %}
@@ -96,6 +102,15 @@
             <option v-for="status in statuses" :value="status">!{ status }</option>
           </select>
         </div>
+
+        <div class='usa-input'>
+          <label for='filter-status'>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>
       </form>
     {% endif %}
 

From 12f5e6f79eb414e2cce185b60980e52504d4d1c0 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Wed, 7 Nov 2018 11:39:28 -0500
Subject: [PATCH 2/4] Fix label

---
 templates/requests/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/requests/index.html b/templates/requests/index.html
index 03c3b441..e005e954 100644
--- a/templates/requests/index.html
+++ b/templates/requests/index.html
@@ -104,7 +104,7 @@
         </div>
 
         <div class='usa-input'>
-          <label for='filter-status'>Filter requests by DOD component</label>
+          <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>

From 746bdc8b01a2b8254c6733c0fe336bcf316a7f09 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Wed, 7 Nov 2018 12:11:42 -0500
Subject: [PATCH 3/4] Styling tweaks

---
 styles/components/_search_bar.scss | 10 +++++++++-
 templates/requests/index.html      | 32 ++++++++++++++++--------------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/styles/components/_search_bar.scss b/styles/components/_search_bar.scss
index dbc795d2..5a001601 100644
--- a/styles/components/_search_bar.scss
+++ b/styles/components/_search_bar.scss
@@ -6,10 +6,18 @@
   padding: $gap;
   flex-wrap: wrap;
 
+  @include media($large-screen) {
+    flex-wrap: nowrap;
+  }
+
+  .search-bar__filters {
+    display: flex;
+  }
+
   .usa-input {
     margin: 0;
     flex-grow: 1;
-    flex-shrink: 0;
+    flex-shrink: 1;
     flex-basis: 100%;
     height: $search-input-height;
     position: relative;
diff --git a/templates/requests/index.html b/templates/requests/index.html
index e005e954..c024abd6 100644
--- a/templates/requests/index.html
+++ b/templates/requests/index.html
@@ -94,22 +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>
+        <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 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 %}

From f6700fb2a69adf9835a1f01d319775e4d934fae6 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Wed, 7 Nov 2018 13:07:57 -0500
Subject: [PATCH 4/4] responsive adjustments to search/filter layout

---
 styles/components/_search_bar.scss | 51 ++++++++++++++----------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/styles/components/_search_bar.scss b/styles/components/_search_bar.scss
index 5a001601..715c982c 100644
--- a/styles/components/_search_bar.scss
+++ b/styles/components/_search_bar.scss
@@ -6,48 +6,45 @@
   padding: $gap;
   flex-wrap: wrap;
 
-  @include media($large-screen) {
+  @media (min-width:1000px) {
     flex-wrap: nowrap;
   }
 
-  .search-bar__filters {
-    display: flex;
-  }
-
   .usa-input {
-    margin: 0;
-    flex-grow: 1;
-    flex-shrink: 1;
-    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;