theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

📦 NEW: Modifier formulaire d'une fonction - admin

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
website/components/EditArticleFunction.js
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 (

95
website/components/EditFormFunction.js Normal file
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;

5
website/components/FunctionForm.js
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":

2
website/components/FunctionTabManager.js
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} />