Merge pull request #132 from M3nin0/dev

form: fixing bugs in EU funding logo selector
geo-knowledge-hub · Dec 7, 2024 · 4b17364 · 4b17364
2 parents 67b6572 + cdf2e07
commit 4b17364
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 76 deletions.
diff --git a/src/lib/components/form/base/fields/funding/EUFundingModal.js b/src/lib/components/form/base/fields/funding/EUFundingModal.js
@@ -6,33 +6,38 @@
 // 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({});
 
     const handleSelect = (logo) => {
       setSelectedLogo(logo);
     };
 
-    const fieldPath = 'selectedFunding.award.icon';
-    const labelIcon = 'image';
-    const label = 'EU Emblem';
-
     return (
       <Field name={fieldPath}>
         {({ form }) => {
@@ -51,7 +56,7 @@ const EUFundingLogoSelector = ({ logos }) => {
                       }}
                     >
                       <List selection divided relaxed>
-                        {logos.map((item) => (
+                        {options.map((item) => (
                           <List.Item
                             key={item.id}
                             active={selectedLogo.id === item.id}
@@ -112,36 +117,85 @@ const EUFundingLogoSelector = ({ logos }) => {
   }
 };
 
+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 (
     <RichInputField
       className="description-field rel-mb-1"
       fieldPath={fieldPath}
-      editorConfig={{}}
       label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
+      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 (
     <>
       <p>
         For EU-funded projects, as outlined in the guidelines on{' '}
-        <a
-          href={EUFundingVisibilityDocument}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <a href={referenceDocument} target="_blank" rel="noopener noreferrer">
           Communicating and raising EU visibility
         </a>
         , 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 (
     <Modal
       onClose={() => setIsOpen(false)}
@@ -169,9 +236,11 @@ export const EUFundingModal = ({ isOpen, setIsOpen, handleSubmit }) => {
       <Modal.Content>
         <div>
           <div>
-            <EUFundingDescription />
-            <EUFundingFundingStatement />
-            <EUFundingLogoSelector logos={EUFundingLogos} />
+            <EUFundingDescription
+              referenceDocument={EUFundingVisibilityDocument}
+            />
+            <EUFundingStatement />
+            <EUFundingLogoSelector options={EUFundingLogos} />
           </div>
         </div>
       </Modal.Content>
@@ -195,3 +264,10 @@ export const EUFundingModal = ({ isOpen, setIsOpen, handleSubmit }) => {
     </Modal>
   );
 };
+
+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
@@ -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
@@ -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}
           />
           <FundingModal
             searchConfig={searchConfig}
@@ -157,6 +160,7 @@ function FundingFieldForm(props) {
             deserializeAward={deserializeAward}
             deserializeFunder={deserializeFunder}
             computeFundingContents={computeFundingContents}
+            extraConfig={extraConfig}
           />
         </List>
       </Form.Field>

diff --git 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}
           />
           <Button
             size="mini"

diff --git a/src/lib/components/form/base/fields/funding/FundingModal.js b/src/lib/components/form/base/fields/funding/FundingModal.js
@@ -123,6 +123,7 @@ function FundingModal({
   deserializeAward,
   deserializeFunder,
   computeFundingContents,
+  extraConfig,
   ...props
 }) {
   const [open, setOpen] = useState(false);
@@ -160,7 +161,7 @@ function FundingModal({
       validateOnBlur={false}
       enableReinitialize
     >
-      {({ values, resetForm, handleSubmit, ...formikProps }) => (
+      {({ values, resetForm, handleSubmit }) => (
         <Modal
           role="dialog"
           centered={false}
@@ -261,9 +262,12 @@ function FundingModal({
                 // Extract Funder ID
                 const funderId = _get(values, 'selectedFunding.funder.id');
 
+                // Get valid funder IDs
+                const validFunderIds = _get(extraConfig, 'eu-funder-ids', []);
+
                 // Special case: For EU-related projects, it is required to
                 // show a modal to include funding disclaimer and icon
-                if (isEUFunder(funderId)) {
+                if (isEUFunder(funderId, validFunderIds)) {
                   // submit handling is done in the specialized modal.
                   setEUModalIsOpen(true);
                 } else {
@@ -284,6 +288,7 @@ function FundingModal({
             isOpen={isEUModalOpen}
             setIsOpen={setEUModalIsOpen}
             handleSubmit={handleSubmit}
+            extraConfig={extraConfig}
           />
         </Modal>
       )}