From f3a7cefd761fffbaaa24266ab619148d46515125 Mon Sep 17 00:00:00 2001 From: Piero Nicolli Date: Tue, 12 Dec 2023 17:44:18 +0100 Subject: [PATCH 1/3] feat: added block extra tags placeholders --- .../Blocks/HighlightedContent/Body.jsx | 12 ++++- .../Blocks/Listing/CardWithImageTemplate.jsx | 13 +++++- .../Listing/CardWithSlideUpTextTemplate.jsx | 11 ++++- .../Listing/CompleteBlockLinksTemplate.jsx | 38 ++++++++++------ .../Listing/ContentInEvidenceTemplate.jsx | 35 +++++++++------ .../Blocks/Listing/RibbonCardTemplate.jsx | 8 +++- .../SimpleCard/SimpleCardTemplateDefault.jsx | 7 +++ .../SimpleCardTemplateOneForRow.jsx | 7 +++ src/config/italiaConfig.js | 6 +++ src/helpers/index.js | 2 + src/helpers/registry.js | 18 ++++++++ src/helpers/registry.test.js | 45 +++++++++++++++++++ 12 files changed, 170 insertions(+), 32 deletions(-) create mode 100644 src/helpers/registry.js create mode 100644 src/helpers/registry.test.js diff --git a/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx b/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx index e1b77d91f..0bf53166c 100644 --- a/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx +++ b/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx @@ -22,7 +22,10 @@ import { CardCategory, getItemIcon, } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { viewDate } from 'design-comuni-plone-theme/helpers'; +import { + viewDate, + getComponentWithFallback, +} from 'design-comuni-plone-theme/helpers'; const Body = (props) => { const { content, block } = props; @@ -32,6 +35,11 @@ const Body = (props) => { const { show_type = true, show_section } = block; const category = getCategory(content, show_type, show_section, props); + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['HighlightedContent', content['@type']], + }).component; + return (
@@ -66,7 +74,7 @@ const Body = (props) => { {content.description} - + {content.tassonomia_argomenti && content.tassonomia_argomenti.length > 0 && ( <> diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx index 79520fee7..5ca60dbc0 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx @@ -23,6 +23,7 @@ import { import { getCalendarDate, getEventRecurrenceMore, + getComponentWithFallback, } from 'design-comuni-plone-theme/helpers'; import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; @@ -95,6 +96,12 @@ const CardWithImageTemplate = (props) => { (index < imagesToShow || always_show_image) && image != null; const category = getCategory(item, show_type, show_section, props); const topics = show_topics ? item.tassonomia_argomenti : null; + + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['CardWithImageTemplate', item['@type']], + }).component; + return ( { {listingText} )} - + {topics?.length > 0 && (
{ : getCalendarDate(item, rrule.rrulestr); const title = item?.title || ''; + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['CardWithSlideUpTextTemplate', item['@type']], + }).component; + return ( { {show_description && item.description && (

{item.description}

)} + { +const CompleteBlockLinksTemplate = (props) => { + const { + items, + title, + isEditMode, + linkAlign, + linkTitle, + linkHref, + // show_block_bg, + show_description = true, + id_lighthouse, + linkmore_id_lighthouse, + titleLine, + } = props; return (
@@ -53,6 +55,11 @@ const CompleteBlockLinksTemplate = ({ {items.map((item, index) => { const image = ListingImage({ item, className: '' }); + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['CompleteBlockLinksTemplate', item['@type']], + }).component; + return ( )} +
diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx index 586e577d3..26e774de6 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx @@ -19,6 +19,7 @@ import { UniversalLink } from '@plone/volto/components'; import { getCalendarDate, getEventRecurrenceMore, + getComponentWithFallback, } from 'design-comuni-plone-theme/helpers'; import { ListingCategory, @@ -29,19 +30,20 @@ import { ListingImage, } from 'design-comuni-plone-theme/components/ItaliaTheme'; -const ContentInEvidenceTemplate = ({ - items, - title, - isEditMode, - show_block_bg, - linkAlign, - linkTitle, - linkHref, - id_lighthouse, - linkmore_id_lighthouse, - titleLine, - rrule, -}) => { +const ContentInEvidenceTemplate = (props) => { + const { + items, + title, + isEditMode, + // show_block_bg, + // linkAlign, + linkTitle, + linkHref, + id_lighthouse, + // linkmore_id_lighthouse, + titleLine, + rrule, + } = props; const intl = useIntl(); return ( @@ -62,6 +64,11 @@ const ContentInEvidenceTemplate = ({ const listingText = ; const image = ListingImage({ item, className: 'item-image' }); const icon = getItemIcon(item); + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['ContentInEvidenceTemplate', item['@type']], + }).component; + return ( {image && ( @@ -104,7 +111,7 @@ const ContentInEvidenceTemplate = ({ ))} )} - + {eventRecurrenceMore} {linkHref?.[0]?.['@id'] && ( { ) : null; + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['RibbonCardTemplate', item['@type']], + }).component; + return ( { {listingText && {listingText}} - + {eventRecurrenceMore} {show_detail_link && ( { const category = getCategory(item, show_type, show_section, props); const type = item['@type']; + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['SimpleCardTemplateDefault', type], + }).component; + return ( { )} )} + {eventRecurrenceMore} {show_detail_link && ( { ) : null; const category = getCategory(item, show_type, show_section, props); const type = item['@type']; + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['SimpleCardTemplateOneForRow', type], + }).component; + return ( { )} )} + {eventRecurrenceMore} {show_detail_link && ( v.id !== 'horizontalMenu', ); + // COMPONENTS + config.components = { + ...config.components, + BlockExtraTags: { component: () => null }, + }; + // REDUCERS config.addonReducers = { ...config.addonReducers, diff --git a/src/helpers/index.js b/src/helpers/index.js index ff7a4943a..2bab245b6 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -50,3 +50,5 @@ export { } from 'design-comuni-plone-theme/helpers/FormValidation/DataGridFormValidationHelpers'; export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Translations/searchBlockExtendedTranslations'; + +export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry'; diff --git a/src/helpers/registry.js b/src/helpers/registry.js new file mode 100644 index 000000000..ba2119dc3 --- /dev/null +++ b/src/helpers/registry.js @@ -0,0 +1,18 @@ +import config from '@plone/volto/registry'; + +export function getComponentWithFallback(options) { + if (typeof options === 'object') { + const { name, dependencies = '' } = options; + if (dependencies && Array.isArray(dependencies)) { + const component = config.getComponent(options); + if (!component.component && dependencies.length > 0) { + const newDeps = [...dependencies]; + newDeps.pop(); + return getComponentWithFallback({ name, dependencies: newDeps }); + } else { + return component; + } + } + } + return config.getComponent(options); +} diff --git a/src/helpers/registry.test.js b/src/helpers/registry.test.js new file mode 100644 index 000000000..1ab462f09 --- /dev/null +++ b/src/helpers/registry.test.js @@ -0,0 +1,45 @@ +import { getComponentWithFallback } from './registry'; +import config from '@plone/volto/registry'; + +config.set('components', { + Test: { component: 'test' }, + 'Test|dep1': { component: 'test with dep1' }, + 'Test|dep1|dep2': { component: 'test with dep1 and dep2' }, +}); + +describe('getComponentWithFallback', () => { + it('returns a component', () => { + const component = getComponentWithFallback({ + name: 'Test', + }); + expect(component.component).toEqual('test'); + }); + it('returns a component with one dependency', () => { + const component = getComponentWithFallback({ + name: 'Test', + dependencies: ['dep1'], + }); + expect(component.component).toEqual('test with dep1'); + }); + it('returns a component with two dependencies', () => { + const component = getComponentWithFallback({ + name: 'Test', + dependencies: ['dep1', 'dep2'], + }); + expect(component.component).toEqual('test with dep1 and dep2'); + }); + it('returns a component with one dependency if the second is not found', () => { + const component = getComponentWithFallback({ + name: 'Test', + dependencies: ['dep1', 'dep3'], + }); + expect(component.component).toEqual('test with dep1'); + }); + it('returns a component with no dependencies if none is found', () => { + const component = getComponentWithFallback({ + name: 'Test', + dependencies: ['dep3'], + }); + expect(component.component).toEqual('test'); + }); +}); From 3275c233364cc8a83cd4955f46cb4fb668029389 Mon Sep 17 00:00:00 2001 From: Piero Nicolli Date: Tue, 12 Dec 2023 18:20:13 +0100 Subject: [PATCH 2/3] fix test --- src/helpers/registry.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/registry.test.js b/src/helpers/registry.test.js index 1ab462f09..534f85ed8 100644 --- a/src/helpers/registry.test.js +++ b/src/helpers/registry.test.js @@ -4,7 +4,7 @@ import config from '@plone/volto/registry'; config.set('components', { Test: { component: 'test' }, 'Test|dep1': { component: 'test with dep1' }, - 'Test|dep1|dep2': { component: 'test with dep1 and dep2' }, + 'Test|dep1+dep2': { component: 'test with dep1 and dep2' }, }); describe('getComponentWithFallback', () => { From bdd18cb0378e159d3058f8b4fdf91a5f24e2b6af Mon Sep 17 00:00:00 2001 From: Piero Nicolli Date: Mon, 18 Dec 2023 15:26:39 +0100 Subject: [PATCH 3/3] fix: missing index in complete block links template --- .../ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx index 78f736b62..6934686e1 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx @@ -55,7 +55,7 @@ const CompleteBlockLinksTemplate = (props) => { )} - {items.map((item) => { + {items.map((item, index) => { const image = ListingImage({ item, className: '', sizes: '60px' }); const BlockExtraTags = getComponentWithFallback({