Client - admin refactor

fittrackee_client/src/components/Activity/ActivityForms/FormWithGpx.jsx

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

fittrackee_client/src/components/Activity/ActivityForms/FormWithoutGpx.jsx

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

fittrackee_client/src/components/Admin/AdminApplication.jsx

@@ -2,21 +2,30 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Helmet } from 'react-helmet'
 
-import Message from '../../Common/Message'
+import Message from '../Common/Message'
-import { updateAppConfig } from '../../../actions/application'
+import { updateAppConfig } from '../../actions/application'
-import { getFileSizeInMB } from '../../../utils'
+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.value
-      formData[e.target.name] = e.target.checked
-    } else {
-      formData[e.target.name] = +e.target.value
-    }
     this.setState(formData)
   }
 
+  toggleInEdition(e) {
+    e.preventDefault()
+    const { isInEdition } = this.state
+    this.setState({ isInEdition: !isInEdition })
+  }
+
   render() {
-    const {
+    const { message, onHandleConfigFormSubmit, t } = this.props
-      message,
+    const { formData, isInEdition } = this.state
-      onHandleConfigFormSubmit,
-      t,
-      updateIsInEdition,
-    } = this.props
-    const { formData } = this.state
     return (
       <div>
         <Helmet>
-          <title>
+          FitTrackee - {t('administration:Application configuration')}
-            FitTrackee - {t('administration:Application configuration')}
-          </title>
         </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"
+                    className={`app-config-form ${
-                    onSubmit={event => {
+                      isInEdition ? '' : 'form-disabled'
-                      event.preventDefault()
+                    }`}
+                    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
+                    {isInEdition ? (
-                      type="submit"
+                      <>
-                      className="btn btn-primary"
+                        <input
-                      value={t('common:Submit')}
+                          type="submit"
-                    />
+                          className="btn btn-primary"
-                    <input
+                          value={t('common:Submit')}
-                      type="submit"
+                        />
-                      className="btn btn-secondary"
+                        <input
-                      onClick={() => updateIsInEdition()}
+                          type="submit"
-                      value={t('common:Cancel')}
+                          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
+      const data = Object.assign({}, formData)
-      formData.max_zip_file_size *= 1048576
+      data.max_single_file_size *= 1048576
-      dispatch(updateAppConfig(formData))
+      data.max_zip_file_size *= 1048576
+      dispatch(updateAppConfig(data))
     },
   })
 )(AdminApplication)

fittrackee_client/src/components/Admin/AdminSports.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Helmet } from 'react-helmet'
 
-import Message from '../../Common/Message'
+import Message from '../Common/Message'
-import { getOrUpdateData } from '../../../actions'
+import { getOrUpdateData } from '../../actions'
-import { history } from '../../../index'
+import { history } from '../../index'
 
 class AdminSports extends React.Component {
   componentDidMount() {

fittrackee_client/src/components/Admin/AdminUsers.jsx

@@ -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 Message from '../Common/Message'
-import { history } from '../../../index'
+import { history } from '../../index'
-import { getOrUpdateData } from '../../../actions'
+import { getOrUpdateData } from '../../actions'
-import { apiUrl } from '../../../utils'
+import { apiUrl } from '../../utils'
 
 class AdminUsers extends React.Component {
   componentDidMount() {

fittrackee_client/src/components/Admin/Application/Config.jsx

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

fittrackee_client/src/components/Admin/Application/index.jsx

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

fittrackee_client/src/components/Admin/index.jsx

@@ -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 AdminSports from './AdminSports'
-import AdminUsers from './Users'
+import AdminUsers from './AdminUsers'
 import NotFound from './../Others/NotFound'
 
 function Admin(props) {

fittrackee_client/src/components/App.css

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