feat: APPS-2054 add search to accessCollections index page (#732)

* feat: add search to accessCOllections index page * await * add is and sectionHandle * update icollection access index * comment out for check * update export default * add test * update to collection * update async * feat: updates to elasticsearchplugin and data-api to fix search * fix: get the json from the fetch promise * fix: add few more missing peices for search to work on access collection index * fix: add computed property parseHitResults and add display resulyts count to the template * fix: append ?test to url in the test * fix: use different filed for news category initial commit * fix: news category, as category is of type text in es index due to category field mapped to text fileds like sectionhandle * fix: remove category before indexing and add it back for the page data * fix: revert nuxt.config change --------- Co-authored-by: pghorpade <pghorpade@library.ucla.edu>
UCLALibrary · Sep 12, 2023 · 81cd7fc · 81cd7fc · github-actions · Sep 12, 2023
1 parent 8fc6712
commit 81cd7fc
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 69 deletions.
diff --git a/cypress/e2e/articlenewslistingpage.cy.js b/cypress/e2e/articlenewslistingpage.cy.js
@@ -17,7 +17,7 @@ describe("Article News Listing page", () => {
     })
 
     it("Visit News Article Listing page filter by category", () => {
-        cy.visit('/about/news?q=&filters=%7B"category.title.keyword"%3A%5B"Featured"%5D%7D')
+        cy.visit('/about/news?q=&filters=%7B"articleCategory.title.keyword"%3A%5B"Featured"%5D%7D')
 
         cy.get ('h2.about-results').should("be.visible")
     })

diff --git a/cypress/e2e/collectionsaccesspage.cy.js b/cypress/e2e/collectionsaccesspage.cy.js
@@ -11,4 +11,14 @@ describe("Access Collection page", () => {
         )
         cy.percySnapshot({ widths: [768, 992, 1200] })
     })
+    it("Search Found", () => {
+        cy.visit("/collections/access?q=test")
+        cy.get(".logo-ucla").should("be.visible")
+        cy.get("input[type=search]").should(
+            "have.value",
+            "test"
+        )
+        cy.get("h2.about-results").invoke("text").should("not.be.empty")
+        //cy.percySnapshot({ widths: [768, 992, 1200] })
+    })
 })
diff --git a/gql/queries/CollectionsAccessList.gql b/gql/queries/CollectionsAccessList.gql
@@ -4,9 +4,12 @@ query AccessCollectionsListing {
         text: summary
         ... on listingAccessCollections_listingAccessCollections_Entry {
             accessCollections(orderBy: "title") {
+                id
                 title
+                slug
                 text: summary
                 uri
+                sectionHandle
                 externalResourceUrl
                 iconName: illustrationsResourcesAndServices
                 ... on externalResource_externalResource_Entry {

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -97,7 +97,7 @@ export default {
      */
     generate: {
         // exclude is for npm run genereate uncomment for local builds
-        // exclude:[/^\/help/,/^\/collections/,/^\/about/,/^\/give/,/^\/impact/],
+        // exclude:[/^\/help/,/^\/visit/,/^\/give/,/^\/help/,/^\/give/,/^\/impact/],
         fallback: "404.html",
         interval: 500,
         concurrency: 10,

diff --git a/pages/about/news/_slug.vue b/pages/about/news/_slug.vue
@@ -1,5 +1,8 @@
 <template lang="html">
-    <main id="main" class="page page-news-detail">
+    <main
+        id="main"
+        class="page page-news-detail"
+    >
         <nav-breadcrumb
             to="/about/news"
             :title="page.title"
@@ -35,16 +38,25 @@
         </section-wrapper>
 
         <section-wrapper theme="divider">
-            <divider-way-finder class="divider" color="about" />
+            <divider-way-finder
+                class="divider"
+                color="about"
+            />
         </section-wrapper>
 
-        <flexible-blocks class="flexible-content" :blocks="page.blocks" />
+        <flexible-blocks
+            class="flexible-content"
+            :blocks="page.blocks"
+        />
 
         <section-wrapper
             v-if="parsedAssociatedStaffMember.length > 0"
             theme="divider"
         >
-            <divider-way-finder class="divider" color="about" />
+            <divider-way-finder
+                class="divider"
+                color="about"
+            />
         </section-wrapper>
 
         <section-wrapper
@@ -78,8 +90,18 @@ export default {
         if (!data.entry) {
             error({ statusCode: 404, message: "Page not found" })
         }
-        if (data) await $elasticsearchplugin.index(data.entry, params.slug)
-        // //console.log("Data fetched: " + JSON.stringify(data))
+        if (data) {
+            if (data.entry) {
+                data.entry.articleCategory = data.entry.category
+                delete data.entry.category
+
+                await $elasticsearchplugin.index(data.entry, params.slug)
+                data.entry.category = data.entry.articleCategory
+            }
+            /*console.log(
+                "News Data fetched: " + JSON.stringify(data.entry.category)
+            )*/
+        }
 
         return {
             page: _get(data, "entry", {}),
@@ -103,8 +125,14 @@ export default {
     computed: {
         parsedByline() {
             let byline = (this.page.contributors || []).map((contributor) => {
-                if ((contributor.staffMember && contributor.staffMember.length > 0) || contributor.title)
-                return `${contributor.byline || ""} ${ contributor.title || contributor.staffMember[0].title}`
+                if (
+                    (contributor.staffMember &&
+                        contributor.staffMember.length > 0) ||
+                    contributor.title
+                )
+                    return `${contributor.byline || ""} ${
+                        contributor.title || contributor.staffMember[0].title
+                    }`
             })
             return byline.map((contributor) => {
                 return contributor
@@ -141,8 +169,8 @@ export default {
 
 <style lang="scss" scoped>
 .page-news-detail {
-.highlighted-news {
-    @include visually-hidden;
-}
+    .highlighted-news {
+        @include visually-hidden;
+    }
 }
 </style>
diff --git a/pages/collections/access/index.vue b/pages/collections/access/index.vue
@@ -12,29 +12,83 @@
         <masthead-secondary
             :title="page.title"
             :text="page.text"
-        >
-            <!-- TODO Add SearchGenric here when complete -->
-            <!-- search-generic
-                search-type="about"
-                class="generic-search"
-            />-->
-            <!-- :filters="searchFilters.filters"
-                :view-modes="searchFilters.views"
-                @view-mode-change="viewModeChanger" -->
-        </masthead-secondary>
-
-        <!-- TODO add divider once SearchGeneric is implemented -->
-        <!-- <section-wrapper theme="divider">
+        />
+
+        <search-generic
+            search-type="default"
+            class="generic-search"
+            :search-generic-query="searchGenericQuery"
+            placeholder="ACCESS COLLECTIONS"
+            @search-ready="getSearchData"
+        />
+
+        <section-wrapper theme="divider">
             <divider-way-finder class="search-margin" />
-        </section-wrapper> -->
+        </section-wrapper>
 
-        <section-wrapper>
+        <section-wrapper
+            v-show="
+                page.accessCollections && hits.length == 0 && !noResultsFound
+            "
+        >
             <section-cards-with-illustrations
                 class="section"
                 :items="parsedAccessCollections"
                 :is-horizontal="true"
             />
         </section-wrapper>
+        <section-wrapper v-show="hits && hits.length > 0">
+            <h2
+                v-if="$route.query.q"
+                class="about-results"
+            >
+                Displaying {{ hits.length }} results for
+                <strong><em>“{{ $route.query.q }}</em></strong>”
+            </h2>
+            <h2
+                v-else
+                class="about-results"
+            >
+                Displaying {{ hits.length }} results
+            </h2>
+            <section-cards-with-illustrations
+                class="section"
+                :items="parseHitsResults"
+                :is-horizontal="true"
+            />
+        </section-wrapper>
+
+        <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>
+                        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:
+                    </p>
+                    <ul>
+                        <li>
+                            <a
+                                href="https://www.library.ucla.edu/research-teaching-support/research-help"
+                            >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>
+                        </li>
+                    </ul>
+                </rich-text>
+            </div>
+        </section-wrapper>
 
         <section-wrapper>
             <divider-way-finder class="divider divider-way-finder" />
@@ -52,6 +106,7 @@
         </section-wrapper>
     </main>
 </template>
+
 <router>
   {
     alias: '/listing-collections/access',
@@ -66,24 +121,83 @@ import removeTags from "~/utils/removeTags"
 // GQL
 import ACCESS_COLLECTIONS from "~/gql/queries/CollectionsAccessList.gql"
 
+// UTILITIES
+import config from "~/utils/searchConfig"
+
 export default {
-    async asyncData({ $graphql }) {
-        const data = await $graphql.default.request(ACCESS_COLLECTIONS)
-        data.entry.accessCollections.forEach((element) => {
-            element.to = element.uri ? element.uri : element.externalResourceUrl
-            element.category =
-                element.workshopOrEventSeriesType === "help/services-resources"
-                    ? "workshop"
-                    : element.serviceOrResourceType
-                        ? element.serviceOrResourceType
-                        : element.typeHandle === "externalResource"
-                            ? "resource"
-                            : element.typeHandle === "generalContentPage"
+    async asyncData({ $graphql, $elasticsearchplugin }) {
+        console.log("In asyncData hook collectionsAccess list")
+
+        const pageAsyncData = await $graphql.default.request(ACCESS_COLLECTIONS)
+
+        if (
+            pageAsyncData.entry.accessCollections &&
+            pageAsyncData.entry.accessCollections.length > 0
+        ) {
+            for (let collection of pageAsyncData.entry.accessCollections) {
+                console.log("Collection indexing:" + collection.slug)
+                console.log("Collection:" + collection)
+                collection.searchType = "accessCollections"
+                collection.to = collection.uri
+                    ? collection.uri
+                    : collection.externalResourceUrl
+                collection.category =
+                    collection.workshopOrEventSeriesType ===
+                    "help/services-resources"
+                        ? "workshop"
+                        : collection.serviceOrResourceType
+                            ? collection.serviceOrResourceType
+                            : collection.typeHandle === "externalResource"
                                 ? "resource"
-                                : element.typeHandle
-        })
+                                : collection.typeHandle === "generalContentPage"
+                                    ? "resource"
+                                    : collection.typeHandle
+                await $elasticsearchplugin.index(collection, collection.slug)
+            }
+        }
+
+        return {
+            page: _get(pageAsyncData, "entry", {}),
+        }
+    },
+    data() {
         return {
-            page: _get(data, "entry", {}),
+            page: {},
+            noResultsFound: false,
+            hits: [],
+            searchGenericQuery: {
+                queryText: this.$route.query.q || "",
+            },
+        }
+    },
+    async fetch() {
+        this.hits = []
+        if (this.$route.query.q && this.$route.query.q !== "") {
+            const results = await this.$dataApi.keywordSearchWithFilters(
+                this.$route.query.q || "*",
+                config.accessCollections.searchFields,
+                "searchType:accessCollection",
+                [],
+                config.accessCollections.sortField,
+                config.accessCollections.orderBy,
+                config.accessCollections.resultFields,
+                []
+            )
+            this.hits = []
+            if (results && results.hits && results.hits.total.value > 0) {
+                this.hits = results.hits.hits
+                this.noResultsFound = false
+            } else {
+                this.hits = []
+                this.noResultsFound = true
+            }
+            this.searchGenericQuery = {
+                queryText: this.$route.query.q || "",
+            }
+        } else {
+            this.hits = []
+            this.noResultsFound = false
+            this.searchGenericQuery = { queryText: "" }
         }
     },
     head() {
@@ -122,6 +236,47 @@ export default {
                 }
             })
         },
+        parseHitsResults() {
+            /*console.log(
+                "ParseHitsResults checking results data:" +
+                    JSON.stringify(this.hits)
+            )*/
+            return this.parseHits()
+        },
+    },
+    fetchOnServer: false,
+    fetchKey: "collections-access",
+    watch: {
+        "$route.query": "$fetch",
+        "$route.query.q"(newValue) {
+            console.log("watching queryTEXT: " + newValue)
+            // if (newValue === "") this.hits = []
+        },
+    },
+    methods: {
+        parseHits() {
+            console.log("static mode what is parseHits")
+            return this.hits.map((obj) => {
+                console.log(
+                    "What should the category be?:" +
+                        obj["_source"].sectionHandle
+                )
+                return {
+                    ...obj["_source"],
+                    to: obj["_source"].externalResourceUrl
+                        ? obj["_source"].externalResourceUrl
+                        : `/${obj["_source"].uri}`,
+                }
+            })
+        },
+        getSearchData(data) {
+            this.$router.push({
+                path: "/collections/access",
+                query: {
+                    q: data.text,
+                },
+            })
+        },
     },
 }
 </script>

diff --git a/pages/help/services-resources/index.vue b/pages/help/services-resources/index.vue
@@ -372,4 +372,4 @@ export default {
             text-transform: capitalize;
         }
 }
-</style>
+</style>