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

frontend: manageCategories et Hotfix date-and-time

Browse Source
This commit is contained in:
Divlo
2020-04-12 12:40:56 +02:00
parent 42193066a8
commit d902d40e6e
11 changed files with 120 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import Link from 'next/link';
import { Fragment, useState, useEffect } from 'react';
import Cookies from "universal-cookie";
import HeadTag from '../../components/HeadTag';
@ -9,8 +10,8 @@ import redirect from '../../utils/redirect';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import useAPI from '../../hooks/useAPI';
import '../../public/css/pages/admin.css';
import api from '../../utils/api';
import '../../public/css/pages/admin.css';
const Admin = (props) => {
@ -149,6 +150,9 @@ const Admin = (props) => {
<div className="col-24">
<h1 className="Functions__title">Administration</h1>
<button onClick={toggleModal} style={{ margin: '0 0 40px 0' }} className="btn btn-dark">Crée une nouvelle fonction</button>
<Link href={"/admin/manageCategories"}>
<button style={{ margin: '0 0 0 20px' }} className="btn btn-dark">Gérer les catégories</button>
</Link>
</div>
</FunctionsList>
}

82
website/pages/admin/manageCategories.js Normal file
View File

@ -0,0 +1,82 @@
import { Fragment } from 'react';
import Cookies from "universal-cookie";
import date from 'date-and-time';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
import HeadTag from '../../components/HeadTag';
import redirect from '../../utils/redirect';
import useAPI from '../../hooks/useAPI';
import '../../public/css/pages/admin.css';
const manageCategories = (props) => {
const [, categories] = useAPI('/categories');
if (!props.user.isAdmin && typeof window != 'undefined') {
return redirect({}, '/404');
}
return (
<Fragment>
<HeadTag title="Admin - FunctionProject" description="Page d'administration de FunctionProject. Gérer les catégories." />
<div className="container-fluid text-center">
<div className="row justify-content-center">
<div className="col-24">
<h1>Gérer les catégories</h1>
<button style={{ margin: '0 0 40px 0' }} className="btn btn-dark">Ajouter une catégorie</button>
</div>
</div>
<div className="row justify-content-center">
<div className="container-fluid">
<div className="col-24 Admin__table-column">
<table className="Admin__table">
<thead>
<tr>
<th className="Admin__table-row Admin__table-head-row" scope="col">id</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">name</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">color</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">createdAt</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">updatedAt</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">Modifier</th>
<th className="Admin__table-row Admin__table-head-row" scope="col">Supprimer</th>
</tr>
</thead>
<tbody>
{categories.map((category) => {
return (
<tr key={category.id} style={{ backgroundColor: category.color }}>
<td className="Admin__table-row">{category.id}</td>
<td className="Admin__table-row">{category.name}</td>
<td className="Admin__table-row">{category.color}</td>
<td className="Admin__table-row">{date.format(new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td className="Admin__table-row">{date.format(new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faPen} style={{ width: '1.5rem' }} />
</td>
<td style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
</Fragment>
);
}
export async function getServerSideProps({ req }) {
const cookies = new Cookies(req.headers.cookie);
return {
props: {
user: { ...cookies.get('user') }
}
};
}
export default manageCategories;