From ed6c14bf90fbfc8d6d47a7bd77307289abc1d628 Mon Sep 17 00:00:00 2001
From: aditya <asridhar@usdigitalresponse.org>
Date: Tue, 12 Sep 2023 12:07:11 -0400
Subject: [PATCH] chore: multiple changes based on design and usability
 feedback (#1891)

---
 .../client/src/components/GrantsTableNext.vue |  22 +-
 .../components/Modals/SavedSearchPanel.vue    | 165 ++++---
 .../src/components/Modals/SearchPanel.vue     | 406 ++++++++++--------
 packages/client/src/helpers/constants.js      |   1 +
 packages/client/src/store/modules/grants.js   |  12 +-
 packages/server/src/db/index.js               |  44 +-
 .../server/src/routes/grantsSavedSearch.js    |   6 +-
 7 files changed, 390 insertions(+), 266 deletions(-)

diff --git a/packages/client/src/components/GrantsTableNext.vue b/packages/client/src/components/GrantsTableNext.vue
index bf1d44d91..d33f9dbc4 100644
--- a/packages/client/src/components/GrantsTableNext.vue
+++ b/packages/client/src/components/GrantsTableNext.vue
@@ -4,7 +4,7 @@
       <div class="ml-3">
         <SavedSearchPanel />
       </div>
-      <div class="ml-3">
+      <div class="ml-2">
         <SearchPanel ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
       </div>
     </b-row>
@@ -24,7 +24,7 @@
     </b-row>
     <b-row align-v="center">
       <b-col cols="12">
-        <b-table fixed id="grants-table" sticky-header="450px" hover :items="formattedGrants" responsive
+        <b-table fixed id="grants-table" sticky-header="32rem" hover :items="formattedGrants" responsive
           :fields="fields.filter(field => !field.hideGrantItem)" selectable striped :sort-by.sync="orderBy"
           :sort-desc.sync="orderDesc" :no-local-sorting="true" :bordered="true" select-mode="single" :busy="loading"
           @row-selected="onRowSelected" show-empty emptyText="No matches found">
@@ -57,8 +57,8 @@
         </b-table>
       </b-col>
     </b-row>
-    <b-row align-v="center">
-      <b-col cols="12" class="d-flex">
+    <b-row class="grants-table-pagination">
+      <b-col cols="11" class="grants-table-pagination-component">
         <b-pagination
           class="m-0"
           v-model="currentPage"
@@ -69,7 +69,7 @@
           next-text="Next"
           last-text="Last"
           aria-controls="grants-table" />
-        <div class="ml-2 rounded text-justify p-2 page-item">{{ totalRows }} total grant{{ totalRows == 1 ? '' : 's' }}</div>
+          <div class="my-1 rounded py-1 px-2 page-item">{{ totalRows }} total grant{{ totalRows == 1 ? '' : 's' }}</div>
       </b-col>
     </b-row>
     <GrantDetails :selected-grant.sync="selectedGrant" />
@@ -420,5 +420,15 @@ export default {
 #grants-table th:nth-child(1) {
   width: 300px;
 }
-
+.grants-table-title-control {
+  padding-bottom: .75rem;
+}
+.grants-table-pagination {
+  padding-bottom: .75rem;
+}
+.grants-table-pagination-component {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
 </style>
diff --git a/packages/client/src/components/Modals/SavedSearchPanel.vue b/packages/client/src/components/Modals/SavedSearchPanel.vue
index 63db52dee..4e8678f42 100644
--- a/packages/client/src/components/Modals/SavedSearchPanel.vue
+++ b/packages/client/src/components/Modals/SavedSearchPanel.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="saved-search-panel">
     <b-button @click="initManageSearches" variant="primary" size="sm">
       My Saved Searches
     </b-button>
     <b-sidebar
       id="saved-search-panel"
-      class="saved-search-panel"
       model="displaySavedSearchPanel"
       ref="savedSearchPanel"
       bg-variant="white"
+      width="480px"
       @hidden="cancel"
       backdrop
       right
@@ -26,38 +26,53 @@
         New Search
       </b-button>
     </div>
-    <section class="container-fluid p-0" style="overflow-x: hidden;" v-if="!emptyState">
-      <div v-for="(search,idx) in savedSearches.data" :key="idx" class="saved-search-row pt-1" :searchid="search.id" @click="appylySavedSearch(search.id)" >
-        <b-row>
-          <b-col cols="10"><b>{{  search.name }}</b></b-col>
-          <b-col cols="1">
-            <b-dropdown size="sm"  variant="link" toggle-class="text-decoration-none" no-caret>
-              <template #button-content>
-                <b-icon icon="three-dots-vertical" class="text-dark" font-scale="1"></b-icon>
-              </template>
-              <b-dropdown-item :searchId="search.id" @click.stop="editSavedSearch">Edit</b-dropdown-item>
-              <b-dropdown-item @click.stop="deleteSavedSearch" :searchId="search.id">Delete</b-dropdown-item>
-            </b-dropdown>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col cols="9">
-            <!-- TODO: Change this to updatedAt -->
-            Last used {{ new Intl.DateTimeFormat("en-US", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(search.createdAt)) }}
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col cols="9">
-            <div v-for="(field, idx) of formatCriteria(search.criteria)" :key="idx">
-              {{ field.label }}: {{ field.value }}
-            </div>
-          </b-col>
-        </b-row>
-        <hr class="m-0" />
-      </div>
-    </section>
+    <b-table
+      id="saved-searches-table"
+      :items="savedSearches.data"
+      :fields="savedSearchFields"
+      hover
+      thead-class="saved-search-table-header-class"
+      @row-clicked="onRowClicked"
+    >
+      <template #cell(searchinfo)="data">
+        <div>
+          <b-row>
+            <b-col cols="10"><b>{{  data.item.name }}</b></b-col>
+            <b-col cols="1">
+              <b-dropdown class="saved-search-settings-dropdown" size="sm"  variant="link" toggle-class="text-decoration-none" no-caret>
+                <template #button-content>
+                  <b-icon icon="three-dots-vertical" class="text-dark" font-scale="1"></b-icon>
+                </template>
+                <b-dropdown-item :searchId="data.item.id" @click.stop="editSavedSearch">Edit</b-dropdown-item>
+                <b-dropdown-item @click.stop="deleteSavedSearch" :searchId="data.item.id">Delete</b-dropdown-item>
+              </b-dropdown>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="9">
+              <!-- TODO: Change this to updatedAt -->
+              Last used {{ new Intl.DateTimeFormat("en-US", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(data.item.createdAt)) }}
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col cols="9">
+              <div v-for="(field, idx) of formatCriteria(data.item.criteria)" :key="idx">
+                {{ field.label }}: {{ field.value }}
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+      </template>
+    </b-table>
     <template #footer="{ hide }">
-     <div class="d-flex text-light align-items-center px-3 py-2">
+     <div class="d-flex text-light align-items-center px-3 py-2 saved-search-footer-div">
+      <b-pagination
+        class="m-0 saved-search-pagination"
+        v-model="currentPage"
+        :total-rows="totalRows"
+        :per-page="perPage"
+        aria-controls="saved-searches-table"
+        size="sm" />
       <b-button size="sm" @click="hide" variant="outline-primary" class="borderless-button">Close</b-button>
      </div>
     </template>
@@ -79,7 +94,12 @@ export default {
     'v-b-toggle': VBToggle,
   },
   data() {
-    return {};
+    return {
+      perPage: 10,
+      currentPage: 1,
+      loading: false,
+      savedSearchFields: [{ key: 'searchinfo', label: 'Saved Search' }],
+    };
   },
   validations: {},
   watch: {
@@ -90,6 +110,15 @@ export default {
         this.$refs.savedSearchPanel.hide();
       }
     },
+    currentPage() {
+      if (this.loading) {
+        return;
+      }
+      this.fetchSavedSearches({
+        perPage: this.perPage,
+        currentPage: this.currentPage,
+      });
+    },
   },
   computed: {
     ...mapGetters({
@@ -97,6 +126,9 @@ export default {
       displaySavedSearchPanel: 'grants/displaySavedSearchPanel',
       selectedSearchId: 'grants/selectedSearchId',
     }),
+    totalRows() {
+      return this.savedSearches && this.savedSearches.pagination ? this.savedSearches.pagination.total : 0;
+    },
     emptyState() {
       return this.savedSearches.data && this.savedSearches.data.length === 0;
     },
@@ -119,7 +151,10 @@ export default {
       initViewResults: 'grants/initViewResults',
     }),
     setup() {
-      this.fetchSavedSearches();
+      this.fetchSavedSearches({
+        perPage: this.perPage,
+        currentPage: this.currentPage,
+      });
       if (this.displaySavedSearchPanel) {
         this.$root.$emit('bv::toggle::collapse', 'saved-search-panel');
       }
@@ -137,10 +172,16 @@ export default {
       if (this.selectedSearchId === Number(searchId)) {
         this.clearSelectedSearch();
       }
-      this.fetchSavedSearches();
+      this.fetchSavedSearches({
+        perPage: this.perPage,
+        currentPage: this.currentPage,
+      });
       this.notifyDeleted();
     },
-    appylySavedSearch(searchId) {
+    onRowClicked(item) {
+      this.applySavedSearch(item.id);
+    },
+    applySavedSearch(searchId) {
       const searchData = this.savedSearches.data.find((search) => search.id === searchId);
       this.changeSelectedSearchId(searchId);
       this.applyFilters(JSON.parse(searchData.criteria));
@@ -170,28 +211,38 @@ export default {
 };
 </script>
 <style>
-.saved-search-title{
+.saved-search-panel .saved-search-title{
   font-style: normal;
   font-weight: 700;
-  font-size: 20px;
+  font-size: 17px;
   line-height: 120%;
 }
-.b-sidebar.b-sidebar-right > .b-sidebar-header .close{
-  margin-right: 0px;
-}
-.b-sidebar-header{
+
+.saved-search-panel .b-sidebar-header{
   justify-content: space-between;
   border-bottom: solid #DAE0E5;
 }
-.b-sidebar-body{
-  display: flex;
+.saved-search-panel .b-sidebar.b-sidebar-right > .b-sidebar-header .close{
+  margin-right: 0px;
 }
-.b-sidebar-footer{
+
+.saved-search-panel .b-sidebar-footer{
   display: flex;
-  justify-content: end;
   border-top: solid #DAE0E5;
 }
-.saved-search-empty-state{
+
+.saved-search-panel .saved-search-row{
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.saved-search-panel .saved-search-row:hover{
+  background: rgba(0, 0, 0, 0.075);
+}
+.saved-search-panel .saved-search-settings-dropdown > button {
+  padding-bottom: 0;
+}
+
+.saved-search-panel .saved-search-empty-state{
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -199,22 +250,24 @@ export default {
   text-align: center;
   font-style: normal;
 }
-.saved-search-empty-state > h4{
+.saved-search-panel .saved-search-empty-state > h4{
   font-weight: 700;
   font-size: 16px;
   line-height: 120%;
 }
-.saved-search-empty-state > span{
+.saved-search-panel .saved-search-empty-state > span{
   font-weight: 500;
   font-size: 14px;
   line-height: 150%;
 }
-.saved-search-row{
-  padding-left: 15px;
-  padding-right: 15px;
+.saved-search-panel .saved-search-table-header-class {
+  display: none;
 }
-.saved-search-row:hover{
-  background: rgba(0, 0, 0, 0.075);
+.saved-search-panel .saved-search-pagination {
+  align-items: center;
+}
+.saved-search-panel .saved-search-footer-div {
+  width: 100%;
+  justify-content: space-between;
 }
-
 </style>
diff --git a/packages/client/src/components/Modals/SearchPanel.vue b/packages/client/src/components/Modals/SearchPanel.vue
index 472ba7b44..5654ba8ba 100644
--- a/packages/client/src/components/Modals/SearchPanel.vue
+++ b/packages/client/src/components/Modals/SearchPanel.vue
@@ -1,171 +1,213 @@
 <template>
-    <div>
+    <div class="search-panel">
       <b-button @click="initNewSearch" variant="outline-primary" size="sm">
         New Search
       </b-button>
-      <b-sidebar
-        id="search-panel"
-        ref="searchPanelSideBar"
-        title="Search"
-        class="search-panel"
-        bg-variant="white"
-        @shown="onShown"
-        @hidden="cancel"
-        backdrop
-        right
-        shadow
-      >
-        <template #header>
-          <div class="search-panel-title">{{ panelTitle }}</div>
-          <b-button-close class="close" @click="cancel">
-          </b-button-close>
-        </template>
-        <form ref="form" class="search-form">
-          <b-form-group label-for="searchTitle">
-            <template slot="label"><b>Search Title</b></template>
+
+      <b-form class="search-form" @keyup.enter="onEnter" @submit.prevent="onSubmit" @reset="cancel">
+        <b-sidebar
+          id="search-panel"
+          class="search-side-panel"
+          ref="searchPanelSideBar"
+          bg-variant="white"
+          @shown="onShown"
+          @hidden="cancel"
+          width="480px"
+          backdrop
+          right
+          shadow
+        >
+          <template #header>
+            <div class="search-panel-title">{{ panelTitle }}</div>
+            <b-button-close class="close" type="reset" @click="cancel" />
+          </template>
+            <b-form-group
+              id="search-title-group"
+              label="Search Title"
+              label-for="search-title"
+              description="ex. Infrastructure"
+            >
               <b-form-input
-                id="searchTitle"
+                id="search-title"
                 type="text"
                 v-model="formData.searchTitle"
-              ></b-form-input>
-              <b-form-text id="input-live-help">ex. Infrastructure</b-form-text>
-          </b-form-group>
-          <b-form-group label-for="include-input">
-            <template slot="label">Include Keywords</template>
+              />
+            </b-form-group>
+            <b-form-group
+              id="include-input-group"
+              label="Include Keywords"
+              label-for="include-input"
+              description="Separate keywords with comma"
+            >
               <b-form-input
                 id="include-input"
                 type="text"
                 v-model="formData.criteria.includeKeywords"
-              ></b-form-input>
-              <b-form-text id="input-live-help">Separate keywords with comma</b-form-text>
-          </b-form-group>
-          <b-form-group label-for="exclude-input">
-            <template slot="label">Exclude Keywords</template>
+              />
+            </b-form-group>
+            <b-form-group
+              id="exclude-input-group"
+              label="Exclude Keywords"
+              label-for="exclude-input"
+              description="Separate keywords with comma"
+            >
               <b-form-input
                 id="exclude-input"
                 type="text"
                 v-model="formData.criteria.excludeKeywords"
-              ></b-form-input>
-              <b-form-text id="input-live-help">Separate keywords with comma</b-form-text>
-          </b-form-group>
-          <b-form-group label-for="opportunity-number-input">
-            <template slot="label">Opportunity #</template>
+              />
+            </b-form-group>
+            <b-form-group
+              id="opportunity-number-input-group"
+              label="Opportunity #"
+              label-for="opportunity-number-input"
+            >
               <b-form-input
                 id="opportunity-number-input"
+                type="text"
                 v-model="formData.criteria.opportunityNumber"
-              ></b-form-input>
-          </b-form-group>
-          <b-form-group label="Opportunity Status" v-slot="{ ariaDescribedby }">
-            <b-form-checkbox-group
-              id="opportunity-status"
-              v-model="formData.criteria.opportunityStatuses"
-              :aria-describedby="ariaDescribedby"
-              name="opportunity-status"
-              inline
+              />
+            </b-form-group>
+            <b-form-group
+              id="opportunity-status-group"
+              label="Opportunity Status"
+              v-slot="{ ariaDescribedby }"
+            >
+              <b-form-checkbox-group
+                id="opportunity-status"
+                v-model="formData.criteria.opportunityStatuses"
+                :options="opportunityStatusOptions"
+                :aria-describedby="ariaDescribedby"
+                inline
+              >
+              </b-form-checkbox-group>
+            </b-form-group>
+            <b-form-group
+              id="funding-type-group"
+              label="Funding Type"
             >
-              <b-form-checkbox value="forecasted">Forecasted</b-form-checkbox>
-              <b-form-checkbox value="posted">Posted</b-form-checkbox>
-              <b-form-checkbox value="closed">Closed</b-form-checkbox>
-            </b-form-checkbox-group>
-          </b-form-group>
-          <b-form-group class="multiselect-group" label-for="funding-type">
-            <template slot="label">Funding Type</template>
               <multiselect
+                id="funding-type"
                 v-model="formData.criteria.fundingTypes"
                 :options="fundingTypeOptions"
-                track-by="code"
                 label="name"
-                id="funding-type"
-                type="text"
+                track-by="code"
                 :multiple="true"
-              ></multiselect>
-          </b-form-group>
-          <b-form-group class="multiselect-group">
-            <template slot="label">Eligibility</template>
-            <multiselect
-              v-model="formData.criteria.eligibility"
-              :options="eligibilityCodes"
-              track-by="code"
-              label="label"
-              id="eligibility"
-              type="text"
-              :multiple="true"
+                :close-on-select="false"
+                :searchable="false"
+                selectLabel=""
+                :limit="2"
+              />
+            </b-form-group>
+            <b-form-group
+              id="eligibility-group"
+              label="Eligibility"
+              label-for="eligibility"
             >
-            </multiselect>
-          </b-form-group>
-          <b-form-group class="multiselect-group">
-            <template slot="label">Category</template>
-            <multiselect
-              v-model="formData.criteria.opportunityCategories"
-              :options="opportunityCategoryOptions"
-              :multiple="true"
-              :limit="1"
-              :limitText="customLimitText"
-              :close-on-select="false"
-              :clear-on-select="false"
-              placeholder="Opportunity Category"
-              :show-labels="false"
-              :searchable="false">
-            </multiselect>
-          </b-form-group>
-          <b-form-group label-for="bill">
-            <template slot="label">Bill</template>
               <multiselect
-              id="bill"
-              v-model="formData.criteria.bill"
-              open-direction="top"
-              :options="billOptions"
-              :multiple="false"
-              :close-on-select="true"
-              :clear-on-select="false"
-              placeholder="All Bills"
-              :show-labels="false">
-            </multiselect>
-          </b-form-group>
-          <b-form-group label-for="agency">
-            <template slot="label">Agency Code</template>
+                id="eligibility"
+                v-model="formData.criteria.eligibility"
+                :options="eligibilityCodes"
+                label="label"
+                track-by="code"
+                :multiple="true"
+                :close-on-select="false"
+                :searchable="true"
+                selectLabel=""
+                :limit="3"
+              />
+            </b-form-group>
+            <b-form-group
+              id="opportunity-category-group"
+              label="Category"
+            >
+              <multiselect
+                id="opportunity-category"
+                v-model="formData.criteria.opportunityCategories"
+                :options="opportunityCategoryOptions"
+                :multiple="true"
+                :close-on-select="false"
+                :searchable="false"
+                :limit="2"
+                placeholder="Select Opportunity Category"
+              />
+            </b-form-group>
+            <b-form-group
+              id="bill-group"
+              label="Appropriation Bill"
+            >
+              <multiselect
+                id="bill"
+                v-model="formData.criteria.bill"
+                :options="billOptions"
+                :multiple="false"
+                :close-on-select="true"
+                :clear-on-select="false"
+                :searchable="false"
+                placeholder="All Bills"
+                :show-labels="false"
+              />
+            </b-form-group>
+            <b-form-group
+              id="agency-group"
+              label="Agency Code"
+              label-for="agency"
+            >
               <b-form-input
                 id="agency"
                 type="text"
                 v-model="formData.criteria.agency"
-              ></b-form-input>
-          </b-form-group>
-          <b-form-group>
-            <template slot="label">Posted Within</template>
-            <multiselect
-              id="posted-within"
-              v-model="formData.criteria.postedWithin"
-              :options="postedWithinOptions"
-              :multiple="false"
-              :close-on-select="true"
-              :clear-on-select="false"
-              placeholder="All Time"
-              :show-labels="false">
-            </multiselect>
-          </b-form-group>
-          <b-form-group label="Cost Sharing" v-slot="{ ariaDescribedby }" row>
-            <b-form-radio-group>
-              <b-form-radio v-model="formData.criteria.costSharing" :aria-describedby="ariaDescribedby" name="cost-sharing" value="Yes">Yes</b-form-radio>
-              <b-form-radio v-model="formData.criteria.costSharing" :aria-describedby="ariaDescribedby" name="cost-sharing" value="No">No</b-form-radio>
-            </b-form-radio-group>
-          </b-form-group>
-          <b-form-group class="multiselect-group">
-            <template slot="label">Review Status</template>
-            <multiselect v-model="formData.criteria.reviewStatus" :options="reviewStatusOptions" :multiple="true" :limit="1" :limitText="customLimitText" :close-on-select="false" :clear-on-select="false" placeholder="Review Status" :show-labels="false" :searchable="false"></multiselect>
-          </b-form-group>
-        </form>
-      <template #footer>
-       <div class="d-flex text-light align-items-center px-3 py-2 sidebar-footer">
-        <b-button size="sm" @click="cancel" variant="outline-primary" class="borderless-button">Cancel</b-button>
-        <div>
-          <b-button size="sm" @click="saveSearch" variant="primary" :disabled="!saveEnabled">Save and View Results</b-button>
-        </div>
-       </div>
-      </template>
-      </b-sidebar>
+              />
+            </b-form-group>
+            <b-form-group
+              id="posted-within-group"
+              label="Posted Within"
+            >
+              <multiselect
+                id="posted-within"
+                v-model="formData.criteria.postedWithin"
+                :options="postedWithinOptions"
+                :multiple="false"
+                :close-on-select="true"
+                :clear-on-select="false"
+                :searchable="false"
+                placeholder="All Time"
+                :show-labels="false"
+              />
+            </b-form-group>
+            <b-form-group
+              id="cost-sharing-group"
+              label="Cost Sharing"
+              v-slot="{ ariaDescribedby }"
+              row
+            >
+              <b-form-radio-group class="search-fields-radio-group">
+                <b-form-radio
+                  v-model="formData.criteria.costSharing"
+                  :aria-describedby="ariaDescribedby"
+                  name="cost-sharing"
+                  value="Yes"
+                >Yes</b-form-radio>
+                <b-form-radio
+                  v-model="formData.criteria.costSharing"
+                  :aria-describedby="ariaDescribedby"
+                  name="cost-sharing"
+                  value="No"
+                >No</b-form-radio>
+              </b-form-radio-group>
+            </b-form-group>
+          <template #footer>
+            <div class="d-flex text-light align-items-center px-3 py-2 sidebar-footer">
+              <b-button size="sm" type="reset" variant="outline-primary" class="borderless-button">Cancel</b-button>
+              <b-button size="sm" type="submit" variant="primary" :disabled="!saveEnabled">Save and View Results</b-button>
+            </div>
+          </template>
+        </b-sidebar>
+      </b-form>
     </div>
   </template>
 <script>
+
 import { mapActions, mapGetters } from 'vuex';
 import { VBToggle } from 'bootstrap-vue';
 import Multiselect from 'vue-multiselect';
@@ -181,7 +223,6 @@ const defaultCriteria = {
   bill: null,
   costSharing: null,
   opportunityCategories: [],
-  reviewStatus: [],
   postedWithin: [],
 };
 
@@ -206,13 +247,18 @@ export default {
       postedWithinOptions: ['All Time', 'One Week', '30 Days', '60 Days'],
       billOptions,
       opportunityCategoryOptions: ['Discretionary', 'Mandatory', 'Earmark', 'Continuation'],
-      reviewStatusOptions: ['Interested', 'Applied', 'Not Applying', 'Assigned'],
       fundingTypeOptions: [
         { code: 'G', name: 'Grant' },
         { code: 'CA', name: 'Cooperative Agreement' },
         { code: 'PC', name: 'Procurement Contract' },
         { code: 'O', name: 'Other' },
       ],
+      opportunityStatusOptions: [
+        { text: 'Forecasted', value: 'forecasted' },
+        { text: 'Posted', value: 'posted' },
+        { text: 'Closed', value: 'closed' },
+        { text: 'Archived', value: 'archived' },
+      ],
     };
   },
   validations: {
@@ -308,7 +354,12 @@ export default {
       const searchIds = this.savedSearches.data.map((s) => s.id);
       return Math.max(...searchIds, 0) + 1;
     },
-    async saveSearch() {
+    async onEnter() {
+      if (this.saveEnabled) {
+        await this.onSubmit();
+      }
+    },
+    async onSubmit() {
       this.apply();
       let searchId;
       try {
@@ -331,7 +382,10 @@ export default {
           });
           searchId = res.id;
         }
-        await this.fetchSavedSearches();
+        await this.fetchSavedSearches({
+          perPage: 10,
+          currentPage: 1,
+        });
         this.changeSelectedSearchId(searchId);
       } catch (e) {
         this.notifyError(e.message);
@@ -359,36 +413,25 @@ export default {
 };
 </script>
 <style>
-.search-panel-title{
-  font-style: normal;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 120%;
+.search-panel .multiselect__option {
+  word-break: break-all;
+  white-space: normal;
 }
-.form{
-  margin: 10px;
-}
-.multiselect-title{
-  font-weight: 500;
-  line-height: 150%;
-  margin-left: 2px;
-  margin-bottom: 5px;
-  color: #1F2123;
+.search-panel .sidebar-footer {
+  border-top: 1.5px solid #e8e8e8;
+  justify-content: space-between;
+  width: 100%;
 }
-.multiselect > .multiselect__tags{
-  display: flex;
-  align-items: center;
+.search-panel .borderless-button {
+  border-color: transparent;
 }
-.multiselect > .multiselect__tags > .multiselect__strong{
-  display: inline;
-  padding: 4px 5px 4px;
-  border-radius: 5px;
-  color: #fff;
-  line-height: 1;
-  background: #41b883;
-  margin-bottom: 11px;
+.search-panel .search-panel-title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 120%;
 }
-.b-sidebar-header{
+.search-panel .b-sidebar-header{
   justify-content: space-between;
   border-bottom: solid #DAE0E5;
   font-size: 1.5rem;
@@ -398,32 +441,17 @@ export default {
   flex-grow: 0;
   align-items: center;
 }
-.search-panel > .b-sidebar > .b-sidebar-header{
-  font-size: 1.25rem;
-  border-bottom: 1.5px solid #e8e8e8;
-  width: 100%;
-}
-.b-sidebar.b-sidebar-right > .b-sidebar-header .close {
+.search-panel .b-sidebar.b-sidebar-right > .b-sidebar-header .close {
   margin-right: 0;
 }
-#search-panel___title__{
-  margin: 0 auto;
-}
-
-.sidebar-footer {
-  border-top: 1.5px solid #e8e8e8;
-  justify-content: space-between;
-  width: 100%;
-}
-.borderless-button {
-  border-color: transparent;
-}
-.right-button-container{
-  width: 190px;
-  display: flex;
-  justify-content: space-between;
+.search-panel .b-sidebar-body {
+  padding: .75rem;
 }
-.search-form {
-  padding: 10px;
+.search-panel .search-fields-radio-group {
+  /*
+    Ensure radio buttons are hidden behind <multiselect> options
+  */
+  position: relative;
+  z-index: 0;
 }
 </style>
diff --git a/packages/client/src/helpers/constants.js b/packages/client/src/helpers/constants.js
index 50dee288d..644c33b1d 100644
--- a/packages/client/src/helpers/constants.js
+++ b/packages/client/src/helpers/constants.js
@@ -1,4 +1,5 @@
 const billOptions = [
+  'All Bills',
   'Department of Justice',
   'Department of Energy',
   'Department of the Treasury',
diff --git a/packages/client/src/store/modules/grants.js b/packages/client/src/store/modules/grants.js
index be92ad651..d215181f2 100644
--- a/packages/client/src/store/modules/grants.js
+++ b/packages/client/src/store/modules/grants.js
@@ -202,9 +202,17 @@ export default {
     async setEligibilityCodeEnabled(context, { code, enabled }) {
       await fetchApi.put(`/api/organizations/:organizationId/eligibility-codes/${code}/enable/${enabled}`);
     },
-    async fetchSavedSearches({ commit }) {
+    async fetchSavedSearches({ commit }, {
+      currentPage, perPage,
+    }) {
       // TODO: Add pagination URL parameters.
-      const data = await fetchApi.get('/api/organizations/:organizationId/grants-saved-search');
+      const paginationQuery = Object.entries({ currentPage, perPage })
+      // filter out undefined and nulls since api expects parameters not present as undefined
+      // eslint-disable-next-line no-unused-vars
+        .filter(([key, value]) => value || typeof value === 'number')
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+      const data = await fetchApi.get(`/api/organizations/:organizationId/grants-saved-search?${paginationQuery}`);
       commit('SET_SAVED_SEARCHES', data);
     },
     async createSavedSearch(context, { searchInfo }) {
diff --git a/packages/server/src/db/index.js b/packages/server/src/db/index.js
index 396843adb..57dc2bd39 100755
--- a/packages/server/src/db/index.js
+++ b/packages/server/src/db/index.js
@@ -435,7 +435,7 @@ function buildTsqExpression(includeKeywords, excludeKeywords) {
     return keywords.expressions;
 }
 
-function buildKeywordQuery(queryBuilder, includeKeywords, excludeKeywords) {
+function buildKeywordQuery(queryBuilder, includeKeywords, excludeKeywords, orderingParams) {
     const tsqExpression = buildTsqExpression(includeKeywords, excludeKeywords);
     if (tsqExpression.phrase) {
         queryBuilder.joinRaw(`cross join phraseto_tsquery('english', ?) as tsqp`, tsqExpression.phrase);
@@ -444,6 +444,12 @@ function buildKeywordQuery(queryBuilder, includeKeywords, excludeKeywords) {
                 .orWhere('tsqp', '@@', knex.raw('description_ts'));
             return q;
         });
+        if (orderingParams.orderBy !== undefined) {
+            queryBuilder.select(
+                knex.raw(`ts_rank(title_ts, tsqp) as rank_title_phrase`),
+                knex.raw(`ts_rank(grants.description_ts, tsqp) as rank_description_phrase`),
+            );
+        }
     }
     if (tsqExpression.word) {
         queryBuilder.joinRaw(`cross join to_tsquery('english', ?) as tsq`, tsqExpression.word);
@@ -452,6 +458,12 @@ function buildKeywordQuery(queryBuilder, includeKeywords, excludeKeywords) {
                 .orWhere('tsq', '@@', knex.raw('description_ts'));
             return q;
         });
+        if (orderingParams.orderBy !== undefined) {
+            queryBuilder.select(
+                knex.raw(`ts_rank(title_ts, tsq) as rank_title_word`),
+                knex.raw(`ts_rank(grants.description_ts, tsq) as rank_description_word`),
+            );
+        }
     }
 }
 
@@ -514,7 +526,7 @@ function grantsQuery(queryBuilder, filters, agencyId, orderingParams, pagination
         if (parseInt(filters.assignedToAgencyId, 10) >= 0) {
             queryBuilder.join(TABLES.assigned_grants_agency, `${TABLES.grants}.grant_id`, `${TABLES.assigned_grants_agency}.grant_id`);
         }
-        buildKeywordQuery(queryBuilder, filters.includeKeywords, filters.excludeKeywords);
+        buildKeywordQuery(queryBuilder, filters.includeKeywords, filters.excludeKeywords, orderingParams);
         buildFiltersQuery(queryBuilder, filters, agencyId);
     }
     if (orderingParams.orderBy && orderingParams.orderBy !== 'undefined') {
@@ -522,6 +534,7 @@ function grantsQuery(queryBuilder, filters, agencyId, orderingParams, pagination
             // Only perform the join if it was not already performed above.
             if (!filters.reviewStatuses?.length) {
                 queryBuilder.leftJoin(TABLES.grants_interested, `${TABLES.grants}.grant_id`, `${TABLES.grants_interested}.grant_id`);
+                queryBuilder.select(`${TABLES.grants_interested}.grant_id`);
             }
             const orderArgs = orderingParams.orderBy.split('|');
             queryBuilder.orderBy(`${TABLES.grants_interested}.grant_id`, orderArgs[1]);
@@ -533,14 +546,25 @@ function grantsQuery(queryBuilder, filters, agencyId, orderingParams, pagination
             queryBuilder.orderBy(`${TABLES.grants_viewed}.grant_id`, orderArgs[1]);
             queryBuilder.orderBy(`${TABLES.grants}.grant_id`, orderArgs[1]);
         } else if (orderingParams.orderBy.includes('rank')) {
-            queryBuilder.select(
-                knex.raw(`ts_rank(title_ts, tsq) as rank_title`),
-                knex.raw(`ts_rank(grants.description_ts, tsq) as rank_description`),
-            );
-            queryBuilder.orderBy([
-                { column: 'rank_title', order: 'desc' },
-                { column: 'rank_description', order: 'desc' },
-            ]);
+            const rankColumns = new Set();
+            for (const statement of queryBuilder._statements) { // eslint-disable-line no-underscore-dangle
+                if (statement.grouping === 'columns') {
+                    for (const val of statement.value) {
+                        if (val && val.sql) {
+                            if (val.sql.includes('rank_title_word')) {
+                                rankColumns.add({ column: 'rank_title_word', order: 'desc' });
+                            } else if (val.sql.includes('rank_description_word')) {
+                                rankColumns.add({ column: 'rank_description_word', order: 'desc' });
+                            } else if (val.sql.includes('rank_title_phrase')) {
+                                rankColumns.add({ column: 'rank_title_phrase', order: 'desc' });
+                            } else if (val.sql.includes('rank_description_phrase')) {
+                                rankColumns.add({ column: 'rank_description_phrase', order: 'desc' });
+                            }
+                        }
+                    }
+                }
+            }
+            queryBuilder.orderBy([...rankColumns]);
         } else {
             const orderArgs = orderingParams.orderBy.split('|');
             const orderDirection = ((orderingParams.orderDesc === 'true') ? 'desc' : 'asc');
diff --git a/packages/server/src/routes/grantsSavedSearch.js b/packages/server/src/routes/grantsSavedSearch.js
index 466a60fa7..666ab2e10 100644
--- a/packages/server/src/routes/grantsSavedSearch.js
+++ b/packages/server/src/routes/grantsSavedSearch.js
@@ -8,9 +8,9 @@ router.get('/', requireUser, async (req, res) => {
     const { user } = req.session;
 
     const paginationParams = {
-        currentPage: req.params.currentPage || 1,
-        perPage: req.params.perPage || 10,
-        isLengthAware: req.params.isLengthAware || true,
+        currentPage: req.query.currentPage || 1,
+        perPage: req.query.perPage || 10,
+        isLengthAware: req.query.isLengthAware || true,
     };
 
     const savedSearches = await db.getSavedSearches(user.id, paginationParams);