EN · DE · RU · FR · ES

#2697 : FormModal.jsx

projectforge-webapp/src/containers/page/form/FormModal.jsx Composant React, projectforge-webapp/src/containers/page/form/FormModal.jsx 27 lignes · 23 code · 0 commentaires · 4 vides
Objectif : Application web React : FormModal.jsx. FormModal.jsx fait partie de l'application open-source de gestion de projet ProjectForge.

Source (100 premières lignes)

import PropTypes from 'prop-types';
import React from 'react';
import { useDispatch } from 'react-redux';
import { Modal, ModalBody } from '../../../components/design';
import FormPage from './FormPage';
import { callAction } from '../../../actions';

function FormModal(props) {
    const dispatch = useDispatch();
    const onCallAction = (...args) => dispatch(callAction(...args));

    return (
        <Modal
            toggle={() => onCallAction({ responseAction: { targetType: 'CLOSE_MODAL' } })}
            isOpen
            className="modal-xl"
        >
            <ModalBody>
                <FormPage {...props} />
            </ModalBody>
        </Modal>
    );
}

FormModal.propTypes = {};

export default FormModal;

Historique Git

bf988bc6d Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
3490f27f1 correction du calendrier et de la page de feuille de temps
3685edd6c migration vers react 18 wip
ac2dbb269 Travaux de migration en cours...
511d2c1f6 implémentation de l'action de fermeture de la modale dans le formulaire modal au lieu du remplacement d'URL

bf988bc6d

Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
bf988bc6d14252863c2a7a54c409c947fb9feb7b
diff --git a/projectforge-webapp/src/containers/page/form/FormModal.jsx b/projectforge-webapp/src/containers/page/form/FormModal.jsx
index e7c3c52a4..2d12d23b4 100644
--- a/projectforge-webapp/src/containers/page/form/FormModal.jsx
+++ b/projectforge-webapp/src/containers/page/form/FormModal.jsx
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Modal, ModalBody } from '../../../components/design';
 import FormPage from './FormPage';
 import { callAction } from '../../../actions';
 
 function FormModal(props) {
-    const { onCallAction } = props;
+    const dispatch = useDispatch();
+    const onCallAction = (...args) => dispatch(callAction(...args));
 
     return (
         <Modal
@@ -21,12 +22,6 @@ function FormModal(props) {
     );
 }
 
-FormModal.propTypes = {
-    onCallAction: PropTypes.func.isRequired,
-};
+FormModal.propTypes = {};
 
-const actions = {
-    onCallAction: callAction,
-};
-
-export default connect(() => ({}), actions)(FormModal);
+export default FormModal;

3490f27f1

correction du calendrier et de la page de feuille de temps
3490f27f105c220263fa22ff716d907beb75c5a5
diff --git a/projectforge-webapp/src/containers/page/form/FormModal.jsx b/projectforge-webapp/src/containers/page/form/FormModal.jsx
index 487ab47ef..e7c3c52a4 100644
--- a/projectforge-webapp/src/containers/page/form/FormModal.jsx
+++ b/projectforge-webapp/src/containers/page/form/FormModal.jsx
@@ -6,7 +6,7 @@ import FormPage from './FormPage';
 import { callAction } from '../../../actions';
 
 function FormModal(props) {
-    const { baseUrl, onCallAction } = props;
+    const { onCallAction } = props;
 
     return (
         <Modal
@@ -22,7 +22,6 @@ function FormModal(props) {
 }
 
 FormModal.propTypes = {
-    baseUrl: PropTypes.string.isRequired,
     onCallAction: PropTypes.func.isRequired,
 };
 

3685edd6c

migration vers react 18 wip
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/containers/page/form/FormModal.jsx b/projectforge-webapp/src/containers/page/form/FormModal.jsx
index 0893d8d0e..487ab47ef 100644
--- a/projectforge-webapp/src/containers/page/form/FormModal.jsx
+++ b/projectforge-webapp/src/containers/page/form/FormModal.jsx
@@ -26,8 +26,6 @@ FormModal.propTypes = {
     onCallAction: PropTypes.func.isRequired,
 };
 
-FormModal.defaultProps = {};
-
 const actions = {
     onCallAction: callAction,
 };

ac2dbb269

Travaux de migration en cours...
ac2dbb2697ca3593bffb72f87d50c2dbc1e6f2da
diff --git a/projectforge-webapp/src/containers/page/form/FormModal.jsx b/projectforge-webapp/src/containers/page/form/FormModal.jsx
index 98ddcd7e5..0893d8d0e 100644
--- a/projectforge-webapp/src/containers/page/form/FormModal.jsx
+++ b/projectforge-webapp/src/containers/page/form/FormModal.jsx
@@ -2,16 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { Modal, ModalBody } from '../../../components/design';
-import history from '../../../utilities/history';
 import FormPage from './FormPage';
 import { callAction } from '../../../actions';
 
 function FormModal(props) {
-    const { baseUrl, callAction } = props;
+    const { baseUrl, onCallAction } = props;
 
     return (
         <Modal
-            toggle={() => callAction({responseAction: {targetType: "CLOSE_MODAL"}})}
+            toggle={() => onCallAction({ responseAction: { targetType: 'CLOSE_MODAL' } })}
             isOpen
             className="modal-xl"
         >
@@ -31,6 +30,6 @@ FormModal.defaultProps = {};
 
 const actions = {
     onCallAction: callAction,
-}
+};
 
 export default connect(() => ({}), actions)(FormModal);

511d2c1f6

implémentation de l'action de fermeture de la modale dans le formulaire modal au lieu du remplacement d'URL
511d2c1f623221299800d259374f5bd02c1a15f9
diff --git a/projectforge-webapp/src/containers/page/form/FormModal.jsx b/projectforge-webapp/src/containers/page/form/FormModal.jsx
index 3a320210f..98ddcd7e5 100644
--- a/projectforge-webapp/src/containers/page/form/FormModal.jsx
+++ b/projectforge-webapp/src/containers/page/form/FormModal.jsx
@@ -1,15 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
 import { Modal, ModalBody } from '../../../components/design';
 import history from '../../../utilities/history';
 import FormPage from './FormPage';
+import { callAction } from '../../../actions';
 
 function FormModal(props) {
-    const { baseUrl } = props;
+    const { baseUrl, callAction } = props;
 
     return (
         <Modal
-            toggle={() => history.push(baseUrl)}
+            toggle={() => callAction({responseAction: {targetType: "CLOSE_MODAL"}})}
             isOpen
             className="modal-xl"
         >
@@ -22,8 +24,13 @@ function FormModal(props) {
 
 FormModal.propTypes = {
     baseUrl: PropTypes.string.isRequired,
+    onCallAction: PropTypes.func.isRequired,
 };
 
 FormModal.defaultProps = {};
 
-export default FormModal;
+const actions = {
+    onCallAction: callAction,
+}
+
+export default connect(() => ({}), actions)(FormModal);