Client - refactor admin (wip)

This commit is contained in:
Sam 2019-09-18 13:58:20 +02:00
parent caa866c816
commit d4fc69c4d5
11 changed files with 121 additions and 85 deletions

View File

@ -0,0 +1,18 @@
import React from 'react'
import { Helmet } from 'react-helmet'
export default function AdminDashboard() {
return (
<div>
<Helmet>
<title>FitTrackee - Administration</title>
</Helmet>
<div className="card activity-card">
<div className="card-header">
<strong>FitTrackee administration</strong>
</div>
<div className="card-body">TODO</div>
</div>
</div>
)
}

View File

@ -0,0 +1,26 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { capitalize } from '../../utils/index'
const menuItems = ['application', 'sports', 'users']
export default function AdminMenu() {
return (
<div>
<ul className="admin-items">
{menuItems.map(item => (
<li key={item}>
<Link
to={{
pathname: `/admin/${item}`,
}}
>
{capitalize(item)}
</Link>
</li>
))}
</ul>
</div>
)
}

View File

@ -1,35 +0,0 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
export default function AdminMenu() {
return (
<div>
<Helmet>
<title>FitTrackee - Admin - Sports</title>
</Helmet>
<h1 className="page-title">Administration</h1>
<div className="container">
<div className="row">
<div className="col-md-2" />
<div className="col-md-8 card">
<div className="card-body">
<ul className="admin-items">
<li>
<Link
to={{
pathname: '/admin/sports',
}}
>
Sports
</Link>
</li>
</ul>
</div>
</div>
<div className="col-md-2" />
</div>
</div>
</div>
)
}

View File

@ -1,8 +1,12 @@
import React from 'react' import React from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import { getOrUpdateData } from '../../../actions' import { getOrUpdateData } from '../../../actions'
import AdminPage from '../generic/AdminPage' import AdminPage from '../generic/AdminPage'
import AdminSport from './AdminSport'
import AdminSportsAdd from './AdminSportsAdd'
import NotFound from '../../Others/NotFound'
class AdminSports extends React.Component { class AdminSports extends React.Component {
componentDidMount() { componentDidMount() {
@ -10,11 +14,17 @@ class AdminSports extends React.Component {
} }
render() { render() {
const { sports } = this.props const { sports } = this.props
return ( return (
<div> <Switch>
<AdminPage data={sports} target="sports" /> <Route
</div> exact
path="/admin/sports"
render={() => <AdminPage data={sports} target="sports" />}
/>
<Route exact path="/admin/sports/add" component={AdminSportsAdd} />
<Route exact path="/admin/sports/:sportId" component={AdminSport} />
<Route component={NotFound} />
</Switch>
) )
} }
} }

View File

@ -16,22 +16,18 @@ class AdminDetail extends React.Component {
render() { render() {
const { message, onDataUpdate, onDataDelete, results, target } = this.props const { message, onDataUpdate, onDataDelete, results, target } = this.props
const { isInEdition } = this.state const { isInEdition } = this.state
const title = target.charAt(0).toUpperCase() + target.slice(1)
return ( return (
<div> <div>
<Helmet> <Helmet>
<title>FitTrackee - Admin</title> <title>FitTrackee - Admin</title>
</Helmet> </Helmet>
<h1 className="page-title">Administration - {title}</h1>
{message ? ( {message ? (
<code>{message}</code> <code>{message}</code>
) : ( ) : (
results.length === 1 && ( results.length === 1 && (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-md-2" /> <div className="col card">
<div className="col-md-8 card">
<div className="card-body"> <div className="card-body">
<form onSubmit={event => event.preventDefault()}> <form onSubmit={event => event.preventDefault()}>
{Object.keys(results[0]) {Object.keys(results[0])
@ -112,7 +108,6 @@ class AdminDetail extends React.Component {
</form> </form>
</div> </div>
</div> </div>
<div className="col-md-2" />
</div> </div>
</div> </div>
) )

View File

@ -14,21 +14,17 @@ export default function AdminPage(props) {
.filter(key => key.charAt(0) !== '_') .filter(key => key.charAt(0) !== '_')
.map(key => tbKeys.push(key)) .map(key => tbKeys.push(key))
} }
const title = target.charAt(0).toUpperCase() + target.slice(1)
return ( return (
<div> <div>
<Helmet> <Helmet>
<title>FitTrackee - Admin</title> <title>FitTrackee - Admin</title>
</Helmet> </Helmet>
<h1 className="page-title">Administration - {title}</h1>
{error ? ( {error ? (
<code>{error}</code> <code>{error}</code>
) : ( ) : (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-md-2" /> <div className="col card">
<div className="col-md-8 card">
<div className="card-body"> <div className="card-body">
<table className="table"> <table className="table">
<thead> <thead>
@ -90,7 +86,6 @@ export default function AdminPage(props) {
/> />
</div> </div>
</div> </div>
<div className="col-md-2" />
</div> </div>
</div> </div>
)} )}

View File

@ -1,12 +1,11 @@
import React from 'react' import React from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Redirect, Route, Switch } from 'react-router-dom' import { Link, Redirect, Route, Switch } from 'react-router-dom'
import AdminMenu from './Sports/AdminMenu' import AdminDashboard from './AdminDashboard'
import AdminSport from './Sports/AdminSport' import AdminMenu from './AdminMenu'
import AdminSports from './Sports/AdminSports' import AdminSports from './Sports/AdminSports'
import AdminSportsAdd from './Sports/AdminSportsAdd'
import AccessDenied from './../Others/AccessDenied' import AccessDenied from './../Others/AccessDenied'
import NotFound from './../Others/NotFound' import NotFound from './../Others/NotFound'
import { isLoggedIn } from '../../utils' import { isLoggedIn } from '../../utils'
@ -18,13 +17,30 @@ function Admin(props) {
<Helmet> <Helmet>
<title>FitTrackee - Admin</title> <title>FitTrackee - Admin</title>
</Helmet> </Helmet>
<div className="container dashboard">
<div className="row">
<div className="col-md-3">
<div className="card activity-card">
<div className="card-header">
<Link
to={{
pathname: '/admin/',
}}
>
Administration
</Link>
</div>
<div className="card-body">
<AdminMenu />
</div>
</div>
</div>
<div className="col-md-9">
{isLoggedIn() ? ( {isLoggedIn() ? (
user.admin ? ( user.admin ? (
<Switch> <Switch>
<Route exact path="/admin" component={AdminMenu} /> <Route exact path="/admin" component={AdminDashboard} />
<Route exact path="/admin/sports" component={AdminSports} /> <Route path="/admin/sports" component={AdminSports} />
<Route exact path="/admin/sports/add" component={AdminSportsAdd} />
<Route exact path="/admin/sports/:sportId" component={AdminSport} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
) : ( ) : (
@ -34,6 +50,9 @@ function Admin(props) {
<Redirect to="/login" /> <Redirect to="/login" />
)} )}
</div> </div>
</div>
</div>
</div>
) )
} }

View File

@ -166,6 +166,10 @@ label {
max-height: 35px; max-height: 35px;
} }
.admin-items {
list-style-type: square;
}
.card { .card {
text-align: left; text-align: left;
} }

View File

@ -2,7 +2,7 @@ import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom' import { Redirect, Route, Switch } from 'react-router-dom'
import './App.css' import './App.css'
// import Admin from './Admin' import Admin from './Admin'
import Activity from './Activity' import Activity from './Activity'
import Activities from './Activities' import Activities from './Activities'
import Dashboard from './Dashboard' import Dashboard from './Dashboard'
@ -74,7 +74,7 @@ export default class App extends React.Component {
<Route exact path="/activities/history" component={Activities} /> <Route exact path="/activities/history" component={Activities} />
<Route exact path="/activities/statistics" component={Statistics} /> <Route exact path="/activities/statistics" component={Statistics} />
<Route path="/activities" component={Activity} /> <Route path="/activities" component={Activity} />
{/* <Route path="/admin" component={Admin} /> */} <Route path="/admin" component={Admin} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
<Footer /> <Footer />

View File

@ -8,7 +8,7 @@ import { apiUrl } from '../../utils'
class NavBar extends React.PureComponent { class NavBar extends React.PureComponent {
render() { render() {
const { id, isAuthenticated, picture, t, username } = this.props const { admin, id, isAuthenticated, picture, t, username } = this.props
return ( return (
<header> <header>
<nav className="navbar navbar-expand-lg navbar-light bg-light"> <nav className="navbar navbar-expand-lg navbar-light bg-light">
@ -76,18 +76,18 @@ class NavBar extends React.PureComponent {
</Link> </Link>
</li> </li>
)} )}
{/* {user.admin && ( */} {admin && (
{/* <li className="nav-item"> */} <li className="nav-item">
{/* <Link */} <Link
{/* className="nav-link" */} className="nav-link"
{/* to={{ */} to={{
{/* pathname: '/admin', */} pathname: '/admin',
{/* }} */} }}
{/* > */} >
{/* Admin */} Admin
{/* </Link> */} </Link>
{/* </li> */} </li>
{/* )} */} )}
</ul> </ul>
{/* prettier-ignore */} {/* prettier-ignore */}
<ul <ul
@ -160,6 +160,7 @@ class NavBar extends React.PureComponent {
export default withTranslation()( export default withTranslation()(
connect(({ user }) => ({ connect(({ user }) => ({
admin: user.admin,
id: user.id, id: user.id,
isAuthenticated: user.isAuthenticated, isAuthenticated: user.isAuthenticated,
picture: user.picture, picture: user.picture,

View File

@ -76,3 +76,6 @@ export const getDateWithTZ = (date, tz) => {
new Date() new Date()
) )
} }
export const capitalize = target =>
target.charAt(0).toUpperCase() + target.slice(1)