Theme side parent loading for facets. #334.
This commit is contained in:
parent
fdf47f29c8
commit
586f8c7cad
|
@ -10,7 +10,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
metadatumId: '',
|
||||
metadatumType: '',
|
||||
collectionId: '',
|
||||
collectionSlug: '',
|
||||
collectionSlug: '',
|
||||
parentTermId: null,
|
||||
showImage: true,
|
||||
showItemsCount: true,
|
||||
showSearchBar: false,
|
||||
|
@ -30,7 +31,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
metadatumId: this.metadatumId,
|
||||
metadatumType: this.metadatumType,
|
||||
collectionId: this.collectionId,
|
||||
collectionSlug: this.collectionSlug,
|
||||
collectionSlug: this.collectionSlug,
|
||||
parentTermId: this.parentTermId,
|
||||
showImage: this.showImage,
|
||||
showItemsCount: this.showItemsCount,
|
||||
showSearchBar: this.showSearchBar,
|
||||
|
@ -51,6 +53,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
this.metadatumType = this.$el.attributes['metadatum-type'] != undefined ? this.$el.attributes['metadatum-type'].value : undefined;
|
||||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.collectionSlug = this.$el.attributes['collection-slug'] != undefined ? this.$el.attributes['collection-slug'].value : undefined;
|
||||
this.parentTermId = this.$el.attributes['parent-term-id'] != undefined ? this.$el.attributes['parent-term-id'].value : undefined;
|
||||
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
|
||||
this.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
|
|
|
@ -158,7 +158,8 @@ export default {
|
|||
metadatumId: String,
|
||||
metadatumType: String,
|
||||
collectionId: String,
|
||||
collectionSlug: String,
|
||||
collectionSlug: String,
|
||||
parentTermId: String,
|
||||
showImage: Boolean,
|
||||
showItemsCount: Boolean,
|
||||
showSearchBar: Boolean,
|
||||
|
@ -227,7 +228,15 @@ export default {
|
|||
queryObject.offset = this.offset;
|
||||
if (this.lastTerm != undefined)
|
||||
queryObject.last_term = this.lastTerm;
|
||||
|
||||
|
||||
// Set up parentTerm for taxonomies
|
||||
if (this.parentTermId !== undefined && this.parentTermId !== null && this.parentTermId !== '' && this.metadatumType == 'Taxonomy')
|
||||
queryObject.parent = this.parentTermId;
|
||||
else {
|
||||
delete queryObject.parent;
|
||||
this.parentTermId = null;
|
||||
}
|
||||
|
||||
// Parameter fo tech entity object with image and url
|
||||
queryObject['context'] = 'extended';
|
||||
|
||||
|
|
|
@ -422,7 +422,7 @@ registerBlockType('tainacan/facets-list', {
|
|||
<BaseControl
|
||||
id="parent-term-selection"
|
||||
label={ (parentTerm && (parentTerm.id === '0' || parentTerm.id === 0)) ? __('Showing only:', 'tainacan') : __('Showing children of:', 'tainacan') }
|
||||
help="Narrow terms to direct children of a this parent term."
|
||||
help="Narrow terms to children of a parent term."
|
||||
>
|
||||
<span style={{ fontWeight: 'bold' }}> { parentTerm && parentTerm.name ? parentTerm.name : __('Any term.', 'tainacan') }</span>
|
||||
<br />
|
||||
|
@ -542,7 +542,8 @@ registerBlockType('tainacan/facets-list', {
|
|||
setAttributes({
|
||||
metadatumId: metadatumId,
|
||||
metadatumType: metadatumType,
|
||||
isModalOpen: false
|
||||
isModalOpen: false,
|
||||
parentTerm: null
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
|
@ -585,7 +586,7 @@ registerBlockType('tainacan/facets-list', {
|
|||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openMetadataModal() }>
|
||||
{__('Configure search', 'tainacan')}
|
||||
{__('Select facets', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
): null
|
||||
|
@ -642,12 +643,32 @@ registerBlockType('tainacan/facets-list', {
|
|||
</svg>
|
||||
{__('List facets from a Tainacan Collection or Repository', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openMetadataModal() }>
|
||||
{__('Select facets', 'tainacan')}
|
||||
</Button>
|
||||
{
|
||||
parentTerm && parentTerm.id && metadatumType == 'Taxonomy'?
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openParentTermModal() }>
|
||||
{__('Change parent term', 'tainacan')}
|
||||
</Button>
|
||||
<p style={{ margin: '0 12px' }}>{__('or', 'tainacan')}</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openMetadataModal() }>
|
||||
{__('Change facets source', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openMetadataModal() }>
|
||||
{__('Select facets', 'tainacan')}
|
||||
</Button>
|
||||
}
|
||||
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
@ -699,7 +720,8 @@ registerBlockType('tainacan/facets-list', {
|
|||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
collectionSlug,
|
||||
collectionSlug,
|
||||
parentTerm,
|
||||
showImage,
|
||||
showItemsCount,
|
||||
showLoadMore,
|
||||
|
@ -711,13 +733,13 @@ registerBlockType('tainacan/facets-list', {
|
|||
maxFacetsNumber,
|
||||
showSearchBar,
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
className={ className }
|
||||
metadatum-id={ metadatumId }
|
||||
metadatum-type={ metadatumType }
|
||||
collection-id={ collectionId }
|
||||
collection-slug={ collectionSlug }
|
||||
collection-slug={ collectionSlug }
|
||||
parent-term-id={ parentTerm ? parentTerm.id : null }
|
||||
show-image={ '' + showImage }
|
||||
show-items-count={ '' + showItemsCount }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
|
|
|
@ -21,7 +21,6 @@ export default class ParentTermModal extends React.Component {
|
|||
lastTerm: undefined,
|
||||
temporaryFacetId: '',
|
||||
searchFacetName: '',
|
||||
facetOrderBy: 'date-desc',
|
||||
facets: [],
|
||||
facetsRequestSource: undefined
|
||||
};
|
||||
|
@ -56,15 +55,6 @@ export default class ParentTermModal extends React.Component {
|
|||
if (this.state.collectionId)
|
||||
endpoint = '/collection/' + this.props.collectionId + endpoint;
|
||||
|
||||
if (this.state.facetOrderBy == 'date')
|
||||
endpoint += '&orderby=date&order=asc';
|
||||
else if (this.state.facetOrderBy == 'date-desc')
|
||||
endpoint += '&orderby=date&order=desc';
|
||||
else if (this.state.facetOrderBy == 'title')
|
||||
endpoint += '&orderby=title&order=asc';
|
||||
else if (this.state.facetOrderBy == 'title-desc')
|
||||
endpoint += '&orderby=title&order=desc';
|
||||
|
||||
if (this.state.lastTerm != undefined)
|
||||
endpoint += 'last_term=' + this.state.lastTerm
|
||||
|
||||
|
@ -143,15 +133,6 @@ export default class ParentTermModal extends React.Component {
|
|||
if (name != undefined && name != '')
|
||||
endpoint += '&search=' + name;
|
||||
|
||||
if (this.state.facetOrderBy == 'date')
|
||||
endpoint += '&orderby=date&order=asc';
|
||||
else if (this.state.facetOrderBy == 'date-desc')
|
||||
endpoint += '&orderby=date&order=desc';
|
||||
else if (this.state.facetOrderBy == 'title')
|
||||
endpoint += '&orderby=title&order=asc';
|
||||
else if (this.state.facetOrderBy == 'title-desc')
|
||||
endpoint += '&orderby=title&order=desc';
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: aFacetRequestSource.token })
|
||||
.then(response => {
|
||||
let someFacets = response.data.values.map((facet) => ({ name: facet.label, id: facet.value + '' }));
|
||||
|
@ -198,30 +179,6 @@ export default class ParentTermModal extends React.Component {
|
|||
});
|
||||
_.debounce(this.fetchFacets(value), 300);
|
||||
}}/>
|
||||
<SelectControl
|
||||
label={__('Order by', 'tainacan')}
|
||||
value={ this.state.facetOrderBy }
|
||||
options={ [
|
||||
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
|
||||
{ label: __('Oldest', 'tainacan'), value: 'date' },
|
||||
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
|
||||
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
|
||||
] }
|
||||
onChange={ ( aFacetOrderBy ) => {
|
||||
this.state.facetOrderBy = aFacetOrderBy;
|
||||
this.state.offset = 0;
|
||||
this.state.lastTerm = undefined
|
||||
this.setState({
|
||||
facetOrderBy: this.state.facetOrderBy,
|
||||
offset: this.state.offset,
|
||||
lastTerm: this.state.lastTerm
|
||||
});
|
||||
if (this.state.searchFacetName && this.state.searchFacetName != '') {
|
||||
this.fetchFacets(this.state.searchFacetName);
|
||||
} else {
|
||||
this.fetchModalFacets();
|
||||
}
|
||||
}}/>
|
||||
</div>
|
||||
{(
|
||||
this.state.searchFacetName != '' ? (
|
||||
|
@ -262,8 +219,8 @@ export default class ParentTermModal extends React.Component {
|
|||
className={'repository-radio-option'}
|
||||
selected={ this.state.temporaryFacetId }
|
||||
options={ [
|
||||
{ label: __('Fetch terms children of any term', 'tainacan'), value: '' },
|
||||
{ label: __('Fetch terms with no parent (root terms)', 'tainacan'), value: '0' }
|
||||
{ label: __('Terms children of any term', 'tainacan'), value: '' },
|
||||
{ label: __('Terms with no parent (root terms)', 'tainacan'), value: '0' }
|
||||
] }
|
||||
onChange={ ( aFacetId ) => {
|
||||
this.setState({ temporaryFacetId: aFacetId});
|
||||
|
@ -308,7 +265,6 @@ export default class ParentTermModal extends React.Component {
|
|||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
disabled={ (this.state.searchFacetName != '' ? this.state.facets.find((facet) => facet.id == this.state.temporaryFacetId) : this.state.modalFacets.find((facet) => facet.id == this.state.temporaryFacetId)) != undefined}
|
||||
onClick={ () => { this.selectFacet(this.state.temporaryFacetId) } }>
|
||||
{__('Select term', 'tainacan')}
|
||||
</Button>
|
||||
|
|
Loading…
Reference in New Issue