Begins implementation of items modal react component.
This commit is contained in:
Mateus Machado Luna
parent
f40a5cf3e7
commit
77a0bd0b64
|
|
@ -6,9 +6,7 @@ const { TextControl, RangeControl, IconButton, Button, Modal, CheckboxControl, R
|
|||
|
||||
const { InspectorControls, BlockControls } = wp.editor;
|
||||
|
||||
import tainacan from '../../api-client/axios.js';
|
||||
import qs from 'qs';
|
||||
import axios from 'axios';
|
||||
import ItemsModal from './items-modal.js';
|
||||
|
||||
registerBlockType('tainacan/items-list', {
|
||||
title: __('Tainacan Items List', 'tainacan'),
|
||||
|
|
@ -62,10 +60,6 @@ registerBlockType('tainacan/items-list', {
|
|||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
itemsPerPage: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
|
|
@ -74,42 +68,10 @@ registerBlockType('tainacan/items-list', {
|
|||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
temporaryCollectionId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isLoadingCollections: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLoadingItems: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collections: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
selectedItemsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
temporarySelectedItems: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
searchItemName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
collectionName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
@ -126,42 +88,6 @@ registerBlockType('tainacan/items-list', {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modalItems: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
totalModalItems: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
modalCollections: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
totalModalCollections: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
collectionPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
itemsPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
searchCollectionName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
itemsRequestSource: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
collectionsRequestSource: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
gridMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
|
|
@ -175,30 +101,12 @@ registerBlockType('tainacan/items-list', {
|
|||
let {
|
||||
selectedItemsObject,
|
||||
selectedItemsHTML,
|
||||
temporarySelectedItems,
|
||||
items,
|
||||
content,
|
||||
searchItemName,
|
||||
collectionId,
|
||||
collectionName,
|
||||
temporaryCollectionId,
|
||||
isLoadingItems,
|
||||
isLoadingCollections,
|
||||
collections,
|
||||
modalCollections,
|
||||
totalModalCollections,
|
||||
searchCollectionName,
|
||||
collectionPage,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
isModalOpen,
|
||||
modalItems,
|
||||
totalModalItems,
|
||||
itemsPerPage,
|
||||
itemsPage,
|
||||
itemsRequestSource,
|
||||
collectionsRequestSource,
|
||||
gridMargin
|
||||
} = attributes;
|
||||
|
||||
|
|
@ -226,232 +134,6 @@ registerBlockType('tainacan/items-list', {
|
|||
);
|
||||
}
|
||||
|
||||
function renderCollectionModalContent() {
|
||||
return (
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal"
|
||||
title={__('Select a collection to fetch items from', 'tainacan')}
|
||||
onRequestClose={ () => setAttributes( { isModalOpen: false } ) }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
<div>
|
||||
<div className="modal-search-area">
|
||||
<TextControl
|
||||
label={__('Search for a collection', 'tainacan')}
|
||||
value={ searchCollectionName }
|
||||
onChange={(value) => {
|
||||
setAttributes({
|
||||
searchCollectionName: value
|
||||
});
|
||||
fetchCollections(value);
|
||||
}}/>
|
||||
</div>
|
||||
{(
|
||||
searchCollectionName != '' ? (
|
||||
collections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ temporaryCollectionId }
|
||||
options={
|
||||
collections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
temporaryCollectionId = aCollectionId;
|
||||
setAttributes({ temporaryCollectionId: temporaryCollectionId });
|
||||
} } />
|
||||
}
|
||||
</div>
|
||||
{ isLoadingCollections ? <Spinner/> : null }
|
||||
</div>
|
||||
) :
|
||||
isLoadingCollections ? (
|
||||
<Spinner />
|
||||
) :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
):
|
||||
modalCollections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ temporaryCollectionId }
|
||||
options={
|
||||
modalCollections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
temporaryCollectionId = aCollectionId;
|
||||
setAttributes({ temporaryCollectionId: temporaryCollectionId });
|
||||
} } />
|
||||
}
|
||||
{ isLoadingItems ? <Spinner/> : null }
|
||||
</div>
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Showing', 'tainacan') + " " + modalCollections.length + " " + __('of', 'tainacan') + " " + totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
|
||||
{
|
||||
modalCollections.length < totalModalCollections ? (
|
||||
<Button
|
||||
isDefault
|
||||
isSmall
|
||||
onClick={ () => fetchModalCollections() }>
|
||||
{__('Load more', 'tainacan')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : isLoadingCollections ? <Spinner/> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isDefault
|
||||
onClick={ () => {
|
||||
isModalOpen = false;
|
||||
setAttributes({ isModalOpen: isModalOpen })
|
||||
}}>
|
||||
{__('Cancel', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
disabled={ temporaryCollectionId == undefined || temporaryCollectionId == null || temporaryCollectionId == ''}
|
||||
onClick={ () => selectCollection(temporaryCollectionId) }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function renderItemsModalContent() {
|
||||
return (
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal"
|
||||
title={__('Select the desired items from collection ' + collectionName, 'tainacan')}
|
||||
onRequestClose={ () => setAttributes( { isModalOpen: false } ) }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
<div>
|
||||
<div className="modal-search-area">
|
||||
<TextControl
|
||||
label={__('Search for an item', 'tainacan')}
|
||||
value={ searchItemName }
|
||||
onInput={(value) => {
|
||||
setAttributes({
|
||||
searchItemName: value.target.value
|
||||
});
|
||||
}}
|
||||
onChange={(value) => fetchItems(value)}/>
|
||||
</div>
|
||||
{(
|
||||
searchItemName != '' ? (
|
||||
|
||||
items.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<ul className="modal-checkbox-list">
|
||||
{
|
||||
items.map((item) =>
|
||||
<li
|
||||
key={ item.id }
|
||||
className="modal-checkbox-list-item">
|
||||
{ item.thumbnail && showImage ?
|
||||
<img
|
||||
aria-hidden
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
: null
|
||||
}
|
||||
<CheckboxControl
|
||||
label={ item.title }
|
||||
checked={ isTemporaryItemSelected(item.id) }
|
||||
onChange={ ( isChecked ) => { toggleSelectTemporaryItem(item, isChecked) } }
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
{ isLoadingItems ? <Spinner/> : null }
|
||||
</div>
|
||||
)
|
||||
: isLoadingItems ? <Spinner/> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no items found.', 'tainacan') }</p>
|
||||
</div>
|
||||
) :
|
||||
modalItems.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<ul className="modal-checkbox-list">
|
||||
{
|
||||
modalItems.map((item) =>
|
||||
<li
|
||||
key={ item.id }
|
||||
className="modal-checkbox-list-item">
|
||||
{ item.thumbnail && showImage ?
|
||||
<img
|
||||
aria-hidden
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
: null
|
||||
}
|
||||
<CheckboxControl
|
||||
label={ item.title }
|
||||
checked={ isTemporaryItemSelected(item.id) }
|
||||
onChange={ ( isChecked ) => { toggleSelectTemporaryItem(item, isChecked) } } />
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{ isLoadingItems ? <Spinner/> : null }
|
||||
</ul>
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Showing', 'tainacan') + " " + modalItems.length + " " + __('of', 'tainacan') + " " + totalModalItems + " " + __('items', 'tainacan') + "."}</p>
|
||||
{
|
||||
modalItems.length < totalModalItems ? (
|
||||
<Button
|
||||
isDefault
|
||||
isSmall
|
||||
onClick={ () => fetchModalItems() }>
|
||||
{__('Load more', 'tainacan')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : isLoadingItems ? <Spinner /> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no items found.', 'tainacan') }</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isDefault
|
||||
onClick={ () => resetCollections() }>
|
||||
{__('Switch collection', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => applySelectedItems() }>
|
||||
{__('Finish', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
|
||||
selectedItemsHTML = [];
|
||||
|
|
@ -471,48 +153,6 @@ registerBlockType('tainacan/items-list', {
|
|||
});
|
||||
}
|
||||
|
||||
function fetchCollections(name) {
|
||||
|
||||
if (collectionsRequestSource != undefined)
|
||||
collectionsRequestSource.cancel('Previous collections search canceled.');
|
||||
|
||||
collectionsRequestSource = axios.CancelToken.source();
|
||||
|
||||
setAttributes({
|
||||
collectionsRequestSource: collectionsRequestSource
|
||||
})
|
||||
|
||||
isLoadingCollections = true;
|
||||
collections = [];
|
||||
items = []
|
||||
|
||||
setAttributes({
|
||||
isLoadingCollections: isLoadingCollections,
|
||||
collections: collections,
|
||||
items: items
|
||||
});
|
||||
|
||||
let endpoint = '/collections/?perpage=' + itemsPerPage;
|
||||
if (name != undefined && name != '')
|
||||
endpoint += '&search=' + name;
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: collectionsRequestSource.token })
|
||||
.then(response => {
|
||||
collections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
|
||||
isLoadingCollections = false;
|
||||
|
||||
setAttributes({
|
||||
isLoadingCollections: isLoadingCollections,
|
||||
collections: collections
|
||||
});
|
||||
|
||||
return collections;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch collections: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchModalCollections() {
|
||||
|
||||
if (collectionPage <= 1)
|
||||
|
|
@ -596,67 +236,6 @@ registerBlockType('tainacan/items-list', {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
function fetchModalItems() {
|
||||
|
||||
if (itemsPage <= 1)
|
||||
modalItems = [];
|
||||
|
||||
let endpoint = '/collection/'+ collectionId + '/items/?fetch_only=title,thumbnail&perpage=' + itemsPerPage + '&paged=' + itemsPage;
|
||||
|
||||
isLoadingItems = true;
|
||||
itemsPage++;
|
||||
|
||||
setAttributes({
|
||||
isLoadingItems: isLoadingItems,
|
||||
modalItems: modalItems,
|
||||
itemsPage: itemsPage
|
||||
});
|
||||
|
||||
tainacan.get(endpoint)
|
||||
.then(response => {
|
||||
for (let item of response.data) {
|
||||
modalItems.push({
|
||||
title: item.title,
|
||||
id: item.id,
|
||||
url: item.url,
|
||||
thumbnail: [{
|
||||
src: item.thumbnail['tainacan-medium'] != undefined ? item.thumbnail['tainacan-medium'][0] : item.thumbnail['medium'][0],
|
||||
alt: item.title
|
||||
}]
|
||||
});
|
||||
}
|
||||
isLoadingItems = false;
|
||||
totalModalItems = response.headers['x-wp-total'];
|
||||
|
||||
setAttributes({
|
||||
isLoadingItems: isLoadingItems,
|
||||
modalItems: modalItems,
|
||||
totalModalItems: totalModalItems
|
||||
});
|
||||
|
||||
return modalItems;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch items: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
function resetCollections() {
|
||||
itemsPage = 1;
|
||||
collectionId = null;
|
||||
collectionPage = 1;
|
||||
modalItems = [];
|
||||
|
||||
setAttributes({
|
||||
itemsPage: itemsPage,
|
||||
collectionId: collectionId,
|
||||
collectionPage: collectionPage,
|
||||
modalItems: modalItems
|
||||
});
|
||||
fetchModalCollections();
|
||||
}
|
||||
|
||||
function openItemsModal() {
|
||||
temporarySelectedItems = JSON.parse(JSON.stringify(selectedItemsObject));
|
||||
|
||||
|
|
@ -851,9 +430,25 @@ registerBlockType('tainacan/items-list', {
|
|||
{ isSelected ?
|
||||
(
|
||||
<div>
|
||||
{ isModalOpen && (
|
||||
collectionId != null && collectionId != undefined ? renderItemsModalContent() : renderCollectionModalContent()
|
||||
) }
|
||||
{ isModalOpen ?
|
||||
<TermsModal
|
||||
existingTaxonomyId={ taxonomyId }
|
||||
selectedTermsObject={ selectedTermsObject }
|
||||
onSelectTaxonomy={ (selectedTaxonomyId) => {
|
||||
taxonomyId = selectedTaxonomyId;
|
||||
setAttributes({ taxonomyId: taxonomyId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedTermsObject) =>{
|
||||
selectedTermsObject = aSelectedTermsObject
|
||||
setAttributes({
|
||||
selectedTermsObject: selectedTermsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
|
||||
<div className="block-control">
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,523 @@
|
|||
import tainacan from '../../api-client/axios.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const { TextControl, Button, Modal, CheckboxControl, RadioControl, Spinner } = wp.components;
|
||||
|
||||
export default class ItemsModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// Initialize state
|
||||
this.state = {
|
||||
modalItems: [],
|
||||
totalModalItems: 0,
|
||||
itemsPerPage: 24,
|
||||
searchItemName: '',
|
||||
temporarySelectedItems: [],
|
||||
items: [],
|
||||
isLoadingItems: false,
|
||||
itemsRequestSource: undefined,
|
||||
collectionId: undefined,
|
||||
collectionName: '',
|
||||
isLoadingCollections: false,
|
||||
modalCollections: [],
|
||||
totalModalCollections: 0,
|
||||
collectionPage: 1,
|
||||
itemsPage: 1,
|
||||
temporaryCollectionId: '',
|
||||
searchCollectionName: '',
|
||||
collections: [],
|
||||
collectionsRequestSource: undefined,
|
||||
};
|
||||
|
||||
// Bind events
|
||||
this.fetchItems = this.fetchItems.bind(this);
|
||||
this.fetchModalItems = this.fetchModalItems.bind(this);
|
||||
this.isTemporaryItemSelected = this.isTemporaryItemSelected.bind(this);
|
||||
this.toggleSelectTemporaryItem = this.toggleSelectTemporaryItem.bind(this);
|
||||
this.selectTemporaryItem = this.selectTemporaryItem.bind(this);
|
||||
this.removeTemporaryItemOfId = this.removeTemporaryItemOfId.bind(this);
|
||||
this.applySelectedItems = this.applySelectedItems.bind(this);
|
||||
this.resetCollections = this.resetCollections.bind(this);
|
||||
this.selectCollection = this.selectCollection.bind(this);
|
||||
this.fetchCollections = this.fetchCollections.bind(this);
|
||||
this.fetchModalCollections = this.fetchModalCollections.bind(this);
|
||||
this.fetchCollection = this.fetchCollection.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
this.setState({
|
||||
collectionId: this.props.existingCollectionId,
|
||||
temporarySelectedItems: JSON.parse(JSON.stringify(this.props.selectedItemsObject))
|
||||
});
|
||||
|
||||
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
|
||||
this.fetchCollection(this.props.existingCollectionId);
|
||||
this.fetchModalItems(0, this.props.existingCollectionId);
|
||||
} else {
|
||||
this.setState({ collectionPage: 1 });
|
||||
this.fetchModalCollections();
|
||||
}
|
||||
}
|
||||
|
||||
// TERMS RELATED --------------------------------------------------
|
||||
selectTemporaryItem(item) {
|
||||
let existingItemIndex = this.state.temporarySelectedItems.findIndex((existingItem) => (existingItem.id == 'item-id-' + item.id) || (existingItem.id == item.id));
|
||||
|
||||
if (existingItemIndex < 0) {
|
||||
let itemId = isNaN(item.id) ? item.id : 'item-id-' + item.id;
|
||||
let aTemporarySelectedItems = this.state.temporarySelectedItems;
|
||||
aTemporarySelectedItems.push({
|
||||
id: itemId,
|
||||
title: item.title,
|
||||
url: item.url,
|
||||
thumbnail: item.thumbnail
|
||||
});
|
||||
this.setState({ temporarySelectedItems: aTemporarySelectedItems });
|
||||
}
|
||||
}
|
||||
|
||||
removeTemporaryItemOfId(itemId) {
|
||||
|
||||
let existingItemIndex = this.state.temporarySelectedItems.findIndex((existingItem) => ((existingItem.id == 'item-id-' + itemId) || (existingItem.id == itemId)));
|
||||
|
||||
if (existingItemIndex >= 0) {
|
||||
|
||||
let aTemporarySelectedItems = this.state.temporarySelectedItems;
|
||||
aTemporarySelectedItems.splice(existingItemIndex, 1);
|
||||
this.setState({ temporarySelectedItems: aTemporarySelectedItems });
|
||||
}
|
||||
}
|
||||
|
||||
applySelectedItems() {
|
||||
let aSelectedItemsObject = JSON.parse(JSON.stringify(this.state.temporarySelectedItems));
|
||||
this.props.onApplySelection(aSelectedItemsObject);
|
||||
}
|
||||
|
||||
cancelSelection() {
|
||||
|
||||
this.setState({
|
||||
modalItems: [],
|
||||
modalCollections: []
|
||||
});
|
||||
|
||||
this.props.onCancelSelection();
|
||||
}
|
||||
|
||||
isTemporaryItemSelected(itemId) {
|
||||
return this.state.temporarySelectedItems.findIndex(item => (item.id == itemId) || (item.id == 'item-id-' + itemId)) >= 0;
|
||||
}
|
||||
|
||||
toggleSelectTemporaryItem(item, isChecked) {
|
||||
if (isChecked)
|
||||
this.selectTemporaryItem(item);
|
||||
else
|
||||
this.removeTemporaryItemOfId(item.id);
|
||||
|
||||
this.setState({ temporarySelectedItems: this.state.temporarySelectedItems });
|
||||
// setContent();
|
||||
}
|
||||
|
||||
fetchItems(name) {
|
||||
|
||||
if (this.state.itemsRequestSource != undefined)
|
||||
this.state.itemsRequestSource.cancel('Previous items search canceled.');
|
||||
|
||||
let anItemsRequestSource = axios.CancelToken.source();
|
||||
|
||||
let endpoint = '/collection/'+ this.state.collectionId + '/items/?fetch_only=title,thumbnail&perpage=' + this.state.itemsPerPage;
|
||||
|
||||
if (name != undefined && name != '')
|
||||
endpoint += '&searchitem=' + name;
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: anItemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
let someItems = response.data.map((item) => ({
|
||||
name: item.title,
|
||||
id: item.id,
|
||||
url: item.url,
|
||||
thumbnail: [{
|
||||
src: item.thumbnail['tainacan-medium'] != undefined ? item.thumbnail['tainacan-medium'][0] : item.thumbnail['medium'][0],
|
||||
alt: item.title
|
||||
}]
|
||||
}));
|
||||
|
||||
this.setState({
|
||||
isLoadingItems: false,
|
||||
items: someItems
|
||||
});
|
||||
|
||||
return someItems;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch items: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchModalItems(collectionId) {
|
||||
|
||||
let someModalItems = this.state.modalItems;
|
||||
|
||||
if (this.state.itemsPage <= 1) {}
|
||||
someModalItems = [];
|
||||
|
||||
let endpoint = '/collection/'+ collectionId + '/items/?fetch_only=title,thumbnail&perpage=' + this.state.itemsPerPage + '&paged=' + this.state.itemsPage;
|
||||
|
||||
this.setState({
|
||||
isLoadingItems: true,
|
||||
modalItems: someModalItems,
|
||||
itemsPage: this.state.itemsPage + 1
|
||||
});
|
||||
|
||||
tainacan.get(endpoint)
|
||||
.then(response => {
|
||||
|
||||
let otherModalItems = this.state.modalItems;
|
||||
for (let item of response.data) {
|
||||
otherModalItems.push({
|
||||
name: item.title,
|
||||
id: item.id,
|
||||
url: item.url,
|
||||
thumbnail: [{
|
||||
src: item.thumbnail['tainacan-medium'] != undefined ? item.thumbnail['tainacan-medium'][0] : item.thumbnail['medium'][0],
|
||||
alt: item.title
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isLoadingItems: false,
|
||||
modalItems: otherModalItems,
|
||||
totalModalItems: response.headers['x-wp-total']
|
||||
});
|
||||
|
||||
return otherModalItems;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch items: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
// TAXONOMY RELATED --------------------------------------------------
|
||||
fetchModalCollections() {
|
||||
|
||||
let someModalCollections = this.state.modalCollections;
|
||||
if (this.state.collectionPage <= 1)
|
||||
someModalCollections = [];
|
||||
|
||||
let endpoint = '/collections/?perpage=' + this.state.itemsPerPage + '&paged=' + this.state.collectionPage;
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: true,
|
||||
collectionPage: this.state.collectionPage + 1,
|
||||
modalCollections: someModalCollections
|
||||
});
|
||||
|
||||
tainacan.get(endpoint)
|
||||
.then(response => {
|
||||
|
||||
let otherModalCollections = this.state.modalCollections;
|
||||
for (let collection of response.data) {
|
||||
otherModalCollections.push({
|
||||
name: collection.name,
|
||||
id: collection.id
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: false,
|
||||
modalCollections: otherModalCollections,
|
||||
totalModalCollections: response.headers['x-wp-total']
|
||||
});
|
||||
|
||||
return otherModalCollections;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch collections: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchCollection(collectionId) {
|
||||
tainacan.get('/collections/' + collectionId)
|
||||
.then((response) => {
|
||||
this.setState({ collectionName: response.data.name });
|
||||
}).catch(error => {
|
||||
console.log('Error trying to fetch collection: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
selectCollection(selectedCollectionId) {
|
||||
this.setState({
|
||||
collectionId: selectedCollectionId
|
||||
});
|
||||
this.props.onSelectCollection(selectedCollectionId);
|
||||
this.fetchCollection(selectedCollectionId);
|
||||
this.fetchModalItems(selectedCollectionId);
|
||||
}
|
||||
|
||||
fetchCollections(name) {
|
||||
|
||||
if (this.state.collectionsRequestSource != undefined)
|
||||
this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
|
||||
|
||||
let aCollectionRequestSource = axios.CancelToken.source();
|
||||
|
||||
this.setState({
|
||||
collectionsRequestSource: aCollectionRequestSource,
|
||||
isLoadingCollections: true,
|
||||
collections: [],
|
||||
items: []
|
||||
});
|
||||
|
||||
let endpoint = '/collections/?perpage=' + this.state.itemsPerPage;
|
||||
if (name != undefined && name != '')
|
||||
endpoint += '&search=' + name;
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
|
||||
.then(response => {
|
||||
let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: false,
|
||||
collections: someCollections
|
||||
});
|
||||
|
||||
return someCollections;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch collections: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
resetCollections() {
|
||||
|
||||
this.setState({
|
||||
itemsPage: 1,
|
||||
collectionId: null,
|
||||
collectionPage: 1,
|
||||
modalCollections: [],
|
||||
modalItems: []
|
||||
});
|
||||
this.fetchModalCollections();
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.state.collectionId != null && this.state.collectionId != undefined ? (
|
||||
// Items modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal"
|
||||
title={__('Select the desired items from collection ' + this.state.collectionName, 'tainacan')}
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
|
||||
<div>
|
||||
<div className="modal-search-area">
|
||||
<TextControl
|
||||
label={__('Search for a item', 'tainacan')}
|
||||
value={ this.state.searchItemName }
|
||||
onChange={(value) => {
|
||||
this.setState({
|
||||
searchItemName: value
|
||||
});
|
||||
_.debounce(this.fetchItems(value), 300);
|
||||
}}/>
|
||||
</div>
|
||||
{(
|
||||
this.state.searchItemName != '' ? (
|
||||
|
||||
this.state.items.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<ul className="modal-checkbox-list">
|
||||
{
|
||||
this.state.items.map((item) =>
|
||||
<li
|
||||
key={ item.id }
|
||||
className="modal-checkbox-list-item">
|
||||
{ item.header_image ?
|
||||
<img
|
||||
aria-hidden
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
: null
|
||||
}
|
||||
<CheckboxControl
|
||||
label={ item.title }
|
||||
checked={ this.isTemporaryItemSelected(item.id) }
|
||||
onChange={ ( isChecked ) => { this.toggleSelectTemporaryItem(item, isChecked) } }
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
{ this.state.isLoadingItems ? <Spinner /> : null }
|
||||
</div>
|
||||
)
|
||||
: this.state.isLoadingItems ? <Spinner/> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no items found.', 'tainacan') }</p>
|
||||
</div>
|
||||
) :
|
||||
this.state.modalItems.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<ul className="modal-checkbox-list">
|
||||
{
|
||||
this.state.modalItems.map((item) =>
|
||||
<li
|
||||
key={ item.id }
|
||||
className="modal-checkbox-list-item">
|
||||
{ item.thumbnail && showImage ?
|
||||
<img
|
||||
aria-hidden
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
: null
|
||||
}
|
||||
<CheckboxControl
|
||||
label={ item.title }
|
||||
checked={ this.isTemporaryItemSelected(item.id) }
|
||||
onChange={ ( isChecked ) => { this.toggleSelectTemporaryItem(item, isChecked) } } />
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
{ this.state.isLoadingItems ? <Spinner /> : null }
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Showing', 'tainacan') + " " + this.state.modalItems.length + " " + __('of', 'tainacan') + " " + this.state.totalModalItems + " " + __('items', 'tainacan') + "."}</p>
|
||||
{
|
||||
this.state.modalItems.length < this.state.totalModalItems ? (
|
||||
<Button
|
||||
isDefault
|
||||
isSmall
|
||||
onClick={ () => this.fetchModalItems(this.state.collectionId) }>
|
||||
{__('Load more', 'tainacan')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : this.state.isLoadingItems ? <Spinner /> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no items found.', 'tainacan') }</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isDefault
|
||||
onClick={ () => this.resetCollections() }>
|
||||
{__('Switch collection', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => this.applySelectedItems() }>
|
||||
{__('Finish', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
// Collections modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal"
|
||||
title={__('Select a collection to fetch items from', 'tainacan')}
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
<div>
|
||||
<div className="modal-search-area">
|
||||
<TextControl
|
||||
label={__('Search for a collection', 'tainacan')}
|
||||
value={ this.state.searchCollectionName }
|
||||
onChange={(value) => {
|
||||
this.setState({
|
||||
searchCollectionName: value
|
||||
});
|
||||
_.debounce(this.fetchCollections(value), 300);
|
||||
}}/>
|
||||
</div>
|
||||
{(
|
||||
this.state.searchCollectionName != '' ? (
|
||||
this.state.collections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ this.state.temporaryCollectionId }
|
||||
options={
|
||||
this.state.collections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
this.setState({ temporaryCollectionId: aCollectionId });
|
||||
} } />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
this.state.isLoadingCollections ? (
|
||||
<Spinner />
|
||||
) :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
):
|
||||
this.state.modalCollections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ this.state.temporaryCollectionId }
|
||||
options={
|
||||
this.state.modalCollections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
this.setState({ temporaryCollectionId: aCollectionId });
|
||||
} } />
|
||||
}
|
||||
</div>
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
|
||||
{
|
||||
this.state.modalCollections.length < this.state.totalModalCollections ? (
|
||||
<Button
|
||||
isDefault
|
||||
isSmall
|
||||
onClick={ () => this.fetchModalCollections() }>
|
||||
{__('Load more', 'tainacan')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : this.state.isLoadingCollections ? <Spinner/> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isDefault
|
||||
onClick={ () => { this.cancelSelection() }}>
|
||||
{__('Cancel', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
|
||||
onClick={ () => this.selectCollection(this.state.temporaryCollectionId) }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -243,16 +243,16 @@ registerBlockType('tainacan/terms-list', {
|
|||
<div>
|
||||
{ isModalOpen ?
|
||||
<TermsModal
|
||||
existingTaxonomyId={ taxonomyId }
|
||||
selectedTermsObject={ selectedTermsObject }
|
||||
onSelectTaxonomy={ (selectedTaxonomyId) => {
|
||||
taxonomyId = selectedTaxonomyId;
|
||||
setAttributes({ taxonomyId: taxonomyId });
|
||||
existingCollectionId={ collectionId }
|
||||
selectedItemsObject={ selectedItemsObject }
|
||||
onSelectCollections={ (selectedCollectionId) => {
|
||||
collectionId = selectedCollectionId;
|
||||
setAttributes({ collectionId: collectionId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedTermsObject) =>{
|
||||
selectedTermsObject = aSelectedTermsObject
|
||||
onApplySelection={ (aSelectedItemObject) =>{
|
||||
selectedItemsObject = aSelectedItemsObject
|
||||
setAttributes({
|
||||
selectedTermsObject: selectedTermsObject,
|
||||
selectedItemsObject: selectedItemsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
|
|
|
|||
Loading…
Reference in New Issue