diff --git a/.env b/.env new file mode 100644 index 0000000..e69de29 diff --git a/env.development b/env.development new file mode 100644 index 0000000..ff40db8 --- /dev/null +++ b/env.development @@ -0,0 +1 @@ +RAZZLE_DEV_PROXY_API_PATH=http://localhost:8080/Plone2 diff --git a/packages/volto-relateditems-block/news/1.feature b/packages/volto-relateditems-block/news/1.feature new file mode 100644 index 0000000..d298e04 --- /dev/null +++ b/packages/volto-relateditems-block/news/1.feature @@ -0,0 +1 @@ +Implement Related Items Block @ghnire \ No newline at end of file diff --git a/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Data.jsx b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Data.jsx new file mode 100644 index 0000000..4cce6c5 --- /dev/null +++ b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Data.jsx @@ -0,0 +1,32 @@ +import { BlockDataForm } from '@plone/volto/components'; +import { useIntl } from 'react-intl'; + +const RelatedItemsData = (props) => { + const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } = + props; + const intl = useIntl(); + const schema = blocksConfig.relatedItems.blockSchema({ + ...props, + intl, + }); + return ( + { + onChangeBlock(block, { + ...data, + [id]: value, + }); + }} + onChangeBlock={onChangeBlock} + formData={data} + block={block} + blocksConfig={blocksConfig} + navRoot={navRoot} + contentType={contentType} + /> + ); +}; + +export default RelatedItemsData; diff --git a/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Edit.jsx b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Edit.jsx new file mode 100644 index 0000000..7d6562d --- /dev/null +++ b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/Edit.jsx @@ -0,0 +1,23 @@ +import RelatedItemsView from './View'; +import { withBlockExtensions } from '@plone/volto/helpers'; +import { SidebarPortal } from '@plone/volto/components'; +import RelatedItemsData from './Data'; + +const RelatedItemsEdit = (props) => { + const { data, blocksConfig, onChangeBlock, block, selected } = props; + return ( + <> + + + + + + ); +}; + +export default withBlockExtensions(RelatedItemsEdit); diff --git a/packages/volto-relateditems-block/src/components/blocks/RelatedItems/View.jsx b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/View.jsx new file mode 100644 index 0000000..e5c7d33 --- /dev/null +++ b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/View.jsx @@ -0,0 +1,19 @@ +import { UniversalLink } from '@plone/volto/components'; + +const RelatedItemsView = (props) => { + const { data, content } = props; + return ( +
+

{data.title}

+
    + {content.relatedItems.map((item) => ( +
  • + {item.title} +
  • + ))} +
+
+ ); +}; + +export default RelatedItemsView; diff --git a/packages/volto-relateditems-block/src/components/blocks/RelatedItems/schema.js b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/schema.js new file mode 100644 index 0000000..672ea79 --- /dev/null +++ b/packages/volto-relateditems-block/src/components/blocks/RelatedItems/schema.js @@ -0,0 +1,57 @@ +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + relatedItemsBlock: { + id: 'Related Items', + defaultMessage: 'Related Items', + }, + title: { + id: 'title', + defaultMessage: 'Title', + }, + align: { + id: 'Alignment', + defaultMessage: 'Alignment', + }, + size: { + id: 'Size', + defaultMessage: 'Size', + }, + styleFieldset: { + id: 'Style', + defaultMessage: 'Style', + }, +}); + +export const relatedItemsSchema = (props) => { + return { + title: props.intl.formatMessage(messages.relatedItemsBlock), + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['title'], + }, + { + id: 'style', + title: 'Style', + fields: ['align', 'size'], + }, + ], + properties: { + title: { + title: props.intl.formatMessage(messages.title), + }, + align: { + title: props.intl.formatMessage(messages.align), + widget: 'align', + actions: ['left', 'right', 'center'], + }, + size: { + title: props.intl.formatMessage(messages.size), + widget: 'image_size', + }, + }, + required: [], + }; +}; diff --git a/packages/volto-relateditems-block/src/index.js b/packages/volto-relateditems-block/src/index.js index cb042f0..21a570f 100644 --- a/packages/volto-relateditems-block/src/index.js +++ b/packages/volto-relateditems-block/src/index.js @@ -1,4 +1,22 @@ +import linkIconSVG from '@plone/volto/icons/horizontal.svg'; +import RelatedItemsView from './components/blocks/RelatedItems/View'; +import RelatedItemsEdit from './components/blocks/RelatedItems/Edit'; +import { relatedItemsSchema } from './components/blocks/RelatedItems/schema'; + const applyConfig = (config) => { + config.blocks.blocksConfig.relatedItems = { + id: 'relatedItems', + title: 'Related items', + group: 'common', + icon: linkIconSVG, + view: RelatedItemsView, + edit: RelatedItemsEdit, + restricted: false, + mostUsed: false, + sidebarTab: 1, + blockSchema: relatedItemsSchema, + }; + return config; };