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

🎨 Configure standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 12:04:07 +02:00
parent e22e62a749
commit 58f47c7480
120 changed files with 12271 additions and 10025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
website/components/FunctionAdmin/AddEditFunction.js
View File

@ -1,129 +1,126 @@
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';
import { 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)
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
}
});
useEffect(() => {
if (categories.length > 0 && !props.isEditing) {
handleChange({
target: {
name: 'categorieId',
value: categories[0].id
}
}, [categories]);
})
}
}, [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 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 != null) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value
setInputState(inputStateNew)
}
const handleSubmit = (event) => {
event.preventDefault()
setIsLoading(true)
const formData = new window.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)
}
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);
}
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)
})
}
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);
return (
<>
<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>
if (props.isEditing) {
formData.append('isOnline', inputState.isOnline);
<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' />
</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)
}
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>
);
</div>
</>
)
}
export default AddEditFunction;
export default AddEditFunction

69
website/components/FunctionAdmin/EditArticleFunction.js
View File

@ -1,46 +1,45 @@
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';
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 }
);
() => import('suneditor-react'),
{ ssr: false }
)
const EditArticleFunction = (props) => {
const [htmlContent, setHtmlContent] = useState('')
const [htmlContent, setHtmlContent] = useState("");
const handleEditorChange = (content) => {
setHtmlContent(content)
}
const handleEditorChange = (content) => {
setHtmlContent(content);
const handleSave = async (content) => {
let Notyf
if (typeof window !== 'undefined') {
Notyf = require('notyf')
}
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!');
}
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>
);
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;
export default EditArticleFunction

266
website/components/FunctionAdmin/EditFormFunction.js
View File

@ -1,158 +1,154 @@
import { useState, Fragment } from 'react';
import api from '../../utils/api';
import 'notyf/notyf.min.css';
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 [inputsArray, setInputsArray] = useState(props.functionInfo.utilizationForm || []);
const addInput = () => {
const newInputsArray = [...inputsArray]
newInputsArray.push({ name: '', label: '', placeholder: '', type: 'text' })
setInputsArray(newInputsArray)
}
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 addOption = (event) => {
const newInputsArray = [...inputsArray];
const index = event.target.id.split('-')[1];
const inputObject = newInputsArray[index];
inputObject.options.push({ name: "", value: "" });
setInputsArray(newInputsArray);
const handleSubmit = async (event) => {
event.preventDefault()
let Notyf
if (typeof window !== 'undefined') {
Notyf = require('notyf')
}
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 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 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 handleRemoveInput = (event) => {
const newInputsArray = [...inputsArray]
const index = event.target.id.split('-')[1]
newInputsArray.splice(index, 1)
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 handleRemoveOption = (inputIndex, optionIndex) => {
const newInputsArray = [...inputsArray]
const inputObject = newInputsArray[inputIndex]
const optionsArray = inputObject.options
optionsArray.splice(optionIndex, 1)
setInputsArray(newInputsArray)
}
const handleRemoveInput = (event) => {
const newInputsArray = [...inputsArray];
const index = event.target.id.split('-')[1];
newInputsArray.splice(index, 1);
setInputsArray(newInputsArray);
}
return (
<div className='container-fluid'>
const handleRemoveOption = (inputIndex, optionIndex) => {
const newInputsArray = [...inputsArray];
const inputObject = newInputsArray[inputIndex];
const optionsArray = inputObject.options;
optionsArray.splice(optionIndex, 1);
setInputsArray(newInputsArray);
}
<form onSubmit={handleSubmit}>
return (
<div className="container-fluid">
{(inputsArray.length > 0) &&
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
</div>}
<form onSubmit={handleSubmit}>
{inputsArray.map((input, index) => {
return (
<div key={index} className='form-group Admin__Input-group'>
{(inputsArray.length > 0) &&
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Sauvegarder</button>
</div>
}
<div className='text-center'>
<button type='button' onClick={handleRemoveInput} id={`remove-${index}`} className='btn btn-dark'>Supprimer l'input</button>
</div>
{inputsArray.map((input, index) => {
<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') &&
<>
<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 />
</>}
<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={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 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>
);
})}
</form>
<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" />
<div style={{ marginBottom: '30px' }} className="form-group text-center">
<button type="button" onClick={addInput} className="btn btn-dark">Ajouter un input</button>
<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>
</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;
export default EditFormFunction