📦 NEW: Modifier formulaire d'une fonction - admin
This commit is contained in:
parent
cda263fd75
commit
c1fe81a921
@ -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) {
|
||||
|
@ -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 (
|
||||
|
95
website/components/EditFormFunction.js
Normal file
95
website/components/EditFormFunction.js
Normal file
@ -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;
|
@ -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":
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
1
website/public/css/suneditor.min.css
vendored
Normal file
1
website/public/css/suneditor.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user