Allows facets block to have search updated via external source via events #585

This commit is contained in:
mateuswetah 2021-08-19 17:45:25 -03:00
parent e9422444a4
commit 383b8f9262
2 changed files with 24 additions and 13 deletions

View File

@ -47,7 +47,8 @@ export default (element) => {
tainacanApiRoot: '',
tainacanBaseUrl: '',
tainacanSiteUrl: '',
className: ''
className: '',
blockId
},
render(h){
return h(FacetsListTheme, {
@ -73,7 +74,8 @@ export default (element) => {
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
tainacanSiteUrl: this.tainacanSiteUrl,
className: this.className
className: this.className,
blockId: this.blockId
}
});
},
@ -100,6 +102,7 @@ export default (element) => {
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
this.tainacanSiteUrl = this.$el.attributes['tainacan-site-url'] != undefined ? this.$el.attributes['tainacan-site-url'].value : undefined;
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.blockId = this.$el.attributes.id != undefined ? this.$el.attributes.id.value : undefined;
},
methods: {
__(text, domain) {

View File

@ -1,5 +1,7 @@
<template>
<div :class="className + ' has-mounted'">
<div
:id="blockId"
:class="className + ' has-mounted'">
<div
v-if="showSearchBar"
class="facets-search-bar">
@ -191,7 +193,8 @@ export default {
tainacanApiRoot: String,
tainacanBaseUrl: String,
tainacanSiteUrl: String,
className: String
className: String,
blockId: String
},
data() {
return {
@ -228,26 +231,31 @@ export default {
this.offset = 0;
this.fetchFacets();
document.addEventListener('tainacan-blocks-facets-list-update', this.updateSearchFromURL);
this.applySearchString = debounce(this.applySearchString, 750);
},
mounted() {
this.$el.addEventListener('tainacan-blocks-facets-list-update', this.receiveSearchString);
},
beforeDestroy() {
document.removeEventListener('tainacan-blocks-facets-list-update', this.updateSearchFromURL);
this.$el.removeEventListener('tainacan-blocks-facets-list-update', this.receiveSearchString);
},
methods: {
updateSearchFromURL(event, obj) {
console.log(obj);
receiveSearchString(event) {
if (event.detail) {
this.applySearchString({ target: { value: event.detail.searchString }});
}
},
applySearchString: debounce(function(event) {
applySearchString(event) {
let value = event.target.value;
if (this.searchString != value) {
this.searchString = value;
this.offset = 0;
this.lastTerm = '';
this.fetchFacets();
}
}, 500),
},
loadMore() {
this.offset += Number(this.maxFacetsNumber);
this.fetchFacets();
@ -307,7 +315,7 @@ export default {
this.tainacanAxios.get(endpoint, { cancelToken: this.facetsRequestSource.token })
.then(response => {
if (this.isMetadatumTypeTaxonomy) {
for (let facet of response.data.values) {
this.facets.push(Object.assign({