Client - refactor admin (wip)
This commit is contained in:
parent
caa866c816
commit
d4fc69c4d5
18
fittrackee_client/src/components/Admin/AdminDashboard.jsx
Normal file
18
fittrackee_client/src/components/Admin/AdminDashboard.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
26
fittrackee_client/src/components/Admin/AdminMenu.jsx
Normal file
26
fittrackee_client/src/components/Admin/AdminMenu.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 />
|
||||||
|
@ -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,
|
||||||
|
@ -76,3 +76,6 @@ export const getDateWithTZ = (date, tz) => {
|
|||||||
new Date()
|
new Date()
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const capitalize = target =>
|
||||||
|
target.charAt(0).toUpperCase() + target.slice(1)
|
||||||
|
Loading…
Reference in New Issue
Block a user