feat: APPS-1982 Add ES queries and hook filters on staff and services…

…orresources index pages (#522)

* chore: fetch staff list with details for indexing in elastic search

* chore:initial commit

* initial commit

* feat: add ES aggs search query

* fix: use search-genericon staff listing page with aggs data from ES

* fix: add listingfilter util method and update aggs query to filter on section handle

* fix: Add search config

* chore: update package version

* fix: update package version

* feat: sync search data with craft page entries

* chore: clean up files

gql/queries/StaffListwithfulldetail.gql.example

@@ -0,0 +1,51 @@
+#import "~/gql/fragments/Image"
+query StaffListwithfuldetail {
+    entries(section: "staffMember", orderBy: "nameLast") {
+        ... on staffMember_staffMember_Entry {
+            id
+            typehandle
+            sectionHandle
+            title
+            image: staffPortrait {
+                ...Image
+            }
+            to: slug
+            _id: slug
+            uri
+            nameFirst
+            nameLast
+            alternativeName {
+                ... on alternativeName_alternativeName_BlockType {
+                    fullName
+                    languageAltName
+                }
+            }
+            jobTitle: staffMemberJobTitle
+            departments: staffDepartment(orderBy: "level") {
+                id
+                title
+            }
+            locations: staffAssociatedLocations {
+                title
+                to: uri
+                id
+            }
+            pronouns
+            email
+            phone: phoneNumber
+            consultation: bookAConsultation
+            topics: askMeAbout {
+                title
+                id
+            }
+            academicDepartments {
+                id
+                title
+            }
+            biography
+            subjectLibrarian
+            orcid: orcidId
+            publications
+        }
+    }
+}

pages/about/staff/index.vue

@@ -1,24 +1,15 @@
 <template>
     <main class="page page-staff">
         <masthead-secondary title="Staff Directory" />
-
-        <section-wrapper class="search-container">
-            <div class="empty-search-box" />
-            <div class="input-indicator" />
-            <div class="filters">
-                <div />
-                <div />
-                <div />
-            </div>
-            <!-- TODO Add SearchGenric here when complete
+        <!-- TODO Add SearchGenric here when complete
                 Filter by location, department, subject libarian -->
-            <!-- <search-generic search-type="about"
-                    :filters="searchFilters.filters"
-                    :view-modes="searchFilters.views"
-                    class="generic-search"
-                    @view-mode-change="viewModeChanger"
-            /> -->
-        </section-wrapper>
+
+        <search-generic
+            search-type="about"
+            :filters="searchFilters"
+            class="generic-search"
+            @search-ready="getSearchData"
+        />
 
         <section-wrapper theme="divider">
             <divider-way-finder />
@@ -70,18 +61,61 @@
 // Helpers
 import _get from "lodash/get"
 
+// Utilities
+import getListingFilters from "~/utils/getListingFilters"
+import config from "~/utils/searchConfig"
+
 // gql
 import STAFF_LIST from "~/gql/queries/StaffList"
+// import STAFF_LIST_WITH_DETAIL from "~/gql/queries/StaffListwithfulldetail"
 
 export default {
-    async asyncData({ $graphql, params }) {
-        console.log("live preview enters staff list")
-        const data = await $graphql.default.request(STAFF_LIST, {
-            uri: params.path,
-        })
+    async asyncData({ $graphql, params, $dataApi }) {
+        console.log("live preview  staff list")
+
+        const searchAggsResponse = await $dataApi.getAggregations(
+            config.staffFilters,
+            "staffMember"
+        )
+
+        console.log(
+            "Search Aggs Response: " + JSON.stringify(searchAggsResponse)
+        )
+        // Write a helper function for returning generic filters and doing the reduce part
+
+        const data = await $graphql.default.request(STAFF_LIST)
+        console.log("Craft Data:" + JSON.stringify(data))
+        const allResults = await $dataApi.keywordSearchWithFilters(
+            "*:*",
+            "staffMember",
+            [],
+            "nameLast",
+            ["*"]
+        )
+        console.log(
+            "Use this data when the page loads: " + JSON.stringify(allResults)
+        )
+        /*const datawithfulldetail = await $graphql.default.request(
+            STAFF_LIST_WITH_DETAIL
+        )
+
+        console.log(
+            "staff list for indexing: " +
+                JSON.stringify(datawithfulldetail.entries)
+        )*/
 
         return {
             page: data,
+            searchFilters: getListingFilters(
+                searchAggsResponse,
+                config.staffFilters
+            ),
+        }
+    },
+    data() {
+        return {
+            //searchFilters,
+            //selectedView: this.$route.query.view,
         }
     },
     computed: {
@@ -96,6 +130,53 @@ export default {
             })
         },
     },
+    methods: {
+        async getSearchData(data) {
+            console.log("from search-generic: " + JSON.stringify(data))
+            console.log(config.staff.resultFields)
+            const filters = this.parseFilters(data)
+            /* let parseFilterQuery = this.parseFilters(data)
+            if (parseFilterQuery.length == 0) return*/
+            const results = await this.$dataApi.keywordSearchWithFilters(
+                "*:*",
+                "staffMember",
+                filters,
+                "nameLast",
+                config.staff.resultFields
+            )
+            console.log(results)
+            if (results && results.hits && results.hits.total.value > 0)
+                this.page.entries = this.parseResults(results.hits.hits)
+        },
+
+        parseFilters(data) {
+            console.log("comoonent filetsr data: " + Object.values(data))
+            if (Object.values(data).length == 0) return []
+            let objArray = []
+            for (const key in data) {
+                if (data[key][0]) {
+                    let obj = {}
+                    obj["esFieldName"] = key
+                    obj["value"] = data[key][0]
+                    objArray.push(obj)
+                }
+            }
+            return objArray
+        },
+        parseResults(hits = []) {
+            console.log("checking results data:" + JSON.stringify(hits[0]))
+
+            return hits.map((obj) => {
+                console.log(obj["_source"]["image"])
+                return {
+                    ...obj["_source"],
+                    to: `/about/staff/${obj["_source"].to}`,
+                    image: obj["_source"]["image"], //_get(obj["_source"]["image"], "image[0]", null),
+                    staffName: `${obj["_source"].nameFirst} ${obj["_source"].nameLast}`,
+                }
+            })
+        },
+    },
 }
 </script>
 

pages/help/services-resources/index.vue

@@ -1,5 +1,11 @@
 <template lang="html">
     <div class="page page-help">
+        <search-generic
+            search-type="about"
+            :filters="searchFilters"
+            class="generic-search"
+        />
+        <br>
         <h3>Services and Resources</h3>
         <nuxt-link
             v-for="item in parsedServiceAndResourceList"
@@ -23,6 +29,7 @@
                 v-html="item.title"
             />
         </nuxt-link>
+        <br>
     </div>
 </template>
 
@@ -31,8 +38,20 @@
 import SERVICE_RESOURCE_WORKSHOPSERIES_LIST from "~/gql/queries/ServiceResourceWorkshopSeriesList"
 import HELP_TOPIC_LIST from "~/gql/queries/HelpTopicList"
 
+// Utilities
+import getListingFilters from "~/utils/getListingFilters"
+import config from "~/utils/searchConfig"
+
 export default {
-    async asyncData({ $graphql, params }) {
+    async asyncData({ $graphql, params, $dataApi }) {
+        const searchAggsResponse = await $dataApi.getAggregations(
+            config.serviceOrResourceFilters,
+            "serviceOrResource"
+        )
+
+        console.log(
+            "Search Aggs Response: " + JSON.stringify(searchAggsResponse)
+        )
         const data = await $graphql.default.request(
             SERVICE_RESOURCE_WORKSHOPSERIES_LIST,
             {
@@ -45,6 +64,10 @@ export default {
         return {
             page: data,
             helpTopic: helpTopicData,
+            searchFilters: getListingFilters(
+                searchAggsResponse,
+                config.serviceOrResourceFilters
+            ),
         }
     },
     computed: {

pages/index.vue

@@ -7,9 +7,7 @@
         <h4>Search Responsee</h4>
         <p>{{ searchResponse }}</p-->
         <section-wrapper theme="divider">
-            <divider-way-finder
-                color="help"
-            />
+            <divider-way-finder color="help" />
         </section-wrapper>
 
         <section-wrapper>
@@ -24,9 +22,7 @@
         </section-wrapper>
 
         <section-wrapper theme="divider">
-            <divider-way-finder
-                color="visit"
-            />
+            <divider-way-finder color="visit" />
         </section-wrapper>
 
         <section-wrapper>
@@ -57,9 +53,7 @@
         />
 
         <section-wrapper theme="divider">
-            <divider-way-finder
-                color="about"
-            />
+            <divider-way-finder color="about" />
         </section-wrapper>
 
         <section-wrapper>
@@ -104,9 +98,9 @@ export default {
         //const data = await this.$graphql(QUERY);
 
         const mapping = await $dataApi.getMapping()
-        // console.log(JSON.stringify(mapping))
-        const searchResponse = await $dataApi.keywordSearch("*")
-        // console.log("Search Response: " + JSON.stringify(searchResponse))
+        console.log(JSON.stringify(mapping))
+        const searchResponse = await $dataApi.siteSearch("test")
+        console.log("Search Response: " + JSON.stringify(searchResponse))
         const mockCard = {
             to: "/help/foo/bar/",
             title: "Example Service",
@@ -121,7 +115,8 @@ export default {
                 { ...mockCard, to: "/help/foo/fred/" },
             ],
             sectionTitle: "Get Help with",
-            sectionSummary: "Need guidance on how to make the most of UCLA Libraries? Below are common areas for which we offer services, resources, workshops and more.",
+            sectionSummary:
+                "Need guidance on how to make the most of UCLA Libraries? Below are common areas for which we offer services, resources, workshops and more.",
             to: "/help/foo/bar",
         }
 
@@ -214,5 +209,4 @@ export default {
         margin: var(--unit-vertical-gap) auto;
     }
 }
-
 </style>