feat: Add type filter to site search (#699)

* feat: Add type filter to site search * fix: refactor and fix json parsing * fix: section handle label for libguides * fix: Add mapping for content types to section handle * fix: Order the filters alphabetically
UCLALibrary · Apr 25, 2023 · d364c2c · d364c2c · github-actions · Apr 25, 2023
1 parent cb989ed
commit d364c2c
Show file tree

Hide file tree

Showing 10 changed files with 448 additions and 201 deletions.
diff --git a/pages/about/news/index.vue b/pages/about/news/index.vue
@@ -1,5 +1,8 @@
 <template>
-    <main id="main" class="page page-news">
+    <main
+        id="main"
+        class="page page-news"
+    >
         <masthead-secondary
             v-if="page.title"
             :title="page.title"
@@ -22,10 +25,10 @@
         <section-wrapper
             v-show="
                 page &&
-                page.featuredNews &&
-                page.featuredNews.length &&
-                hits.length == 0 &&
-                !noResultsFound
+                    page.featuredNews &&
+                    page.featuredNews.length &&
+                    hits.length == 0 &&
+                    !noResultsFound
             "
             class="section-no-top-margin"
         >
@@ -45,10 +48,10 @@
             <divider-general
                 v-if="
                     page &&
-                    page.featuredNews &&
-                    page.featuredNews.length &&
-                    hits.length == 0 &&
-                    !noResultsFound
+                        page.featuredNews &&
+                        page.featuredNews.length &&
+                        hits.length == 0 &&
+                        !noResultsFound
                 "
             />
 
@@ -62,10 +65,10 @@
         <section-wrapper
             v-show="
                 page &&
-                page.featuredNews &&
-                page.featuredNews.length &&
-                hits.length == 0 &&
-                !noResultsFound
+                    page.featuredNews &&
+                    page.featuredNews.length &&
+                    hits.length == 0 &&
+                    !noResultsFound
             "
             theme="divider"
         >
@@ -84,45 +87,49 @@
             v-show="hits && hits.length > 0"
             class="section-no-top-margin"
         >
-            <h2 v-if="$route.query.q" class="about-results">
+            <h2
+                v-if="$route.query.q"
+                class="about-results"
+            >
                 Displaying {{ hits.length }} results for
-                <strong
-                    ><em>“{{ $route.query.q }}”</em></strong
-                >
+                <strong><em>“{{ $route.query.q }}”</em></strong>
             </h2>
-            <h2 v-else class="about-results">
+            <h2
+                v-else
+                class="about-results"
+            >
                 Displaying {{ hits.length }} results
             </h2>
             <section-staff-article-list :items="parseHitsResults" />
         </section-wrapper>
 
         <!-- NO RESULTS -->
-        <section-wrapper v-show="noResultsFound" class="section-no-top-margin">
+        <section-wrapper
+            v-show="noResultsFound"
+            class="section-no-top-margin"
+        >
             <div class="error-text">
                 <rich-text>
                     <h2>Search for “{{ $route.query.q }}” not found.</h2>
                     <p>
                         We can’t find the term you are looking for on this page,
-                        but we're here to help. <br />
+                        but we're here to help. <br>
                         Try searching the whole site from
-                        <a href="https://library.ucla.edu">UCLA Library Home</a
-                        >, or try one of the these regularly visited links:
+                        <a href="https://library.ucla.edu">UCLA Library Home</a>, or try one of the these regularly visited links:
                     </p>
                     <ul>
                         <li>
                             <a
                                 href="https://www.library.ucla.edu/research-teaching-support/research-help"
-                                >Research Help</a
-                            >
+                            >Research Help</a>
                         </li>
                         <li>
                             <a href="/help/services-resources/ask-us">Ask Us</a>
                         </li>
                         <li>
                             <a
                                 href="https://www.library.ucla.edu/use/access-privileges/disability-resources"
-                                >Accessibility Resources</a
-                            >
+                            >Accessibility Resources</a>
                         </li>
                     </ul>
                 </rich-text>
@@ -212,7 +219,9 @@ export default {
                 query_text,
                 config.newsIndex.searchFields,
                 "sectionHandle:article",
-                JSON.parse(this.$route.query.filters) || {},
+                (this.$route.query.filters &&
+                    JSON.parse(this.$route.query.filters)) ||
+                    {},
                 config.newsIndex.sortField,
                 config.newsIndex.orderBy,
                 config.newsIndex.resultFields,

diff --git a/pages/about/programs/index.vue b/pages/about/programs/index.vue
@@ -1,8 +1,18 @@
 <template>
-    <main id="main" class="page page-programs">
-        <nav-breadcrumb to="/about" :title="page.title" parent-title="About" />
+    <main
+        id="main"
+        class="page page-programs"
+    >
+        <nav-breadcrumb
+            to="/about"
+            :title="page.title"
+            parent-title="About"
+        />
 
-        <masthead-secondary :title="page.title" :text="page.text" />
+        <masthead-secondary
+            :title="page.title"
+            :text="page.text"
+        />
 
         <search-generic
             search-type="about"
@@ -15,23 +25,26 @@
         <section-wrapper
             v-show="
                 page &&
-                page.featuredPrograms &&
-                page.featuredPrograms.length &&
-                hits.length == 0 &&
-                !noResultsFound
+                    page.featuredPrograms &&
+                    page.featuredPrograms.length &&
+                    hits.length == 0 &&
+                    !noResultsFound
             "
             theme="divider"
         >
-            <divider-way-finder class="search-margin" color="about" />
+            <divider-way-finder
+                class="search-margin"
+                color="about"
+            />
         </section-wrapper>
 
         <section-wrapper
             v-show="
                 page &&
-                page.featuredPrograms &&
-                page.featuredPrograms.length &&
-                hits.length == 0 &&
-                !noResultsFound
+                    page.featuredPrograms &&
+                    page.featuredPrograms.length &&
+                    hits.length == 0 &&
+                    !noResultsFound
             "
             class="section-no-top-margin"
         >
@@ -66,9 +79,9 @@
         <section-wrapper
             v-show="
                 parsedProgramsList &&
-                parsedProgramsList.length > 0 &&
-                hits.length == 0 &&
-                !noResultsFound
+                    parsedProgramsList.length > 0 &&
+                    hits.length == 0 &&
+                    !noResultsFound
             "
             section-title="All Programs & Initiatives"
         >
@@ -80,45 +93,49 @@
             v-show="hits && hits.length > 0"
             class="section-no-top-margin"
         >
-            <h2 v-if="$route.query.q" class="about-results">
+            <h2
+                v-if="$route.query.q"
+                class="about-results"
+            >
                 Displaying {{ hits.length }} results for
-                <strong
-                    ><em>“{{ $route.query.q }}</em></strong
-                >”
+                <strong><em>“{{ $route.query.q }}</em></strong>”
             </h2>
-            <h2 v-else class="about-results">
+            <h2
+                v-else
+                class="about-results"
+            >
                 Displaying {{ hits.length }} results
             </h2>
             <section-staff-article-list :items="parseHitsResults" />
         </section-wrapper>
 
         <!-- NO RESULTS -->
-        <section-wrapper v-show="noResultsFound" class="section-no-top-margin">
+        <section-wrapper
+            v-show="noResultsFound"
+            class="section-no-top-margin"
+        >
             <div class="error-text">
                 <rich-text>
                     <h2>Search for “{{ $route.query.q }}” not found.</h2>
                     <p>
                         We can’t find the term you are looking for on this page,
-                        but we're here to help. <br />
+                        but we're here to help. <br>
                         Try searching the whole site from
-                        <a href="https://library.ucla.edu">UCLA Library Home</a
-                        >, or try one of the these regularly visited links:
+                        <a href="https://library.ucla.edu">UCLA Library Home</a>, or try one of the these regularly visited links:
                     </p>
                     <ul>
                         <li>
                             <a
                                 href="https://www.library.ucla.edu/research-teaching-support/research-help"
-                                >Research Help</a
-                            >
+                            >Research Help</a>
                         </li>
                         <li>
                             <a href="/help/services-resources/ask-us">Ask Us</a>
                         </li>
                         <li>
                             <a
                                 href="https://www.library.ucla.edu/use/access-privileges/disability-resources"
-                                >Accessibility Resources</a
-                            >
+                            >Accessibility Resources</a>
                         </li>
                     </ul>
                 </rich-text>
@@ -142,6 +159,7 @@
 // UTILITIES
 import getListingFilters from "~/utils/getListingFilters"
 import config from "~/utils/searchConfig"
+import queryFilterHasValues from "~/utils/queryFilterHasValues"
 
 // HELPERS
 import _get from "lodash/get"
@@ -182,7 +200,11 @@ export default {
         this.hits = []
         if (
             (this.$route.query.q && this.$route.query.q !== "") ||
-            this.$route.query.filters
+            (this.$route.query.filters &&
+                queryFilterHasValues(
+                    this.$route.query.filters,
+                    config.programsList.filters
+                ))
         ) {
             if (!this.page.title) {
                 const data = await this.$graphql.default.request(PROGRAMS_LIST)
@@ -196,7 +218,9 @@ export default {
                 query_text,
                 config.programsList.searchFields,
                 "sectionHandle:program",
-                JSON.parse(this.$route.query.filters) || {},
+                (this.$route.query.filters &&
+                    JSON.parse(this.$route.query.filters)) ||
+                    {},
                 config.programsList.sortField,
                 config.programsList.orderBy,
                 config.programsList.resultFields,
@@ -309,29 +333,6 @@ export default {
         this.setFilters()
     },
     methods: {
-        queryFilterHasValues() {
-            if (!this.$route.query.filters) return false
-            let routeQueryFilters = JSON.parse(this.$route.query.filters)
-            // //console.log(
-            //     "is route query exixts:" + JSON.stringify(routeQueryFilters)
-            // )
-            let configFilters = config.programsList.filters
-            for (const filter of configFilters) {
-                if (
-                    Array.isArray(routeQueryFilters[filter.esFieldName]) &&
-                    routeQueryFilters[filter.esFieldName].length > 0
-                ) {
-                    return true
-                } else if (
-                    routeQueryFilters[filter.esFieldName] &&
-                    !Array.isArray(routeQueryFilters[filter.esFieldName]) &&
-                    routeQueryFilters[filter.esFieldName] != ""
-                ) {
-                    return true
-                }
-            }
-            return false
-        },
         async setFilters() {
             const searchAggsResponse = await this.$dataApi.getAggregations(
                 config.programsList.filters,

diff --git a/pages/about/staff/index.vue b/pages/about/staff/index.vue
@@ -211,7 +211,9 @@ export default {
                 query_text,
                 config.staff.searchFields,
                 "sectionHandle:staffMember",
-                JSON.parse(this.$route.query.filters) || {},
+                (this.$route.query.filters &&
+                    JSON.parse(this.$route.query.filters)) ||
+                    {},
                 config.staff.sortField,
                 config.staff.orderBy,
                 config.staff.resultFields,