feat(@dpc-sdp/ripple-tide-search): added expand/collapse toggle for s…

…earch filters sections
dpc-sdp · Jul 19, 2023 · c9b6c3f · c9b6c3f
1 parent 33f42b2
commit c9b6c3f
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 16 deletions.
diff --git a/examples/nuxt-app/test/features/search-listing/aggregations.feature b/examples/nuxt-app/test/features/search-listing/aggregations.feature
@@ -17,6 +17,7 @@ Feature: Search listing - Aggregations
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/aggregations/request" fixture
 
+    When I toggle the search listing filters section
     When I click the search listing dropdown field labelled "Elastic aggregation test"
     # First item is hardcoded, the rest come from ES aggregation
     Then the selected dropdown field should have the items:

diff --git a/examples/nuxt-app/test/features/search-listing/filters.feature b/examples/nuxt-app/test/features/search-listing/filters.feature
@@ -17,6 +17,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-raw" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Raw filter example" should have the value "Dogs, Birds"
     When I click the search listing dropdown field labelled "Raw filter example"
     Then the selected dropdown field should have the items:
@@ -40,6 +43,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-term-single" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Term filter example" should have the value "Green"
     When I click the search listing dropdown field labelled "Term filter example"
     Then the selected dropdown field should have the items:
@@ -63,6 +69,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-term-array" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Term filter example" should have the value "Red, Green"
     When I click the search listing dropdown field labelled "Term filter example"
     Then the selected dropdown field should have the items:
@@ -87,6 +96,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-terms-single" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Terms filter example" should have the value "Purple"
     When I click the search listing dropdown field labelled "Terms filter example"
     Then the selected dropdown field should have the items:
@@ -111,6 +123,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-terms-array" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Terms filter example" should have the value "Orange, Purple"
     When I click the search listing dropdown field labelled "Terms filter example"
     Then the selected dropdown field should have the items:
@@ -134,6 +149,9 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-function-filter" fixture
 
+    Then the filters toggle should show 1 applied filters
+
+    When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Custom function filter example" should have the value "Open, Closed"
     When I click the search listing dropdown field labelled "Custom function filter example"
     Then the selected dropdown field should have the items:

diff --git a/examples/nuxt-app/test/features/search-listing/grants.feature b/examples/nuxt-app/test/features/search-listing/grants.feature
@@ -20,6 +20,8 @@ Feature: Grants collection
       | title                                | url                                           | updated                            | content                                                                                                                                            | audience                          | amount            | status                    |
       | THIS IS A TEST                       | /site-8888/tc-9b-grant-page-closed            | Updated: 2023-05-09T15:00:46+10:00 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Business                          | $11,326 - $26,494 | Closed                    |
       | TC-9a Grant Simple Test - Date Range | /site-8888/tc-9a-grant-simple-test-date-range | Updated: 2023-05-09T15:00:46+10:00 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Not-for-profit groups, government | $11,326 - $26,494 | Open, closing in 163 days |
+
+    When I toggle the search listing filters section
     When I click the search listing dropdown field labelled "View those relevant to me"
     # First item is hardcoded, the rest come from ES aggregation
     Then the selected dropdown field should have the items:

diff --git a/packages/ripple-test-utils/step_definitions/content-types/listing.ts b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
@@ -125,6 +125,29 @@ When(
   }
 )
 
+When(`I toggle the search listing filters section`, () => {
+  cy.get(`button`).contains('Refine search').click()
+})
+
+Then(
+  'the filters toggle should show {int} applied filters',
+  (filterCount: number) => {
+    if (filterCount === 0) {
+      cy.get(`button`)
+        .contains('Refine search')
+        .should(($div) => {
+          expect($div.text().trim()).equal(`Refine search`)
+        })
+    } else {
+      cy.get(`button`)
+        .contains('Refine search')
+        .should(($div) => {
+          expect($div.text().trim()).equal(`Refine search (${filterCount})`)
+        })
+    }
+  }
+)
+
 Then(
   `the selected dropdown field should have the items:`,
   (dataTable: DataTable) => {

diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { useRuntimeConfig, useFetch, useRoute, ref, toRaw } from '#imports'
+import {
+  useRuntimeConfig,
+  useFetch,
+  useRoute,
+  ref,
+  toRaw,
+  computed
+} from '#imports'
 import useTideSearch from './../composables/useTideSearch'
 import type {
   TideSearchListingPage,
@@ -63,6 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
 const { public: config } = useRuntimeConfig()
 const siteId = config.tide?.site
 const route = useRoute()
+const filtersExpanded = ref(false)
 
 const { data: site } = useFetch('/api/tide/site', {
   baseURL: config.API_URL || '',
@@ -79,6 +87,7 @@ const {
   results,
   suggestions,
   filterForm,
+  appliedFilters,
   submitSearch,
   goToPage,
   page,
@@ -176,6 +185,24 @@ const handlePageChange = (newPage: number) => {
 
   goToPage(newPage)
 }
+
+const handleToggleFilters = () => {
+  filtersExpanded.value = !filtersExpanded.value
+}
+
+const numAppliedFilters = computed(() => {
+  return Object.values(appliedFilters.value).filter((value) => {
+    if (!value) {
+      return false
+    }
+
+    if (Array.isArray(value) && !value.length) {
+      return false
+    }
+
+    return true
+  }).length
+})
 </script>
 
 <template>
@@ -201,8 +228,17 @@ const handlePageChange = (newPage: number) => {
             @on-submit="handleSearchSubmit"
             @update:input-value="handleUpdateSearchTerm"
           />
-          <div
+          <RplSearchBarRefine
+            class="tide-search-refine-btn"
+            :expanded="filtersExpanded"
+            @click="handleToggleFilters"
+            >Refine search{{
+              numAppliedFilters ? ` (${numAppliedFilters})` : ''
+            }}</RplSearchBarRefine
+          >
+          <RplExpandable
             v-if="userFilters && userFilters.length > 0"
+            :expanded="filtersExpanded"
             class="rpl-u-margin-t-4"
           >
             <TideSearchFilters
@@ -212,7 +248,7 @@ const handlePageChange = (newPage: number) => {
               @submit="handleFilterSubmit"
             >
             </TideSearchFilters>
-          </div>
+          </RplExpandable>
         </div>
       </RplHeroHeader>
     </template>

diff --git a/packages/ripple-tide-search/composables/useTideSearch.ts b/packages/ripple-tide-search/composables/useTideSearch.ts
@@ -316,19 +316,10 @@ export default (
     })
   }
 
-  /**
-   * The URL is the source of truth for what is shown in the search results.
-   *
-   * When the URL changes, the URL is parsed and the query is transformed into an elastic DSL query.
-   */
-  const searchFromRoute = (newRoute: RouteLocation) => {
-    searchTerm.value = getSingleQueryStringValue(newRoute.query, 'q') || ''
-    page.value =
-      parseInt(getSingleQueryStringValue(newRoute.query, 'page'), 10) || 1
-
+  const getFiltersFromRoute = (newRoute: RouteLocation) => {
     // Re-construct the filter form values from the URL, we find every query param that matches
-    // a user filter, then construct the filter values based on that. This leave
-    const formValues = Object.keys(newRoute.query)
+    // a user filter, then construct the filter values based on that.
+    return Object.keys(newRoute.query)
       .filter((key) => userFilterConfig.some((filter) => filter.id === key))
       .reduce((obj, key) => {
         let parsedValue = newRoute.query[key]
@@ -345,12 +336,27 @@ export default (
           [key]: parsedValue
         }
       }, {})
+  }
 
-    filterForm.value = formValues
+  /**
+   * The URL is the source of truth for what is shown in the search results.
+   *
+   * When the URL changes, the URL is parsed and the query is transformed into an elastic DSL query.
+   */
+  const searchFromRoute = (newRoute: RouteLocation) => {
+    searchTerm.value = getSingleQueryStringValue(newRoute.query, 'q') || ''
+    page.value =
+      parseInt(getSingleQueryStringValue(newRoute.query, 'page'), 10) || 1
+
+    filterForm.value = getFiltersFromRoute(newRoute)
 
     getSearchResults()
   }
 
+  const appliedFilters = computed(() => {
+    return getFiltersFromRoute(route)
+  })
+
   onMounted(() => {
     // Read the url on first mount to kick of the initial search
     searchFromRoute(route)
@@ -369,6 +375,7 @@ export default (
     results,
     suggestions,
     filterForm,
+    appliedFilters,
     submitSearch,
     goToPage,
     page,