📦 NEW: Modifier formulaire d'une fonction - admin

This commit is contained in:
Divlo 2020-04-16 19:44:19 +02:00
parent cda263fd75
commit c1fe81a921
8 changed files with 120 additions and 9 deletions

View File

@ -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) {

View File

@ -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 (

View 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;

View File

@ -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":

View File

@ -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} />

View File

@ -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>

View File

@ -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

File diff suppressed because one or more lines are too long