diff --git a/src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-modal.js b/src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-modal.js
index 145555eea..9a423acbc 100644
--- a/src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-modal.js
+++ b/src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-modal.js
@@ -3,141 +3,186 @@ import axios from 'axios';
const { __ } = wp.i18n;
-const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
+const { TextControl, Button, Modal, CheckboxControl, Spinner } = wp.components;
-export default class CarouselCollectionsModal extends React.Component {
+export default class CollectionsModal extends React.Component {
constructor(props) {
super(props);
// Initialize state
this.state = {
- collectionsPerPage: 24,
- collectionId: undefined,
- collectionName: '',
+ searchCollectionName: '',
+ collectionsRequestSource: undefined,
+ collections: [],
+ temporarySelectedCollections: [],
isLoadingCollections: false,
modalCollections: [],
- totalModalCollections: 0,
- collectionPage: 1,
- temporaryCollectionId: '',
- searchCollectionName: '',
- collections: [],
- collectionsRequestSource: undefined,
- searchURL: '',
- itemsPerPage: 12,
- loadStrategy: 'search'
+ totalModalCollections: 0,
+ collectionsPerPage: 24,
+ collectionsPage: 1,
};
// Bind events
- this.resetCollections = this.resetCollections.bind(this);
+ this.selectTemporaryCollection = this.selectTemporaryCollection.bind(this);
+ this.removeTemporaryCollectionOfId = this.removeTemporaryCollectionOfId.bind(this);
+ this.applySelectedCollections = this.applySelectedCollections.bind(this);
+ this.isTemporaryCollectionSelected = this.isTemporaryCollectionSelected.bind(this);
+ this.toggleSelectTemporaryCollection = this.toggleSelectTemporaryCollection.bind(this);
+ this.cancelSelection = this.cancelSelection.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);
- this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
- this.applySelectedItems = this.applySelectedItems.bind(this);
+ this.fetchCollections = this.fetchCollections.bind(this);
}
componentWillMount() {
+
+ this.fetchModalCollections();
- this.setState({
- collectionId: this.props.existingCollectionId
- });
-
- if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
- this.fetchCollection(this.props.existingCollectionId);
- this.setState({
- searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true' : '/items/?iframemode=true') });
- } else {
- this.setState({ collectionPage: 1 });
- this.fetchModalCollections();
+ this.setState( {
+ collections: [],
+ collectionsPage: 1,
+ temporarySelectedCollections: JSON.parse(JSON.stringify(this.props.selectedCollectionsObject))
+ } );
+ }
+
+ selectTemporaryCollection(collection) {
+ let existingCollectionIndex = this.state.temporarySelectedCollections.findIndex((existingCollection) => (existingCollection.id == 'collection-id-' + collection.id) || (existingCollection.id == collection.id));
+
+ if (existingCollectionIndex < 0) {
+ let collectionId = isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id;
+ let aTemporarySelectedCollections = this.state.temporarySelectedCollections;
+ aTemporarySelectedCollections.push({
+ id: collectionId,
+ name: collection.name,
+ url: collection.url,
+ thumbnail: collection.thumbnail
+ });
+ this.setState({ temporarySelectedCollections: aTemporarySelectedCollections });
}
}
- // COLLECTIONS RELATED --------------------------------------------------
+ removeTemporaryCollectionOfId(collectionId) {
+
+ let existingCollectionIndex = this.state.temporarySelectedCollections.findIndex((existingCollection) => ((existingCollection.id == 'collection-id-' + collectionId) || (existingCollection.id == collectionId)));
+
+ if (existingCollectionIndex >= 0) {
+ let aTemporarySelectedCollections = this.state.temporarySelectedCollections;
+ aTemporarySelectedCollections.splice(existingCollectionIndex, 1);
+ this.setState({ temporarySelectedCollections: aTemporarySelectedCollections });
+ }
+ }
+
+ applySelectedCollections() {
+ let aSelectedCollectionsObject = JSON.parse(JSON.stringify(this.state.temporarySelectedCollections));
+ this.props.onApplySelection(aSelectedCollectionsObject);
+ }
+
+ isTemporaryCollectionSelected(collectionId) {
+ return this.state.temporarySelectedCollections.findIndex(collection => (collection.id == collectionId) || (collection.id == 'collection-id-' + collectionId)) >= 0;
+ }
+
+ toggleSelectTemporaryCollection(collection, isChecked) {
+ if (isChecked)
+ this.selectTemporaryCollection(collection);
+ else
+ this.removeTemporaryCollectionOfId(collection.id);
+ }
+
+ cancelSelection() {
+
+ this.setState({
+ collectionsPage: 1,
+ modalCollections: []
+ });
+
+ this.props.onCancelSelection();
+ }
+
+ selectCollection(selectedCollectionId) {
+
+ this.setState({
+ collectionId: selectedCollectionId
+ });
+ this.fetchCollection();
+ this.fetchModalCollections();
+ }
+
fetchModalCollections() {
- let someModalCollections = this.state.modalCollections;
- if (this.state.collectionPage <= 1)
- someModalCollections = [];
-
- let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
+ let currentModalCollections = this.state.modalCollections;
+ if (this.state.collectionsPage <= 1)
+ currentModalCollections = [];
+ let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionsPage;
+
this.setState({
- isLoadingCollections: true,
- collectionPage: this.state.collectionPage + 1,
- modalCollections: someModalCollections
+ isLoadingCollections: true,
+ modalCollections: currentModalCollections,
});
tainacan.get(endpoint)
.then(response => {
- let otherModalCollections = this.state.modalCollections;
for (let collection of response.data) {
- otherModalCollections.push({
+ currentModalCollections.push({
name: collection.name,
- id: collection.id
+ id: collection.id,
+ url: collection.url,
+ thumbnail: [{
+ src: collection.thumbnail['tainacan-medium'] != undefined ? collection.thumbnail['tainacan-medium'][0] : collection.thumbnail['medium'][0],
+ alt: collection.name
+ }]
});
}
- this.setState({
+ this.setState({
+ collectionsPage: this.state.collectionsPage + 1,
isLoadingCollections: false,
- modalCollections: otherModalCollections,
+ modalCollections: currentModalCollections,
totalModalCollections: response.headers['x-wp-total']
});
-
- return otherModalCollections;
+
+ return currentModalCollections;
})
.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,
- searchURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true' : '/items/?iframemode=true')
- });
-
- this.props.onSelectCollection(selectedCollectionId);
- this.fetchCollection(selectedCollectionId);
- }
-
fetchCollections(name) {
-
if (this.state.collectionsRequestSource != undefined)
this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
let aCollectionRequestSource = axios.CancelToken.source();
-
- this.setState({
+ this.setState({
collectionsRequestSource: aCollectionRequestSource,
- isLoadingCollections: true,
- collections: [],
- items: []
+ isLoadingCollections: true
});
let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
+
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 + '' }));
+
+ let someCollections = this.state.collections;
+ someCollections = response.data.map((collection) => ({
+ name: collection.name,
+ id: collection.id,
+ url: collection.url,
+ thumbnail: [{
+ src: collection.thumbnail['tainacan-medium'] != undefined ? collection.thumbnail['tainacan-medium'][0] : collection.thumbnail['medium'][0],
+ alt: collection.name
+ }]
+ }));
this.setState({
isLoadingCollections: false,
collections: someCollections
});
-
+
return someCollections;
})
.catch(error => {
@@ -145,142 +190,87 @@ export default class CarouselCollectionsModal extends React.Component {
});
}
- applySelectedSearchURL() {
- let iframe = document.getElementById("itemsFrame");
- if (iframe) {
- this.props.onApplySearchURL(iframe.contentWindow.location.href);
- }
- }
-
- applySelectedItems() {
- let iframe = document.getElementById("itemsFrame");
- if (iframe) {
- let params = new URLSearchParams(iframe.contentWindow.location.search);
- let selectedItems = params.getAll('selecteditems');
- params.delete('selecteditems')
- this.props.onApplySelectedItems(selectedItems);
- }
- }
-
- resetCollections() {
-
- this.setState({
- collectionId: null,
- collectionPage: 1,
- modalCollections: []
- });
- this.fetchModalCollections();
- }
-
- cancelSelection() {
-
- this.setState({
- modalCollections: []
- });
-
- this.props.onCancelSelection();
- }
-
render() {
- return this.state.collectionId != null && this.state.collectionId != undefined ? (
- // Items modal
- { __('Sorry, no collection found.', 'tainacan') } { __('Sorry, no collections found.', 'tainacan') } { __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."} { __('Sorry, no collection found.', 'tainacan') } { __('Sorry, no collections found.', 'tainacan') }
+ {
+ this.state.collections.map((collection) =>
+
+ {
+ this.state.modalCollections.map((collection) =>
+