diff --git a/src/Blocks/EmbedEEATableauBlock/Edit.jsx b/src/Blocks/EmbedEEATableauBlock/Edit.jsx new file mode 100644 index 0000000..5777b1d --- /dev/null +++ b/src/Blocks/EmbedEEATableauBlock/Edit.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm'; +import { SidebarPortal } from '@plone/volto/components'; +import { getContent } from '@plone/volto/actions'; +import View from './View'; +import Schema from './schema'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; + +const Edit = (props) => { + const { data, block, onChangeBlock } = props; + const schema = React.useMemo(() => Schema(props), [props]); + + React.useEffect(() => { + if (!Object.hasOwn(data, 'show_sources')) { + onChangeBlock(block, { + ...data, + show_sources: true, + }); + } + }, [block, data, onChangeBlock]); + + return ( + <> + + + { + props.onChangeBlock(block, { + ...data, + [id]: value, + }); + }} + formData={data} + /> + + + ); +}; + +export default compose( + connect( + (state, props) => ({ + block_data: state.content.data, + }), + { + getContent, + }, + ), +)(Edit); diff --git a/src/Blocks/EmbedEEATableauBlock/View.jsx b/src/Blocks/EmbedEEATableauBlock/View.jsx new file mode 100644 index 0000000..f5dcc93 --- /dev/null +++ b/src/Blocks/EmbedEEATableauBlock/View.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import TableauView from '../../TableauBlock/View'; +import { Sources } from '../../Sources'; + +const View = (props) => { + const { data } = props || {}; + const { vis_url = '' } = data; + const with_sources = data?.with_sources ?? false; + + React.useEffect(() => { + if (vis_url) { + props.getContent(vis_url, null); + } + }, [vis_url]); + + return ( + <> + + {with_sources && + (props.mode !== 'edit' ? : '')} + + ); +}; + +export default View; diff --git a/src/Blocks/EmbedEEATableauBlock/schema.js b/src/Blocks/EmbedEEATableauBlock/schema.js new file mode 100644 index 0000000..bac14e3 --- /dev/null +++ b/src/Blocks/EmbedEEATableauBlock/schema.js @@ -0,0 +1,71 @@ +const sourceSchema = { + title: 'Source', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['source', 'source_link'], + }, + ], + + properties: { + source: { + title: 'Source', + widget: 'textarea', + }, + source_link: { + title: 'Link', + type: 'string', + }, + }, + + required: ['source'], +}; + +const Schema = (props) => { + return { + title: 'Embed EEA Tableau', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['vis_url', 'height', 'show_sources'], + }, + { + id: 'sources', + title: 'Sources', + fields: ['tableauSources', 'with_sources'], + }, + ], + properties: { + vis_url: { + widget: 'object_by_path', + title: 'Visualization', + }, + height: { + title: 'Height', + type: 'number', + default: 450, + }, + tableauSources: { + widget: 'object_list', + title: 'Sources', + schema: sourceSchema, + }, + show_sources: { + title: 'Toggle sources', + type: 'boolean', + }, + with_sources: { + title: 'Sources visible', + type: 'boolean', + defaultValue: true, + }, + }, + + required: ['vis_url'], + }; +}; + +export default Schema; diff --git a/src/Sources/Sources.jsx b/src/Sources/Sources.jsx new file mode 100644 index 0000000..0a3085c --- /dev/null +++ b/src/Sources/Sources.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { UniversalLink, Icon } from '@plone/volto/components'; + +import rightKeySVG from '@plone/volto/icons/right-key.svg'; +import downKeySVG from '@plone/volto/icons/down-key.svg'; + +import './style.css'; + +const SourcesWidget = ({ data }) => { + const [expand, setExpand] = React.useState(true); + + return ( +
+ setExpand(!expand)}> +

+ + Sources: +

+
+ {expand && ( +
    + {data.map((param, i) => ( +
  • + + {param.source} + +
  • + ))} +
+ )} +
+ ); +}; + +export default SourcesWidget; diff --git a/src/Sources/index.js b/src/Sources/index.js new file mode 100644 index 0000000..79775f1 --- /dev/null +++ b/src/Sources/index.js @@ -0,0 +1,3 @@ +import Sources from './Sources'; + +export { Sources }; diff --git a/src/Sources/style.css b/src/Sources/style.css new file mode 100644 index 0000000..768ef82 --- /dev/null +++ b/src/Sources/style.css @@ -0,0 +1,7 @@ +.embed-sources-header { + cursor: pointer; +} + +.embed-sources-param-description { + margin-left: 5px; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0e6ac96..93c01c5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,8 @@ import sliderSVG from '@plone/volto/icons/slider.svg'; import TableauEdit from './TableauBlock/Edit'; import TableauView from './TableauBlock/View'; +import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View'; +import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit'; import tableauStore from './store'; @@ -44,6 +46,28 @@ const applyConfig = (config) => { }, }; + config.blocks.blocksConfig.embed_eea_tableau_block = { + id: 'embed_eea_tableau_block', + title: 'Embed EEA Tableau', + icon: sliderSVG, + group: 'common', + edit: EmbedTableauEdit, + view: EmbedTableauView, + restricted: false, + mostUsed: false, + sidebarTab: 1, + blocks: {}, + security: { + addPermission: [], + view: [], + }, + breakpoints: { + desktop: [Infinity, 982], + tablet: [981, 768], + mobile: [767, 0], + }, + }; + return config; };