From c2ca3a3437f6a6e4c1a8a40b93da1543cb341e21 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Sun, 17 Apr 2022 19:35:11 -0300 Subject: [PATCH 01/51] Creates item-metadata and item-metadatum blocks. #566. --- .../blocks/item-metadata/block.json | 69 +++ .../blocks/item-metadata/deprecated.js | 1 + .../blocks/item-metadata/edit.js | 165 ++++++ .../blocks/item-metadata/icon.js | 14 + .../blocks/item-metadata/index.js | 15 + .../blocks/item-metadata/save.js | 7 + .../blocks/item-metadata/style.scss | 0 .../blocks/item-metadatum/block.json | 61 +++ .../blocks/item-metadatum/deprecated.js | 1 + .../blocks/item-metadatum/edit.js | 121 +++++ .../blocks/item-metadatum/icon.js | 14 + .../blocks/item-metadatum/index.js | 15 + .../blocks/item-metadatum/save.js | 3 + .../blocks/item-metadatum/save.php | 29 + .../blocks/item-metadatum/style.scss | 0 .../class-tainacan-gutenberg-block.php | 4 +- .../selection/single-item-metadatum-modal.js | 495 ++++++++++++++++++ .../tainacan-blocks-common-scripts.js | 4 +- webpack.common.js | 4 +- 19 files changed, 1019 insertions(+), 3 deletions(-) create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/block.json create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/deprecated.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/edit.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/icon.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/index.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/save.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadata/style.scss create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/block.json create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/deprecated.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/edit.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/icon.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/index.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/save.js create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/save.php create mode 100644 src/views/gutenberg-blocks/blocks/item-metadatum/style.scss create mode 100644 src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/block.json b/src/views/gutenberg-blocks/blocks/item-metadata/block.json new file mode 100644 index 000000000..1c9894f67 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/block.json @@ -0,0 +1,69 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "name": "tainacan/item-metadata", + "title": "Tainacan Item Metadata", + "apiVersion": 2, + "category": "tainacan-blocks", + "keywords": [ "item", "metadata", "fields", "values" ], + "description": "The item metadata, including a label and its value.", + "textdomain": "tainacan", + "example": { + "attributes": { + "content": "preview" + } + }, + "attributes": { + "content": { + "type": "array", + "source": "query", + "selector": "div" + }, + "collectionId": { + "type": "string", + "default": "" + }, + "itemId": { + "type": "string", + "default": "" + }, + "isModalOpen": { + "type": "boolean", + "default": false + }, + "isLoading": { + "type": "boolean", + "default": false + }, + "itemRequestSource": { + "type": "string", + "default": "" + }, + "itemMetadata": { + "type": "array", + "default": [] + }, + "itemMetadataTemplate": { + "type": "array", + "default": [] + } + }, + "providesContext": { + "tainacan/itemId": "itemId", + "tainacan/collectionId": "collectionId" + }, + "supports": { + "align": ["full", "wide"], + "multiple": true, + "color": { + "text": true, + "background": true, + "gradients": true, + "link": true + }, + "spacing": { + "padding": true + } + }, + "editorScript": "item-metadata", + "editorStyle": "item-metadata" +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/deprecated.js b/src/views/gutenberg-blocks/blocks/item-metadata/deprecated.js new file mode 100644 index 000000000..109fa8b38 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/deprecated.js @@ -0,0 +1 @@ +export default []; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/edit.js b/src/views/gutenberg-blocks/blocks/item-metadata/edit.js new file mode 100644 index 000000000..4a0dc439f --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/edit.js @@ -0,0 +1,165 @@ +const { __ } = wp.i18n; + +const { Button, Spinner, Placeholder } = wp.components; + +const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); + +import SingleItemModal from '../../js/selection/single-item-modal.js'; +import tainacan from '../../js/axios.js'; +import axios from 'axios'; + +export default function ({ attributes, setAttributes, className, isSelected, clientId }) { + + let { + content, + collectionId, + itemId, + isLoading, + itemRequestSource, + isModalOpen, + itemMetadata, + itemMetadataTemplate + } = attributes; + + // Gets blocks props from hook + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps(); + + function setContent() { + isLoading = true; + + setAttributes({ + isLoading: isLoading + }); + + if (itemRequestSource != undefined && typeof itemRequestSource == 'function') + itemRequestSource.cancel('Previous items search canceled.'); + + itemRequestSource = axios.CancelToken.source(); + + let endpoint = '/item/'+ itemId + '/metadata'; + + tainacan.get(endpoint, { cancelToken: itemRequestSource.token }) + .then(response => { + + itemMetadata = response.data ? response.data : []; + setAttributes({ + itemMetadata: itemMetadata, + isLoading: false, + itemRequestSource: itemRequestSource + }); + getItemMetadataTemplates(); + }); + } + + function getItemMetadataTemplates() { + itemMetadataTemplate = []; + + itemMetadata.forEach((itemMetadatum) => { + + if (itemMetadatum.value && itemMetadatum.metadatum && itemMetadatum.metadatum.id) { + itemMetadataTemplate.push([ + 'tainacan/item-metadatum', + { + placeholder: __( 'Item Metadatum', 'tainacan' ), + metadatumId: itemMetadatum.metadatum.id, + itemId: itemId, + collectionId: collectionId + } + ]); + } + }); + setAttributes({ itemMetadataTemplate: itemMetadataTemplate }); + } + + return content == 'preview' ? +
+ +
+ : ( +
+ + { isSelected ? + ( +
+ { isModalOpen ? + { + collectionId = selectedCollectionId; + setAttributes({ + collectionId: collectionId + }); + }} + onApplySelectedItem={ (selectedItemId) => { + itemId = selectedItemId; + setAttributes({ + itemId: itemId, + isModalOpen: false + }); + setContent(); + }} + onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> + : null + } + +
+ ) : null + } + + { !itemId ? ( + + )}> +

+ + + + {__('Select an item to display its metadata list.', 'tainacan')} +

+ + + ) : null + } + + { isLoading ? + : +
+ { itemMetadata.length ? + + : null + } +
+ } + +
+ ); +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/icon.js b/src/views/gutenberg-blocks/blocks/item-metadata/icon.js new file mode 100644 index 000000000..05d1e6000 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/icon.js @@ -0,0 +1,14 @@ + const { SVG, Path } = wp.components; + + export default ( + + + + ); + \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/index.js b/src/views/gutenberg-blocks/blocks/item-metadata/index.js new file mode 100644 index 000000000..f8cd05987 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/index.js @@ -0,0 +1,15 @@ +import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js'; + +import metadata from './block.json'; +import icon from './icon.js'; +import edit from './edit.js'; +import save from './save.js'; +import deprecated from './deprecated.js'; + +tainacanRegisterBlockType({ + metadata, + icon, + edit, + save, + deprecated +}); diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/save.js b/src/views/gutenberg-blocks/blocks/item-metadata/save.js new file mode 100644 index 000000000..1d8a7fa30 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadata/save.js @@ -0,0 +1,7 @@ +const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); + +export default function({ className }) { + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save(); + + return
+}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/style.scss b/src/views/gutenberg-blocks/blocks/item-metadata/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/block.json b/src/views/gutenberg-blocks/blocks/item-metadatum/block.json new file mode 100644 index 000000000..91ff4f971 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/block.json @@ -0,0 +1,61 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "name": "tainacan/item-metadatum", + "title": "Tainacan Item metadatum", + "apiVersion": 2, + "category": "tainacan-blocks", + "keywords": [ "item", "metadatum", "field", "value" ], + "description": "A single item metadatum, including a label and its value.", + "textdomain": "tainacan", + "example": { + "attributes": { + "content": "preview" + } + }, + "attributes": { + "content": { + "type": "array", + "source": "query", + "selector": "div" + }, + "collectionId": { + "type": "integer", + "default": "" + }, + "itemId": { + "type": "integer", + "default": "" + }, + "metadatumId": { + "type": "integer", + "default": "" + }, + "metadatumType": { + "type": "string", + "default": "" + }, + "isModalOpen": { + "type": "boolean", + "default": false + } + }, + "usesContext": [ + "tainacan/itemId", + "tainacan/collectionId" + ], + "supports": { + "align": ["full", "wide"], + "multiple": true, + "color": { + "text": true, + "background": true, + "gradients": true, + "link": true + }, + "spacing": { + "padding": true + } + }, + "editorScript": "item-metadatum", + "editorStyle": "item-metadatum" +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/deprecated.js b/src/views/gutenberg-blocks/blocks/item-metadatum/deprecated.js new file mode 100644 index 000000000..109fa8b38 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/deprecated.js @@ -0,0 +1 @@ +export default []; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js b/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js new file mode 100644 index 000000000..969fb4ff1 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js @@ -0,0 +1,121 @@ +const { __ } = wp.i18n; + +const { Button, Placeholder } = wp.components; + +const ServerSideRender = wp.serverSideRender; +const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); + +import SingleItemMetadatumModal from '../../js/selection/single-item-metadatum-modal.js'; + +export default function ({ attributes, setAttributes, className, isSelected }) { + + let { + content, + collectionId, + itemId, + metadatumId, + metadatumType, + isModalOpen, + } = attributes; + + // Gets blocks props from hook + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps(); + const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; + + return content == 'preview' ? +
+ +
+ : ( +
+ + { isSelected ? + ( +
+ { isModalOpen ? + { + collectionId = selectedCollectionId; + setAttributes({ + collectionId: collectionId + }); + }} + onSelectItem={ (selectedItemId) => { + itemId = selectedItemId; + setAttributes({ + itemId: itemId + }); + }} + onApplySelectedMetadatum={ (selectedMetadatum) => { + metadatumId = selectedMetadatum.metadatumId; + metadatumType = selectedMetadatum.metadatumType; + + setAttributes({ + metadatumId: metadatumId, + metadatumType: metadatumType, + isModalOpen: false + }); + }} + onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> + : null + } + +
+ ) : null + } + + { !(collectionId && itemId && metadatumId) ? ( + + )}> +

+ + + + {__('Select an item metadata to display its label and value.', 'tainacan')} +

+ + + ) : null + } + + { (collectionId && itemId && metadatumId) ? ( +
+ = '5.5' ? 'POST' : 'GET' } + /> +
+ ) : null + } + +
+ ); +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/icon.js b/src/views/gutenberg-blocks/blocks/item-metadatum/icon.js new file mode 100644 index 000000000..05d1e6000 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/icon.js @@ -0,0 +1,14 @@ + const { SVG, Path } = wp.components; + + export default ( + + + + ); + \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/index.js b/src/views/gutenberg-blocks/blocks/item-metadatum/index.js new file mode 100644 index 000000000..f8cd05987 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/index.js @@ -0,0 +1,15 @@ +import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js'; + +import metadata from './block.json'; +import icon from './icon.js'; +import edit from './edit.js'; +import save from './save.js'; +import deprecated from './deprecated.js'; + +tainacanRegisterBlockType({ + metadata, + icon, + edit, + save, + deprecated +}); diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/save.js b/src/views/gutenberg-blocks/blocks/item-metadatum/save.js new file mode 100644 index 000000000..d67f959fb --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/save.js @@ -0,0 +1,3 @@ +export default function() { + return null +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/save.php b/src/views/gutenberg-blocks/blocks/item-metadatum/save.php new file mode 100644 index 000000000..00627cae6 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/save.php @@ -0,0 +1,29 @@ +context['tainacan/itemId']) ? $block->context['tainacan/itemId'] : (isset($block_attributes['itemId']) ? $block_attributes['itemId'] : false); + $metadatum_id = isset($block_attributes['metadatumId']) ? $block_attributes['metadatumId'] : false; + + if ( !$item_id || !$metadatum_id ) + return ''; + + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => 'metadata-type-$type' + ) + ); + + return tainacan_get_the_metadata( + array( + 'metadata' => $metadatum_id, + 'before' => '
', + 'after' => '
' + ), + $item_id + ); +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/style.scss b/src/views/gutenberg-blocks/blocks/item-metadatum/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php index 53ebd5ff3..d4ed5af36 100644 --- a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php +++ b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php @@ -16,7 +16,9 @@ const TAINACAN_BLOCKS = [ 'terms-list' => [], 'faceted-search' => [], 'item-submission-form' => [], - 'item-gallery' => ['render_callback' => 'tainacan_blocks_render_items_gallery'] + 'item-gallery' => ['render_callback' => 'tainacan_blocks_render_items_gallery'], + 'item-metadata' => [], + 'item-metadatum' => ['render_callback' => 'tainacan_blocks_render_item_metadatum'] ]; // Lets do this! diff --git a/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js b/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js new file mode 100644 index 000000000..543466b74 --- /dev/null +++ b/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js @@ -0,0 +1,495 @@ +import tainacan from '../axios.js'; +import axios from 'axios'; + +const { __ } = wp.i18n; + +const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; + +export default class SingleItemModal extends React.Component { + constructor(props) { + super(props); + + // Initialize state + this.state = { + collectionsPerPage: 24, + collectionId: undefined, + itemId: undefined, + metadatumId: undefined, + collectionName: '', + isLoadingCollections: false, + modalCollections: [], + itemTitle: '', + metadatumType: undefined, + isLoadingMetadata: false, + modalMetadata: [], + totalModalCollections: 0, + collectionOrderBy: 'date-desc', + collectionPage: 1, + temporaryCollectionId: '', + temporaryItemId: '', + temporaryMetadatumId: '', + searchCollectionName: '', + collections: [], + collectionsRequestSource: undefined, + metadata: [], + metadataRequestSource: undefined, + searchURL: '', + itemsPerPage: 12 + }; + + // Bind events + 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); + + this.fetchItem = this.fetchItem.bind(this); + this.selectItem = this.selectItem.bind(this); + + this.fetchModalMetadata = this.fetchModalMetadata.bind(this); + + this.applySelectedMetadatum = this.applySelectedMetadatum.bind(this); + } + + componentWillMount() { + + this.setState({ + collectionId: this.props.existingCollectionId, + itemId: this.props.existingItemId, + metadatumId: this.props.existingMetadatumId + }); + + if (this.props.existingCollectionId) { + this.fetchCollection(this.props.existingCollectionId); + this.setState({ + searchURL: tainacan_blocks.admin_url + 'admin.php?itemsSingleSelectionMode=true&page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?status=publish' + }); + + if (this.props.existingItemId) { + this.fetchItem(this.props.existingItemId); + this.fetchModalMetadata(); + } + + } else { + this.setState({ collectionPage: 1 }); + this.fetchModalCollections(); + } + } + + // COLLECTIONS RELATED -------------------------------------------------- + fetchModalCollections() { + + let someModalCollections = this.state.modalCollections; + if (this.state.collectionPage <= 1) + someModalCollections = []; + + let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage; + + if (this.state.collectionOrderBy == 'date') + endpoint += '&orderby=date&order=asc'; + else if (this.state.collectionOrderBy == 'date-desc') + endpoint += '&orderby=date&order=desc'; + else if (this.state.collectionOrderBy == 'title') + endpoint += '&orderby=title&order=asc'; + else if (this.state.collectionOrderBy == 'title-desc') + endpoint += '&orderby=title&order=desc'; + + 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); + }); + } + + fetchItem(itemId) { + tainacan.get('/collections/' + this.state.collectionId + '/items/' + itemId) + .then((response) => { + this.setState({ itemTitle: response.data.title }); + }).catch(error => { + console.log('Error trying to fetch collection: ' + error); + }); + } + + selectCollection(selectedCollectionId) { + this.setState({ + collectionId: selectedCollectionId, + searchURL: tainacan_blocks.admin_url + 'admin.php?itemsSingleSelectionMode=true&page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?status=publish' + }); + + 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({ + collectionsRequestSource: aCollectionRequestSource, + isLoadingCollections: true, + collections: [], + items: [] + }); + + let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage; + if (name != undefined && name != '') + endpoint += '&search=' + name; + + if (this.state.collectionOrderBy == 'date') + endpoint += '&orderby=date&order=asc'; + else if (this.state.collectionOrderBy == 'date-desc') + endpoint += '&orderby=date&order=desc'; + else if (this.state.collectionOrderBy == 'title') + endpoint += '&orderby=title&order=asc'; + else if (this.state.collectionOrderBy == 'title-desc') + endpoint += '&orderby=title&order=desc'; + + 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); + }); + } + + fetchModalMetadata() { + + let someModalMetadata = []; + let endpoint = '/collection/' + this.state.collectionId + '/metadata/?nopaging=1'; + + this.setState({ + isLoadingMetadata: true, + modalMetadata: someModalMetadata + }); + + tainacan.get(endpoint) + .then(response => { + + let otherModalMetadata = this.state.modalMetadata; + + for (let metadatum of response.data) { + otherModalMetadata.push({ + name: metadatum.name, + id: metadatum.id, + type: metadatum.metadata_type, + typeLabel: metadatum.metadata_type_object ? metadatum.metadata_type_object.name : '' + }); + } + + this.setState({ + isLoadingMetadata: false, + modalMetadata: otherModalMetadata + }); + + return otherModalMetadata; + }) + .catch(error => { + console.log('Error trying to fetch metadata: ' + error); + }); + } + + + selectItem() { + let iframe = document.getElementById("itemsFrame"); + if (iframe) { + let params = new URLSearchParams(iframe.contentWindow.location.search); + let selectedItems = params.getAll('selecteditems'); + params.delete('selecteditems') + if (selectedItems[0]) { + this.setState({ + itemId: selectedItems[0] + }); + this.props.onSelectItem(selectedItems[0]); + this.fetchModalMetadata(); + } + } + } + + applySelectedMetadatum(selectedMetadatum) { + this.setState({ + metadatumId: selectedMetadatum.id, + metadatumType: selectedMetadatum.type + }); + this.props.onApplySelectedMetadatum({ + metadatumId: selectedMetadatum.id, + metadatumType: selectedMetadatum.type + }); + } + + resetCollections() { + + this.setState({ + collectionId: null, + collectionPage: 1, + modalCollections: [] + }); + this.fetchModalCollections(); + } + + resetItem() { + + this.setState({ + itemId: null, + }); + } + + cancelSelection() { + + this.setState({ + modalCollections: [], + modalMetadata: [] + }); + + this.props.onCancelSelection(); + } + + render() { + return (this.state.collectionId && this.state.itemId) ? ( + // Metadata modal + this.cancelSelection() } + contentLabel={__('Select metadatum', 'tainacan')}> + {( + this.state.modalMetadata.length > 0 ? + ( +
+
+ { + return { label: metadatum.name + ' (' + metadatum.typeLabel + ')', value: '' + metadatum.id } + }) + } + onChange={ ( aMetadatumId ) => { + this.setState({ + temporaryMetadatumId: aMetadatumId + }); + } } /> +
+
+
+ ) : this.state.isLoadingMetadata ? : +
+

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

+
+ ) + } +
+ + + +
+ + + ) : ( + this.state.collectionId ? ( + // Item modal + this.cancelSelection() } + shouldCloseOnClickOutside={ false } + contentLabel={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }> +