👌 IMPROVE: Refactoring /functions/[slug]
This commit is contained in:
Divlo
129
website/components/FunctionAdmin/AddEditFunction.js
Normal file
129
website/components/FunctionAdmin/AddEditFunction.js
Normal file
@ -0,0 +1,129 @@
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import htmlParser from 'html-react-parser';
|
||||
import Loader from '../../components/Loader';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/admin.css';
|
||||
|
||||
const AddEditFunction = (props) => {
|
||||
|
||||
const [, categories] = useAPI('/categories');
|
||||
const [inputState, setInputState] = useState(props.defaultInputState);
|
||||
const [message, setMessage] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (categories.length > 0 && !props.isEditing) {
|
||||
handleChange({
|
||||
target: {
|
||||
name: "categorieId",
|
||||
value: categories[0].id
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [categories]);
|
||||
|
||||
const apiCallFunction = (formData) => {
|
||||
if (props.isEditing) return api.put(`/admin/functions/${inputState.id}`, formData, { headers: { 'Authorization': props.user.token } });
|
||||
return api.post('/admin/functions', formData, { headers: { 'Authorization': props.user.token } });
|
||||
}
|
||||
|
||||
const handleChange = (event, isTypeCheck = false) => {
|
||||
const inputStateNew = { ...inputState };
|
||||
inputStateNew[event.target.name] = (event.target.files != undefined) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value;
|
||||
setInputState(inputStateNew);
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
setIsLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append('type', inputState.type);
|
||||
formData.append('categorieId', inputState.categorieId);
|
||||
formData.append('title', inputState.title);
|
||||
formData.append('slug', inputState.slug);
|
||||
formData.append('description', inputState.description);
|
||||
formData.append('image', inputState.image);
|
||||
|
||||
if (props.isEditing) {
|
||||
formData.append('isOnline', inputState.isOnline);
|
||||
}
|
||||
|
||||
apiCallFunction(formData)
|
||||
.then(() => {
|
||||
setIsLoading(false);
|
||||
window.location.reload(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="title">Titre :</label>
|
||||
<input value={inputState.title} onChange={handleChange} type="text" name="title" id="title" className="form-control" placeholder="(e.g : Nombre aléatoire)" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="slug">Slug :</label>
|
||||
<input value={inputState.slug} onChange={handleChange} type="text" name="slug" id="slug" className="form-control" placeholder="(e.g : randomNumber)" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="description">Description :</label>
|
||||
<textarea style={{ height: 'auto' }} value={inputState.description} onChange={handleChange} name="description" id="description" className="form-control" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="type">Type :</label>
|
||||
<select onChange={handleChange} name="type" id="type" className="form-control" { ...(props.isEditing) && { value: inputState.type } }>
|
||||
<option value="form">Formulaire</option>
|
||||
<option value="article">Article</option>
|
||||
<option value="page">Page</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="categorieId">Catégorie :</label>
|
||||
<select onChange={handleChange} name="categorieId" id="categorieId" className="form-control" { ...(props.isEditing) && { value: inputState.categorieId } }>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id} className="Admin__Modal-select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="image">Image <em>(150x150 recommandé)</em> :</label>
|
||||
<br/>
|
||||
<input onChange={handleChange} accept="image/jpeg,image/jpg,image/png" type="file" name="image" id="image" />
|
||||
</div>
|
||||
|
||||
{(props.isEditing) &&
|
||||
<div className="form-group custom-control custom-switch">
|
||||
<input onChange={(event) => handleChange(event, true)} type="checkbox" name="isOnline" checked={inputState.isOnline} className="custom-control-input" id="isOnline" />
|
||||
<label className="custom-control-label" htmlFor="isOnline">isOnline</label>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="form-result text-center">
|
||||
{
|
||||
(isLoading) ?
|
||||
<Loader />
|
||||
:
|
||||
htmlParser(message)
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddEditFunction;
|
||||
46
website/components/FunctionAdmin/EditArticleFunction.js
Normal file
46
website/components/FunctionAdmin/EditArticleFunction.js
Normal file
@ -0,0 +1,46 @@
|
||||
import { useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { complex } from '../../utils/sunEditorConfig';
|
||||
import api from '../../utils/api';
|
||||
import FunctionArticle from '../FunctionPage/FunctionArticle';
|
||||
import 'notyf/notyf.min.css';
|
||||
import '../../public/css/suneditor.min.css';
|
||||
|
||||
const SunEditor = dynamic(
|
||||
() => import('suneditor-react'),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const EditArticleFunction = (props) => {
|
||||
|
||||
const [htmlContent, setHtmlContent] = useState("");
|
||||
|
||||
const handleEditorChange = (content) => {
|
||||
setHtmlContent(content);
|
||||
}
|
||||
|
||||
const handleSave = async (content) => {
|
||||
let Notyf;
|
||||
if (typeof window != 'undefined') {
|
||||
Notyf = require('notyf');
|
||||
}
|
||||
const notyf = new Notyf.Notyf({
|
||||
duration: 5000
|
||||
});
|
||||
try {
|
||||
await api.put(`/admin/functions/article/${props.functionInfo.id}`, { article: content }, { headers: { 'Authorization': props.user.token } });
|
||||
notyf.success('Sauvegardé!');
|
||||
} catch {
|
||||
notyf.error('Erreur!');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<SunEditor setContents={props.functionInfo.article} lang="fr" onChange={handleEditorChange} setOptions={{ buttonList: complex, callBackSave: handleSave }} />
|
||||
<FunctionArticle article={htmlContent} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditArticleFunction;
|
||||
158
website/components/FunctionAdmin/EditFormFunction.js
Normal file
158
website/components/FunctionAdmin/EditFormFunction.js
Normal file
@ -0,0 +1,158 @@
|
||||
import { useState, Fragment } 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 addOption = (event) => {
|
||||
const newInputsArray = [...inputsArray];
|
||||
const index = event.target.id.split('-')[1];
|
||||
const inputObject = newInputsArray[index];
|
||||
inputObject.options.push({ name: "", value: "" });
|
||||
setInputsArray(newInputsArray);
|
||||
}
|
||||
|
||||
const handleChangeOption = (inputIndex, optionIndex, event) => {
|
||||
const newInputsArray = [...inputsArray];
|
||||
const inputObject = newInputsArray[inputIndex];
|
||||
const optionObject = inputObject.options[optionIndex];
|
||||
optionObject[event.target.name] = event.target.value;
|
||||
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;
|
||||
if (event.target.value === "select") {
|
||||
inputObject.options = [];
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
const handleRemoveOption = (inputIndex, optionIndex) => {
|
||||
const newInputsArray = [...inputsArray];
|
||||
const inputObject = newInputsArray[inputIndex];
|
||||
const optionsArray = inputObject.options;
|
||||
optionsArray.splice(optionIndex, 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">
|
||||
|
||||
<div className="text-center">
|
||||
<button type="button" onClick={handleRemoveInput} id={`remove-${index}`} className="btn btn-dark">Supprimer l'input</button>
|
||||
</div>
|
||||
|
||||
<label className="form-label" htmlFor={`name-${index}`}>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={`label-${index}`}>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/>
|
||||
|
||||
{(input.type !== "select") &&
|
||||
<Fragment>
|
||||
<label className="form-label" htmlFor={`placeholder-${index}`}>Placeholder :</label>
|
||||
<input value={input.placeholder} onChange={handleChangeInput} type="text" name="placeholder" id={`placeholder-${index}`} className="form-control" placeholder="(e.g : Paris, FR)" />
|
||||
<br/>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
<label className="form-label" htmlFor={`type-${index}`}>Type :</label>
|
||||
<select value={input.type} onChange={handleChangeInput} name="type" id={`type-${index}`} className="form-control">
|
||||
<option value="text">text</option>
|
||||
<option value="integer">Number integer</option>
|
||||
<option value="float">Number float</option>
|
||||
<option value="calendar">calendar</option>
|
||||
<option value="select">select</option>
|
||||
</select>
|
||||
|
||||
{(input.type === "select") &&
|
||||
<div style={{ marginTop: '50px' }}>
|
||||
|
||||
<label className="form-label">Options :</label>
|
||||
|
||||
{input.options.map((option, optionIndex) => {
|
||||
return (
|
||||
<div key={optionIndex} style={{ margin: "0 0 30px 0" }} className="form-group Admin__Input-group">
|
||||
<div className="text-center">
|
||||
<button type="button" onClick={() => handleRemoveOption(index, optionIndex)} className="btn btn-dark">Supprimer l'option</button>
|
||||
</div>
|
||||
|
||||
<label className="form-label" htmlFor={`optionName-${optionIndex}-${index}`}>Nom de l'option</label>
|
||||
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.name} id={`optionName-${optionIndex}-${index}`} name="name" type="text"className="form-control" placeholder="Nom de l'option" />
|
||||
|
||||
<br />
|
||||
<label className="form-label" htmlFor={`optionValue-${optionIndex}-${index}`}>Valeur de l'option</label>
|
||||
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.value} id={`optionValue-${optionIndex}-${index}`} name="value" type="text"className="form-control" placeholder="Valeur de l'option" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button id={`optionAdd-${index}`} onClick={addOption} type="button" className="btn btn-dark">Ajouter une option</button>
|
||||
</div>
|
||||
</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;
|
||||
Reference in New Issue
Block a user