From cdf2e07a2c8609d53ad1609b44f459f3c15448e9 Mon Sep 17 00:00:00 2001 From: Felipe Carlos Date: Sat, 7 Dec 2024 12:03:49 -0300 Subject: [PATCH] form: fixing bugs in EU funding logo selector --- .../base/fields/funding/EUFundingModal.js | 134 ++++++++++++++---- .../base/fields/funding/EUFundingModalData.js | 47 +----- .../form/base/fields/funding/FundingField.js | 4 + .../base/fields/funding/FundingFieldItem.js | 2 + .../form/base/fields/funding/FundingModal.js | 9 +- 5 files changed, 120 insertions(+), 76 deletions(-) diff --git a/src/lib/components/form/base/fields/funding/EUFundingModal.js b/src/lib/components/form/base/fields/funding/EUFundingModal.js index dc23bdc..713752a 100644 --- a/src/lib/components/form/base/fields/funding/EUFundingModal.js +++ b/src/lib/components/form/base/fields/funding/EUFundingModal.js @@ -6,22 +6,31 @@ // under the terms of the MIT License; see LICENSE file for more details. import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +import _get from 'lodash/get'; + import { Button, Grid, Image, Modal, List, Segment } from 'semantic-ui-react'; import { Field } from 'formik'; import { FieldLabel, RichInputField } from 'react-invenio-forms'; -import { - EUFundingLogos, - EUFundingVisibilityDocument, -} from './EUFundingModalData'; - /** * EU logo selector. - * @param logos {Object} List of logo objects. + * @param fieldPath {string} Field path. + * @param label {string} Field label. + * @param labelIcon {string} Field icon. + * @param required {bool} Flag indicating if the field is required. + * @param options {list} List of options to be displayed. * @constructor */ -const EUFundingLogoSelector = ({ logos }) => { +const EUFundingLogoSelector = ({ + fieldPath, + label, + labelIcon, + required, + options, +}) => { { const [selectedLogo, setSelectedLogo] = useState({}); @@ -29,10 +38,6 @@ const EUFundingLogoSelector = ({ logos }) => { setSelectedLogo(logo); }; - const fieldPath = 'selectedFunding.award.icon'; - const labelIcon = 'image'; - const label = 'EU Emblem'; - return ( {({ form }) => { @@ -51,7 +56,7 @@ const EUFundingLogoSelector = ({ logos }) => { }} > - {logos.map((item) => ( + {options.map((item) => ( { } }; +EUFundingLogoSelector.propTypes = { + fieldPath: PropTypes.string.isRequired, + label: PropTypes.string, + labelIcon: PropTypes.string, + required: PropTypes.bool, + options: PropTypes.array.isRequired, +}; + +EUFundingLogoSelector.defaultProps = { + fieldPath: 'selectedFunding.award.icon', + label: 'EU Funding Emblem', + labelIcon: 'image', + required: true, +}; + /** - * EU logo selector. - * @param logos {Object} List of logo objects. + * EU Funding statement. + * @param fieldPath {string} Field path. + * @param label {string} Field label. + * @param labelIcon {string} Field icon. + * @param required {bool} Flag indicating if the field is required. * @constructor */ -const EUFundingFundingStatement = () => { - const fieldPath = 'selectedFunding.award.disclaimer'; - const labelIcon = 'write'; - const label = 'Funding Statement'; +export const EUFundingStatement = ({ + fieldPath, + label, + labelIcon, + required, +}) => { return ( } + required={required} optimized + editorConfig={{ + removePlugins: [ + 'Image', + 'ImageCaption', + 'ImageStyle', + 'ImageToolbar', + 'ImageUpload', + 'MediaEmbed', + 'Table', + 'TableToolbar', + 'TableProperties', + 'TableCellProperties', + ], + }} /> ); }; -const EUFundingDescription = () => { +EUFundingStatement.propTypes = { + fieldPath: PropTypes.string.isRequired, + label: PropTypes.string, + labelIcon: PropTypes.string, + required: PropTypes.bool, +}; + +EUFundingStatement.defaultProps = { + fieldPath: 'selectedFunding.award.disclaimer', + label: 'Funding Statement', + labelIcon: 'write', + required: true, +}; + +/** + * EU Funding description. + * @param referenceDocument {string} Reference document to be displayed. + * @constructor + */ +export const EUFundingDescription = ({ referenceDocument }) => { return ( <>

For EU-funded projects, as outlined in the guidelines on{' '} - + Communicating and raising EU visibility , it is mandatory to include a funding statement and the EU emblem in @@ -156,7 +210,20 @@ const EUFundingDescription = () => { ); }; -export const EUFundingModal = ({ isOpen, setIsOpen, handleSubmit }) => { +EUFundingDescription.propTypes = { + referenceDocument: PropTypes.string.isRequired, +}; + +export const EUFundingModal = ({ + isOpen, + setIsOpen, + handleSubmit, + extraConfig, +}) => { + // Extra configurations for the EU-related projects + const EUFundingLogos = _get(extraConfig, 'eu-funding-logos'); + const EUFundingVisibilityDocument = _get(extraConfig, 'eu-visibility-doc'); + return ( setIsOpen(false)} @@ -169,9 +236,11 @@ export const EUFundingModal = ({ isOpen, setIsOpen, handleSubmit }) => {

- - - + + +
@@ -195,3 +264,10 @@ export const EUFundingModal = ({ isOpen, setIsOpen, handleSubmit }) => { ); }; + +EUFundingModal.propTypes = { + fieldPath: PropTypes.bool.isRequired, + setIsOpen: PropTypes.func.isRequired, + handleSubmit: PropTypes.func.isRequired, + extraConfig: PropTypes.object.isRequired, +}; diff --git a/src/lib/components/form/base/fields/funding/EUFundingModalData.js b/src/lib/components/form/base/fields/funding/EUFundingModalData.js index 0bf8f4c..884f15e 100644 --- a/src/lib/components/form/base/fields/funding/EUFundingModalData.js +++ b/src/lib/components/form/base/fields/funding/EUFundingModalData.js @@ -7,52 +7,9 @@ import _isNil from 'lodash/isNil'; -/** - * EU Funding - Visibility document - */ -export const EUFundingVisibilityDocument = - 'https://commission.europa.eu/funding-tenders/managing-your-project/communicating-and-raising-eu-visibility_en'; - -/** - * EU Funding logo versions. - */ -export const EUFundingLogos = [ - { - id: 'eu-fundedby-2014-2020', - text: 'Funded by the European Union', - logo: '/static/images/funding/eu/eu-fundedby-2014-2020.png', - programme: '2014 - 2020', - }, - { - id: 'eu-fundedby-2021-2027', - text: 'Funded by the European Union', - logo: '/static/images/funding/eu/eu-fundedby-2021-2027.png', - programme: '2021 - 2027', - }, - { - id: 'eu-cofundedby-2021-2027', - text: 'Co-funded by the European Union', - logo: '/static/images/funding/eu/eu-cofundedby-2021-2027.png', - programme: '2021-2027', - }, - { - id: 'eu-ng-fundedby-2021-2027', - text: 'Funded by the European Union (NextGenerationEU)', - logo: '/static/images/funding/eu/eu-ng-fundedby-2021-2027.png', - programme: '2021 - 2027', - }, -]; - -/** - * List of EU-related funders. - */ -export const EUFunderValidID = [ - '00k4n6c32', // European Commission -]; - /** * Check if a given funder is EU-related. */ -export const isEUFunder = (funderId) => { - return !_isNil(funderId) && EUFunderValidID.indexOf(funderId) !== -1; +export const isEUFunder = (funderId, validIds) => { + return !_isNil(funderId) && validIds.indexOf(funderId) !== -1; }; diff --git a/src/lib/components/form/base/fields/funding/FundingField.js b/src/lib/components/form/base/fields/funding/FundingField.js index 7fe5d16..221964e 100644 --- a/src/lib/components/form/base/fields/funding/FundingField.js +++ b/src/lib/components/form/base/fields/funding/FundingField.js @@ -39,6 +39,7 @@ function FundingFieldForm(props) { deserializeFunder: deserializeFunderFunc, computeFundingContents: computeFundingContentsFunc, searchConfig, + extraConfig, } = props; const deserializeAward = deserializeAwardFunc @@ -111,6 +112,7 @@ function FundingFieldForm(props) { replaceFunding: formikArrayReplace, removeFunding: formikArrayRemove, searchConfig: searchConfig, + extraConfig: extraConfig, computeFundingContents: computeFundingContents, deserializeAward: deserializeAward, deserializeFunder: deserializeFunder, @@ -140,6 +142,7 @@ function FundingFieldForm(props) { deserializeAward={deserializeAward} deserializeFunder={deserializeFunder} computeFundingContents={computeFundingContents} + extraConfig={extraConfig} /> diff --git a/src/lib/components/form/base/fields/funding/FundingFieldItem.js b/src/lib/components/form/base/fields/funding/FundingFieldItem.js index 3214b91..d97dbc9 100644 --- a/src/lib/components/form/base/fields/funding/FundingFieldItem.js +++ b/src/lib/components/form/base/fields/funding/FundingFieldItem.js @@ -28,6 +28,7 @@ export const FundingFieldItem = ({ replaceFunding, removeFunding, searchConfig, + extraConfig, deserializeAward, deserializeFunder, computeFundingContents, @@ -91,6 +92,7 @@ export const FundingFieldItem = ({ deserializeFunder={deserializeFunder} computeFundingContents={computeFundingContents} initialFunding={fundingItem} + extraConfig={extraConfig} />