📦 NEW: Modifier formulaire d'une fonction - admin

api/controllers/admin.js

@@ -192,7 +192,7 @@ exports.putFunctionForm = async (req, res, next) => {
         if (!resultFunction) {
             return errorHandling(next, { message: "La fonction n'existe pas.", statusCode: 404 });
         }
-        resultFunction.form = form;
+        resultFunction.utilizationForm = form;
         const result = await resultFunction.save();
         return res.status(200).json(result);
     } catch (error) {

website/components/EditArticleFunction.js

@@ -3,8 +3,8 @@ import dynamic from 'next/dynamic';
 import { complex } from '../utils/sunEditorConfig';
 import api from '../utils/api';
 import FunctionArticle from '../components/FunctionArticle';
-import 'notyf/notyf.min.css'; // for React and Vue
+import 'notyf/notyf.min.css';
-import 'suneditor/dist/css/suneditor.min.css';
+import '../public/css/suneditor.min.css';
 
 const SunEditor = dynamic(
     () => import('suneditor-react'),
@@ -30,7 +30,9 @@ const EditArticleFunction = (props) => {
         try {
             await api.put(`/admin/functions/article/${props.functionInfo.id}`, { article: content }, { headers: { 'Authorization': props.user.token } });
             notyf.success('Sauvegardé!');
-        } catch {}
+        } catch {
+            notyf.error('Erreur!');
+        }
     }
 
     return (

website/components/EditFormFunction.js

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import api from '../utils/api';
+import 'notyf/notyf.min.css';
+
+const EditFormFunction = (props) => {
+
+    const [inputsArray, setInputsArray] = useState(props.functionInfo.utilizationForm || []);
+
+    const addInput = () => {
+        const newInputsArray = [...inputsArray];
+        newInputsArray.push({ name: "", label: "", placeholder: "", type: "text" });
+        setInputsArray(newInputsArray);
+    }
+
+    const handleChangeInput = (event) => {
+        const newInputsArray = [...inputsArray];
+        const index = event.target.id.split('-')[1];
+        const inputObject = newInputsArray[index];
+        inputObject[event.target.name] = event.target.value;
+        setInputsArray(newInputsArray);
+    }
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        let Notyf;
+        if (typeof window != 'undefined') {
+            Notyf = require('notyf');
+        }
+        const notyf = new Notyf.Notyf({
+            duration: 5000
+        });
+        try {
+            await api.put(`/admin/functions/form/${props.functionInfo.id}`, { form: inputsArray }, { headers: { 'Authorization': props.user.token } });
+            notyf.success('Sauvegardé!');
+        } catch (error) {
+            notyf.error('Erreur!');
+        }
+    }
+
+    const handleRemoveInput = (event) => {
+        const newInputsArray = [...inputsArray];
+        const index = event.target.id.split('-')[1];
+        newInputsArray.splice(index, 1);
+        setInputsArray(newInputsArray);
+    }
+
+    return (
+        <div className="container-fluid">
+
+            <form onSubmit={handleSubmit}>
+
+                {(inputsArray.length > 0) &&                
+                    <div className="form-group text-center">
+                        <button type="submit" className="btn btn-dark">Sauvegarder</button>
+                    </div>
+                }
+
+                {inputsArray.map((input, index) => {
+                    return (
+                        <div key={index} className="form-group Admin__Input-group">
+                            <label className="form-label" htmlFor="nameInput1">Nom de l'input :</label>
+                            <input value={input.name} onChange={handleChangeInput} type="text" name="name" id={`name-${index}`} className="form-control" placeholder="(e.g : cityName)" />
+                            <br/>
+
+                            <label className="form-label" htmlFor="labelInput1">Label :</label>
+                            <input value={input.label} onChange={handleChangeInput} type="text" name="label" id={`label-${index}`} className="form-control" placeholder="(e.g : Entrez le nom d'une ville :)" />
+                            <br/>
+                            
+                            <label className="form-label" htmlFor="placeholderInput1">Placeholder :</label>
+                            <input value={input.placeholder} onChange={handleChangeInput} type="text" name="placeholder" id={`placeholder-${index}`} className="form-control" placeholder="(e.g : Paris, FR)" />
+                            <br/>
+
+                            <label className="form-label" htmlFor="typeInput1">Type :</label>
+                            <select value={input.type} onChange={handleChangeInput} name="type" id={`type-${index}`} className="form-control">
+                                <option value="text">text</option>
+                                <option value="number">number</option>
+                            </select>
+
+                            <div className="form-group text-center">
+                                <button type="button" onClick={handleRemoveInput} id={`remove-${index}`} className="btn btn-dark">Supprimer l'input</button>
+                            </div>
+                        </div>
+                    );
+                })}
+
+            </form>
+
+            <div style={{ marginBottom: '30px' }} className="form-group text-center">
+                <button type="button" onClick={addInput} className="btn btn-dark">Ajouter un input</button>
+            </div>
+        </div>
+    );
+}
+
+export default EditFormFunction;

website/components/FunctionForm.js

@@ -4,7 +4,6 @@ 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("");
@@ -30,7 +29,7 @@ const FunctionForm = (props) => {
         setInputState(inputStateNew);
     }
 
-    if (props.inputArray.length <= 0) {
+    if (props.inputsArray.length <= 0) {
         return (
             <div className="FunctionComponent__slide text-center">
                 <p>La fonction n'est pas encore disponible.</p>
@@ -40,7 +39,7 @@ const FunctionForm = (props) => {
     return (
         <Fragment>
             <form onSubmit={handleSubmit}>
-                {props.inputArray.map((input, index) => {
+                {props.inputsArray.map((input, index) => {
                     let inputResult;
                     switch(input.type) {
                         case "text" || "number":

website/components/FunctionTabManager.js

@@ -8,7 +8,7 @@ const FunctionTabManager = (props) => {
         return (
             <FunctionTabs type={props.type}>
                 <div className="FunctionComponent__slide">
-                    <FunctionForm inputArray={ [...props.utilizationForm || []] } slug={props.slug} />
+                    <FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
                 </div>
                 <div className="FunctionComponent__slide">
                     <FunctionArticle article={props.article} />

website/pages/admin/[slug].js

@@ -4,6 +4,7 @@ import SwipeableViews from 'react-swipeable-views';
 import HeadTag from '../../components/HeadTag';
 import AddEditFunction from '../../components/AddEditFunction';
 import EditArticleFunction from '../../components/EditArticleFunction';
+import EditFormFunction from '../../components/EditFormFunction';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
 import { API_URL } from '../../utils/config';
@@ -12,7 +13,7 @@ import '../../public/css/pages/admin.css';
 
 const AdminFunctionComponent = (props) => {
 
-    const [slideIndex, setSlideIndex] = useState(0);
+    const [slideIndex, setSlideIndex] = useState(2);
 
     return (
         <Fragment>
@@ -47,6 +48,9 @@ const AdminFunctionComponent = (props) => {
                         <div className="Admin__Function-slide">
                             <EditArticleFunction { ...props } />
                         </div>
+                        <div className="Admin__Function-slide">
+                            <EditFormFunction { ...props } />
+                        </div>
                     </SwipeableViews>
                 </div>
             </div>

website/public/css/pages/admin.css

@@ -32,4 +32,14 @@
 }
 .Admin__Function-slide {
     margin-top: 40px;
+}
+.Admin__Input-group {
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
+    border: 1px solid black;
+    border-radius: 1rem;
+    margin-top: 40px;
+    padding: 40px;
 }