henry-search 1.0.4 → 1.0.6

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.
Files changed (10) hide show
  1. package/dist/HenrySearch.css +1 -1
  2. package/dist/HenrySearch.js +11312 -10969
  3. package/dist/HenrySearch.umd.cjs +83 -83
  4. package/package.json +1 -3
  5. package/src/components/Search.vue +276 -135
  6. package/src/components/SearchDetail.vue +27 -23
  7. package/src/components/SearchHistory.vue +65 -15
  8. package/src/components/SearchTab.vue +102 -64
  9. package/src/components/Autocomplete.vue +0 -141
  10. package/src/components/Calendar.vue +0 -2887
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "henry-search",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Searches a typesense archive of musical performances",
5
5
  "main": "js/main.js",
6
6
  "scripts": {
@@ -23,8 +23,6 @@
23
23
  },
24
24
  "homepage": "https://github.com/bostonsymphony/henry-search#readme",
25
25
  "dependencies": {
26
- "@algolia/autocomplete-js": "^1.19.4",
27
- "@algolia/autocomplete-theme-classic": "^1.19.4",
28
26
  "@babel/runtime": "^7.28.4",
29
27
  "@vitejs/plugin-vue-jsx": "^5.1.1",
30
28
  "@vuepic/vue-datepicker": "^11.0.2",
package/src/components/Search.vue CHANGED
@@ -15,13 +15,20 @@
15
15
  import formatDate from '../composables/formatDate'
16
16
 
17
17
  const props = defineProps({
18
- indexName: {
18
+ performanceIndex: {
19
19
  type: String,
20
20
  default: "archived_performances"
21
+ },
22
+ artistIndex: {
23
+ type: String,
24
+ default: "performances"
25
+ },
26
+ workIndex: {
27
+ type: String,
28
+ default: "performances"
21
29
  }
22
30
  })
23
31
 
24
-
25
32
  const displayDate = ref(null)
26
33
  const datepicker = ref(null)
27
34
  const rangeInput = ref(null)
@@ -31,25 +38,22 @@
31
38
  const today = Date.now()
32
39
  const date = ref([today, today])
33
40
 
34
-
35
-
36
-
37
41
  // Modal state management
38
42
  let isCreatingModal = false
39
43
  let modalCreated = false
40
44
 
41
45
  const mainRefinements = [
42
- {attribute: 'work.composer', title: 'Composer', placeholder: 'Search Composers'},
43
- {attribute: 'work.title', title: 'Work', placeholder: 'Search Works'},
44
- {attribute: 'conductor', title: 'Conductor', placeholder: 'Search Conductors'},
45
- {attribute: 'orchestra', title: 'Orchestra/Ensemble', placeholder: 'Search Orchestras/Ensembles'},
46
- {attribute: 'work.artist.artist_name', title: 'Artist', placeholder: 'Search Artists'},
46
+ {attribute: 'works.composers', title: 'Composer', placeholder: 'Search Composers'},
47
+ {attribute: 'works.title', title: 'Work', placeholder: 'Search Works'},
48
+ {attribute: 'conductors', title: 'Conductor', placeholder: 'Search Conductors'},
49
+ {attribute: 'ensembles', title: 'Orchestra/Ensemble', placeholder: 'Search Orchestras/Ensembles'},
50
+ {attribute: 'works.artists.name', title: 'Artist', placeholder: 'Search Artists'},
47
51
  ]
48
52
 
49
53
  const addlRefinements = [
50
- {attribute: 'work.artist.artist_role', title: 'Instrument', placeholder: 'Search Instruments', type: 'list'},
51
- {attribute: 'work.creator.creator_name', title: 'Additional Creator', placeholder: 'Search Creators', type: 'list'},
52
- {attribute: 'work.creator.creator_role', title: 'Additional Creator Role', placeholder: 'Search Creator Roles', type: 'list'},
54
+ {attribute: 'works.artists.role', title: 'Instrument', placeholder: 'Search Instruments', type: 'list'},
55
+ // {attribute: 'works.additional_creators.creator_name', title: 'Additional Creator', placeholder: 'Search Creators', type: 'list'},
56
+ // {attribute: 'works.additional_creators.creator_role', title: 'Additional Creator Role', placeholder: 'Search Creator Roles', type: 'list'},
53
57
  {attribute: 'season', title: 'Season', placeholder: 'Search Seasons', type: 'list'},
54
58
  {attribute: 'event_title', title: 'Event Title', placeholder: 'Search Event Titles', type: 'list'},
55
59
  {attribute: 'event_types', title: 'Series', placeholder: 'Search Event Types', type: 'list'},
@@ -57,7 +61,7 @@
57
61
  {attribute: 'location', title: 'Location', type: 'location'},
58
62
  {attribute: 'media', title: 'Media', placeholder: 'Select Media', type: 'list', hideSearch: 'false'},
59
63
  {attribute: 'premiere', title: 'Premiere', placeholder: 'Select Premiere', type: 'list', hideSearch: 'false'},
60
- {attribute: 'work.commission', title: 'Commission', placeholder: 'Select Premiere', type: 'list', hideSearch: 'false'}
64
+ {attribute: 'works.commission', title: 'Commission', placeholder: 'Select Premiere', type: 'list', hideSearch: 'false'}
61
65
  ]
62
66
 
63
67
  const artistRefinements = [
@@ -65,6 +69,17 @@
65
69
  {attribute: 'artist_role', title: 'Instrument/Role', placeholder: 'Instruments/Roles'}
66
70
  ]
67
71
 
72
+ const addlArtistRefinements = [
73
+ {attribute: 'composer', title: 'Composer', placeholder: 'Search Composers', type: 'list'},
74
+ {attribute: 'work_title', title: 'Work', placeholder: 'Search Works', type: 'list'}
75
+ ]
76
+
77
+ const workRefinements = [
78
+ {attribute: 'composers', title: 'Composer', placeholder: 'Search Composers'},
79
+ {attribute: 'title', title: 'Work Title', placeholder: 'Search Work Titles'},
80
+ {attribute: 'commission', title: 'Commission', placeholder: 'Search Commissions'}
81
+ ]
82
+
68
83
 
69
84
 
70
85
  // Check if we're on mobile
@@ -79,6 +94,8 @@
79
94
 
80
95
  onMounted(() => {
81
96
 
97
+ console.log("props.workIndex", props.workIndex)
98
+
82
99
  // Disable browser scroll restoration
83
100
  if ('scrollRestoration' in history) {
84
101
  history.scrollRestoration = 'manual'
@@ -133,39 +150,6 @@
133
150
  })
134
151
 
135
152
 
136
-
137
-
138
-
139
- function artistView(items) {
140
- let artistItems = {}
141
- items.forEach((item) => {
142
- item.work.forEach((work) => {
143
- work.artist.forEach((artist) => {
144
- let artistFound = true
145
- if (currentQuery.value) {
146
- if (!artist.artist_name.toLowerCase().includes(currentQuery.value.toLowerCase())) {
147
- console.log(artist.artist_name.toLowerCase(), currentQuery.value.toLowerCase(), artist.artist_name.toLowerCase().includes(currentQuery.value.toLowerCase()))
148
- artistFound = false
149
- }
150
- }
151
- if (artistFound) {
152
- const workRoleArtist = slugify(`${artist.artist_name} ${artist.artist_role} ${work.composer} ${work.title}`)
153
- if (workRoleArtist in artistItems) {
154
- artistItems[workRoleArtist]['numPerformances']++
155
- } else {
156
- artistItems[workRoleArtist] = {}
157
- artistItems[workRoleArtist]['artist'] = artist.artist_name
158
- artistItems[workRoleArtist]['role'] = artist.artist_role
159
- artistItems[workRoleArtist]['work'] = `${work.composer} / ${work.title}`
160
- artistItems[workRoleArtist]['numPerformances'] = 1
161
- }
162
- }
163
- })
164
- })
165
- })
166
- return artistItems
167
- }
168
-
169
153
  function setupPaginationScrollFix() {
170
154
  // Use event delegation to catch pagination clicks
171
155
  document.addEventListener('click', (event) => {
@@ -194,37 +178,37 @@
194
178
  }
195
179
  }
196
180
 
197
- const format = (date) => {
198
- if (date && date.length > 1) {
199
- const startDay = date[0].getDate();
200
- const startMonth = date[0].getMonth() + 1;
201
- const startYear = date[0].getFullYear();
202
-
203
- const endDay = date[1].getDate();
204
- const endMonth = date[1].getMonth() + 1;
205
- const endYear = date[1].getFullYear();
206
-
207
- return `${startMonth}/${startDay}/${startYear} - ${endMonth}/${endDay}/${endYear}`;
208
- }
209
- return ''
210
-
211
- }
212
-
213
-
214
- function toValue(value, range) {
215
- return [
216
- typeof value.min === "number" ? value.min * 1000 : range.min * 1000,
217
- typeof value.max === "number" ? value.max * 1000 : range.max * 1000,
218
- ];
219
- }
220
-
221
-
222
-
223
181
  const setDate = (value) => {
224
182
  date.value = value
225
183
  displayDate.value = value
184
+ }
226
185
 
227
- // Note: Modal closing is now handled by the Select button click handler
186
+ function createURL(facets) {
187
+ let returnUrl = "/?"
188
+ facets.forEach((facet, index) => {
189
+ if (facet.facet && facet.value) {
190
+ if (Array.isArray(facet.value)) {
191
+ if (returnUrl != "/?") {
192
+ returnUrl += '&'
193
+ }
194
+ facet.value.forEach((v, i) => {
195
+ returnUrl += `${ props.performanceIndex }[refinementList][${ facet.facet }][${ i }]=${ v }`
196
+ if (i < facet.value.length - 1) {
197
+ returnUrl += '&'
198
+ }
199
+ })
200
+ } else {
201
+ if (returnUrl != "/?") {
202
+ returnUrl += '&'
203
+ }
204
+ returnUrl += `${ props.performanceIndex }[refinementList][${ facet.facet }][0]=${ facet.value }`
205
+ if (index < facets.length - 1) {
206
+ returnUrl += '&'
207
+ }
208
+ }
209
+ }
210
+ })
211
+ return encodeURI(returnUrl)
228
212
  }
229
213
 
230
214
  // Generic mobile filter modal function
@@ -555,109 +539,266 @@
555
539
  <p-tabs :titles="['Performances', 'Artists', 'Works']">
556
540
  <template #tabpanel-1>
557
541
  <search-tab
558
- :index-name="'archived_performances'"
542
+ :index-name="props.performanceIndex"
559
543
  :main-refinements="mainRefinements"
560
544
  :addl-refinements="addlRefinements"
561
545
  :sort-field="'performance_date'"
562
- :query-by-fields="'work, season, orchestra, venue, event_types, notes, event_title'"
563
- search-placeholder="Search by composer, work, conductor, orchestra, and more"
546
+ :query-by-fields="'works, season, venue, ensembles, conductors, event_types, notes, event_title'"
547
+ search-placeholder="Search by composer, works, conductor, orchestra, and more"
564
548
  results-title="Performances"
565
549
  >
566
550
  <template v-slot="{ items, showByWorks }">
567
551
  <div class="eventsSearch__resultsGrid">
552
+ <!-- Header Row -->
553
+ <div class="eventsSearch__resultCell -header -first">Date/Season/Title</div>
554
+ <div class="eventsSearch__resultCell -header">Venue</div>
555
+ <div class="eventsSearch__resultCell -header">Orchestra</div>
556
+ <div class="eventsSearch__resultCell -header">Conductor</div>
557
+ <div class="eventsSearch__resultCell -header">Composer/Work</div>
558
+ <div class="eventsSearch__resultCell -header">Artist/Role</div>
559
+ <div class="eventsSearch__resultCell -header">View</div>
568
560
  <template v-for="item, index in items">
569
- <template v-for="w, i in item.work.slice(0, 6)">
570
- <!-- Header Row -->
571
- <template v-if="index == 0 && i == 0">
572
- <div class="eventsSearch__resultCell -header -first">Date/Season/Title</div>
573
- <div class="eventsSearch__resultCell -header">Venue</div>
574
- <div class="eventsSearch__resultCell -header">Orchestra</div>
575
- <div class="eventsSearch__resultCell -header">Conductor</div>
576
- <div class="eventsSearch__resultCell -header">Composer/Work</div>
577
- <div class="eventsSearch__resultCell -header">Artist/Role</div>
578
- <div class="eventsSearch__resultCell -header">View</div>
579
- </template>
561
+ <template v-if="item.works && item.works.length" v-for="w, i in item.works.slice(0, 6)">
580
562
  <!-- First row of an event -->
581
563
  <template v-if="i == 0">
582
- <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ formatDate(item.performance_date) }} / {{ item.season + (item.event_title ? " / " + item.event_title : "")}}</div>
583
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${((index + 1 == items.length && (i + 1 == item.work.length || i == 5)) && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ item.venue }} {{ item.location.city }}, {{ item.location.state }}, {{ item.location.country }}</div>
584
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ item.orchestra.join('; ')}}</div>
585
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ w.artist.filter((artist) => artist.artist_role == 'Conductor').map((artist) => artist.artist_name).join('; ') }}</div>
586
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ w.composer }} / {{ w.title }}</div>
587
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ w.artist.filter((artist) => artist.artist_role != 'Conductor').map((artist) => artist.artist_name + '/' + artist.artist_role).join('; ') }}</div>
588
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">
589
- <a :href="`/details?performanceId=${item.id}`">Details</a>
590
- <a v-if="item.program_link" :href="item.program_link">Program</a>
591
- <a v-if="item.media && item.media.includes('Audio')">Audio</a>
564
+ <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
565
+ {{ formatDate(item.performance_date) }} / {{ item.season + (item.event_title ? " / " + item.event_title : "")}}
592
566
  </div>
593
- </template>
594
- <!-- Additional event rows -->
595
- <template v-else-if="i > 0 && i <= 4">
596
- <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
597
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
598
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
599
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ w.artist.filter((artist) => artist.artist_role == 'Conductor').map((artist) => artist.artist_name).join('; ') }}</div>
600
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`">{{ w.composer }} / {{ w.title }}</div>
601
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`" v-if="w.artist.filter((artist) => artist.artist_role != 'Conductor').length < 3">{{ w.artist.filter((artist) => artist.artist_role != 'Conductor').map((artist) => artist.artist_name + '/' + artist.artist_role).join('; ') }}
567
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${((index + 1 == items.length && (i + 1 == item.works.length || i == 5)) && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
568
+ {{ item.venue }} {{ item.location.city ?? "" }}, {{ item.location.state ?? "" }}, {{ item.location.country ?? "" }}
569
+ </div>
570
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
571
+ {{ w.ensembles.join('; ')}}
572
+ </div>
573
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
574
+ {{ w.conductors.join('; ') }}
575
+ </div>
576
+ <div :class="`eventsSearch__resultCell ${item.works.length > 1 ? '-work' : ''} ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
577
+ {{ w?.composers?.join("; ") }} / {{ w?.title }}
602
578
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="w.has_recording">
603
579
  <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"/>
604
580
  <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"/>
605
581
  </svg>
606
582
  </div>
607
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`" v-else>{{ w.artist.filter((artist) => artist.artist_role != 'Conductor').map((artist) => artist.artist_name + '/' + artist.artist_role).slice(0, 2).join('; ') }}
583
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`" v-if="w.artists.length < 3">
584
+ {{ w.artists.map((artist) => artist.name + '/' + artist.role).join('; ') }}
585
+ </div>
586
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`" v-else>
587
+ {{ w.artists.map((artist) => artist.name + '/' + artist.role).slice(0, 2).join('; ') }}
588
+ <br/><a :href="`/details?performanceId=${item.id}`">More...</a>
589
+ </div>
590
+ <div :class="`eventsSearch__resultCell -details ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
591
+ <div class="eventsSearch__perfDetails">
592
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
593
+ <circle cx="9" cy="9" r="9" fill="#01ABE6"/>
594
+ <path d="M5 9H13" stroke="white" stroke-width="1.5"/>
595
+ <path d="M9 5L13 9L9 13" stroke="white" stroke-width="1.5"/>
596
+ </svg>
597
+ <a :href="`/details?performanceId=${item.id}`">Details</a>
598
+ </div>
599
+ <div v-if="item.program_link" class="eventsSearch__perfDetails">
600
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
601
+ <circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
602
+ <path d="M6.22876 12.0713L11.8854 6.41469" stroke="#01ABE6" stroke-width="1.5"/>
603
+ <path d="M6.22864 6.41382L11.8854 6.41395L11.8855 12.0707" stroke="#01ABE6" stroke-width="1.5"/>
604
+ </svg>
605
+ <a :href="item.program_link">Program</a>
606
+ </div>
607
+ <div v-if="item.media && item.media.includes('audio')" class="eventsSearch__perfDetails">
608
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
609
+ <circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
610
+ <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" fill="white" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
611
+ <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" fill="white"/>
612
+ <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
613
+ </svg>
614
+ <a>Audio</a>
615
+ </div>
616
+ </div>
617
+ </template>
618
+ <!-- Additional event rows -->
619
+ <template v-else-if="i > 0 && i <= 4">
620
+ <div :class="`eventsSearch__resultCell -empty -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
621
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
622
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
623
+ {{ w.ensembles.join('; ')}}
624
+ </div>
625
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
626
+ {{ w.conductors.join('; ') }}
627
+ </div>
628
+ <div :class="`eventsSearch__resultCell -work ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
629
+ {{ w?.composers?.join("; ") }} / {{ w?.title?.join("; ") }}
608
630
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="w.has_recording">
609
631
  <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"/>
610
632
  <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"/>
611
633
  </svg>
634
+ </div>
635
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"
636
+ v-if="w.artists.length < 3">
637
+ {{ w.artists.map((artist) => artist.name + '/' + artist.role).join('; ') }}
638
+ </div>
639
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`" v-else>
640
+ {{ w.artists.map((artist) => artist.name + '/' + artist.role).slice(0, 2).join('; ') }}
612
641
  <br/><a :href="`/details?performanceId=${item.id}`">More...</a></div>
613
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
642
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
614
643
  </template>
615
644
  <template v-else-if="i > 4">
616
- <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
617
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
618
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
619
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
620
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"><a :href="`/details?performanceId=${item.id}`">More...</a></div>
621
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
622
- <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.work.length || i == 5)) ? '-last' : ''}`"></div>
645
+ <div :class="`eventsSearch__resultCell -empty -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
646
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
647
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
648
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
649
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
650
+ <a :href="`/details?performanceId=${item.id}`">More...</a>
651
+ </div>
652
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
653
+ <div :class="`eventsSearch__resultCell -empty ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
623
654
  </template>
624
655
  </template>
656
+ <template v-if="!item.works || item.works.length == 0">
657
+ <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
658
+ {{ formatDate(item.performance_date) }} / {{ item.season + (item.event_title ? " / " + item.event_title : "")}}
659
+ </div>
660
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
661
+ {{ item.venue }} {{ item.location.city ?? "" }}, {{ item.location.state ?? "" }}, {{ item.location.country ?? "" }}
662
+ </div>
663
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
664
+ {{ item.ensembles.join('; ')}}
665
+ </div>
666
+ <div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
667
+ {{ item.conductors.join('; ') }}
668
+ </div>
669
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`"></div>
670
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`"></div>
671
+ <div :class="`eventsSearch__resultCell -details ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
672
+ <div class="eventsSearch__perfDetails">
673
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
674
+ <circle cx="9" cy="9" r="9" fill="#01ABE6"/>
675
+ <path d="M5 9H13" stroke="white" stroke-width="1.5"/>
676
+ <path d="M9 5L13 9L9 13" stroke="white" stroke-width="1.5"/>
677
+ </svg>
678
+ <a :href="`/details?performanceId=${item.id}`">Details</a>
679
+ </div>
680
+ <div v-if="item.program_link" class="eventsSearch__perfDetails">
681
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
682
+ <circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
683
+ <path d="M6.22876 12.0713L11.8854 6.41469" stroke="#01ABE6" stroke-width="1.5"/>
684
+ <path d="M6.22864 6.41382L11.8854 6.41395L11.8855 12.0707" stroke="#01ABE6" stroke-width="1.5"/>
685
+ </svg>
686
+ <a :href="item.program_link">Program</a>
687
+ </div>
688
+ <div v-if="item.media && item.media.includes('audio')" class="eventsSearch__perfDetails">
689
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
690
+ <circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
691
+ <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" fill="white" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
692
+ <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" fill="white"/>
693
+ <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
694
+ </svg>
695
+ <a>Audio</a>
696
+ </div>
697
+ </div>
698
+ </template>
625
699
  </template>
626
700
  </div>
627
701
  </template>
628
702
  </search-tab>
629
703
  </template>
630
704
  <template #tabpanel-2>
631
- <!-- <search-tab
632
- :index-name="'archived_artists'"
705
+ <search-tab
706
+ :index-name="props.artistIndex"
633
707
  :main-refinements="artistRefinements"
708
+ :addl-refinements="addlArtistRefinements"
634
709
  :sort-field="'last_performance_date'"
635
710
  :query-by-fields="'artist_name, artist_role, work_title'"
636
- search-placeholder="Search by conductor, soloist, ensemble, instruument, or role"
711
+ search-placeholder="Search by conductor, soloist, ensemble, instrument, or role"
637
712
  results-title="Artists"
638
713
  >
639
714
  <template v-slot="{ items }">
640
- <div class="eventsSearch__artistGrid">
641
- <div>Artist</div>
642
- <div>Instrument/Role</div>
643
- <div>Composer/Work</div>
644
- <div># of Performances</div>
645
- </div>
646
- <div v-for="item, index in items">
647
- <div :class="`eventsSearch__artistGrid ${index % 2 == 0 ? '-even' : '-odd'}`">
648
- <div>{{ item.artist_name }}</div>
649
- <div>{{ item.artist_role }}</div>
650
- <div>{{ item.work_title }}</div>
651
- <div>{{ item.num_performances }}</div>
715
+ <div class="eventsSearch__artistsGrid">
716
+ <div class="eventsSearch__resultCell -header -first">Artist</div>
717
+ <div class="eventsSearch__resultCell -header">Instrument/Role</div>
718
+ <div class="eventsSearch__resultCell -header">Composer/Work</div>
719
+ <div class="eventsSearch__resultCell -header"># of Performances</div>
720
+
721
+ <template v-for="item, index in items">
722
+ <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
723
+ <a :href="createURL([{ facet: 'works.artists.name', value: item.artist_name}])">
724
+ {{ item.artist_name }}
725
+ </a>
726
+ </div>
727
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
728
+ <a :href="createURL([{ facet: 'works.artists.role', value: item.artist_role }])">
729
+ {{ item.artist_role }}
730
+ </a>
652
731
  </div>
653
- </div>
732
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
733
+ <a :href="createURL([{ facet: 'works.title', value: item.work_title }])">
734
+ {{ item.composer }} / {{ item.work_title }}
735
+ </a>
736
+ </div>
737
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
738
+ <a :href="createURL([{ facet: 'works.artists.name', value: item.artist_name},
739
+ { facet: 'works.artists.role', value: item.artist_role },
740
+ { facet: 'works.title', value: item.work_title }
741
+ ])">
742
+ {{ item.num_performances }}
743
+ </a>
744
+ </div>
745
+ </template>
746
+ </div>
654
747
  </template>
655
- </search-tab> -->
748
+ </search-tab>
656
749
  </template>
657
750
 
658
751
  <template #tabpanel-3>
659
- <h3>Consectetur odit distinctio beatae!</h3>
660
- <p>Ipsum eaque ipsam asperiores consequatur est libero. Incidunt distinctio non quae veniam illum Laborum est harum sapiente vel suscipit maiores? Dicta quo velit eos ab distinctio, delectus! Autem sunt aperiam!</p>
752
+ <!-- add search by creators -->
753
+ <search-tab
754
+ :index-name="props.workIndex"
755
+ :main-refinements="workRefinements"
756
+ :sort-field="'last_performance_date'"
757
+ :query-by-fields="'commission, composers, title'"
758
+ search-placeholder="Search by composer, work, or commission"
759
+ results-title="Works"
760
+ >
761
+ <template v-slot="{ items }">
762
+ <div class="eventsSearch__worksGrid">
763
+ <div class="eventsSearch__resultCell -header -first">Composer</div>
764
+ <div class="eventsSearch__resultCell -header">Work</div>
765
+ <div class="eventsSearch__resultCell -header">Additional Creator</div>
766
+ <div class="eventsSearch__resultCell -header"># of times Performed</div>
767
+ <template v-for="item, index in items">
768
+ <div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
769
+ <a v-for="composer, index in item.composers"
770
+ :href="createURL([{ facet: 'works.composers', value: composer}])">
771
+ {{ `${composer}${index < item.composers.length && item.composers.length > 1 ? '; ' : ''}` }}
772
+ </a>
773
+ </div>
774
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
775
+ <a v-for="title, index in item.title"
776
+ :href="createURL([{ facet: 'works.title', value: title}])">
777
+ {{ `${title}${index < item.title.length && item.title.length > 1 ? '; ' : ''}` }}
778
+ </a>
779
+ </div>
780
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
781
+ <a v-if="item.creators.length" v-for="creator, index in item.creators"
782
+ :href="createURL([{ facet: 'works.creators.name', value: creator.name}])">
783
+ <template v-if="(typeof creator !== 'undefined' && creator && typeof creator.name !== 'undefined' && typeof creator.role !== 'undefined')">
784
+ {{ `${creator.name} / ${creator.role}${index < item?.creators?.length && items?.creators?.length > 1 ? '; ' : ''}` }}
785
+ </template>
786
+ </a>
787
+ </div>
788
+ <div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
789
+ <a :href="createURL([{ facet: 'works.composers', value: item.composers},
790
+ { facet: 'works.creators', value: item.creators},
791
+ { facet: 'works.title', value: item.title}
792
+ ])">
793
+ {{ item.num_performances }}
794
+ </a>
795
+ </div>
796
+ </template>
797
+ </div>
798
+ </template>
799
+
800
+ </search-tab>
801
+
661
802
  </template>
662
803
  </p-tabs>
663
804
  </div>