henry-search 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/HenrySearch.css +1 -1
- package/dist/HenrySearch.js +25950 -24995
- package/dist/HenrySearch.umd.cjs +86 -86
- package/package.json +1 -3
- package/src/assets/main-icons-sprite.svg +14 -2
- package/src/components/PAccordion.vue +25 -2
- package/src/components/Search.vue +260 -167
- package/src/components/SearchDetail.vue +69 -33
- package/src/components/SearchHistory.vue +71 -0
- package/src/components/SearchTab.vue +560 -143
- package/src/composables/formatDate.js +2 -2
- package/src/main.js +2 -1
- package/src/components/Autocomplete.vue +0 -141
- package/src/components/Calendar.vue +0 -2887
|
@@ -8,8 +8,8 @@ export default function formatDate(unix_timestamp, detail = false) {
|
|
|
8
8
|
const minutes = "0" + date.getMinutes()
|
|
9
9
|
|
|
10
10
|
if (detail) {
|
|
11
|
-
return `${days[date.
|
|
11
|
+
return `${days[date.getDate()]}, ${(months[date.getMonth()]).substring(0, 3)} ${date.getDate()}, ${hour}:${minutes.substr(-2)}${amPm} EDT`
|
|
12
12
|
} else {
|
|
13
|
-
return `${date.getMonth() + 1}-${date.
|
|
13
|
+
return `${date.getMonth() + 1}-${date.getDate() + 1}-${date.getFullYear()}`
|
|
14
14
|
}
|
|
15
15
|
}
|
package/src/main.js
CHANGED
|
@@ -6,6 +6,7 @@ import { createApp } from 'vue'
|
|
|
6
6
|
|
|
7
7
|
import Search from './components/Search.vue'
|
|
8
8
|
import SearchDetail from './components/SearchDetail.vue'
|
|
9
|
+
import SearchHistory from './components/SearchHistory.vue'
|
|
9
10
|
|
|
10
11
|
export default {
|
|
11
12
|
|
|
@@ -17,4 +18,4 @@ export default {
|
|
|
17
18
|
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
export { Search, SearchDetail }
|
|
21
|
+
export { Search, SearchDetail, SearchHistory }
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
<script lang="jsx">
|
|
2
|
-
// recommended auto complete setup per https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch
|
|
3
|
-
|
|
4
|
-
import { h as createElement, Fragment, render } from "vue"
|
|
5
|
-
|
|
6
|
-
import { createWidgetMixin } from "vue-instantsearch/vue3/es"
|
|
7
|
-
import { connectSearchBox } from "instantsearch.js/es/connectors"
|
|
8
|
-
import { autocomplete } from "@algolia/autocomplete-js"
|
|
9
|
-
import Typesense from 'typesense'
|
|
10
|
-
|
|
11
|
-
import "@algolia/autocomplete-theme-classic"
|
|
12
|
-
|
|
13
|
-
import { INSTANT_SEARCH_INDEX_NAME } from "./constants"
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
mixins: [createWidgetMixin({ connector: connectSearchBox })],
|
|
17
|
-
mounted() {
|
|
18
|
-
if (this.autocompleteInstance) {
|
|
19
|
-
this.autocompleteInstance.destroy()
|
|
20
|
-
}
|
|
21
|
-
const { instantSearchInstance } = this
|
|
22
|
-
function setInstantSearchUiState({ query }) {
|
|
23
|
-
instantSearchInstance.setUiState((uiState) => ({
|
|
24
|
-
...uiState,
|
|
25
|
-
[INSTANT_SEARCH_INDEX_NAME]: {
|
|
26
|
-
...uiState[INSTANT_SEARCH_INDEX_NAME],
|
|
27
|
-
page: 1,
|
|
28
|
-
query,
|
|
29
|
-
}
|
|
30
|
-
}))
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const initialState = instantSearchInstance.mainIndex.getHelper()?.state || {}
|
|
34
|
-
|
|
35
|
-
let client = new Typesense.Client({
|
|
36
|
-
'nodes': [{
|
|
37
|
-
'host': 'go8f04wi19tuvlyrp-1.a1.typesense.net',
|
|
38
|
-
'port': '443',
|
|
39
|
-
'protocol': 'https'
|
|
40
|
-
}],
|
|
41
|
-
'apiKey': 'EBKGVrW6FHYnuSvdav8q9ABBjeuThaKU',
|
|
42
|
-
'connectionTimeoutSeconds': 2
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
this.autocompleteInstance = autocomplete( {
|
|
46
|
-
container: this.$refs.autocompleteContainer,
|
|
47
|
-
placeholder: "Search for performances",
|
|
48
|
-
detachedMediaQuery: "none",
|
|
49
|
-
async getSources({ query }) {
|
|
50
|
-
const results = await client.collections('archived_performances').documents().search({
|
|
51
|
-
q: query,
|
|
52
|
-
query_by: 'conductor',
|
|
53
|
-
highlight_full_fields: 'conductor'
|
|
54
|
-
})
|
|
55
|
-
|
|
56
|
-
return [
|
|
57
|
-
{
|
|
58
|
-
sourceId: 'predictions',
|
|
59
|
-
getItems() {
|
|
60
|
-
return results.hits
|
|
61
|
-
},
|
|
62
|
-
getItemInputValue({ item }) {
|
|
63
|
-
return item.document.name
|
|
64
|
-
},
|
|
65
|
-
templates: {
|
|
66
|
-
header() {
|
|
67
|
-
return 'Is this a thing?'
|
|
68
|
-
},
|
|
69
|
-
item({ item, createElement, Fragment }) {
|
|
70
|
-
|
|
71
|
-
let html_fragment = ""
|
|
72
|
-
item?.highlights?.forEach((highlight) => {
|
|
73
|
-
console.log('highlight.field', highlight.field)
|
|
74
|
-
if (highlight.field === 'conductor') {
|
|
75
|
-
console.log('highlight.values', highlight.values[0])
|
|
76
|
-
html_fragment = `${highlight.values[0]}`
|
|
77
|
-
}
|
|
78
|
-
})
|
|
79
|
-
return (
|
|
80
|
-
<div class="aa-ItemWrapper">
|
|
81
|
-
<div class="aa-ItemContent">
|
|
82
|
-
<div class="aa-ItemContentBody">
|
|
83
|
-
<div class="aa-ItemContentTitle">
|
|
84
|
-
{ html_fragment}
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
<div class="aa-ItemActions">
|
|
88
|
-
<button
|
|
89
|
-
class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
|
|
90
|
-
type="button"
|
|
91
|
-
title="Select">
|
|
92
|
-
<svg
|
|
93
|
-
viewBox="0 0 24 24"
|
|
94
|
-
width="20"
|
|
95
|
-
height="20"
|
|
96
|
-
fill="currentColor">
|
|
97
|
-
<path
|
|
98
|
-
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"
|
|
99
|
-
/>
|
|
100
|
-
</svg>
|
|
101
|
-
</button>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
)
|
|
106
|
-
|
|
107
|
-
},
|
|
108
|
-
noResults() {
|
|
109
|
-
return 'No results found'
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
]
|
|
114
|
-
},
|
|
115
|
-
renderer: { createElement, Fragment, render }
|
|
116
|
-
// initialState: { query: initialState.query || "" },
|
|
117
|
-
// onSubmit({ state }) {
|
|
118
|
-
// setInstantSearchUiState({ query: state. query })
|
|
119
|
-
// },
|
|
120
|
-
// onReset() {
|
|
121
|
-
// setInstantSearchUiState({ query: "" })
|
|
122
|
-
// },
|
|
123
|
-
// onStateChange({ prevState, state }) {
|
|
124
|
-
// if (prevState.query !== state.query ) {
|
|
125
|
-
// setInstantSearchUiState({ query: state.query })
|
|
126
|
-
// }
|
|
127
|
-
// },
|
|
128
|
-
// renderer: { createElement, Fragment, render },
|
|
129
|
-
})
|
|
130
|
-
},
|
|
131
|
-
beforeUnmount() {
|
|
132
|
-
this.autocompleteInstance?.destroy()
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
</script>
|
|
137
|
-
|
|
138
|
-
<template>
|
|
139
|
-
<h2>TEMPLATE HERE</h2>
|
|
140
|
-
<div ref="autocompleteContainer"></div>
|
|
141
|
-
</template>
|