henry-search 1.0.6 → 1.0.7
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.js +15237 -12398
- package/dist/HenrySearch.umd.cjs +104 -85
- package/package.json +3 -3
- package/src/components/Search.vue +93 -17
- package/src/components/SearchTab.vue +70 -58
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "henry-search",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Searches a typesense archive of musical performances",
|
|
5
5
|
"main": "js/main.js",
|
|
6
6
|
"scripts": {
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.28.4",
|
|
27
27
|
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
|
28
|
+
"@vueform/multiselect": "^2.6.11",
|
|
28
29
|
"@vuepic/vue-datepicker": "^11.0.2",
|
|
29
30
|
"instantsearch.js": "^4.80.0",
|
|
30
31
|
"typesense": "^2.1.0",
|
|
31
32
|
"typesense-instantsearch-adapter": "^2.9.0",
|
|
32
33
|
"vue": "^3.5.21",
|
|
33
|
-
"vue-instantsearch": "^4.21.3"
|
|
34
|
-
"vue-select": "^4.0.0-beta.6"
|
|
34
|
+
"vue-instantsearch": "^4.21.3"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
|
6
6
|
import '@vuepic/vue-datepicker/dist/main.css'
|
|
7
|
-
import VueSelect from 'vue-select'
|
|
8
7
|
|
|
9
8
|
import Typesense from 'typesense'
|
|
10
9
|
|
|
@@ -211,6 +210,25 @@
|
|
|
211
210
|
return encodeURI(returnUrl)
|
|
212
211
|
}
|
|
213
212
|
|
|
213
|
+
function formatLocation(location) {
|
|
214
|
+
let returnLocation = "";
|
|
215
|
+
if (location.city) {
|
|
216
|
+
returnLocation += location.city
|
|
217
|
+
}
|
|
218
|
+
if (location.state) {
|
|
219
|
+
if (returnLocation != "") {
|
|
220
|
+
returnLocation += ", "
|
|
221
|
+
}
|
|
222
|
+
returnLocation += location.state
|
|
223
|
+
}
|
|
224
|
+
if (location.country) {
|
|
225
|
+
if (returnLocation != "") {
|
|
226
|
+
returnLocation += ", "
|
|
227
|
+
}
|
|
228
|
+
returnLocation += location.country
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
214
232
|
// Generic mobile filter modal function
|
|
215
233
|
function createMobileFilterModal(filterType, displayName, items, refineFunction) {
|
|
216
234
|
const modalHTML = createMultiSelectModalHTML({
|
|
@@ -548,7 +566,7 @@
|
|
|
548
566
|
results-title="Performances"
|
|
549
567
|
>
|
|
550
568
|
<template v-slot="{ items, showByWorks }">
|
|
551
|
-
<div class="eventsSearch__resultsGrid">
|
|
569
|
+
<div class="eventsSearch__resultsGrid" v-if="items && items.length">
|
|
552
570
|
<!-- Header Row -->
|
|
553
571
|
<div class="eventsSearch__resultCell -header -first">Date/Season/Title</div>
|
|
554
572
|
<div class="eventsSearch__resultCell -header">Venue</div>
|
|
@@ -562,18 +580,27 @@
|
|
|
562
580
|
<!-- First row of an event -->
|
|
563
581
|
<template v-if="i == 0">
|
|
564
582
|
<div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
583
|
+
<span class="mobileHeader">Date/Season/Title</span>
|
|
565
584
|
{{ formatDate(item.performance_date) }} / {{ item.season + (item.event_title ? " / " + item.event_title : "")}}
|
|
566
585
|
</div>
|
|
567
586
|
<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
|
-
|
|
587
|
+
<span class="mobileHeader">Venue</span>
|
|
588
|
+
{{ item.venue }} {{ formatLocation(item.location) }}
|
|
569
589
|
</div>
|
|
570
|
-
<div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'}
|
|
590
|
+
<div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'}
|
|
591
|
+
${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}
|
|
592
|
+
${ w.ensembles.length < 1 ? '-hideMobile' : '' }`">
|
|
593
|
+
<span class="mobileHeader">Ensemble</span>
|
|
571
594
|
{{ w.ensembles.join('; ')}}
|
|
572
595
|
</div>
|
|
573
|
-
<div :class="`eventsSearch__resultCell
|
|
596
|
+
<div :class="`eventsSearch__resultCell
|
|
597
|
+
${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}
|
|
598
|
+
${ w.conductors.lenght < 1 ? '-hideMobile' : ''}`">
|
|
599
|
+
<span class="mobileHeader">Conductor</span>
|
|
574
600
|
{{ w.conductors.join('; ') }}
|
|
575
601
|
</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' : ''}`">
|
|
602
|
+
<div :class="`eventsSearch__resultCell ${item.works.length > 1 ? '-work -left' : ''} ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
603
|
+
<span class="mobileHeader">Composer/Work</span>
|
|
577
604
|
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
578
605
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="w.has_recording">
|
|
579
606
|
<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"/>
|
|
@@ -587,7 +614,10 @@
|
|
|
587
614
|
{{ w.artists.map((artist) => artist.name + '/' + artist.role).slice(0, 2).join('; ') }}
|
|
588
615
|
<br/><a :href="`/details?performanceId=${item.id}`">More...</a>
|
|
589
616
|
</div>
|
|
590
|
-
<div :class="`eventsSearch__resultCell -
|
|
617
|
+
<div :class="`eventsSearch__resultCell -detailsMobile
|
|
618
|
+
${item.works.length > 1 ? '-details' : '' }
|
|
619
|
+
${index % 2 == 0 ? '-even' : '-odd'}
|
|
620
|
+
${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last -lastMobile' : ''}`">
|
|
591
621
|
<div class="eventsSearch__perfDetails">
|
|
592
622
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
593
623
|
<circle cx="9" cy="9" r="9" fill="#01ABE6"/>
|
|
@@ -619,14 +649,19 @@
|
|
|
619
649
|
<template v-else-if="i > 0 && i <= 4">
|
|
620
650
|
<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
651
|
<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 -
|
|
652
|
+
<div :class="`eventsSearch__resultCell -artist
|
|
653
|
+
${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
623
654
|
{{ w.ensembles.join('; ')}}
|
|
624
655
|
</div>
|
|
625
656
|
<div :class="`eventsSearch__resultCell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
626
657
|
{{ w.conductors.join('; ') }}
|
|
627
658
|
</div>
|
|
628
|
-
<div :class="`eventsSearch__resultCell -work
|
|
629
|
-
|
|
659
|
+
<div :class="`eventsSearch__resultCell -work
|
|
660
|
+
${ i % 2 == 1 ? '-right' : '-left' }
|
|
661
|
+
${index % 2 == 0 ? '-even' : '-odd'}
|
|
662
|
+
${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
663
|
+
<span class="mobileHeader" v-if="i == 1">Composer/Work</span>
|
|
664
|
+
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
630
665
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="w.has_recording">
|
|
631
666
|
<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"/>
|
|
632
667
|
<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"/>
|
|
@@ -639,7 +674,38 @@
|
|
|
639
674
|
<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
675
|
{{ w.artists.map((artist) => artist.name + '/' + artist.role).slice(0, 2).join('; ') }}
|
|
641
676
|
<br/><a :href="`/details?performanceId=${item.id}`">More...</a></div>
|
|
642
|
-
<div :class="`eventsSearch__resultCell -
|
|
677
|
+
<div :class="`eventsSearch__resultCell -detailsMobile
|
|
678
|
+
${index % 2 == 0 ? '-even' : '-odd'}
|
|
679
|
+
${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last -lastMobile' : ''}
|
|
680
|
+
${ !(i + 1 == item.works.length || i == 5) ? '-empty' : ''}`">
|
|
681
|
+
<template v-if="(i + 1 == item.works.length || i == 5)">
|
|
682
|
+
<div class="eventsSearch__perfDetails -detailsMobile">
|
|
683
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
684
|
+
<circle cx="9" cy="9" r="9" fill="#01ABE6"/>
|
|
685
|
+
<path d="M5 9H13" stroke="white" stroke-width="1.5"/>
|
|
686
|
+
<path d="M9 5L13 9L9 13" stroke="white" stroke-width="1.5"/>
|
|
687
|
+
</svg>
|
|
688
|
+
<a :href="`/details?performanceId=${item.id}`">Details</a>
|
|
689
|
+
</div>
|
|
690
|
+
<div v-if="item.program_link" class="eventsSearch__perfDetails -detailsMobile">
|
|
691
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
692
|
+
<circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
|
|
693
|
+
<path d="M6.22876 12.0713L11.8854 6.41469" stroke="#01ABE6" stroke-width="1.5"/>
|
|
694
|
+
<path d="M6.22864 6.41382L11.8854 6.41395L11.8855 12.0707" stroke="#01ABE6" stroke-width="1.5"/>
|
|
695
|
+
</svg>
|
|
696
|
+
<a :href="item.program_link">Program</a>
|
|
697
|
+
</div>
|
|
698
|
+
<div v-if="item.media && item.media.includes('audio')" class="eventsSearch__perfDetails -detailsMobile">
|
|
699
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
700
|
+
<circle cx="9" cy="9" r="8.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
|
|
701
|
+
<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"/>
|
|
702
|
+
<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"/>
|
|
703
|
+
<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"/>
|
|
704
|
+
</svg>
|
|
705
|
+
<a>Audio</a>
|
|
706
|
+
</div>
|
|
707
|
+
</template>
|
|
708
|
+
</div>
|
|
643
709
|
</template>
|
|
644
710
|
<template v-else-if="i > 4">
|
|
645
711
|
<div :class="`eventsSearch__resultCell -empty -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`"></div>
|
|
@@ -655,20 +721,29 @@
|
|
|
655
721
|
</template>
|
|
656
722
|
<template v-if="!item.works || item.works.length == 0">
|
|
657
723
|
<div :class="`eventsSearch__resultCell -first ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
|
|
724
|
+
<span class="mobileHeader">Date/Season/Title</span>
|
|
658
725
|
{{ formatDate(item.performance_date) }} / {{ item.season + (item.event_title ? " / " + item.event_title : "")}}
|
|
659
726
|
</div>
|
|
660
727
|
<div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
|
|
661
|
-
|
|
728
|
+
<span class="mobileHeader">Venue</span>
|
|
729
|
+
{{ item.venue }} {{ formatLocation(item.location) }}
|
|
662
730
|
</div>
|
|
663
|
-
<div :class="`eventsSearch__resultCell
|
|
731
|
+
<div :class="`eventsSearch__resultCell
|
|
732
|
+
${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}
|
|
733
|
+
${ item.ensembles.length < 1 ? '-hideMobile' : '' }
|
|
734
|
+
`">
|
|
735
|
+
<span class="mobileHeader">Ensemble</span>
|
|
664
736
|
{{ item.ensembles.join('; ')}}
|
|
665
737
|
</div>
|
|
666
|
-
<div :class="`eventsSearch__resultCell
|
|
738
|
+
<div :class="`eventsSearch__resultCell ${index % 2 == 0 ? '-even' : '-odd'}
|
|
739
|
+
${(index + 1 == items.length) ? '-last' : ''}
|
|
740
|
+
${ item.conductors.length < 1 ? '-hideMobile' : '' }`">
|
|
741
|
+
<span class="mobileHeader">Conductor</span>
|
|
667
742
|
{{ item.conductors.join('; ') }}
|
|
668
743
|
</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 -
|
|
744
|
+
<div :class="`eventsSearch__resultCell -hideMobile ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`"></div>
|
|
745
|
+
<div :class="`eventsSearch__resultCell -hideMobile ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`"></div>
|
|
746
|
+
<div :class="`eventsSearch__resultCell -detailsMobile ${index % 2 == 0 ? '-even' : '-odd'} ${(index + 1 == items.length) ? '-last' : ''}`">
|
|
672
747
|
<div class="eventsSearch__perfDetails">
|
|
673
748
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
674
749
|
<circle cx="9" cy="9" r="9" fill="#01ABE6"/>
|
|
@@ -698,6 +773,7 @@
|
|
|
698
773
|
</template>
|
|
699
774
|
</template>
|
|
700
775
|
</div>
|
|
776
|
+
<div v-else>No results</div>
|
|
701
777
|
</template>
|
|
702
778
|
</search-tab>
|
|
703
779
|
</template>
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
import VueDatePicker from '@vuepic/vue-datepicker'
|
|
21
21
|
import slugify from '../composables/slugify'
|
|
22
22
|
import formatDate from '../composables/formatDate'
|
|
23
|
-
import
|
|
23
|
+
import pSelect from '@vueform/multiselect'
|
|
24
24
|
|
|
25
25
|
const props = defineProps({
|
|
26
26
|
indexName: {
|
|
@@ -347,6 +347,10 @@
|
|
|
347
347
|
return typeof maxValue === "number" && maxValue !== null && maxValue !== maxRange ? maxValue : maxRange
|
|
348
348
|
}
|
|
349
349
|
|
|
350
|
+
const handleChange = (newValue, oldValue, form$) => {
|
|
351
|
+
console.log(newValue, oldValue, form$)
|
|
352
|
+
}
|
|
353
|
+
|
|
350
354
|
</script>
|
|
351
355
|
|
|
352
356
|
<template>
|
|
@@ -424,8 +428,14 @@
|
|
|
424
428
|
</template>
|
|
425
429
|
</ais-range-input>
|
|
426
430
|
</div>
|
|
427
|
-
<div class="eventsSearch__filterGroup">
|
|
428
|
-
<button class="button info">
|
|
431
|
+
<div class="eventsSearch__filterGroup--button">
|
|
432
|
+
<button class="button info">
|
|
433
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="mobileSearch">
|
|
434
|
+
<path d="M6.00037 11.2504C8.90007 11.2504 11.2507 8.89978 11.2507 6.00018C11.2507 3.10059 8.90007 0.75 6.00037 0.75C3.10067 0.75 0.75 3.10059 0.75 6.00018C0.75 8.89978 3.10067 11.2504 6.00037 11.2504Z" stroke="#14284E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
435
|
+
<path d="M9.7124 9.71265L12.7502 12.7503" stroke="#14284E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
436
|
+
</svg>
|
|
437
|
+
<span class="searchButton">Search</span>
|
|
438
|
+
</button>
|
|
429
439
|
</div>
|
|
430
440
|
</div>
|
|
431
441
|
</section>
|
|
@@ -512,61 +522,40 @@
|
|
|
512
522
|
<!-- <template v-else><div></div></template> -->
|
|
513
523
|
</template>
|
|
514
524
|
</ais-refinement-list>
|
|
515
|
-
<
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
>
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
:
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
</
|
|
531
|
-
</select>
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
<
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
</select>
|
|
550
|
-
</template>
|
|
551
|
-
</ais-menu-select>
|
|
552
|
-
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="or">
|
|
553
|
-
<template v-slot="{ items, canRefine, refine, sendEvent }">
|
|
554
|
-
<select
|
|
555
|
-
:disabled="!canRefine"
|
|
556
|
-
@change="refine($event.currentTarget.value)"
|
|
557
|
-
>
|
|
558
|
-
<option value="">Select Country</option>
|
|
559
|
-
<option
|
|
560
|
-
v-for="item in items"
|
|
561
|
-
:key="item.value"
|
|
562
|
-
:value="item.value"
|
|
563
|
-
:selected="item.isRefined"
|
|
564
|
-
>
|
|
565
|
-
{{ item.label }}
|
|
566
|
-
</option>
|
|
567
|
-
</select>
|
|
568
|
-
</template>
|
|
569
|
-
</ais-menu-select>
|
|
525
|
+
<p-accordion v-if="refinement.type == 'location'" name="location" class="accordion" :start-open="false">
|
|
526
|
+
<summary class="accordion__summary">
|
|
527
|
+
<h6 class="accordion__heading">Location</h6>
|
|
528
|
+
<div class="accordion__iconWrapper">
|
|
529
|
+
<svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation" viewBox="0 0 18 18" fill="none">
|
|
530
|
+
<path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
531
|
+
</svg>
|
|
532
|
+
</div>
|
|
533
|
+
</summary>
|
|
534
|
+
<div class="accordion__content">
|
|
535
|
+
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and">
|
|
536
|
+
<template v-slot="{ items, canRefine, refine, sendEvent }">
|
|
537
|
+
<p-select :options="items" @change="(newValue) => { refine(newValue) }"
|
|
538
|
+
placeholder="Select Country">
|
|
539
|
+
</p-select>
|
|
540
|
+
</template>
|
|
541
|
+
</ais-menu-select>
|
|
542
|
+
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and">
|
|
543
|
+
<template v-slot="{ items, canRefine, refine, sendEvent }">
|
|
544
|
+
<p-select :options="items" @change="(newValue) => { refine(newValue) }"
|
|
545
|
+
placeholder="Select State">
|
|
546
|
+
</p-select>
|
|
547
|
+
</template>
|
|
548
|
+
</ais-menu-select>
|
|
549
|
+
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and">
|
|
550
|
+
<template v-slot="{ items, canRefine, refine, sendEvent }">
|
|
551
|
+
<p-select :options="items" @change="(newValue) => { refine(newValue) }"
|
|
552
|
+
placeholder="Select City">
|
|
553
|
+
</p-select>
|
|
554
|
+
</template>
|
|
555
|
+
</ais-menu-select>
|
|
556
|
+
</div>
|
|
557
|
+
</p-accordion>
|
|
558
|
+
|
|
570
559
|
</template>
|
|
571
560
|
|
|
572
561
|
<!-- add locations here -->
|
|
@@ -581,6 +570,29 @@
|
|
|
581
570
|
|
|
582
571
|
<ais-hits :key="updateNow" class="eventsSearch__hits" :transform-items="filterItems">
|
|
583
572
|
<template v-slot="{ items }">
|
|
573
|
+
<div class="eventsSearch__resultsHeader -mobile">
|
|
574
|
+
<div class="eventsSearch__filterToggle">
|
|
575
|
+
<div class="filterButton">
|
|
576
|
+
<svg width="24" height="24" viewBox="0 0 24 24" >
|
|
577
|
+
<rect width="24" height="24" rx="4" fill="#01ABE6"/>
|
|
578
|
+
<path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
|
|
579
|
+
<path d="M6 12.5681H18.8864" stroke="white" stroke-linecap="round"/>
|
|
580
|
+
<path d="M6 17.75H18.8864" stroke="white" stroke-linecap="round"/>
|
|
581
|
+
<circle cx="8.72709" cy="17.9544" r="1.54545" fill="#01ABE6" stroke="white"/>
|
|
582
|
+
<circle cx="14.8633" cy="12.5" r="1.54545" fill="#01ABE6" stroke="white"/>
|
|
583
|
+
<circle cx="10.7725" cy="7.04545" r="1.54545" fill="#01ABE6" stroke="white"/>
|
|
584
|
+
</svg>
|
|
585
|
+
Filters
|
|
586
|
+
</div>
|
|
587
|
+
<div class="eventsSearch__resultsSort">Sort by:
|
|
588
|
+
<select v-model="sortView" @change="setView">
|
|
589
|
+
<option value="Most Recent">Most Recent</option>
|
|
590
|
+
<option value="Most Relevant">Most Relevant</option>
|
|
591
|
+
<option value="Oldest First">Oldest First</option>
|
|
592
|
+
</select>
|
|
593
|
+
</div>
|
|
594
|
+
</div>
|
|
595
|
+
</div>
|
|
584
596
|
<div class="eventsSearch__resultsHeader">
|
|
585
597
|
<div class="eventsSearch__resultsTitle">
|
|
586
598
|
<svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" class="eventsSearch__filterToggleOn" @click="toggleFilters()">
|