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

🎨 standardJS all files

Browse Source
This commit is contained in:
divlo
2020-08-03 14:14:45 +02:00
parent dc962c9120
commit 4be7a46a10
85 changed files with 3595 additions and 2383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
website/components/FunctionAdmin/AddEditFunction.jsx
View File

@ -5,7 +5,7 @@ import useAPI from '../../hooks/useAPI'
import api from '../../utils/api'
import '../../public/css/pages/admin.css'
const AddEditFunction = (props) => {
const AddEditFunction = props => {
const [, categories] = useAPI('/categories')
const [inputState, setInputState] = useState(props.defaultInputState)
const [message, setMessage] = useState('')
@ -22,18 +22,29 @@ const AddEditFunction = (props) => {
}
}, [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
inputStateNew[event.target.name] =
event.target.files != null
? event.target.files[0]
: isTypeCheck
? event.target.checked
: event.target.value
setInputState(inputStateNew)
}
const handleSubmit = (event) => {
const handleSubmit = event => {
event.preventDefault()
setIsLoading(true)
const formData = new window.FormData()
@ -53,8 +64,10 @@ const AddEditFunction = (props) => {
setIsLoading(false)
window.location.reload(true)
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
.catch(error => {
setMessage(
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
)
setIsLoading(false)
})
}
@ -63,23 +76,61 @@ const AddEditFunction = (props) => {
<>
<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)' />
<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)' />
<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' />
<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 }}>
<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>
@ -87,37 +138,68 @@ const AddEditFunction = (props) => {
</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>
<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>
<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' />
<input
onChange={handleChange}
accept='image/jpeg,image/jpg,image/png'
type='file'
name='image'
id='image'
/>
</div>
{(props.isEditing) &&
{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>}
<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>
<button type='submit' className='btn btn-dark'>
Envoyer
</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
{isLoading ? <Loader /> : htmlParser(message)}
</div>
</>
)

24
website/components/FunctionAdmin/EditArticleFunction.jsx
View File

@ -6,19 +6,16 @@ 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 SunEditor = dynamic(() => import('suneditor-react'), { ssr: false })
const EditArticleFunction = (props) => {
const EditArticleFunction = props => {
const [htmlContent, setHtmlContent] = useState('')
const handleEditorChange = (content) => {
const handleEditorChange = content => {
setHtmlContent(content)
}
const handleSave = async (content) => {
const handleSave = async content => {
let Notyf
if (typeof window !== 'undefined') {
Notyf = require('notyf')
@ -27,7 +24,11 @@ const EditArticleFunction = (props) => {
duration: 5000
})
try {
await api.put(`/admin/functions/article/${props.functionInfo.id}`, { article: content }, { headers: { Authorization: props.user.token } })
await api.put(
`/admin/functions/article/${props.functionInfo.id}`,
{ article: content },
{ headers: { Authorization: props.user.token } }
)
notyf.success('Sauvegardé!')
} catch {
notyf.error('Erreur!')
@ -36,7 +37,12 @@ const EditArticleFunction = (props) => {
return (
<div className='container-fluid'>
<SunEditor setContents={props.functionInfo.article} lang='fr' onChange={handleEditorChange} setOptions={{ buttonList: complex, callBackSave: handleSave }} />
<SunEditor
setContents={props.functionInfo.article}
lang='fr'
onChange={handleEditorChange}
setOptions={{ buttonList: complex, callBackSave: handleSave }}
/>
<FunctionArticle article={htmlContent} />
</div>
)

174
website/components/FunctionAdmin/EditFormFunction.jsx
View File

@ -2,8 +2,10 @@ 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 EditFormFunction = props => {
const [inputsArray, setInputsArray] = useState(
props.functionInfo.utilizationForm || []
)
const addInput = () => {
const newInputsArray = [...inputsArray]
@ -11,7 +13,7 @@ const EditFormFunction = (props) => {
setInputsArray(newInputsArray)
}
const addOption = (event) => {
const addOption = event => {
const newInputsArray = [...inputsArray]
const index = event.target.id.split('-')[1]
const inputObject = newInputsArray[index]
@ -27,7 +29,7 @@ const EditFormFunction = (props) => {
setInputsArray(newInputsArray)
}
const handleChangeInput = (event) => {
const handleChangeInput = event => {
const newInputsArray = [...inputsArray]
const index = event.target.id.split('-')[1]
const inputObject = newInputsArray[index]
@ -38,7 +40,7 @@ const EditFormFunction = (props) => {
setInputsArray(newInputsArray)
}
const handleSubmit = async (event) => {
const handleSubmit = async event => {
event.preventDefault()
let Notyf
if (typeof window !== 'undefined') {
@ -48,14 +50,18 @@ const EditFormFunction = (props) => {
duration: 5000
})
try {
await api.put(`/admin/functions/form/${props.functionInfo.id}`, { form: inputsArray }, { headers: { Authorization: props.user.token } })
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 handleRemoveInput = event => {
const newInputsArray = [...inputsArray]
const index = event.target.id.split('-')[1]
newInputsArray.splice(index, 1)
@ -72,39 +78,88 @@ const EditFormFunction = (props) => {
return (
<div className='container-fluid'>
<form onSubmit={handleSubmit}>
{(inputsArray.length > 0) &&
{inputsArray.length > 0 && (
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
</div>}
<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>
<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)' />
<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 :)" />
<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') &&
{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)' />
<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'>
<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>
@ -112,40 +167,87 @@ const EditFormFunction = (props) => {
<option value='select'>select</option>
</select>
{(input.type === '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
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>
<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" />
<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" />
<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>
<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>
<button type='button' onClick={addInput} className='btn btn-dark'>
Ajouter un input
</button>
</div>
</div>
)