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

📦 NEW: frontend: Modifier info et Article

Browse Source
This commit is contained in:
Divlo
2020-04-15 22:50:40 +02:00
parent 5eb64d200b
commit 9c5d1fc06b
12 changed files with 359 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
website/pages/admin/[slug].js
View File

@ -1,31 +1,76 @@
import { Fragment } from 'react';
import { Fragment, useState } from 'react';
import Cookies from "universal-cookie";
import SwipeableViews from 'react-swipeable-views';
import HeadTag from '../../components/HeadTag';
import AddEditFunction from '../../components/AddEditFunction';
import EditArticleFunction from '../../components/EditArticleFunction';
import redirect from '../../utils/redirect';
import api from '../../utils/api';
import { API_URL } from '../../utils/config';
import '../../components/FunctionTabs/FunctionTabs.css';
import '../../public/css/pages/admin.css';
const AdminFunctionComponent = (props) => {
if (!props.user.isAdmin && typeof window != 'undefined') {
return redirect({}, '/404');
}
const [slideIndex, setSlideIndex] = useState(0);
return (
<Fragment>
<HeadTag />
<p>{props.slug}</p>
<HeadTag title={props.functionInfo.title} description={props.functionInfo.description} image={API_URL + props.functionInfo.image} />
<div className="container-fluid">
<div className="container">
<div className="row justify-content-center">
<ul className="FunctionTabs__nav">
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(0)} className={`FunctionTabs__nav-link ${(slideIndex === 0) && "FunctionTabs__nav-link-active"}`}>✒️ Modifier</a>
</li>
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(1)} className={`FunctionTabs__nav-link ${(slideIndex === 1) && "FunctionTabs__nav-link-active"}`}>📝 Article</a>
</li>
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(2)} className={`FunctionTabs__nav-link ${(slideIndex === 2) && "FunctionTabs__nav-link-active"}`}>⚙️ Utilisation</a>
</li>
</ul>
</div>
</div>
<div className="container-fluid">
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex}>
<div className="Admin__Function-slide">
<AddEditFunction
defaultInputState={{ ...props.functionInfo }}
user={props.user}
isEditing
/>
</div>
<div className="Admin__Function-slide">
<EditArticleFunction { ...props } />
</div>
</SwipeableViews>
</div>
</div>
</Fragment>
);
}
export async function getServerSideProps({ req, params }) {
const cookies = new Cookies(req.headers.cookie);
const { slug } = params;
return {
props: {
user: { ...cookies.get('user') },
slug
}
};
export async function getServerSideProps(context) {
const cookies = new Cookies(context.req.headers.cookie);
const user = { ...cookies.get('user') };
const { slug } = context.params;
if (!user.isAdmin) {
return redirect(context, '/404');
}
return api.get(`/admin/functions/${slug}`, { headers: { 'Authorization': user.token } })
.then((response) => {
return {
props: {
user,
functionInfo: response.data
}
};
})
.catch(() => redirect(context, '/404'));
}
export default AdminFunctionComponent;

105
website/pages/admin/index.js
View File

@ -1,67 +1,21 @@
import Link from 'next/link';
import { Fragment, useState, useEffect } from 'react';
import { Fragment, useState } from 'react';
import Cookies from "universal-cookie";
import HeadTag from '../../components/HeadTag';
import FunctionsList from '../../components/FunctionsList/FunctionsList';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Modal from '../../components/Modal';
import FunctionsList from '../../components/FunctionsList/FunctionsList';
import AddEditFunction from '../../components/AddEditFunction';
import redirect from '../../utils/redirect';
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 Admin = (props) => {
const [, categories] = useAPI('/categories');
const [isOpen, setIsOpen] = useState(false);
const [inputState, setInputState] = useState({ type: 'form' });
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (categories.length > 0) {
handleChange({
target: {
name: "categorieId",
value: categories[0].id
}
});
}
}, [categories]);
const toggleModal = () => setIsOpen(!isOpen);
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);
api.post('/admin/functions', formData, { headers: { 'Authorization': props.user.token } })
.then((response) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${response.data.message}</p>`);
setIsLoading(false);
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
if (!props.user.isAdmin && typeof window != 'undefined') {
return redirect({}, '/404');
}
@ -87,58 +41,7 @@ const Admin = (props) => {
</div>
<div className="col-24">
<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.biography} 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">
<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">
{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>
<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>
<AddEditFunction defaultInputState={{ type: 'form' }} { ...props } />
</div>
</div>
</div>