Uses existing terms modal instead of creating a new one.
This commit is contained in:
Mateus Machado Luna
parent
4cd201863e
commit
eb84f34e7e
|
|
@ -1,309 +0,0 @@
|
||||||
import tainacan from '../../api-client/axios.js';
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
const { __ } = wp.i18n;
|
|
||||||
|
|
||||||
const { TextControl, Button, Modal, CheckboxControl, Spinner } = wp.components;
|
|
||||||
|
|
||||||
export default class TermsModal extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Initialize state
|
|
||||||
this.state = {
|
|
||||||
searchTermName: '',
|
|
||||||
termsRequestSource: undefined,
|
|
||||||
terms: [],
|
|
||||||
temporarySelectedTerms: [],
|
|
||||||
isLoadingTerms: false,
|
|
||||||
modalTerms: [],
|
|
||||||
totalModalTerms: 0,
|
|
||||||
termsPerPage: 24,
|
|
||||||
termsPage: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Bind events
|
|
||||||
this.selectTemporaryTerm = this.selectTemporaryTerm.bind(this);
|
|
||||||
this.removeTemporaryTermOfId = this.removeTemporaryTermOfId.bind(this);
|
|
||||||
this.applySelectedTerms = this.applySelectedTerms.bind(this);
|
|
||||||
this.isTemporaryTermSelected = this.isTemporaryTermSelected.bind(this);
|
|
||||||
this.toggleSelectTemporaryTerm = this.toggleSelectTemporaryTerm.bind(this);
|
|
||||||
this.cancelSelection = this.cancelSelection.bind(this);
|
|
||||||
this.selectTerm = this.selectTerm.bind(this);
|
|
||||||
this.fetchModalTerms = this.fetchModalTerms.bind(this);
|
|
||||||
this.fetchTerms = this.fetchTerms.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
|
|
||||||
this.fetchModalTerms();
|
|
||||||
|
|
||||||
this.setState( {
|
|
||||||
terms: [],
|
|
||||||
termsPage: 1,
|
|
||||||
temporarySelectedTerms: JSON.parse(JSON.stringify(this.props.selectedTermsObject))
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
|
|
||||||
selectTemporaryTerm(term) {
|
|
||||||
let existingTermIndex = this.state.temporarySelectedTerms.findIndex((existingTerm) => existingTerm.id == term.id);
|
|
||||||
|
|
||||||
if (existingTermIndex < 0) {
|
|
||||||
let aTemporarySelectedTerms = this.state.temporarySelectedTerms;
|
|
||||||
aTemporarySelectedTerms.push({
|
|
||||||
id: term.id,
|
|
||||||
name: term.name,
|
|
||||||
url: term.url,
|
|
||||||
thumbnail: term.thumbnail
|
|
||||||
});
|
|
||||||
this.setState({ temporarySelectedTerms: aTemporarySelectedTerms });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
removeTemporaryTermOfId(termId) {
|
|
||||||
|
|
||||||
let existingTermIndex = this.state.temporarySelectedTerms.findIndex((existingTerm) => existingTerm.id == termId);
|
|
||||||
|
|
||||||
if (existingTermIndex >= 0) {
|
|
||||||
let aTemporarySelectedTerms = this.state.temporarySelectedTerms;
|
|
||||||
aTemporarySelectedTerms.splice(existingTermIndex, 1);
|
|
||||||
this.setState({ temporarySelectedTerms: aTemporarySelectedTerms });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
applySelectedTerms() {
|
|
||||||
let aSelectedTermsObject = JSON.parse(JSON.stringify(this.state.temporarySelectedTerms));
|
|
||||||
this.props.onApplySelection(aSelectedTermsObject);
|
|
||||||
}
|
|
||||||
|
|
||||||
isTemporaryTermSelected(termId) {
|
|
||||||
return this.state.temporarySelectedTerms.findIndex(term => term.id == termId) >= 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleSelectTemporaryTerm(term, isChecked) {
|
|
||||||
if (isChecked)
|
|
||||||
this.selectTemporaryTerm(term);
|
|
||||||
else
|
|
||||||
this.removeTemporaryTermOfId(term.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelSelection() {
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
termsPage: 1,
|
|
||||||
modalTerms: []
|
|
||||||
});
|
|
||||||
|
|
||||||
this.props.onCancelSelection();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectTerm(selectedTermId) {
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
termId: selectedTermId
|
|
||||||
});
|
|
||||||
this.fetchTerm();
|
|
||||||
this.fetchModalTerms();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchModalTerms() {
|
|
||||||
|
|
||||||
let currentModalTerms = this.state.modalTerms;
|
|
||||||
if (this.state.termsPage <= 1)
|
|
||||||
currentModalTerms = [];
|
|
||||||
|
|
||||||
let endpoint = '/terms/?orderby=title&order=asc&perpage=' + this.state.termsPerPage + '&paged=' + this.state.termsPage;
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
isLoadingTerms: true,
|
|
||||||
modalTerms: currentModalTerms,
|
|
||||||
});
|
|
||||||
|
|
||||||
tainacan.get(endpoint)
|
|
||||||
.then(response => {
|
|
||||||
|
|
||||||
for (let term of response.data) {
|
|
||||||
currentModalTerms.push({
|
|
||||||
name: term.name,
|
|
||||||
id: term.id,
|
|
||||||
url: term.url,
|
|
||||||
thumbnail: [{
|
|
||||||
src: term.thumbnail['tainacan-medium'] != undefined ? term.thumbnail['tainacan-medium'][0] : term.thumbnail['medium'][0],
|
|
||||||
alt: term.name
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
termsPage: this.state.termsPage + 1,
|
|
||||||
isLoadingTerms: false,
|
|
||||||
modalTerms: currentModalTerms,
|
|
||||||
totalModalTerms: response.headers['x-wp-total']
|
|
||||||
});
|
|
||||||
|
|
||||||
return currentModalTerms;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log('Error trying to fetch terms: ' + error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchTerms(name) {
|
|
||||||
if (this.state.termsRequestSource != undefined)
|
|
||||||
this.state.termsRequestSource.cancel('Previous terms search canceled.');
|
|
||||||
|
|
||||||
let aTermRequestSource = axios.CancelToken.source();
|
|
||||||
this.setState({
|
|
||||||
termsRequestSource: aTermRequestSource,
|
|
||||||
isLoadingTerms: true
|
|
||||||
});
|
|
||||||
|
|
||||||
let endpoint = '/terms/?orderby=title&order=asc&perpage=' + this.state.termsPerPage;
|
|
||||||
|
|
||||||
if (name != undefined && name != '')
|
|
||||||
endpoint += '&search=' + name;
|
|
||||||
|
|
||||||
tainacan.get(endpoint, { cancelToken: aTermRequestSource.token })
|
|
||||||
.then(response => {
|
|
||||||
|
|
||||||
let someTerms = this.state.terms;
|
|
||||||
someTerms = response.data.map((term) => ({
|
|
||||||
name: term.name,
|
|
||||||
id: term.id,
|
|
||||||
url: term.url,
|
|
||||||
thumbnail: [{
|
|
||||||
src: term.thumbnail['tainacan-medium'] != undefined ? term.thumbnail['tainacan-medium'][0] : term.thumbnail['medium'][0],
|
|
||||||
alt: term.name
|
|
||||||
}]
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
isLoadingTerms: false,
|
|
||||||
terms: someTerms
|
|
||||||
});
|
|
||||||
|
|
||||||
return someTerms;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log('Error trying to fetch terms: ' + error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
className="wp-block-tainacan-modal"
|
|
||||||
title={__('Select the desired terms from your Taxonomy', 'tainacan')}
|
|
||||||
onRequestClose={ () => this.cancelSelection() }
|
|
||||||
contentLabel={__('Select terms', 'tainacan')}>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="modal-search-area">
|
|
||||||
<TextControl
|
|
||||||
label={__('Search for a term', 'tainacan')}
|
|
||||||
value={ this.state.searchTermName }
|
|
||||||
onInput={(value) => {
|
|
||||||
this.setState({
|
|
||||||
searchTermName: value.target.value
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onChange={(value) => this.fetchTerms(value)}/>
|
|
||||||
</div>
|
|
||||||
{(
|
|
||||||
this.state.searchTermName != '' ? (
|
|
||||||
|
|
||||||
this.state.terms.length > 0 ?
|
|
||||||
(
|
|
||||||
<div>
|
|
||||||
<ul className="modal-checkbox-list">
|
|
||||||
{
|
|
||||||
this.state.terms.map((term) =>
|
|
||||||
<li
|
|
||||||
key={ term.id }
|
|
||||||
className="modal-checkbox-list-item">
|
|
||||||
{ term.thumbnail ?
|
|
||||||
<img
|
|
||||||
aria-hidden
|
|
||||||
src={ term.thumbnail && term.thumbnail[0] && term.thumbnail[0].src ? term.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
|
||||||
alt={ term.thumbnail && term.thumbnail[0] ? term.thumbnail[0].alt : term.name }/>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
<CheckboxControl
|
|
||||||
label={ term.name }
|
|
||||||
checked={ this.isTemporaryTermSelected(term.id) }
|
|
||||||
onChange={ ( isChecked ) => { this.toggleSelectTemporaryTerm(term, isChecked) } }
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
: this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
|
|
||||||
<div className="modal-loadmore-section">
|
|
||||||
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
|
|
||||||
</div>
|
|
||||||
) :
|
|
||||||
this.state.modalTerms.length > 0 ?
|
|
||||||
(
|
|
||||||
<div>
|
|
||||||
<ul className="modal-checkbox-list">
|
|
||||||
{
|
|
||||||
this.state.modalTerms.map((term) =>
|
|
||||||
<li
|
|
||||||
key={ term.id }
|
|
||||||
className="modal-checkbox-list-item">
|
|
||||||
{ term.thumbnail ?
|
|
||||||
<img
|
|
||||||
aria-hidden
|
|
||||||
src={ term.thumbnail && term.thumbnail[0] && term.thumbnail[0].src ? term.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
|
||||||
alt={ term.thumbnail && term.thumbnail[0] ? term.thumbnail[0].alt : term.name }/>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
<CheckboxControl
|
|
||||||
label={ term.name }
|
|
||||||
checked={ this.isTemporaryTermSelected(term.id) }
|
|
||||||
onChange={ ( isChecked ) => { this.toggleSelectTemporaryTerm(term, isChecked) } } />
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
|
|
||||||
</ul>
|
|
||||||
<div className="modal-loadmore-section">
|
|
||||||
<p>{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}</p>
|
|
||||||
{
|
|
||||||
this.state.modalTerms.length < this.state.totalModalTerms ? (
|
|
||||||
<Button
|
|
||||||
isDefault
|
|
||||||
isSmall
|
|
||||||
onClick={ () => this.fetchModalTerms() }>
|
|
||||||
{__('Load more', 'tainacan')}
|
|
||||||
</Button>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : this.state.isLoadingTerms ? <Spinner /> :
|
|
||||||
<div className="modal-loadmore-section">
|
|
||||||
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="modal-footer-area">
|
|
||||||
<Button
|
|
||||||
isDefault
|
|
||||||
onClick={ () => this.cancelSelection() }>
|
|
||||||
{__('Cancel', 'tainacan')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
isPrimary
|
|
||||||
type="submit"
|
|
||||||
onClick={ () => this.applySelectedTerms() }>
|
|
||||||
{__('Finish', 'tainacan')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -6,7 +6,7 @@ const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl
|
||||||
|
|
||||||
const { InspectorControls } = wp.editor;
|
const { InspectorControls } = wp.editor;
|
||||||
|
|
||||||
import CarouselTermsModal from './carousel-terms-modal.js';
|
import TermsModal from '../terms-list/terms-modal.js';
|
||||||
import tainacan from '../../api-client/axios.js';
|
import tainacan from '../../api-client/axios.js';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
|
|
@ -98,6 +98,10 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
termTextColor: {
|
termTextColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "#ffffff"
|
default: "#ffffff"
|
||||||
|
},
|
||||||
|
taxonomyId: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
supports: {
|
supports: {
|
||||||
|
|
@ -118,7 +122,8 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
autoPlaySpeed,
|
autoPlaySpeed,
|
||||||
loopSlides,
|
loopSlides,
|
||||||
hideName,
|
hideName,
|
||||||
showTermThumbnail
|
showTermThumbnail,
|
||||||
|
taxonomyId
|
||||||
} = attributes;
|
} = attributes;
|
||||||
|
|
||||||
// Obtains block's client id to render it on save function
|
// Obtains block's client id to render it on save function
|
||||||
|
|
@ -214,7 +219,7 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
|
|
||||||
terms = [];
|
terms = [];
|
||||||
|
|
||||||
let endpoint = '/terms?'+ qs.stringify({ postin: selectedTerms }) + '&fetch_only=name,url,thumbnail';
|
let endpoint = '/taxonomy/' + taxonomyId + '/terms/?'+ qs.stringify({ postin: selectedTerms }) + '&fetch_only=name,url,header_image';
|
||||||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
|
||||||
|
|
@ -401,9 +406,14 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
(
|
(
|
||||||
<div>
|
<div>
|
||||||
{ isModalOpen ?
|
{ isModalOpen ?
|
||||||
<CarouselTermsModal
|
<TermsModal
|
||||||
|
existingTaxonomyId={ taxonomyId }
|
||||||
selectedTermsObject={ selectedTerms }
|
selectedTermsObject={ selectedTerms }
|
||||||
onApplySelection={ (aSelectionOfTerms) => {
|
onSelectTaxonomy={ (selectedTaxonomyId) => {
|
||||||
|
taxonomyId = selectedTaxonomyId;
|
||||||
|
setAttributes({ taxonomyId: taxonomyId });
|
||||||
|
}}
|
||||||
|
onApplySelection={ (aSelectionOfTerms) =>{
|
||||||
selectedTerms = selectedTerms.concat(aSelectionOfTerms.map((term) => { return term.id; }));
|
selectedTerms = selectedTerms.concat(aSelectionOfTerms.map((term) => { return term.id; }));
|
||||||
setAttributes({
|
setAttributes({
|
||||||
selectedTerms: selectedTerms,
|
selectedTerms: selectedTerms,
|
||||||
|
|
@ -530,7 +540,8 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
autoPlaySpeed,
|
autoPlaySpeed,
|
||||||
loopSlides,
|
loopSlides,
|
||||||
hideName,
|
hideName,
|
||||||
showTermThumbnail
|
showTermThumbnail,
|
||||||
|
taxonomyId
|
||||||
} = attributes;
|
} = attributes;
|
||||||
return <div
|
return <div
|
||||||
className={ className }
|
className={ className }
|
||||||
|
|
@ -541,6 +552,7 @@ registerBlockType('tainacan/carousel-terms-list', {
|
||||||
loop-slides={ '' + loopSlides }
|
loop-slides={ '' + loopSlides }
|
||||||
hide-name={ '' + hideName }
|
hide-name={ '' + hideName }
|
||||||
max-terms-number={ maxTermsNumber }
|
max-terms-number={ maxTermsNumber }
|
||||||
|
taxonomy-id={ taxonomyId }
|
||||||
tainacan-api-root={ tainacan_plugin.root }
|
tainacan-api-root={ tainacan_plugin.root }
|
||||||
tainacan-base-url={ tainacan_plugin.base_url }
|
tainacan-base-url={ tainacan_plugin.base_url }
|
||||||
show-term-thumbnail={ '' + showTermThumbnail }
|
show-term-thumbnail={ '' + showTermThumbnail }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue