frontend et backend: Formulaire dynamique

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;
+}

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;