Theme side parent loading for facets. #334.

This commit is contained in:
Mateus Machado Luna 2019-11-19 11:06:55 -03:00
parent fdf47f29c8
commit 586f8c7cad
4 changed files with 52 additions and 62 deletions

View File

@ -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;

View File

@ -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';

View File

@ -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' }}>&nbsp;{ 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 }

View File

@ -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>