feat: "type" filter for Services & Resources (#736)

* feat: "type" filter for Services & Resources * fix: code review fixes
UCLALibrary · Sep 12, 2023 · 8fc6712 · 8fc6712 · github-actions · Sep 12, 2023
1 parent 4f46dc9
commit 8fc6712
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 36 deletions.
diff --git a/gql/queries/ServiceOrResourceOrWorkshopDetail.gql b/gql/queries/ServiceOrResourceOrWorkshopDetail.gql
@@ -8,6 +8,7 @@ query ServiceOrResourceOrWorkshopDetail($slug: [String!]) {
             sectionHandle
             slug
             uri
+            serviceOrResourceType
             buttonUrl {
                 ... on buttonUrl_button_BlockType {
                     buttonText

diff --git a/pages/help/_slug.vue b/pages/help/_slug.vue
@@ -83,6 +83,10 @@ export default {
         }
         // //console.log("Data fetched: " + JSON.stringify(data))
 
+        if (data.entry) {
+            data.entry.serviceOrResourceType = "help topic"
+        }
+
         return {
             page: _get(data, "entry", {}),
         }

diff --git a/pages/help/services-resources/_slug.vue b/pages/help/services-resources/_slug.vue
@@ -239,6 +239,7 @@ export default {
             )*/
             if (data.workshopSeries) {
                 data.workshopSeries.sectionHandle = "workshopSeries"
+                data.workshopSeries.serviceOrResourceType = "workshop series"
                 /*console.log(
                     "what is workshopseries sectionHandle in ES? " +
                         data.workshopSeries.sectionHandle

diff --git a/pages/help/services-resources/index.vue b/pages/help/services-resources/index.vue
@@ -13,6 +13,7 @@
         <search-generic
             search-type="help"
             class="generic-search"
+            :filters="searchFilters"
             :search-generic-query="searchGenericQuery"
             :placeholder="parsedPlaceholder"
             @search-ready="getSearchData"
@@ -59,7 +60,7 @@
                 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
@@ -123,7 +124,9 @@
 <script>
 // HELPERS
 import _get from "lodash/get"
+import getListingFilters from "~/utils/getListingFilters"
 import sortByTitle from "~/utils/sortByTitle"
+import queryFilterHasValues from "~/utils/queryFilterHasValues"
 import removeTags from "~/utils/removeTags"
 // GQL
 import SERVICE_RESOURCE_WORKSHOPSERIES_LIST from "~/gql/queries/ServiceResourceWorkshopSeriesList"
@@ -132,24 +135,16 @@ import HELP_TOPIC_LIST from "~/gql/queries/HelpTopicList"
 import config from "~/utils/searchConfig"
 export default {
     async asyncData({ $graphql, $elasticsearchplugin }) {
-        /*console.log(
-            "In asyncdata hook  servicesorresourcesorworskhoporhelptopic list"
-        )*/
-
         let pageAsyncData = await $graphql.default.request(
             SERVICE_RESOURCE_WORKSHOPSERIES_LIST
         )
         if (
             pageAsyncData.externalResource &&
             pageAsyncData.externalResource.length > 0
         ) {
-            //console.log("External Resource indexing:")
             for (let externalResource of pageAsyncData.externalResource) {
-                /*console.log(
-                    "External Resource indexing:" + externalResource.slug
-                )*/
                 await $elasticsearchplugin.index(
-                    externalResource,
+                    {...externalResource, serviceOrResourceType: "external resource"},
                     externalResource.slug
                 )
             }
@@ -168,35 +163,44 @@ export default {
             noResultsFound: false,
             summaryData: {},
             helpTopic: {},
+            searchFilters: [],
             hits: [],
             searchGenericQuery: {
                 queryText: this.$route.query.q || "",
+                queryFilters:
+                    (this.$route.query.filters &&
+                        JSON.parse(this.$route.query.filters)) ||
+                    {},
             },
         }
     },
     async fetch() {
-        /*console.log(
-            "In fetch hook  servicesorresourcesorworskhoporhelptopic list"
-        )*/
         this.page = {}
         this.hits = []
         this.helptopic = {}
-        if (this.$route.query.q && this.$route.query.q !== "") {
-            //console.log("in router query in fetch call")
+        if (
+            (this.$route.query.q && this.$route.query.q !== "") ||
+            (this.$route.query.filters &&
+                queryFilterHasValues(
+                    this.$route.query.filters,
+                    config.serviceOrResources.filters
+                ))
+        ) {
             this.page = {}
             this.hits = []
             this.helptopic = {}
             const results = await this.$dataApi.keywordSearchWithFilters(
                 this.$route.query.q || "*",
                 config.serviceOrResources.searchFields,
                 "(sectionHandle:serviceOrResource OR sectionHandle:workshopSeries OR sectionHandle:helpTopic) OR (sectionHandle:externalResource AND displayEntry:yes)",
-                [],
+                (this.$route.query.filters &&
+                    JSON.parse(this.$route.query.filters)) ||
+                    {},
                 config.serviceOrResources.sortField,
                 config.serviceOrResources.orderBy,
                 config.serviceOrResources.resultFields,
                 []
             )
-            //console.log("fetch method ES results:" + JSON.stringify(results))
             if (results && results.hits && results.hits.total.value > 0) {
                 this.hits = results.hits.hits
                 this.noResultsFound = false
@@ -206,6 +210,7 @@ export default {
             }
             this.searchGenericQuery = {
                 queryText: this.$route.query.q || "",
+                queryFilters: (this.$route.query.filters && JSON.parse(this.$route.query.filters)) || {},
             }
             const getSummaryData = await this.$graphql.default.request(
                 SERVICE_RESOURCE_WORKSHOPSERIES_LIST
@@ -269,11 +274,9 @@ export default {
             }
         },
         parsedServiceAndResourceList() {
-            //console.log("static mode what is parsedServiceAndResourceList")
             let externalResourcesDisplay = (
                 this.page.externalResource || []
             ).filter((obj) => obj.displayEntry === "yes")
-            console.log(externalResourcesDisplay)
             return [
                 ...(this.page.serviceOrResource || []),
                 ...(this.page.workshopseries || []),
@@ -303,31 +306,31 @@ export default {
             return `Search ${this.summaryData.title}`
         },
         parseHitsResults() {
-            /*console.log(
-                "ParseHitsResults checking results data:" +
-                    JSON.stringify(this.hits)
-            )*/
             return this.parseHits()
         },
     },
     watch: {
         "$route.query": "$fetch",
         "$route.query.q"(newValue) {
-            //console.log("watching querytEXT:" + newValue)
             // if (newValue === "") this.hits = []
         },
     },
     async mounted() {
-        //console.log("In mounted")
+        this.setFilters()
     },
     methods: {
+        async setFilters() {
+            const searchAggsResponse = await this.$dataApi.getAggregations(
+                config.serviceOrResources.filters,
+                "serviceOrResource OR workshopSeries OR helpTopic OR externalResource",
+            )
+            this.searchFilters = getListingFilters(
+                searchAggsResponse,
+                config.serviceOrResources.filters
+            )
+        },
         parseHits() {
-            //console.log("static mode what is parseHits")
             return this.hits.map((obj) => {
-                /*console.log(
-                    "what should be the category?:" +
-                        obj["_source"].sectionHandle
-                )*/
                 return {
                     title: obj["_source"].title,
                     sectionHandle: obj["_source"].sectionHandle,
@@ -351,12 +354,11 @@ export default {
             })
         },
         async getSearchData(data) {
-            // //console.log("from search-generic: " + JSON.stringify(data))
-            // //console.log(config.serviceOrResources.resultFields)
             this.$router.push({
                 path: "/help/services-resources",
                 query: {
                     q: data.text,
+                    filters: JSON.stringify(data.filters),
                 },
             })
         },
@@ -366,5 +368,8 @@ export default {
 
 <style lang="scss" scoped>
 .page-help {
+        ::v-deep label.label {
+            text-transform: capitalize;
+        }
 }
 </style>
diff --git a/plugins/data-api.js b/plugins/data-api.js
@@ -285,10 +285,9 @@ export default function ({ $config }, inject) {
                 body: JSON.stringify({
                     size: 0,
                     query: {
-                        match: {
-                            sectionHandle: {
-                                query: sectionHandle,
-                            },
+                        query_string: {
+                            query: sectionHandle,
+                            default_field: "sectionHandle"
                         },
                     },
                     aggs: {

diff --git a/utils/searchConfig.js b/utils/searchConfig.js
@@ -72,6 +72,13 @@ const config = {
             "uri",
             "type",
         ],
+        filters: [
+            {
+                label: "Category",
+                esFieldName: "serviceOrResourceType.keyword",
+                inputType: "checkbox",
+            },
+        ],
         sortField: "title.keyword",
         orderBy: "asc",
     },