Client - admin refactor

This commit is contained in:
Sam 2020-05-02 09:52:42 +02:00
parent 5aa1d77553
commit ea13cd8946
9 changed files with 99 additions and 183 deletions

View File

@ -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')}
/>

View File

@ -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')}
/>

View File

@ -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)

View File

@ -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() {

View File

@ -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() {

View File

@ -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>
)
}

View File

@ -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)

View File

@ -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) {

View File

@ -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;
}