📦 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 'suneditor/dist/css/suneditor.min.css';
+import 'notyf/notyf.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;
 }

website/public/css/suneditor.min.css

@@ -0,0 +1 @@
+.sun-editor{width:auto;height:auto;box-sizing:border-box;font-family:Helvetica Neue,sans-serif;border:1px solid #dadada;text-align:left;background-color:#fff;color:#000;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sun-editor *{box-sizing:border-box;-webkit-user-drag:none;overflow:visible}.sun-editor-common button,.sun-editor-common input,.sun-editor-common select,.sun-editor-common textarea{font-size:14px;line-height:1.5}.sun-editor-common blockquote,.sun-editor-common body,.sun-editor-common button,.sun-editor-common code,.sun-editor-common dd,.sun-editor-common div,.sun-editor-common dl,.sun-editor-common dt,.sun-editor-common fieldset,.sun-editor-common form,.sun-editor-common h1,.sun-editor-common h2,.sun-editor-common h3,.sun-editor-common h4,.sun-editor-common h5,.sun-editor-common h6,.sun-editor-common input,.sun-editor-common legend,.sun-editor-common li,.sun-editor-common ol,.sun-editor-common p,.sun-editor-common pre,.sun-editor-common select,.sun-editor-common td,.sun-editor-common textarea,.sun-editor-common th,.sun-editor-common ul{margin:0;padding:0;border:0}.sun-editor-common dl,.sun-editor-common li,.sun-editor-common menu,.sun-editor-common ol,.sun-editor-common ul{list-style:none!important}.sun-editor-common hr{margin:6px 0!important}.sun-editor textarea{resize:none;border:0;padding:0}.sun-editor button{border:0;background-color:transparent;touch-action:manipulation;cursor:pointer;outline:none}.sun-editor button,.sun-editor input,.sun-editor select,.sun-editor textarea{vertical-align:middle}.sun-editor button span{display:block;margin:0;padding:0}.sun-editor button .txt{display:block;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sun-editor button *{pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.sun-editor .se-svg,.sun-editor button>svg{width:16px;height:16px;margin:auto;fill:currentColor;display:block;text-align:center;float:none}.sun-editor .close>svg,.sun-editor .se-dialog-close>svg{width:10px;height:10px}.sun-editor .se-btn-select>svg{float:right;width:10px;height:10px}.sun-editor .se-btn-list>.se-list-icon{display:inline-block;width:16px;height:16px;margin:-1px 10px 0 0;vertical-align:middle}.sun-editor button>i:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;font-size:15px;line-height:2}.sun-editor button>[class=se-icon-text]{font-size:20px;line-height:1}.sun-editor .se-arrow,.sun-editor .se-arrow:after{position:absolute;display:block;width:0;height:0;border:11px solid transparent}.sun-editor .se-arrow.se-arrow-up{top:-11px;left:20px;margin-left:-11px;border-top-width:0;border-bottom-color:rgba(0,0,0,.25)}.sun-editor .se-arrow.se-arrow-up:after{top:1px;margin-left:-11px;content:" ";border-top-width:0;border-bottom-color:#fff}.sun-editor .se-toolbar .se-arrow.se-arrow-up:after{border-bottom-color:#fafafa}.sun-editor .se-arrow.se-arrow-down{top:0;left:0;margin-left:-11px;border-bottom-width:0;border-top-color:rgba(0,0,0,.25)}.sun-editor .se-arrow.se-arrow-down:after{top:-12px;margin-left:-11px;content:" ";border-bottom-width:0;border-top-color:#fff}.sun-editor .se-toolbar .se-arrow.se-arrow-down:after{border-top-color:#fafafa}.sun-editor .se-container{position:relative;width:100%;height:100%}.sun-editor button{color:#000}.sun-editor .se-btn{float:left;width:34px;height:34px;border:0;border-radius:4px;margin:1px!important;padding:0;font-size:12px;line-height:27px}.sun-editor .se-btn:enabled:focus,.sun-editor .se-btn:enabled:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn:enabled:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-btn-primary{color:#000;background-color:#c7deff;border:1px solid #80bdff;border-radius:4px}.sun-editor .se-btn-primary:focus,.sun-editor .se-btn-primary:hover{color:#000;background-color:#80bdff;border-color:#3f9dff;outline:0 none}.sun-editor .se-btn-primary:active{color:#fff;background-color:#3f9dff;border-color:#4592ff;-webkit-box-shadow:inset 0 3px 5px #4592ff;box-shadow:inset 0 3px 5px #4592ff}.sun-editor input:focus,.sun-editor select:focus,.sun-editor textarea:focus{border:1px solid #80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem #c7deff;box-shadow:0 0 0 .2rem #c7deff}.sun-editor .se-btn:enabled.active{color:#4592ff;outline:0 none}.sun-editor .se-btn:enabled.active:focus,.sun-editor .se-btn:enabled.active:hover{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btn:enabled.active:active{background-color:#d1d1d1;border-color:#c1c1c1;-webkit-box-shadow:inset 0 3px 5px #c1c1c1;box-shadow:inset 0 3px 5px #c1c1c1}.sun-editor .se-btn:enabled.on{background-color:#e1e1e1;border-color:#d1d1d1;outline:0 none}.sun-editor .se-btLine truncated