From f40a5cf3e7e169f2815eed9649b2b82f7f172a21 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Wed, 17 Apr 2019 11:50:30 -0300 Subject: [PATCH] Creates terms modal component, simplifles code of terms list gutenberg block. --- .../tainacan-terms/terms-list/index.js | 580 +----------------- .../tainacan-terms/terms-list/terms-modal.js | 507 +++++++++++++++ 2 files changed, 534 insertions(+), 553 deletions(-) create mode 100644 src/gutenberg-blocks/tainacan-terms/terms-list/terms-modal.js diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 602d1ccd0..73126439b 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -2,11 +2,11 @@ const { registerBlockType } = wp.blocks; const { __ } = wp.i18n; -const { TextControl, IconButton, Button, Modal, CheckboxControl, RadioControl, Spinner, ToggleControl, Placeholder, Toolbar } = wp.components; +const { IconButton, Button, ToggleControl, Placeholder, Toolbar } = wp.components; const { InspectorControls, BlockControls } = wp.editor; -import tainacan from '../../api-client/axios.js'; +import TermsModal from './terms-modal.js'; registerBlockType('tainacan/terms-list', { title: __('Tainacan Terms List', 'tainacan'), @@ -59,54 +59,14 @@ registerBlockType('tainacan/terms-list', { source: 'children', selector: 'div' }, - termsPerPage: { - type: Number, - default: 24 - }, query: { type: Object, default: {} }, - taxonomyId: { - type: String, - default: undefined - }, - temporaryTaxonomyId: { - type: String, - default: '' - }, - isLoadingTaxonomies: { - type: Boolean, - default: false - }, - isLoadingTerms: { - type: Boolean, - default: false - }, - taxonomies: { - type: Array, - default: [] - }, - terms: { - type: Array, - default: [] - }, selectedTermsHTML: { type: Array, default: [] }, - temporarySelectedTerms: { - type: Array, - default: [] - }, - searchTermName: { - type: String, - default: '' - }, - taxonomyName: { - type: String, - default: '' - }, showImage: { type: Boolean, default: true @@ -123,29 +83,9 @@ registerBlockType('tainacan/terms-list', { type: Boolean, default: false }, - modalTerms: { - type: Array, - default: [] - }, - totalModalTerms: { - type: Number, - default: 0 - }, - modalTaxonomies: { - type: Array, - default: [] - }, - totalModalTaxonomies: { - type: Number, - default: 0 - }, - taxonomyPage: { - type: Number, - default: 1 - }, - searchTaxonomyName: { + taxonomyId: { type: String, - default: '' + default: undefined }, }, supports: { @@ -156,27 +96,12 @@ registerBlockType('tainacan/terms-list', { let { selectedTermsObject, selectedTermsHTML, - temporarySelectedTerms, - terms, - content, - searchTermName, - taxonomyId, - taxonomyName, - temporaryTaxonomyId, - isLoadingTerms, - isLoadingTaxonomies, - taxonomies, - modalTaxonomies, - totalModalTaxonomies, - searchTaxonomyName, - taxonomyPage, + content, showImage, showName, layout, isModalOpen, - modalTerms, - totalModalTerms, - termsPerPage + taxonomyId, } = attributes; function prepareTerm(term) { @@ -202,229 +127,6 @@ registerBlockType('tainacan/terms-list', { ); } - function renderTaxonomyModalContent() { - return ( - setAttributes( { isModalOpen: false } ) } - contentLabel={__('Select terms', 'tainacan')}> -
-
- { - setAttributes({ - searchTaxonomyName: value - }); - _.debounce(fetchTaxonomies(value), 300); - }}/> -
- {( - searchTaxonomyName != '' ? ( - taxonomies.length > 0 ? - ( -
-
- { - { - return { label: taxonomy.name, value: '' + taxonomy.id } - }) - } - onChange={ ( aTaxonomyId ) => { - temporaryTaxonomyId = aTaxonomyId; - setAttributes({ temporaryTaxonomyId: temporaryTaxonomyId }); - } } /> - } -
-
- ) : - isLoadingTaxonomies ? ( - - ) : -
-

{ __('Sorry, no taxonomy found.', 'tainacan') }

-
- ): - modalTaxonomies.length > 0 ? - ( -
-
- { - { - return { label: taxonomy.name, value: '' + taxonomy.id } - }) - } - onChange={ ( aTaxonomyId ) => { - temporaryTaxonomyId = aTaxonomyId; - setAttributes({ temporaryTaxonomyId: temporaryTaxonomyId }); - } } /> - } -
-
-

{ __('Showing', 'tainacan') + " " + modalTaxonomies.length + " " + __('of', 'tainacan') + " " + totalModalTaxonomies + " " + __('taxonomies', 'tainacan') + "."}

- { - modalTaxonomies.length < totalModalTaxonomies ? ( - - ) : null - } -
-
- ) : isLoadingTaxonomies ? : -
-

{ __('Sorry, no taxonomy found.', 'tainacan') }

-
- )} -
- - -
-
-
- ); - } - - function renderTermsModalContent() { - return ( - setAttributes( { isModalOpen: false } ) } - contentLabel={__('Select terms', 'tainacan')}> - -
-
- { - setAttributes({ - searchTermName: value - }); - _.debounce(fetchTerms(value), 300); - }}/> -
- {( - searchTermName != '' ? ( - - terms.length > 0 ? - ( -
-
    - { - terms.map((term) => -
  • - { term.header_image && showImage ? - { - : null - } - { toggleSelectTemporaryTerm(term, isChecked) } } - /> -
  • - ) - } -
- { isLoadingTerms ? : null } -
- ) - : isLoadingTerms ? : -
-

{ __('Sorry, no terms found.', 'tainacan') }

-
- ) : - modalTerms.length > 0 ? - ( -
-
    - { - modalTerms.map((term) => -
  • - { term.header_image && showImage ? - { - : null - } - { toggleSelectTemporaryTerm(term, isChecked) } } /> -
  • - ) - } -
- { isLoadingTerms ? : null } -
-

{ __('Showing', 'tainacan') + " " + modalTerms.length + " " + __('of', 'tainacan') + " " + totalModalTerms + " " + __('terms', 'tainacan') + "."}

- { - modalTerms.length < totalModalTerms ? ( - - ) : null - } -
-
- ) : isLoadingTerms ? : -
-

{ __('Sorry, no terms found.', 'tainacan') }

-
- )} -
- - -
-
-
- ); - } - function setContent(){ selectedTermsHTML = []; @@ -440,248 +142,14 @@ registerBlockType('tainacan/terms-list', { }); } - function fetchTaxonomies(name) { - isLoadingTaxonomies = true; - taxonomies = []; - terms = [] - - setAttributes({ - isLoadingTaxonomies: isLoadingTaxonomies, - taxonomies: taxonomies, - terms: terms - }); - - let endpoint = '/taxonomies/?perpage=' + termsPerPage; - if (name != undefined && name != '') - endpoint += '&search=' + name; - - tainacan.get(endpoint) - .then(response => { - taxonomies = response.data.map((taxonomy) => ({ name: taxonomy.name, id: taxonomy.id + '' })); - isLoadingTaxonomies = false; - - setAttributes({ - isLoadingTaxonomies: isLoadingTaxonomies, - taxonomies: taxonomies - }); - - return taxonomies; - }) - .catch(error => { - console.log('Error trying to fetch taxonomies: ' + error); - }); - } - - function fetchModalTaxonomies() { - - if (taxonomyPage <= 1) - modalTaxonomies = []; - - let endpoint = '/taxonomies/?perpage=' + termsPerPage + '&paged=' + taxonomyPage; - - taxonomyPage++; - isLoadingTaxonomies = true; - - setAttributes({ - isLoadingTaxonomies: isLoadingTaxonomies, - taxonomyPage: taxonomyPage, - modalTaxonomies: modalTaxonomies - }); - - tainacan.get(endpoint) - .then(response => { - - for (let taxonomy of response.data) { - modalTaxonomies.push({ - name: taxonomy.name, - id: taxonomy.id - }); - } - isLoadingTaxonomies = false; - totalModalTaxonomies = response.headers['x-wp-total']; - - setAttributes({ - isLoadingTaxonomies: isLoadingTaxonomies, - modalTaxonomies: modalTaxonomies, - totalModalTaxonomies: totalModalTaxonomies - }); - - return modalTaxonomies; - }) - .catch(error => { - console.log('Error trying to fetch taxonomies: ' + error); - }); - } - - function fetchTerms(name) { - - let endpoint = '/taxonomy/'+ taxonomyId + '/terms/?hideempty=0number=' + termsPerPage; - - if (name != undefined && name != '') - endpoint += '&searchterm=' + name; - - tainacan.get(endpoint) - .then(response => { - - terms = response.data.map((term) => ({ - name: term.name, - id: term.id, - url: term.url, - header_image: [{ - src: term.header_image, - alt: term.name - }] - })); - isLoadingTerms = false; - - setAttributes({ - isLoadingTerms: isLoadingTerms, - terms: terms - }); - - return terms; - }) - .catch(error => { - console.log('Error trying to fetch terms: ' + error); - }); - } - - - function fetchModalTerms(offset) { - - if (offset <= 0) - modalTerms = []; - - let endpoint = '/taxonomy/'+ taxonomyId + '/terms/?hideempty=0&number=' + termsPerPage + '&offset=' + offset; - - isLoadingTerms = true; - - setAttributes({ - isLoadingTerms: isLoadingTerms, - modalTerms: modalTerms - }); - - tainacan.get(endpoint) - .then(response => { - - for (let term of response.data) { - modalTerms.push({ - name: term.name, - id: term.id, - url: term.url, - header_image: [{ - src: term.header_image, - alt: term.name - }] - }); - } - isLoadingTerms = false; - totalModalTerms = response.headers['x-wp-total']; - - setAttributes({ - isLoadingTerms: isLoadingTerms, - modalTerms: modalTerms, - totalModalTerms: totalModalTerms - }); - - return modalTerms; - }) - .catch(error => { - console.log('Error trying to fetch terms: ' + error); - }); - } - - function resetTaxonomies() { - taxonomyId = null; - taxonomyPage = 1; - modalTaxonomies = []; - - setAttributes({ - taxonomyId: taxonomyId, - taxonomyPage: taxonomyPage, - modalTaxonomies: modalTaxonomies - }); - fetchModalTaxonomies(); - } function openTermsModal() { - temporarySelectedTerms = JSON.parse(JSON.stringify(selectedTermsObject)); - - if (taxonomyId != null && taxonomyId != undefined) { - fetchTaxonomy(); - fetchModalTerms(0); - } else { - taxonomyPage = 1; - fetchModalTaxonomies() - } + isModalOpen = true; setAttributes( { - isModalOpen: true, - terms: [], - temporarySelectedTerms: temporarySelectedTerms + isModalOpen: isModalOpen, } ); } - function isTemporaryTermSelected(termId) { - return temporarySelectedTerms.findIndex(term => (term.id == termId) || (term.id == 'term-id-' + termId)) >= 0; - } - - function toggleSelectTemporaryTerm(term, isChecked) { - if (isChecked) - selectTemporaryTerm(term); - else - removeTemporaryTermOfId(term.id); - - setAttributes({ temporarySelectedTerms: temporarySelectedTerms }); - setContent(); - } - - function selectTaxonomy(selectedTaxonomyId) { - - taxonomyId = selectedTaxonomyId; - - setAttributes({ - taxonomyId: taxonomyId - }); - fetchTaxonomy(); - fetchModalTerms(0); - setContent(); - - } - - function selectTemporaryTerm(term) { - let existingTermIndex = temporarySelectedTerms.findIndex((existingTerm) => (existingTerm.id == 'term-id-' + term.id) || (existingTerm.id == term.id)); - - if (existingTermIndex < 0) { - let termId = isNaN(term.id) ? term.id : 'term-id-' + term.id; - temporarySelectedTerms.push({ - id: termId, - name: term.name, - url: term.url, - header_image: term.header_image - }); - } - } - - function removeTemporaryTermOfId(termId) { - - let existingTermIndex = temporarySelectedTerms.findIndex((existingTerm) => ((existingTerm.id == 'term-id-' + termId) || (existingTerm.id == termId))); - - if (existingTermIndex >= 0) - temporarySelectedTerms.splice(existingTermIndex, 1); - } - - function applySelectedTerms() { - selectedTermsObject = JSON.parse(JSON.stringify(temporarySelectedTerms)); - isModalOpen = false; - - setAttributes({ - selectedTermsObject: selectedTermsObject, - isModalOpen: isModalOpen - }); - - setContent(); - } - function removeTermOfId(termId) { let existingTermIndex = selectedTermsObject.findIndex((existingTerm) => ((existingTerm.id == 'term-id-' + termId) || (existingTerm.id == termId))); @@ -692,16 +160,6 @@ registerBlockType('tainacan/terms-list', { setContent(); } - function fetchTaxonomy() { - tainacan.get('/taxonomies/' + taxonomyId) - .then((response) => { - taxonomyName = response.data.name; - setAttributes({ taxonomyName: taxonomyName }); - }).catch(error => { - console.log('Error trying to fetch taxonomy: ' + error); - }); - } - function updateLayout(newLayout) { layout = newLayout; @@ -783,9 +241,25 @@ registerBlockType('tainacan/terms-list', { { isSelected ? (
- { isModalOpen && ( - taxonomyId != null && taxonomyId != undefined ? renderTermsModalContent() : renderTaxonomyModalContent() - ) } + { isModalOpen ? + { + taxonomyId = selectedTaxonomyId; + setAttributes({ taxonomyId: taxonomyId }); + }} + onApplySelection={ (aSelectedTermsObject) =>{ + selectedTermsObject = aSelectedTermsObject + setAttributes({ + selectedTermsObject: selectedTermsObject, + isModalOpen: false + }); + setContent(); + }} + onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> + : null + }
+ ) : null + } +
+
+ ) : this.state.isLoadingTerms ? : +
+

{ __('Sorry, no terms found.', 'tainacan') }

+
+ )} +
+ + +
+ + + ) : ( + // Taxonomies modal + this.cancelSelection() } + contentLabel={__('Select terms', 'tainacan')}> +
+
+ { + this.setState({ + searchTaxonomyName: value + }); + _.debounce(this.fetchTaxonomies(value), 300); + }}/> +
+ {( + this.state.searchTaxonomyName != '' ? ( + this.state.taxonomies.length > 0 ? + ( +
+
+ { + { + return { label: taxonomy.name, value: '' + taxonomy.id } + }) + } + onChange={ ( aTaxonomyId ) => { + this.setState({ temporaryTaxonomyId: aTaxonomyId }); + } } /> + } +
+
+ ) : + this.state.isLoadingTaxonomies ? ( + + ) : +
+

{ __('Sorry, no taxonomy found.', 'tainacan') }

+
+ ): + this.state.modalTaxonomies.length > 0 ? + ( +
+
+ { + { + return { label: taxonomy.name, value: '' + taxonomy.id } + }) + } + onChange={ ( aTaxonomyId ) => { + this.setState({ temporaryTaxonomyId: aTaxonomyId }); + } } /> + } +
+
+

{ __('Showing', 'tainacan') + " " + this.state.modalTaxonomies.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTaxonomies + " " + __('taxonomies', 'tainacan') + "."}

+ { + this.state.modalTaxonomies.length < this.state.totalModalTaxonomies ? ( + + ) : null + } +
+
+ ) : this.state.isLoadingTaxonomies ? : +
+

{ __('Sorry, no taxonomy found.', 'tainacan') }

+
+ )} +
+ + +
+
+
+ ); + } +} \ No newline at end of file