tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Begins experiments with modal.

This commit is contained in:
Mateus Machado Luna 2019-03-01 15:09:05 -03:00
parent 67d61ecfbd
commit 0c616fa145
1 changed files with 109 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/gutenberg-blocks/tainacan-terms/terms-list/index.js
View File

@ -2,7 +2,9 @@ const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { IconButton, Spinner, ToggleControl, Placeholder, Toolbar } = wp.components;
const { TextControl, IconButton, Button, Modal, Spinner, ToggleControl, Placeholder, Toolbar } = wp.components;
const { InspectorControls, BlockControls } = wp.editor;
@ -110,6 +112,14 @@ registerBlockType('tainacan/terms-list', {
type: String,
default: 'grid'
},
isModalOpen: {
type: Boolean,
default: false
},
modalTerms: {
type: Array,
default: []
}
},
supports: {
align: ['full', 'left', 'right', 'wide'],
@ -128,7 +138,9 @@ registerBlockType('tainacan/terms-list', {
isLoadingTaxonomies,
taxonomies,
showImage,
layout
layout,
isModalOpen,
modalTerms
} = attributes;
function prepareTerm(term) {
@ -237,6 +249,41 @@ registerBlockType('tainacan/terms-list', {
});
}
function fetchModalTerms(offset) {
let endpoint = '/taxonomy/'+ taxonomyId + '/terms/?number=12&offset=' + offset;
if (name != undefined && name != '')
endpoint += '&searchterm=' + name;
tainacan.get(endpoint)
.then(response => {
modalTerms = response.data.map((term) => ({
name: term.name,
value: term.id + "", // same as string version of id, because autocomplete expects value
id: term.id,
url: term.url,
header_image: [{
src: term.header_image,
alt: term.name
}]
}));
isLoadingTerms = false;
setAttributes({
isLoadingTerms: isLoadingTerms,
modalTerms: modalTerms
});
return modalTerms;
})
.catch(error => {
console.log('Error trying to fetch terms: ' + error);
});
}
function fetchTaxonomy() {
tainacan.get('/taxonomies/' + taxonomyId)
.then((response) => {
@ -247,6 +294,11 @@ registerBlockType('tainacan/terms-list', {
});
}
function openTermsModal() {
fetchModalTerms(0);
setAttributes( { isModalOpen: true, terms: [] } );
}
function selectTerm(term) {
let existingTermIndex = selectedTermsObject.findIndex((existingTerm) => existingTerm.id == 'term-id-' + term.id);
@ -331,8 +383,61 @@ registerBlockType('tainacan/terms-list', {
</div>
{ isSelected ?
(<div>
(
<div>
<Button isDefault onClick={ () => openTermsModal() }>{__('Select terms', 'tainacan')}</Button>
{ isModalOpen && (
<Modal
title={__('Select the desired terms', 'tainacan')}
onRequestClose={ () => setAttributes( { isModalOpen: false } ) }
contentLabel={__('Select terms', 'tainacan')}>
{ isLoadingTerms ? <Spinner /> : null }
<TextControl
label={__('Search for a term', 'tainacan')}
value={ currentTermName }
onChange={(value) => {
setAttributes({
currentTermName: value
});
_.debounce(fetchTerms(value), 300);
}}/>
{
terms.length > 0 ?
(
<ul>
{
terms.map((term) =>
<li key={ term.id }>{ term.name }</li>
)
}
</ul>
)
:
modalTerms.length > 0 ?
(
<ul>
{
modalTerms.map((term) =>
<li key={ term.id }>{ term.name }</li>
)
}
</ul>
) : null
}
<Button isDefault onClick={ () => setAttributes( { isModalOpen: false } ) }>
{__('Cancel', 'tainacan')}
</Button>
<Button isDefault onClick={ () => setAttributes( { isModalOpen: false } ) }>
{__('Finish', 'tainacan')}
</Button>
</Modal>
) }
{ isLoadingTaxonomies || isLoadingTerms ? <Spinner /> : null }
<div className="block-control">