Client - admin refactor
This commit is contained in:
parent
5aa1d77553
commit
ea13cd8946
@ -120,7 +120,7 @@ function FormWithGpx(props) {
|
||||
<div>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
className="btn btn-primary"
|
||||
onClick={event =>
|
||||
activity ? onEditActivity(event, activity) : onAddActivity(event)
|
||||
}
|
||||
@ -128,7 +128,7 @@ function FormWithGpx(props) {
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/')}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
|
@ -119,13 +119,13 @@ function FormWithoutGpx(props) {
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
className="btn btn-primary"
|
||||
onClick={event => onAddOrEdit(event, activity)}
|
||||
value={t('common:Submit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/')}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
|
@ -2,21 +2,30 @@ import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
import Message from '../../Common/Message'
|
||||
import { updateAppConfig } from '../../../actions/application'
|
||||
import { getFileSizeInMB } from '../../../utils'
|
||||
import Message from '../Common/Message'
|
||||
import { updateAppConfig } from '../../actions/application'
|
||||
import { history } from '../../index'
|
||||
import { getFileSizeInMB } from '../../utils'
|
||||
|
||||
class AdminApplication extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
formData: {},
|
||||
isInEdition: false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.initForm()
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.appConfig !== prevProps.appConfig) {
|
||||
this.initForm()
|
||||
}
|
||||
}
|
||||
|
||||
initForm() {
|
||||
const { appConfig } = this.props
|
||||
const formData = {}
|
||||
@ -32,28 +41,23 @@ class AdminApplication extends React.Component {
|
||||
|
||||
handleFormChange(e) {
|
||||
const { formData } = this.state
|
||||
if (e.target.name === 'registration') {
|
||||
formData[e.target.name] = e.target.checked
|
||||
} else {
|
||||
formData[e.target.name] = +e.target.value
|
||||
}
|
||||
formData[e.target.name] = +e.target.value
|
||||
this.setState(formData)
|
||||
}
|
||||
|
||||
toggleInEdition(e) {
|
||||
e.preventDefault()
|
||||
const { isInEdition } = this.state
|
||||
this.setState({ isInEdition: !isInEdition })
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
message,
|
||||
onHandleConfigFormSubmit,
|
||||
t,
|
||||
updateIsInEdition,
|
||||
} = this.props
|
||||
const { formData } = this.state
|
||||
const { message, onHandleConfigFormSubmit, t } = this.props
|
||||
const { formData, isInEdition } = this.state
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>
|
||||
FitTrackee - {t('administration:Application configuration')}
|
||||
</title>
|
||||
FitTrackee - {t('administration:Application configuration')}
|
||||
</Helmet>
|
||||
{message && <Message message={message} t={t} />}
|
||||
{Object.keys(formData).length > 0 && (
|
||||
@ -65,11 +69,12 @@ class AdminApplication extends React.Component {
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<form
|
||||
className="app-config-form"
|
||||
onSubmit={event => {
|
||||
event.preventDefault()
|
||||
className={`app-config-form ${
|
||||
isInEdition ? '' : 'form-disabled'
|
||||
}`}
|
||||
onSubmit={e => {
|
||||
this.toggleInEdition(e)
|
||||
onHandleConfigFormSubmit(formData)
|
||||
updateIsInEdition()
|
||||
}}
|
||||
>
|
||||
<div className="form-group row">
|
||||
@ -149,17 +154,38 @@ class AdminApplication extends React.Component {
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
value={t('common:Submit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
{isInEdition ? (
|
||||
<>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
value={t('common:Submit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={e => this.toggleInEdition(e)}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={e => {
|
||||
this.toggleInEdition(e)
|
||||
}}
|
||||
value={t('common:Edit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/admin')}
|
||||
value={t('common:Back')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,12 +198,16 @@ class AdminApplication extends React.Component {
|
||||
}
|
||||
|
||||
export default connect(
|
||||
() => ({}),
|
||||
state => ({
|
||||
appConfig: state.application.config,
|
||||
message: state.message,
|
||||
}),
|
||||
dispatch => ({
|
||||
onHandleConfigFormSubmit: formData => {
|
||||
formData.max_single_file_size *= 1048576
|
||||
formData.max_zip_file_size *= 1048576
|
||||
dispatch(updateAppConfig(formData))
|
||||
const data = Object.assign({}, formData)
|
||||
data.max_single_file_size *= 1048576
|
||||
data.max_zip_file_size *= 1048576
|
||||
dispatch(updateAppConfig(data))
|
||||
},
|
||||
})
|
||||
)(AdminApplication)
|
@ -2,9 +2,9 @@ import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
import Message from '../../Common/Message'
|
||||
import { getOrUpdateData } from '../../../actions'
|
||||
import { history } from '../../../index'
|
||||
import Message from '../Common/Message'
|
||||
import { getOrUpdateData } from '../../actions'
|
||||
import { history } from '../../index'
|
||||
|
||||
class AdminSports extends React.Component {
|
||||
componentDidMount() {
|
@ -4,10 +4,10 @@ import { connect } from 'react-redux'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import Message from '../../Common/Message'
|
||||
import { history } from '../../../index'
|
||||
import { getOrUpdateData } from '../../../actions'
|
||||
import { apiUrl } from '../../../utils'
|
||||
import Message from '../Common/Message'
|
||||
import { history } from '../../index'
|
||||
import { getOrUpdateData } from '../../actions'
|
||||
import { apiUrl } from '../../utils'
|
||||
|
||||
class AdminUsers extends React.Component {
|
||||
componentDidMount() {
|
@ -1,78 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
import Message from '../../Common/Message'
|
||||
import { history } from '../../../index'
|
||||
import { getFileSize } from '../../../utils'
|
||||
|
||||
export default function Config({ appConfig, message, t, updateIsInEdition }) {
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>
|
||||
FitTrackee - {t('administration:Application configuration')}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Message message={message} t={t} />
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
{t('administration:Application configuration')}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<table className="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t(
|
||||
// eslint-disable-next-line max-len
|
||||
'administration:Max. number of active users (if 0, no limitation)'
|
||||
)}
|
||||
:
|
||||
</th>
|
||||
<td>{appConfig.max_users}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of uploaded files')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_single_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of zip archive')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_zip_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. files of zip archive')}:
|
||||
</th>
|
||||
<td>{appConfig.gpx_limit_import}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Edit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/admin')}
|
||||
value={t('common:Back')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,54 +0,0 @@
|
||||
import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
import Config from './Config'
|
||||
import ConfigForm from './ConfigForm'
|
||||
import Message from '../../Common/Message'
|
||||
|
||||
class AdminApplication extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
isInEdition: false,
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { appConfig, message, t } = this.props
|
||||
const { isInEdition } = this.state
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {t('administration:Administration')}</title>
|
||||
</Helmet>
|
||||
{message && <Message message={message} t={t} />}
|
||||
{isInEdition ? (
|
||||
<ConfigForm
|
||||
appConfig={appConfig}
|
||||
message={message}
|
||||
updateIsInEdition={() => {
|
||||
this.setState({ isInEdition: false })
|
||||
}}
|
||||
t={t}
|
||||
/>
|
||||
) : (
|
||||
<Config
|
||||
appConfig={appConfig}
|
||||
message={message}
|
||||
t={t}
|
||||
updateIsInEdition={() => {
|
||||
this.setState({ isInEdition: true })
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(state => ({
|
||||
appConfig: state.application.config,
|
||||
message: state.message,
|
||||
user: state.user,
|
||||
}))(AdminApplication)
|
@ -4,10 +4,10 @@ import { withTranslation } from 'react-i18next'
|
||||
import { connect } from 'react-redux'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
|
||||
import AdminApplication from './Application'
|
||||
import AdminApplication from './AdminApplication'
|
||||
import AdminDashboard from './AdminDashboard'
|
||||
import AdminSports from './Sports'
|
||||
import AdminUsers from './Users'
|
||||
import AdminSports from './AdminSports'
|
||||
import AdminUsers from './AdminUsers'
|
||||
import NotFound from './../Others/NotFound'
|
||||
|
||||
function Admin(props) {
|
||||
|
@ -360,6 +360,24 @@ label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
.form-disabled .form-group input::-webkit-outer-spin-button,
|
||||
.form-disabled .form-group input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.form-disabled .form-group input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.form-disabled .form-group input{
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.gpx-file {
|
||||
height: inherit;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user