frontend et backend: Formulaire dynamique

2020-03-24 16:11:55 +01:00
parent b479e1501f
commit 2c61a22787
19 changed files with 353 additions and 71 deletions
--- a/website/components/FunctionForm/FunctionForm.css
+++ b/website/components/FunctionForm/FunctionForm.css
@ -0,0 +1,41 @@
+.FunctionForm__control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+}
+.FunctionForm__label {
+    display: inline-block;
+    margin-bottom: .5em;
+    font-size: 16px;
+}
+.FunctionForm__submit, .FunctionForm__result {
+    margin-top: 25px;
+}
+.btn {
+    cursor: pointer;
+    border: 1px solid transparent;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+.btn-dark:hover {
+    color: #fff;
+    background-color: #23272b;
+    border-color: #1d2124;
+}
+.btn-dark {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
--- a/website/components/FunctionForm/FunctionForm.js
+++ b/website/components/FunctionForm/FunctionForm.js
@ -0,0 +1,80 @@
+import { useState } from 'react';
+import Loader from '../Loader';
+import './FunctionForm.css';
+import htmlParser from 'html-react-parser';
+import api from '../../utils/api';
+
+const FunctionForm = (props) => {
+    // console.log(props);
+
+    const [inputState, setInputState] = useState({});
+    const [message, setMessage] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        api.post(`/functions/${props.slug}`, inputState)
+            .then((response) => {
+                setMessage(response.data.resultHTML);
+            })
+            .catch((error) => {
+                setMessage(error.response.data.message);
+            });
+            setIsLoading(false);
+    }
+
+    const handleChange = (event) => {
+        const inputStateNew = { ...inputState };
+        inputStateNew[event.target.name] = event.target.value;
+        if (event.target.value !== "") {
+            setIsLoading(true);
+        } else {
+            setIsLoading(false);
+        }
+        setInputState(inputStateNew);
+    }
+
+    if (props.inputArray.length <= 0) {
+        return (
+            <div className="FunctionComponent__slide text-center">
+                <p>La fonction n'est pas encore disponible.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="FunctionComponent__slide">
+            <form onSubmit={handleSubmit}>
+                {props.inputArray.map((input, index) => {
+                    let inputResult;
+                    switch(input.type) {
+                        case "text" || "number":
+                            inputResult = (<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="FunctionForm__control" />);
+                            break;
+                        default:
+                            inputResult = (<p>Erreur, l'input n'est pas valide...</p>);
+                    }
+                    return (
+                        <div key={index} className="FunctionForm__group">
+                            <label className="FunctionForm__label"  htmlFor={input.name}>{input.label}</label>
+                            {inputResult}
+                        </div>
+                    );
+                })}
+                
+                <div className="FunctionForm__submit text-center">
+                    <button type="submit" className="btn btn-dark">Envoyer</button>
+                </div>
+            </form>
+            <div className="FunctionForm__result text-center">
+                {
+                    (isLoading) ? 
+                        <Loader />
+                    :
+                        htmlParser(message)
+                }
+            </div>
+        </div>
+    );
+}
+
+export default FunctionForm;
--- a/website/package-lock.json
+++ b/website/package-lock.json
@ -1267,6 +1267,11 @@
      "resolved": "https://registry.npmjs.org/@next/polyfill-nomodule/-/polyfill-nomodule-9.3.1.tgz",
      "integrity": "sha512-4mP4m7cuobjLcjltQzPrv9/b/C/AQR3Q1PwQw/0VLkZTsC8HxCt/gbafXdyDmalDPsp6EEZ6IaHUpuFBz+QBmw=="
    },
+    "@types/domhandler": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/domhandler/-/domhandler-2.4.1.tgz",
+      "integrity": "sha512-cfBw6q6tT5sa1gSPFSRKzF/xxYrrmeiut7E0TxNBObiLSBTuFEHibcfEe3waQPEDbqBsq+ql/TOniw65EyDFMA=="
+    },
    "@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -3757,11 +3762,84 @@
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
    },
+    "html-dom-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-0.2.3.tgz",
+      "integrity": "sha512-GdzE63/U0IQEvcpAz0cUdYx2zQx0Ai+HWvE9TXEgwP27+SymUzKa7iB4DhjYpf2IdNLfTTOBuMS5nxeWOosSMQ==",
+      "requires": {
+        "@types/domhandler": "2.4.1",
+        "domhandler": "2.4.2",
+        "htmlparser2": "3.10.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+        },
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "htmlparser2": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+          "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+          "requires": {
+            "domelementtype": "^1.3.1",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.1.1"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
    "html-entities": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
    },
+    "html-react-parser": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-0.10.2.tgz",
+      "integrity": "sha512-CXAtbO0bMB8/TuMXgClap6C7SIcZvA5AP0inTJ93JZTryNiHUkCo5shsNBfegW9aqfdh1iWNGSy/dCku5vwdcw==",
+      "requires": {
+        "@types/domhandler": "2.4.1",
+        "html-dom-parser": "0.2.3",
+        "react-property": "1.0.1",
+        "style-to-object": "0.3.0"
+      }
+    },
    "htmlparser2": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.0.0.tgz",
@ -3897,6 +3975,11 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
    "invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@ -5968,6 +6051,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
      "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
    },
+    "react-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-1.0.1.tgz",
+      "integrity": "sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ=="
+    },
    "react-swipeable-views": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz",
@ -6818,6 +6906,14 @@
        "schema-utils": "^2.0.1"
      }
    },
+    "style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "requires": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
    "styled-jsx": {
      "version": "3.2.5",
      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.2.5.tgz",
--- a/website/package.json
+++ b/website/package.json
@ -10,6 +10,7 @@
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.2",
+    "html-react-parser": "^0.10.2",
    "next": "9.3.1",
    "next-fonts": "^1.0.3",
    "nprogress": "^0.2.0",
--- a/website/pages/functions/[slug].js
+++ b/website/pages/functions/[slug].js
@ -3,6 +3,7 @@ import HeadTag from '../../components/HeadTag';
 import FunctionComponentTop from '../../components/FunctionComponentTop';
 import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
 import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
+import FunctionForm from '../../components/FunctionForm/FunctionForm';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
 import { API_URL } from '../../utils/config';
@ -24,7 +25,11 @@ const FunctionComponent = (props) => {
                <FunctionComponentTop { ...props } API_URL={API_URL} publicationDate={publicationDate} />

                <FunctionTabs type={props.type}>
-                    <div className="FunctionComponent__slide text-center">Slide 1</div>
+                    {(props.type !== "article") ? 
+                        <FunctionForm inputArray={ [...props.utilizationForm || []] } slug={props.slug} /> 
+                    : 
+                        <div className="FunctionComponent__slide text-center">Slide 1</div>
+                    }
                    <div className="FunctionComponent__slide text-center">Slide 2</div>
                    <div className="FunctionComponent__slide text-center">Slide 3</div>
                </FunctionTabs>
--- a/website/public/css/general.css
+++ b/website/public/css/general.css
@ -96,23 +96,4 @@ a, .important {
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .5em;
-}
-.btn {
-    cursor: pointer;
-    border: 1px solid transparent;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: .25rem;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
-.btn-dark:hover {
-    color: #fff;
-    background-color: #23272b;
-    border-color: #1d2124;
-}
-.btn-dark {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
 }