henry-search 1.0.4 → 1.0.6

package/src/components/SearchDetail.vue

@@ -6,7 +6,7 @@ import { ref, onMounted, onUnmounted, computed } from 'vue'
 
 const props = defineProps({
     performanceId: {
-        type: Number,
+        type: String,
         required: true
     },
     indexName: {
@@ -29,11 +29,12 @@ onMounted(() => {
         'connectionTimeoutSeconds': 2
     })
 
-    client.collections('archived_performances').documents(props.performanceId).retrieve().then(function (results) {
+    client.collections(props.indexName).documents(props.performanceId).retrieve().then(function (results) {
         performance.value = results
         console.log('searchResults', performance.value)
-    }).catch(() => {
-        document.location = '/404'
+    }).catch((e) => {
+        console.log(e)
+        //document.location = '/404'
     })
 })
 
@@ -94,13 +95,13 @@ onMounted(() => {
         <div class="performance__headerData">
             <div><span class="performance__dataTitle">Season:</span><br/><a :href="createURL('season', performance.season)">{{ performance.season }}</a></div>
             <div><span class="performance__dataTitle">Orchestra/Ensemble:</span><br/>
-                <span v-for="orch, index in performance.orchestra">
-                    <a :href="createURL('orchestra', orch)">{{ orch + (index < performance.orchestra.length - 1 ? ";&nbsp;" : "") }}</a>
+                <span v-for="orch, index in performance.ensembles">
+                    <a :href="createURL('ensemble', orch)">{{ orch + (index < performance.ensembles.length - 1 ? ";&nbsp;" : "") }}</a>
                 </span>
             </div>
            <div><span class="performance__dataTitle">Conductor:</span><br/>
-                <span v-for="conductor, index in performance.conductor">
-                    <a :href="createURL('conductor', conductor)">{{ conductor + (index < performance.conductor.length - 1 ? ",&nbsp;" : "") }}</a>
+                <span v-for="conductor, index in performance.conductors">
+                    <a :href="createURL('conductors', conductor)">{{ conductor + (index < performance.conductors.length - 1 ? ",&nbsp;" : "") }}</a>
                 </span>
             </div>
             <div><span class="performance__dataTitle">Event Title:</span><br/>{{ performance.event_title && performance.event_title.length ? performance.event_title : '---' }}</div>
@@ -114,8 +115,7 @@ onMounted(() => {
         </div>
         <h4>Program</h4>
         <div class="performance__grid">
-            <template v-for="work, index in performance.work">
-                <!--header-->
+            <template v-for="work, index in performance.works">
                 <template v-if="index == 0">
                     <div class="performance__cell -header -first">Composer</div>
                     <div class="performance__cell -header">Works</div>
@@ -124,37 +124,41 @@ onMounted(() => {
                     <div class="performance__cell -header">Role</div>
                 </template>
 
-               <div :class="`performance__cell -first ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.work.length ? '-last' : ''}`"><a :href="createURL('work.composer', work.composer)">{{ work.composer }}</a></div>
-               <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.work.length ? '-last' : ''}`">
+               <div :class="`performance__cell -first ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                    <span v-for="composer, index in work.composers">
+                        <a :href="createURL('works.composers', work.composer)">{{ work.composers + (index < work.composers.length - 1 ? ",&nbsp;" : "") }}</a>
+                    </span>
+                </div>
+               <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
                     <span class="infoItem">
-                        <a :href="createURL('work.title', work.title)">{{ work.title }}</a><br/>
+                        <a :href="createURL('works.title', work.title)">{{ work.title }}</a><br/>
                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="work.has_recording">
                             <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                             <path d="M12.4268 6.99365C12.9669 7.53393 13.2703 8.2666 13.2703 9.03054C13.2703 9.79449 12.9669 10.5272 12.4268 11.0674" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>    
                     </span>
                     <span v-if="work.premiere" class="infoItem">Work Premiere:<br/>
-                        <a :href="createURL('work.premiere', work.premier)">{{ work.premiere }}</a>
+                        <a :href="createURL('works.premiere', work.premier)">{{ work.premiere }}</a>
                     </span><br/>
                     <span v-if="work.commission" class="infoItem">Commission:<br/>
-                        <a :href="createURL('work.commission', work.commission)">
+                        <a :href="createURL('works.commission', work.commission)">
                             {{ work.commission }}
                         </a>
                     </span><br/>
-                    <span v-if="work.encore" class="infoItem"><a :href="createURL('work.encore', work.encore)">Encore</a></span>
+                    <span v-if="work.encore" class="infoItem"><a :href="createURL('works.encore', work.encore)">Encore</a></span>
                 </div>
-                <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.work.length ? '-last' : ''}`">
+                <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
                     <span v-for="c in work.creator" class="infoItem">
-                        <a :href="createURL('work.creator.creator_name', c.creator_name)">{{ c.creator_name }}, {{ c.creator_role }}</a>
+                        <a :href="createURL('works.creator.creator_name', c.creator_name)">{{ c.creator_name }}, {{ c.creator_role }}</a>
                     </span>
                 </div>
-                <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.work.length ? '-last' : ''}`">
-                    <span v-for="a in work.artist" class="infoItem"><a :href="createURL('work.artist.artist_name', a.artist_name)">{{ a.artist_name }}</a></span>
+                <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                    <span v-for="a in work.artists" class="infoItem"><a :href="createURL('works.artists.name', a.name)">{{ a.name }}</a></span>
                 </div>
-               <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.work.length ? '-last' : ''}`">
-                    <span v-for="a in work.artist" class="infoItem"><a :href="createURL('work.artist.artist_role', a.artist_role)">{{ a.artist_role }}</a></span>
+               <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                    <span v-for="a in work.artists" class="infoItem"><a :href="createURL('works.artists.role', a.role)">{{ a.role }}</a></span>
                 </div>
             </template>
-        </div>
+        </div> 
     </div>
 </template>

package/src/components/SearchHistory.vue

@@ -1,27 +1,61 @@
 <script setup>
 
-const searchHistory = JSON.parse(sessionStorage.getItem('searchHistory'))
-const performanceHistory = searchHistory.filter((item) => {
-    let returnItem = false
-    Object.entries(item.uiState).forEach(([k, v]) => {
-        if (k == 'archived_performances' && !returnItem) {
-            returnItem = true
-        }
-    })
-    return returnItem
+const props = defineProps({
+    performanceIndex: {
+      type: String,
+      default: "archived_performances"
+    },
+    artistIndex: {
+        type: String,
+        default: "artists"
+    },
+    workIndex: {
+        type: String,
+        default: "works"
+    }
 })
 
+const searchHistory = JSON.parse(sessionStorage.getItem('searchHistory'))
+
+
+function filterHistory(indexName) {
+    if (searchHistory) {
+        return searchHistory.filter((item) => {
+            let returnItem = false
+            Object.entries(item.uiState).forEach(([k, v]) => {
+                if (k == indexName && !returnItem) {
+                    returnItem = true
+                }
+            })
+            return returnItem
+        })
+    } else {
+        return null
+    }
+    
+}
+
 function formatItem(state) {
     console.log(state)
     let searchName = state.query ? '"' + state.query + '"' : ""
     if (state.refinementList) {
         Object.entries(state.refinementList).forEach(([k1, v1]) => {
-            searchName += " " + v1 
+            console.log("v1", v1)
+            if (Array.isArray(v1)) {
+                searchName += " " + v1.join(", ") 
+            } else {
+                searchName += " " + v1;
+            }
+            
         })
     }
     if (state.menu) {
         Object.entries(state.menu).forEach(([k1, v1]) => {
-            searchName += " " + v1 
+            if (Array.isArray(v1)) {
+                searchName += " " + v1.join(", ") 
+            } else {
+                searchName += " " + v1;
+            }
         })
     }
     
@@ -32,9 +66,25 @@ function formatItem(state) {
 
 <template>
     <div class="performance__header"><h2>Search History</h2></div>
-    <h6>Performances</h6>
-    <div v-for="item in performanceHistory">
-        <a :href="item.link">{{ formatItem(item?.uiState['archived_performances']) }}</a><br/>
-        {{ item.date }}
+    <template v-if="searchHistory">
+        <div v-for="item, index in filterHistory(props.performanceIndex)">
+            <h6 v-if="index == 0">Performances</h6>
+            <a :href="item.link">{{ formatItem(item?.uiState[props.performanceIndex]) }}</a><br/>
+            {{ item.date }}
+        </div>
+        <div v-for="item, index in filterHistory(props.artistIndex)">
+            <h6 v-if="index == 0">Artists</h6>
+            <a :href="item.link">{{ formatItem(item?.uiState[props.artistIndex]) }}</a><br/>
+            {{ item.date }}
+        </div>
+        <div v-for="item, index in filterHistory(props.workIndex)">
+            <h6 v-if="index == 0">Works</h6>
+            <a :href="item.link">{{ formatItem(item?.uiState[props.workIndex]) }}</a><br/>
+            {{ item.date }}
+        </div>
+    </template>
+    <div v-else>
+        No current search history
     </div>
+
 </template>

package/src/components/SearchTab.vue

@@ -37,7 +37,7 @@
         },
         queryByFields: {
             type: String,
-            default: "work, season, orchestra, venue, event_types, notes, event_title"
+            default: "works, season, venue, event_types, notes, event_title"
         },
         sortField: {
             type: String,
@@ -105,10 +105,10 @@
     let currentQuery = null
 
     function toggleFilters() {
-        const wrapper = document.querySelector('.eventsSearch__filterRail')
-        const tabContent = document.querySelector('.tabs__content')
-        const leftPane = document.querySelector('.eventsSearch__results')
-        const toggleOnButton = document.getElementById(`${props.resultsTitle.toLowerCase()}_filterToggleOn`)
+        const wrapper = document.getElementById(`${props.indexName}_filterRail`)
+        const tabContent = document.getElementById(`${props.indexName}_tabs__content`)
+        const leftPane = document.getElementById(`${props.indexName}_eventsSearch__results`)
+        const toggleOnButton = document.getElementById(`${props.indexName}_filterToggleOn`)
         if (toggleOnButton) {
             toggleOnButton.classList.toggle('closed')
         }
@@ -134,14 +134,56 @@
             workFilters =  uiState[props.indexName].refinementList && Object.keys(uiState[props.indexName].refinementList).length !== 0 ? getWorkFilters(uiState[props.indexName].refinementList) : []
             showByWorks = Object.keys(workFilters).length !== 0
 
+            // update search history
+            let searchHistory = sessionStorage.getItem('searchHistory') ? JSON.parse(sessionStorage.getItem('searchHistory')) : []
+            // if only pagination, don't add to search history
+            if (uiState[props.indexName].page && !uiState[props.indexName].query && !uiState[props.indexName].refinementList && !uiState[props.indexName].menu) {
+                return
+            }
+            searchHistory = searchHistory.map((item) => {
+                // make sure that all queries aren't entered into the history as a user types each letter
+                if (uiState[props.indexName].query?.includes(item.query) && uiState[props.indexName].query != item.query) {
+                    return {
+                        date: new Date(),
+                        uiState: uiState,
+                        query: uiState[props.indexName].query,
+                        link: document.location.href
+                    }
+                } else {
+                    return item
+                }
+            })
+
+            //make sure we're not just adding pagination
+            let addState = true
+            searchHistory.forEach((item) => {
+                if (item.link.replace(/\&page=\d*/, "") == document.location.href.replace(/\&page=\d*/, "")) {
+                    addState = false
+                    return
+                }
+            })
+            
+            
+            if (addState && !(searchHistory.map((a) => a.link)).includes(document.location.href) && 
+                    document.location.search != '') {
+                searchHistory.push({
+                    date: new Date(),
+                    uiState: uiState,
+                    query: uiState[props.indexName].query,
+                    link: document.location.href
+                })
+            }
+        
+            //console.log('searchHistory', searchHistory, typeof searchHistory)
+            sessionStorage.setItem('searchHistory', JSON.stringify(searchHistory))
         }
     }
 
     function getWorkFilters(refinementList) {
         let returnFilters = {}
         Object.entries(refinementList).forEach(([k, v]) => {
-            if (k.includes('work')) {
-                let workAttribute = k.substring(k.indexOf('work.') + 5, k.length)
+            if (k.includes('works')) {
+                let workAttribute = k.substring(k.indexOf('works.') + 6, k.length)
                 const subFilter = {}
                 if (workAttribute.includes('.')) {
                     const workSubAttribute = workAttribute.substring(workAttribute.indexOf('.') + 1, workAttribute.length)
@@ -162,35 +204,7 @@
     function onStateChange({ uiState, setUiState }) {
         updateStateRefs(uiState)
         setUiState(uiState)
-        console.log('uiState', uiState)
-        let searchHistory = sessionStorage.getItem('searchHistory') ? JSON.parse(sessionStorage.getItem('searchHistory')) : []
-        searchHistory = searchHistory.map((item) => {
-            if (uiState[props.indexName].query.includes(item.query) && uiState[props.indexName].query != item.query) {
-                return {
-                    date: new Date(),
-                    uiState: uiState,
-                    query: uiState[props.indexName].query,
-                    link: document.location.href
-                }
-            } else {
-                return item
-            }
-        })
-        
-        if (!(searchHistory.map((a) => a.link)).includes(document.location.href) && 
-                document.location.search != '') {
-             searchHistory.push({
-                date: new Date(),
-                uiState: uiState,
-                query: uiState[props.indexName].query,
-                link: document.location.href
-            })
-        }
-       
-        console.log('searchHistory', searchHistory, typeof searchHistory)
-        sessionStorage.setItem('searchHistory', JSON.stringify(searchHistory))
-        
-       
+        //console.log('uiState', uiState)      
     }
 
     function setView() {
@@ -215,15 +229,26 @@
 
     function formatRefinement(refinement) {
         const attributeMap = {
-            "work.composer" : "Composer",
-            "work.title" : "Work",
-            "conductor" : "Conductor",
-            "orchestra" : "Orchestra",
-            "work.artist.artist_name" : "Artist",
+            "works.composers" : "Composer",
+            "works.title" : "Work",
+            "conductors" : "Conductor",
+            "ensembles" : "Orchestra",
+            "works.artists.name" : "Artist",
             "query" : "Keyword",
+            'works.artists.role': 'Instrument/Role',
+            'season': 'Season',
+            'event_title': 'Event Title',
+            'event_types': 'Series',
+            'venue': 'Venue',
+            'works.commission': 'Commission',
             'location.city': 'City',
             'location.country': 'Country',
-            'location.state': 'State'
+            'location.state': 'State',
+            'artist_name': 'Artist',
+            'artist_role': 'Instrument/Role',
+            'title': 'Work Title',
+            'composers': 'Composer',
+            'composer': 'Composer'
         }
         if (refinement.attribute == 'performance_date' || refinement.attribute == 'last_performance_date') {
             return 'Date: ' + refinement.label[0] + ' ' + formatDate(refinement.value) + ' ×'
@@ -264,12 +289,12 @@
     }
 
     function filterItems(items) {
-        if (showByWorks) {
+        if (showByWorks && props.indexName == "dev_henry_perfs") {
             let returnItems = items
             let itemIndex = 0
             returnItems.forEach((item) => {
                 let shownWorks = []
-                item?.work.forEach((work) => {
+                item?.works.forEach((work) => {
                     let workAdded = false
                     if (intersect(workFilters, work)?.length) {
                         shownWorks.push(work)
@@ -279,12 +304,14 @@
                         shownWorks.push(work)
                     }  
                 })
-                returnItems[itemIndex].work = shownWorks
+                returnItems[itemIndex].works = shownWorks
                 itemIndex++
             })
             return returnItems
+        } else {
+            return items
         }
-        return items
+        
 
     }
 
@@ -331,7 +358,7 @@
         
     >
     <!-- :key="sortView" -->
-        <div class="tabs__content open">
+        <div class="tabs__content open" :id="`${props.indexName}_tabs__content`">
             <!-- Header and Search Section -->
             <div class="eventsSearch__topSection">
                 <!-- Search Filters Section -->
@@ -405,7 +432,7 @@
             </div>
 
                 <!-- View Toggle and Active Filters -->
-            <section class="eventsSearch__filterRail">
+            <section class="eventsSearch__filterRail" :id="`${props.indexName}_filterRail`">
                 
                 <div class="eventsSearch__filterWrapper">
                     <div class="eventsSearch__filterHeader">
@@ -425,7 +452,7 @@
                     </div>
                     <ais-refinement-list v-for="refinement in mainRefinements" :attribute="refinement.attribute" operator="and">
                         <template v-slot="{items, refine, searchForItems}">
-                            <p-accordion :name="refinement.title" class="accordion" v-if="items.length > 1" :start-open="true">
+                            <p-accordion :name="refinement.title" class="accordion" :start-open="true">
                                 <summary class="accordion__summary">
                                     <h6 class="accordion__heading">{{ refinement.title }}</h6>
                                     <div class="accordion__iconWrapper">
@@ -443,23 +470,23 @@
                                             <div class="eventSearch__checkBox">
                                                 <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" type="checkbox" :id="slugify(refinement.title + ' ' + item.value)"  :value="item.value" :checked="item.isRefined" @click="refine(item.value)">
                                             </div>
-                                            <span>{{ item.value }}</span><span>{{ item.count }}</span>
+                                            <span>{{ item.value }}</span><span class="eventsSearch__refinementCount">{{ item.count }}</span>
                                         </label>
                                     </div>
                                 </div> 
                             </p-accordion>
-                            <template v-else><div></div></template>
+                            <!-- <template v-else><div></div></template> -->
                         </template>
                     </ais-refinement-list>
-                    <p-accordion v-if="addlRefinements" :start-open="false" open-text="Fewer Filters" closed-text="More Filters">
+                    <p-accordion v-if="props.addlRefinements" :start-open="false" open-text="Fewer Filters" closed-text="More Filters">
                         <summary class="accordion__summary">
                             <h6 class="accordion__heading -thin">More Filters</h6>
                         </summary>
                         <div class="accordion__content">
-                            <template v-for="refinement in addlRefinements">
+                            <template v-for="refinement in props.addlRefinements">
                                 <ais-refinement-list v-if="refinement.type == 'list'" :attribute="refinement.attribute" operator="and">
                                     <template v-slot="{items, refine, searchForItems}">
-                                        <p-accordion :name="refinement.title" class="accordion" v-if="items.length > 1" :start-open="false">
+                                        <p-accordion :name="refinement.title" class="accordion" :start-open="false">
                                             <summary class="accordion__summary">
                                                 <h6 class="accordion__heading">{{ refinement.title }}</h6>
                                                 <div class="accordion__iconWrapper">
@@ -482,7 +509,7 @@
                                                 </div>
                                             </div> 
                                         </p-accordion>
-                                        <template v-else><div></div></template>
+                                        <!-- <template v-else><div></div></template> -->
                                     </template>
                                 </ais-refinement-list>
                                 <h6 class="accordion__heading" v-if="refinement.type == 'location'">Location</h6>
@@ -550,13 +577,13 @@
             </section>
 
             <!-- Search Results Section -->
-            <section class="eventsSearch__results">
+            <section class="eventsSearch__results" :id="`${props.indexName}_eventsSearch__results`">
                 
                 <ais-hits :key="updateNow" class="eventsSearch__hits" :transform-items="filterItems">
                     <template v-slot="{ items }">
                         <div class="eventsSearch__resultsHeader">
                             <div class="eventsSearch__resultsTitle">
-                                <svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.resultsTitle.toLowerCase()}_filterToggleOn`" class="eventsSearch__filterToggleOn" @click="toggleFilters()">
+                                <svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" class="eventsSearch__filterToggleOn" @click="toggleFilters()">
                                     <rect width="24" height="24" rx="4" fill="#01ABE6"/>
                                     <path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
                                     <path d="M6 12.5681H18.8864" stroke="white" stroke-linecap="round"/>
@@ -565,7 +592,13 @@
                                     <circle cx="14.8633" cy="12.5" r="1.54545" fill="#01ABE6" stroke="white"/>
                                     <circle cx="10.7725" cy="7.04545" r="1.54545" fill="#01ABE6" stroke="white"/>
                                 </svg> 
-                                <h3 v-if="showNumHits">{{ items.length }} Results</h3>
+                                <h3 v-if="showNumHits">
+                                    <ais-stats>
+                                        <template v-slot="{ nbHits }">
+                                            {{ nbHits }} {{ nbHits > 1 ? 'Results' : 'Result' }}
+                                        </template>
+                                    </ais-stats>
+                                </h3>
                                 <h3 v-else>{{ props.resultsTitle }}</h3>
 
                             </div>
@@ -651,10 +684,10 @@
                 <nav class="eventsSearch__pagination">
                     <ais-stats>
                         <template v-slot="{ hitsPerPage, nbHits, page }">
-                            {{ page * hitsPerPage + 1 }} - {{ (((page + 1) * hitsPerPage) - 1) < nbHits ? (((page + 1) * hitsPerPage) - 1) : nbHits }} of {{ nbHits }} Results
+                            {{ page * hitsPerPage + 1 }} - {{ (((page + 1) * hitsPerPage)) < nbHits ? (((page + 1) * hitsPerPage)) : nbHits }} of {{ nbHits }} Results
                         </template>
                     </ais-stats>
-                    <ais-pagination class="eventsSearch__paginationComponent">
+                    <ais-pagination>
                         <template
                             v-slot="{
                             currentRefinement,
@@ -666,8 +699,8 @@
                             createURL
                             }"
                         >
-                            <ul v-if="pages.length > 1">
-                                <li>
+                            <ul class="eventsSearch__paginationComponent" v-if="pages.length > 1">
+                                <li v-if="currentRefinement + 1 > 1">
                                     <a
                                     :href="createURL(currentRefinement - 1)"
                                     @click.prevent="refine(currentRefinement - 1)"
@@ -685,11 +718,16 @@
                                     </a>
                                 </li>
                                 <li v-if="pages.length > 5">...</li>
-                                <li v-if="pages.length > 5">{{ pages.length }}</li>
-                                <li>
+                                <li v-if="pages.length > 5">
+                                    <a :href="createURL(nbPages)">
+                                        {{ nbPages }}
+                                    </a>
+                                </li>
+                                <li v-if="currentRefinement + 1 < nbPages">
                                     <a
                                     :href="createURL(currentRefinement + 1)"
                                     @click.prevent="refine(currentRefinement + 1)"
+                                    :style="{ fontWeight: nbPages === currentRefinement + 1 ? 'bold' : '' }"
                                     >
                                     ›
                                     </a>