henry-search 1.0.2 → 1.0.3

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "henry-search",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Searches a typesense archive of musical performances",
   "main": "js/main.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "watch": "vite build --watch"
   },
   "repository": {
     "type": "git",
@@ -22,7 +23,10 @@
   },
   "homepage": "https://github.com/bostonsymphony/henry-search#readme",
   "dependencies": {
+    "@algolia/autocomplete-js": "^1.19.4",
+    "@algolia/autocomplete-theme-classic": "^1.19.4",
     "@babel/runtime": "^7.28.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vuepic/vue-datepicker": "^11.0.2",
     "instantsearch.js": "^4.80.0",
     "typesense": "^2.1.0",

package/src/components/Autocomplete.vue

@@ -0,0 +1,141 @@
+<script lang="jsx">
+    // recommended auto complete setup per https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch
+
+    import { h as createElement, Fragment, render } from "vue"
+    
+    import { createWidgetMixin } from "vue-instantsearch/vue3/es"
+    import { connectSearchBox } from "instantsearch.js/es/connectors"
+    import { autocomplete } from "@algolia/autocomplete-js"
+    import Typesense from 'typesense'
+
+    import "@algolia/autocomplete-theme-classic"
+
+    import { INSTANT_SEARCH_INDEX_NAME } from "./constants"
+
+    export default  {
+        mixins: [createWidgetMixin({ connector: connectSearchBox })],
+        mounted() {
+            if (this.autocompleteInstance) {
+                this.autocompleteInstance.destroy()
+            }
+            const { instantSearchInstance } = this
+            function setInstantSearchUiState({ query }) {
+                instantSearchInstance.setUiState((uiState) => ({
+                    ...uiState,
+                    [INSTANT_SEARCH_INDEX_NAME]: {
+                        ...uiState[INSTANT_SEARCH_INDEX_NAME],
+                        page: 1,
+                        query,
+                    }
+                }))
+            }
+
+            const initialState = instantSearchInstance.mainIndex.getHelper()?.state || {}
+
+            let client = new Typesense.Client({
+                'nodes': [{
+                'host': 'go8f04wi19tuvlyrp-1.a1.typesense.net',
+                'port': '443',      
+                'protocol': 'https'   
+                }],
+                'apiKey': 'EBKGVrW6FHYnuSvdav8q9ABBjeuThaKU',
+                'connectionTimeoutSeconds': 2
+            })
+
+            this.autocompleteInstance = autocomplete( {
+                container: this.$refs.autocompleteContainer,
+                placeholder: "Search for performances",
+                detachedMediaQuery: "none",
+                async getSources({ query }) {
+                    const results = await client.collections('archived_performances').documents().search({
+                        q: query,
+                        query_by: 'conductor',
+                        highlight_full_fields: 'conductor'
+                    })
+
+                    return [
+                        {
+                            sourceId: 'predictions',
+                            getItems() {
+                                return results.hits
+                            },
+                            getItemInputValue({ item }) {
+                                return item.document.name
+                            },
+                            templates: {
+                                header() {
+                                    return 'Is this a thing?'
+                                },
+                                item({ item, createElement, Fragment }) {
+
+                                    let html_fragment = ""
+                                    item?.highlights?.forEach((highlight) => {
+                                        console.log('highlight.field', highlight.field)
+                                        if (highlight.field === 'conductor') {
+                                            console.log('highlight.values', highlight.values[0])
+                                            html_fragment = `${highlight.values[0]}`
+                                        }
+                                    })
+                                    return (
+                                            <div class="aa-ItemWrapper">
+                                                <div class="aa-ItemContent">
+                                                    <div class="aa-ItemContentBody">
+                                                        <div class="aa-ItemContentTitle">
+                                                            { html_fragment}
+                                                        </div>
+                                                    </div>
+                                                    <div class="aa-ItemActions">
+                                                        <button
+                                                            class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
+                                                            type="button"
+                                                            title="Select">
+                                                            <svg
+                                                                viewBox="0 0 24 24"
+                                                                width="20"
+                                                                height="20"
+                                                                fill="currentColor">
+                                                                <path
+                                                                    d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
+                                                                />
+                                                            </svg>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                    )
+                                    
+                                },
+                                noResults() {
+                                    return 'No results found'
+                                }
+                            }
+                        }
+                    ]
+                },
+                renderer: { createElement, Fragment, render }
+                // initialState: { query: initialState.query || "" },
+                // onSubmit({ state }) {
+                //     setInstantSearchUiState({ query: state. query })
+                // },
+                // onReset() {
+                //     setInstantSearchUiState({ query: "" })
+                // },
+                // onStateChange({ prevState, state }) {
+                //     if (prevState.query !== state.query ) {
+                //         setInstantSearchUiState({ query: state.query })
+                //     }
+                // },
+                // renderer: { createElement, Fragment, render },
+            })
+        },
+        beforeUnmount() {
+            this.autocompleteInstance?.destroy()
+        }
+    }
+
+</script>
+
+<template>
+    <h2>TEMPLATE HERE</h2>
+  <div ref="autocompleteContainer"></div>
+</template>

package/src/components/PTabs.vue

@@ -0,0 +1,98 @@
+<script setup>
+  import { computed, ref, useTemplateRef, isRef, isReactive, onMounted, watchEffect } from 'vue'
+  import focusWithArrows from '../composables/focusWithArrows'
+
+  const props = defineProps({
+    titles: { type: Array, required: true },
+  })
+
+  const tablist = useTemplateRef('tablist')
+  const visibleTab = ref(0)
+  const firstLoad = ref(true)
+
+  const focusedElement = focusWithArrows(tablist)
+
+  watchEffect(() => {
+    if (focusedElement.value) {
+      visibleTab.value = tablist.value.indexOf(focusedElement.value)
+      if (!firstLoad.value) {
+          history.replaceState(undefined, undefined, `${window.location.pathname}#${tabs.value[visibleTab.value]['title']}`)
+      }
+    }
+  })
+
+  const tabs = computed(() => props.titles.map((title, i) => ({
+    title,
+    selected: i === visibleTab.value,
+    tabindex: i === visibleTab.value ? 0 : -1,
+
+    buttonId: `tab-${i + 1}`,
+    panelId: `tabpanel-${i + 1}`,
+  })))
+
+  onMounted(() => {
+      setInitActiveItem ()
+      addEventListener('hashchange', event => {
+          event.preventDefault()
+          setInitActiveItem()
+      })
+      firstLoad.value = false
+  })
+
+  function setInitActiveItem () {
+      if (location.hash) {
+          tabs.value.every((el, index) => {
+            console.log('el, index', el, index)
+            if (location.hash.substring(1) == el.title) {
+                visibleTab.value = index
+                return true
+            }
+            return true
+          })
+      } else {
+          visibleTab.value = 0
+          if (!firstLoad.value) {
+              history.replaceState(undefined, undefined, `#${tabs.value[visibleTab.value]['title']}`)
+          }
+      }
+  }
+
+  // handleOnOpen( payload ) {
+  //           this.activeItem = payload
+  //           if (this.setHash && !this.firstLoad) {
+  //               history.replaceState(undefined, undefined, `#${this.activeItem}`)
+  //           }
+  //       },
+        
+</script>
+
+<template>
+  <div class="tabs">
+    <div class="tabs__tablist" role="tablist" aria-label="Sample Tabs">
+      <button
+        class="tabs__button"
+        :class="{ '-selected': tab.selected }"
+        v-for="tab in tabs"
+        role="tab"
+        :aria-selected="tab.selected"
+        :aria-controls="tab.panelId"
+        :id="tab.buttonId"
+        ref="tablist"
+        :tabindex="tab.tabindex"
+        v-text="tab.title"
+      ></button>
+    </div>
+
+    <div
+        class="tabs__panel"
+        v-for="tab in tabs"
+        role="tabpanel"
+        :tabindex="tab.tabindex"
+        :id="tab.panelId"
+        :aria-labelledby="tab.buttonId"
+        :hidden="!tab.selected"
+      >
+      <slot :name="tab.panelId" />
+    </div>
+  </div>
+</template>