Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - refactor admin (wip)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
fittrackee_client/src/components/Admin/AdminDashboard.jsx Normal file
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>
)
}

26
fittrackee_client/src/components/Admin/AdminMenu.jsx Normal file
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>
)
}

35
fittrackee_client/src/components/Admin/Sports/AdminMenu.jsx
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>
)
}

18
fittrackee_client/src/components/Admin/Sports/AdminSports.jsx
View File

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

7
fittrackee_client/src/components/Admin/generic/AdminDetail.jsx
View File

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

7
fittrackee_client/src/components/Admin/generic/AdminPage.jsx
View File

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

57
fittrackee_client/src/components/Admin/index.jsx
View File

@ -1,12 +1,11 @@
import React from 'react'
import { Helmet } from 'react-helmet'
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 AdminSport from './Sports/AdminSport'
import AdminDashboard from './AdminDashboard'
import AdminMenu from './AdminMenu'
import AdminSports from './Sports/AdminSports'
import AdminSportsAdd from './Sports/AdminSportsAdd'
import AccessDenied from './../Others/AccessDenied'
import NotFound from './../Others/NotFound'
import { isLoggedIn } from '../../utils'
@ -18,21 +17,41 @@ function Admin(props) {
<Helmet>
<title>FitTrackee - Admin</title>
</Helmet>
{isLoggedIn() ? (
user.admin ? (
<Switch>
<Route exact path="/admin" component={AdminMenu} />
<Route exact path="/admin/sports" component={AdminSports} />
<Route exact path="/admin/sports/add" component={AdminSportsAdd} />
<Route exact path="/admin/sports/:sportId" component={AdminSport} />
<Route component={NotFound} />
</Switch>
) : (
<AccessDenied />
)
) : (
<Redirect to="/login" />
)}
<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() ? (
user.admin ? (
<Switch>
<Route exact path="/admin" component={AdminDashboard} />
<Route path="/admin/sports" component={AdminSports} />
<Route component={NotFound} />
</Switch>
) : (
<AccessDenied />
)
) : (
<Redirect to="/login" />
)}
</div>
</div>
</div>
</div>
)
}

4
fittrackee_client/src/components/App.css
View File

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

4
fittrackee_client/src/components/App.jsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import './App.css'
// import Admin from './Admin'
import Admin from './Admin'
import Activity from './Activity'
import Activities from './Activities'
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/statistics" component={Statistics} />
<Route path="/activities" component={Activity} />
{/* <Route path="/admin" component={Admin} /> */}
<Route path="/admin" component={Admin} />
<Route component={NotFound} />
</Switch>
<Footer />

27
fittrackee_client/src/components/NavBar/index.jsx
View File

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

3
fittrackee_client/src/utils/index.js
View File

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