- {registries && registries.length > 1 && (
-
-
-
-
({
- value: registry,
- label: registry,
- }))}
- name={propName}
- selectedOption={
- selectedRegistry ? { value: selectedRegistry, label: selectedRegistry } : null
- }
- isDisabled={readonly}
- placeholder={t("Select a registry")}
- />
+ {mapping
+ ?
+ :
+ {registries && registries.length > 1 && (
+
+
+
+ ({
+ value: registry,
+ label: registry,
+ }))}
+ name={propName}
+ selectedOption={
+ selectedRegistry ? { value: selectedRegistry, label: selectedRegistry } : null
+ }
+ isDisabled={readonly}
+ placeholder={t("Select a registry")}
+ />
+
+
-
1 ? "col-md-6" : "col-md-12"}>
-
-
- {options && (
-
ASYNC_SELECT_OPTION_THRESHOLD}
- placeholder={createRegistryPlaceholder(registries, overridable, 'complex', t)}
- overridable={false}
- />
+ 1 ? "col-md-6" : "col-md-12"}>
+
+
+ {options && (
+ <>
+ ASYNC_SELECT_OPTION_THRESHOLD}
+ placeholder={createRegistryPlaceholder(registries, overridable, 'complex', t)}
+ overridable={false}
+ />
+
+
+ )}
+
+ {!readonly && overridable && (
+
+
+ {
+ setShow(true);
+ setIndex(null);
+ }}
+ className={styles.icon}
+ />
+
)}
- {!readonly && overridable && (
-
-
- {
- setShow(true);
- setIndex(null);
- }}
- className={styles.icon}
- />
-
- )}
-
+ }
{error}
{template && (
)}
@@ -75,6 +82,8 @@ function InputTextArray({ label, propName, tooltip, readonly }) {
))}
+
+
{!readonly && (
append('')}
@@ -87,4 +96,4 @@ function InputTextArray({ label, propName, tooltip, readonly }) {
);
}
-export default InputTextArray;
+export default InputTextList;
diff --git a/src/components/FormComponents/MappingButton.jsx b/src/components/FormComponents/MappingButton.jsx
new file mode 100644
index 00000000..e30e1075
--- /dev/null
+++ b/src/components/FormComponents/MappingButton.jsx
@@ -0,0 +1,28 @@
+import { t } from "i18next";
+import useSectionsMapping from "../../hooks/useSectionsMapping";
+import CustomButton from "../Styled/CustomButton";
+
+function MappingButton({ path, label }) {
+ // --- STATE ---
+ const { mapping, handleInsert, editorRef } = useSectionsMapping();
+
+ // --- RENDER ---
+ return (
+ <>
+ {mapping &&
+ (editorRef && editorRef.current
+ ?
+ handleInsert({ path, label })}
+ buttonColor="white"
+ />
+ :
+ {t('Open a question in the target template to get started.')}
+ )
+ }
+
+ )
+}
+
+export default MappingButton;
\ No newline at end of file
diff --git a/src/components/FormComponents/ModalTemplate.jsx b/src/components/FormComponents/ModalTemplateTable.jsx
similarity index 93%
rename from src/components/FormComponents/ModalTemplate.jsx
rename to src/components/FormComponents/ModalTemplateTable.jsx
index 790eafb4..757cbf97 100644
--- a/src/components/FormComponents/ModalTemplate.jsx
+++ b/src/components/FormComponents/ModalTemplateTable.jsx
@@ -7,7 +7,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
import uniqueId from 'lodash.uniqueid';
import { GlobalContext } from '../context/Global.jsx';
-import { service } from '../../services';
+import { service } from '../../services/index.js';
import CustomButton from '../Styled/CustomButton.jsx';
import * as styles from '../assets/css/form.module.css';
import FragmentList from './FragmentList.jsx';
@@ -15,6 +15,7 @@ import ModalForm from '../Forms/ModalForm.jsx';
import swalUtils from '../../utils/swalUtils.js';
import { getErrorMessage } from '../../utils/utils.js';
import { checkFragmentExists } from '../../utils/JsonFragmentsUtils.js';
+import useSectionsMapping from '../../hooks/useSectionsMapping.js';
/**
* It takes a template name as an argument, loads the template file, and then
@@ -22,7 +23,7 @@ import { checkFragmentExists } from '../../utils/JsonFragmentsUtils.js';
*
* @returns A React component.
*/
-function ModalTemplate({
+function ModalTemplateTable({
label,
formLabel,
propName,
@@ -30,12 +31,14 @@ function ModalTemplate({
header,
templateName,
readonly = false,
+ jsonPath = null
}) {
const { t } = useTranslation();
const [show, setShow] = useState(false);
const {
loadedTemplates, setLoadedTemplates,
} = useContext(GlobalContext);
+ const { mapping } = useSectionsMapping();
const { control } = useFormContext();
const { field } = useController({ control, name: propName });
const [editedFragment, setEditedFragment] = useState({})
@@ -155,27 +158,27 @@ function ModalTemplate({
}
{error}
- {template && (
-
- )}
- {!readonly && (
+ {(!readonly || mapping) && (
{
setEditedFragment(null);
setShow(true);
setIndex(null);
}}
- title={t("Add an element")}
+ title={t(mapping ? "Open element modal" : "Add an element")}
buttonColor="rust"
position="start"
- >
+ />
+ )}
+ {template && (
+
)}
{template && show && (
@@ -187,9 +190,10 @@ function ModalTemplate({
show={show}
handleSave={handleSave}
handleClose={handleClose}
+ jsonPath={jsonPath}
/>)}
);
}
-export default ModalTemplate;
+export default ModalTemplateTable;
diff --git a/src/components/FormComponents/SelectContributorMultiple.jsx b/src/components/FormComponents/SelectContributorMultiple.jsx
index 77c83284..67d80d56 100644
--- a/src/components/FormComponents/SelectContributorMultiple.jsx
+++ b/src/components/FormComponents/SelectContributorMultiple.jsx
@@ -17,6 +17,7 @@ import PersonsList from './PersonsList.jsx';
import ModalForm from '../Forms/ModalForm.jsx';
import swalUtils from '../../utils/swalUtils.js';
import { getErrorMessage } from '../../utils/utils.js';
+import MappingButton from './MappingButton.jsx';
function SelectContributorMultiple({
label,
@@ -26,6 +27,7 @@ function SelectContributorMultiple({
templateName,
defaultValue = null,
readonly = false,
+ jsonPath = null
}) {
const { t } = useTranslation();
const { control } = useFormContext();
@@ -70,9 +72,13 @@ function SelectContributorMultiple({
}, [persons])
const fetchPersons = () => {
- service.getPersons(dmpId).then((res) => {
- setPersons(res.data.results);
- });
+ if(dmpId) {
+ service.getPersons(dmpId).then((res) => {
+ setPersons(res.data.results);
+ });
+ } else {
+ setPersons([]);
+ }
}
const fetchRoles = () => {
@@ -262,6 +268,7 @@ function SelectContributorMultiple({
isDisabled={readonly}
placeholder={t("Select a value from the list or create a new one by clicking on +")}
/>
+
{!readonly && (
@@ -307,6 +314,7 @@ function SelectContributorMultiple({
handleSave={handleSave}
handleClose={handleClose}
externalImport={['ror', 'orcid']}
+ jsonPath={jsonPath}
/>
)}
diff --git a/src/components/FormComponents/SelectContributorSingle.jsx b/src/components/FormComponents/SelectContributorSingle.jsx
index b81f0bba..cf597d83 100644
--- a/src/components/FormComponents/SelectContributorSingle.jsx
+++ b/src/components/FormComponents/SelectContributorSingle.jsx
@@ -17,6 +17,7 @@ import PersonsList from './PersonsList.jsx';
import ModalForm from '../Forms/ModalForm.jsx';
import swalUtils from '../../utils/swalUtils.js';
import { getErrorMessage } from '../../utils/utils.js';
+import MappingButton from './MappingButton.jsx';
function SelectContributorSingle({
propName,
@@ -25,6 +26,7 @@ function SelectContributorSingle({
templateName,
defaultValue = null,
readonly = false,
+ jsonPath = null,
}) {
const { t } = useTranslation();
const { control } = useFormContext();
@@ -70,9 +72,13 @@ function SelectContributorSingle({
}, [persons])
const fetchPersons = () => {
- service.getPersons(dmpId).then((res) => {
- setPersons(res.data.results);
- });
+ if(dmpId) { // TODO: use mode
+ service.getPersons(dmpId).then((res) => {
+ setPersons(res.data.results);
+ });
+ } else {
+ setPersons([]);
+ }
}
const fetchRoles = () => {
@@ -241,7 +247,9 @@ function SelectContributorSingle({
name={propName}
isDisabled={readonly}
placeholder={t("Select a value from the list or create a new one by clicking on +")}
+ jsonPath={jsonPath}
/>
+
{!readonly && (
@@ -273,6 +281,7 @@ function SelectContributorSingle({
tableHeader={t('Selected value')}
overridable={overridableRole}
readonly={readonly}
+ jsonPath={jsonPath}
>
)}
@@ -287,6 +296,7 @@ function SelectContributorSingle({
handleSave={handleSave}
handleClose={handleClose}
externalImport={['ror', 'orcid']}
+ jsonPath={jsonPath}
/>
)}
diff --git a/src/components/FormComponents/SelectMultipleList.jsx b/src/components/FormComponents/SelectMultipleList.jsx
index 03455118..11f6729b 100644
--- a/src/components/FormComponents/SelectMultipleList.jsx
+++ b/src/components/FormComponents/SelectMultipleList.jsx
@@ -13,6 +13,7 @@ import * as styles from '../assets/css/form.module.css';
import CustomSelect from '../Shared/CustomSelect.jsx';
import { ASYNC_SELECT_OPTION_THRESHOLD } from '../../config.js';
import swalUtils from '../../utils/swalUtils.js';
+import MappingButton from './MappingButton.jsx';
function SelectMultipleList({
label,
@@ -22,6 +23,7 @@ function SelectMultipleList({
registries,
overridable = false,
readonly = false,
+ jsonPath = null
}) {
const { t } = useTranslation();
const { control } = useFormContext();
@@ -147,7 +149,9 @@ function SelectMultipleList({
}
isDisabled={readonly}
placeholder={t("Select a registry")}
+ jsonPath={jsonPath}
/>
+
{options && (
- ASYNC_SELECT_OPTION_THRESHOLD}
- placeholder={createRegistryPlaceholder(registries, overridable, registryType, t)}
- overridable={registryType === 'complex' ? false : overridable}
- />
+ <>
+ ASYNC_SELECT_OPTION_THRESHOLD}
+ placeholder={createRegistryPlaceholder(registries, overridable, registryType, t)}
+ overridable={registryType === 'complex' ? false : overridable}
+ jsonPath={jsonPath}
+ />
+
+
)}
{!readonly && overridable && registryType === 'complex' && !showNestedForm && (
diff --git a/src/components/FormComponents/SubForm.jsx b/src/components/FormComponents/SubForm.jsx
index 44cbd2d9..9717e470 100644
--- a/src/components/FormComponents/SubForm.jsx
+++ b/src/components/FormComponents/SubForm.jsx
@@ -13,6 +13,7 @@ import { parsePattern } from '../../utils/GeneratorUtils.js';
import { GlobalContext } from '../context/Global.jsx';
import CustomButton from '../Styled/CustomButton.jsx';
import swalUtils from '../../utils/swalUtils.js';
+import useSectionsMapping from '../../hooks/useSectionsMapping.js';
function SubForm({
label,
@@ -20,6 +21,7 @@ function SubForm({
tooltip,
templateName,
readonly = false,
+ jsonPath = null
}) {
const { t } = useTranslation();
const { control } = useFormContext();
@@ -27,9 +29,11 @@ function SubForm({
const {
loadedTemplates, setLoadedTemplates,
} = useContext(GlobalContext);
+ const { mapping } = useSectionsMapping();
const [showNestedForm, setShowNestedForm] = useState(false);
const [editedFragment, setEditedFragment] = useState({});
const [template, setTemplate] = useState({});
+ const [error, setError] = useState(null);
const tooltipId = uniqueId('sub_form_tooltip_id_');
const ViewEditComponent = readonly ? FaEye : FaPenToSquare;
@@ -87,9 +91,9 @@ function SubForm({
- {showNestedForm && (
+ {(showNestedForm || mapping) && (
)}
diff --git a/src/components/FormComponents/TinyArea.jsx b/src/components/FormComponents/TinyArea.jsx
index dc6e4dd5..e1fb1a30 100644
--- a/src/components/FormComponents/TinyArea.jsx
+++ b/src/components/FormComponents/TinyArea.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, forwardRef } from 'react';
import { useFormContext, useController } from 'react-hook-form';
import { Editor } from '@tinymce/tinymce-react';
import { Tooltip as ReactTooltip } from 'react-tooltip';
@@ -7,6 +7,8 @@ import DOMPurify from 'dompurify';
import styled from 'styled-components';
import * as styles from '../assets/css/form.module.css';
+import MappingButton from './MappingButton';
+import useSectionsMapping from '../../hooks/useSectionsMapping';
const ReadDiv = styled.div`
border: solid;
@@ -22,20 +24,25 @@ const ReadDiv = styled.div`
background: #f2f2f2;
`;
-/* This is a React functional component that renders a TinyMCE editor for text input. It receives several props including `label`, `name`, `changeValue`,
-`tooltip` and `schemaId`. It uses the `useContext` hook to access the `form` and `temp` values from the `GlobalContext`. It also uses the
-`useState` hook to set the initial state of the `text` variable to `
`. */
-function TinyArea({
+/**
+ * This is a React functional component that renders a TinyMCE editor for text input. It receives several props including `label`, `name`, `changeValue`,
+ * `tooltip` and `schemaId`. It uses the `useContext` hook to access the `form` and `temp` values from the `GlobalContext`. It also uses the
+ * `useState` hook to set the initial state of the `text` variable to `
`.
+ */
+function TinyArea ({
label,
propName,
tooltip,
defaultValue = null,
readonly = false,
+ jsonPath = null,
}) {
+ const { mapping } = useSectionsMapping();
const { control } = useFormContext();
const { field } = useController({ control, name: propName });
const { onChange, ...newField } = field;
const tinyAreaLabelId = uniqueId('tiny_area_tooltip_id_');
+
const editorRef = useRef(null);
return (
@@ -94,15 +101,17 @@ function TinyArea({
skin_url: '/tinymce/skins/oxide',
content_css: [],
}}
+ onInit={(_evt, editor) => editorRef.current = editor}
/>
)}
- {readonly && (
+ {readonly && !mapping && (
)}
+
diff --git a/src/components/Forms/DynamicForm.jsx b/src/components/Forms/DynamicForm.jsx
index 4120d88b..be2e890d 100644
--- a/src/components/Forms/DynamicForm.jsx
+++ b/src/components/Forms/DynamicForm.jsx
@@ -14,7 +14,8 @@ import CustomButton from '../Styled/CustomButton.jsx';
import FormSelector from './FormSelector';
import { ExternalImport } from '../ExternalImport';
import { getErrorMessage } from '../../utils/utils.js';
-import { writePlan } from "../../services";
+import useSectionsMapping from '../../hooks/useSectionsMapping.js';
+import { sectionsContent } from '../../services';
function DynamicForm({
fragmentId,
@@ -27,6 +28,7 @@ function DynamicForm({
formSelector = {},
readonly,
fetchAnswersData = false,
+ id,
}) {
const { t } = useTranslation();
const {
@@ -38,60 +40,77 @@ function DynamicForm({
setQuestionsWithGuidance,
planData,
} = useContext(GlobalContext);
+
+ const {
+ mapping,
+ forms
+ } = useSectionsMapping();
+
const methods = useForm({ defaultValues: formData });
const [loading, setLoading] = useState(false);
const [error] = useState(null);
const [template, setTemplate] = useState(null);
const [externalImports, setExternalImports] = useState({});
+ const [currentJsonPath, setCurrentJsonPath] = useState(null);
useEffect(() => {
setLoading(true);
- if (fragmentId) {
- if (formData[fragmentId]) {
- if(loadedTemplates[formData[fragmentId].template_name]) {
- setTemplate(loadedTemplates[formData[fragmentId].template_name]);
+ if (mapping) {
+ service.getSchema(madmpSchemaId).then((res) => {
+ setTemplate(res.data);
+ // console.log(res.data)
+ setCurrentJsonPath(`$.${res.data.property_name}`);
+ setLoadedTemplates({ ...loadedTemplates, [template?.name]: res.data });
+ }).catch(console.error)
+ .finally(() => setLoading(false));
+ } else {
+ if (fragmentId) {
+ if (formData[fragmentId]) {
+ if (loadedTemplates[formData[fragmentId].template_name]) {
+ setTemplate(loadedTemplates[formData[fragmentId].template_name]);
+ } else {
+ service.getSchemaByName(formData[fragmentId].template_name).then((res) => {
+ setTemplate(res.data);
+ setExternalImports(template?.schema?.externalImports || {});
+ setLoadedTemplates({ ...loadedTemplates, [template?.name]: res.data });
+ }).catch(console.error)
+ .finally(() => setLoading(false));
+ }
+ methods.reset(formData[fragmentId]);
} else {
- service.getSchema(formData[fragmentId].template_name).then((res) => {
- setTemplate(res.data);
- setExternalImports(template?.schema?.externalImports || {});
- setLoadedTemplates({ ...loadedTemplates, [formData[fragmentId].template_name]: res.data });
+ service.getFragment(fragmentId).then((res) => {
+ setTemplate(res.data.template);
+ setLoadedTemplates({ ...loadedTemplates, [res.data.template.name]: res.data.schema });
+ setFormData({ [fragmentId]: res.data.fragment });
+ methods.reset(res.data.fragment);
}).catch(console.error)
.finally(() => setLoading(false));
}
- methods.reset(formData[fragmentId]);
} else {
- service.getFragment(fragmentId).then((res) => {
+ service.createFragment(null, madmpSchemaId, dmpId, questionId, displayedResearchOutput.id).then((res) => {
+ const updatedResearchOutput = { ...displayedResearchOutput };
setTemplate(res.data.template);
- setLoadedTemplates({ ...loadedTemplates, [res.data.template.name]: res.data.schema });
- setFormData({ [fragmentId]: res.data.fragment });
- methods.reset(res.data.fragment);
+ const fragment = res.data.fragment;
+ const answerId = res.data.answer_id
+ setLoadedTemplates({ ...loadedTemplates, [fragment?.template.name]: res?.data?.schema });
+ setFormData({ [fragment.id]: fragment });
+ setFragmentId(fragment.id);
+ setAnswerId(answerId);
+ updatedResearchOutput.answers.push({ answer_id: answerId, question_id: questionId, fragment_id: fragment.id })
+ setResearchOutputs(unionBy(researchOutputs, [updatedResearchOutput], 'id'));
}).catch(console.error)
.finally(() => setLoading(false));
}
- } else {
- service.createFragment(null, madmpSchemaId, dmpId, questionId, displayedResearchOutput.id).then((res) => {
- const updatedResearchOutput = { ...displayedResearchOutput };
- setTemplate(res.data.template);
- const fragment = res.data.fragment;
- const answerId = res.data.answer_id
- setLoadedTemplates({ ...loadedTemplates, [fragment?.template.name]: res?.data?.schema });
- setFormData({ [fragment.id]: fragment });
- setFragmentId(fragment.id);
- setAnswerId(answerId);
- updatedResearchOutput.answers.push({ answer_id: answerId, question_id: questionId, fragment_id: fragment.id })
- setResearchOutputs(unionBy(researchOutputs, [updatedResearchOutput], 'id'));
- }).catch(console.error)
- .finally(() => setLoading(false));
- }
- if(fetchAnswersData) {
- writePlan.getPlanData(planData.id)
- .then((res) => {
- const { questions_with_guidance } = res.data;
- setQuestionsWithGuidance(questions_with_guidance || []);
- })
- .catch(() => setQuestionsWithGuidance([]));
- setLoading(false);
+ if (fetchAnswersData) {
+ sectionsContent.getPlanData(planData.id)
+ .then((res) => {
+ const { questions_with_guidance } = res.data;
+ setQuestionsWithGuidance(questions_with_guidance || []);
+ })
+ .catch(() => setQuestionsWithGuidance([]));
+ setLoading(false);
+ }
}
}, [fragmentId]);
@@ -142,30 +161,42 @@ function DynamicForm({
<>
{loading && (Display of unstructured plan questions is not supported.
+ // Not working as it returns and display an independant html page that affects the global page + needs url parameters
+ //