Skip to content

Commit

Permalink
chore(settings): settings to react
Browse files Browse the repository at this point in the history
  • Loading branch information
polonel committed Feb 9, 2019

Verified

This commit was signed with the committer’s verified signature. The key has expired.
moofish32 Mike Cowgill
1 parent f2c1d36 commit 257efc2
Showing 31 changed files with 1,969 additions and 2,604 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -78,12 +78,15 @@
"react": "16.7.0",
"react-dom": "16.7.0",
"react-redux": "6.0.0",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"redis": "2.8.0",
"redux": "4.0.1",
"redux-actions": "2.6.4",
"redux-define": "1.1.1",
"redux-form": "8.1.0",
"redux-saga": "0.16.2",
"redux-saga-thunk": "0.7.3",
"request": "2.88.0",
"rimraf": "2.6.3",
"sanitize-html": "1.18.4",
40 changes: 32 additions & 8 deletions src/client/actions/settings.js
Original file line number Diff line number Diff line change
@@ -13,14 +13,38 @@
*/

import { createAction } from 'redux-actions'
import { FETCH_SETTINGS, UPDATE_SETTING, UPDATE_MULTIPLE_SETTINGS, UPDATE_COLORSCHEME } from './types'
import {
FETCH_SETTINGS,
UPDATE_SETTING,
UPDATE_MULTIPLE_SETTINGS,
UPDATE_COLORSCHEME,
FETCH_MONGODB_TOOLS,
FETCH_BACKUPS,
FETCH_DELETED_TICKETS,
CHANGE_DELETED_TICKETS_PAGE,
BACKUP_NOW,
RESTORE_DELETED_TICKET
} from './types'

export const fetchSettings = createAction(FETCH_SETTINGS.ACTION)
export const updateSetting = createAction(UPDATE_SETTING.ACTION, input => ({
name: input.name,
value: input.value,
stateName: input.stateName,
noSnackbar: input.noSnackbar ? input.noSnackbar : false
export const updateSetting = createAction(
UPDATE_SETTING.ACTION,
input => ({
name: input.name,
value: input.value,
stateName: input.stateName,
noSnackbar: input.noSnackbar ? input.noSnackbar : false
}),
() => ({ thunk: true }) // Allows for thunk style promises in redux-saga
)
export const updateMultipleSettings = createAction(UPDATE_MULTIPLE_SETTINGS.ACTION)
export const updateColorScheme = createAction(UPDATE_COLORSCHEME.ACTION)

export const fetchMongoDBTools = createAction(FETCH_MONGODB_TOOLS.ACTION)
export const fetchBackups = createAction(FETCH_BACKUPS.ACTION)
export const backupNow = createAction(BACKUP_NOW.ACTION)
export const fetchDeletedTickets = createAction(FETCH_DELETED_TICKETS.ACTION)
export const restoreDeletedTicket = createAction(RESTORE_DELETED_TICKET.ACTION)
export const changeDeletedTicketsPage = createAction(CHANGE_DELETED_TICKETS_PAGE.ACTION, pageIndex => ({
pageIndex
}))
export const updateMultipleSettings = createAction(UPDATE_MULTIPLE_SETTINGS.ACTION, settings => settings)
export const updateColorScheme = createAction(UPDATE_COLORSCHEME.ACTION, action => action)
8 changes: 7 additions & 1 deletion src/client/actions/types.js
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
*/

import { defineAction } from 'redux-define'
import { ERROR, SUCCESS } from './stateConstants'
import { PENDING, ERROR, SUCCESS } from './stateConstants'

// Shared
export const SHOW_MODAL = defineAction('SHOW_MODAL')
@@ -40,3 +40,9 @@ export const FETCH_SETTINGS = defineAction('FETCH_SETTINGS', [SUCCESS, ERROR])
export const UPDATE_SETTING = defineAction('UPDATE_SETTING', [SUCCESS, ERROR])
export const UPDATE_MULTIPLE_SETTINGS = defineAction('UPDATE_MULTIPLE_SETTINGS', [SUCCESS, ERROR])
export const UPDATE_COLORSCHEME = defineAction('UPDATE_COLORSCHEME', [SUCCESS, ERROR])
export const FETCH_MONGODB_TOOLS = defineAction('FETCH_MONGODB_TOOLS', [SUCCESS, ERROR])
export const FETCH_BACKUPS = defineAction('FETCH_BACKUPS', [SUCCESS, ERROR])
export const BACKUP_NOW = defineAction('BACKUP_NOW', [PENDING, SUCCESS, ERROR])
export const FETCH_DELETED_TICKETS = defineAction('FETCH_DELETED_TICKETS', [PENDING, SUCCESS, ERROR])
export const RESTORE_DELETED_TICKET = defineAction('RESTORE_DELETED_TICKET', [SUCCESS, ERROR])
export const CHANGE_DELETED_TICKETS_PAGE = defineAction('CHANGE_DELETED_TICKETS_PAGE')
30 changes: 30 additions & 0 deletions src/client/api/index.js
Original file line number Diff line number Diff line change
@@ -108,5 +108,35 @@ api.settings.update = settings => {
return res.data
})
}
api.settings.hasMongoDBTools = () => {
return axios.get('/api/v1/backup/hastools').then(res => {
return res.data
})
}
api.settings.fetchBackups = () => {
return axios.get('/api/v1/backups').then(res => {
return res.data
})
}
api.settings.backupNow = () => {
return axios.post('/api/v1/backup').then(res => {
return res.data
})
}
api.settings.getBackups = () => {
return axios.get('/api/v1/backups').then(res => {
return res.data
})
}
api.settings.fetchDeletedTickets = () => {
return axios.get('/api/v1/tickets/deleted').then(res => {
return res.data
})
}
api.settings.restoreDeletedTicket = ({ _id }) => {
return axios.post('/api/v1/tickets/deleted/restore', { _id }).then(res => {
return res.data
})
}

export default api
10 changes: 6 additions & 4 deletions src/client/app.jsx
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import ReactDOM from 'react-dom'
import { applyMiddleware, createStore, compose } from 'redux'
import { Provider } from 'react-redux'
import createSagaMiddleware from 'redux-saga'
import { middleware as thunkMiddleware } from 'redux-saga-thunk'
import IndexReducer from './reducers'
import IndexSagas from './sagas'
import Sidebar from './components/Nav/Sidebar/index.jsx'
@@ -31,11 +32,11 @@ const composeSetup =
: compose
/*eslint-enable */

if (process.env.NODE_ENV !== 'production') {
localStorage.setItem('debug', 'trudesk:*')
}
// if (process.env.NODE_ENV !== 'production') {
localStorage.setItem('debug', 'trudesk:*') // Enable logger
// }

const store = createStore(IndexReducer, composeSetup(applyMiddleware(sagaMiddleware)))
const store = createStore(IndexReducer, composeSetup(applyMiddleware(thunkMiddleware, sagaMiddleware)))

// This is need to call an action from angular
// Goal: remove this once angular is fully removed
@@ -52,5 +53,6 @@ const sidebarWithProvider = (
ReactDOM.render(sidebarWithProvider, document.getElementById('side-nav'))

window.react.renderer = renderer
window.react.dom = ReactDOM

renderer(store)
11 changes: 9 additions & 2 deletions src/client/components/Button/index.jsx
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ class Button extends React.Component {
}

render () {
const { type, small, flat, style, text, onClick, waves, disabled, extraClass } = this.props
const { type, small, flat, style, text, onClick, waves, disabled, extraClass, styleOverride } = this.props
const classBuild =
(small ? ' md-btn-small ' : '') +
(flat ? ' md-btn-flat ' : '') +
@@ -38,7 +38,13 @@ class Button extends React.Component {
' ' +
extraClass
return (
<button className={'md-btn' + classBuild} onClick={onClick} type={type ? type : 'button'} disabled={disabled}>
<button
className={'md-btn' + classBuild}
onClick={onClick}
type={type ? type : 'button'}
disabled={disabled}
style={styleOverride}
>
{text}
</button>
)
@@ -50,6 +56,7 @@ Button.propTypes = {
text: PropTypes.string.isRequired,
flat: PropTypes.bool,
style: PropTypes.string,
styleOverride: PropTypes.object,
small: PropTypes.bool,
waves: PropTypes.bool,
disabled: PropTypes.bool,
147 changes: 147 additions & 0 deletions src/client/components/EasyMDE/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
/*
* . .o8 oooo
* .o8 "888 `888
* .o888oo oooo d8b oooo oooo .oooo888 .ooooo. .oooo.o 888 oooo
* 888 `888""8P `888 `888 d88' `888 d88' `88b d88( "8 888 .8P'
* 888 888 888 888 888 888 888ooo888 `"Y88b. 888888.
* 888 . 888 888 888 888 888 888 .o o. )88b 888 `88b.
* "888" d888b `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
* ========================================================================
* Author: Chris Brame
* Updated: 2/9/19 1:38 AM
* Copyright (c) 2014-2019. All rights reserved.
*/

import React from 'react'
import PropTypes from 'prop-types'

import Easymde from 'easymde'

class EasyMDE extends React.Component {
constructor (props) {
super(props)
this.state = {
value: ''
}
}

componentDidMount () {
this.easymde = new Easymde({
element: this.element[0],
forceSync: true,
minHeight: '220px',
toolbar: EasyMDE.getMdeToolbarItems(),
autoDownloadFontAwesome: false
})

this.easymde.codemirror.on('change', () => {
this.onTextareaChanged(this.easymde.value())
})
}

componentDidUpdate () {
if (this.easymde && this.easymde.value() !== this.state.value) {
this.easymde.value(this.state.value)
}
}

componentWillUnmount () {
if (this.easymde) {
this.easymde.codemirror.off('change')
this.easymde = null
}
}

static getDerivedStateFromProps (nextProps, state) {
if (nextProps.defaultValue) {
if (state.value === '' && nextProps.defaultValue !== state.value) return { value: nextProps.defaultValue }
}

return null
}

onTextareaChanged (value) {
this.setState({
value
})

if (this.props.onChange) this.props.onChange(value)
}

static getMdeToolbarItems () {
return [
{
name: 'bold',
action: Easymde.toggleBold,
className: 'material-icons mi-bold no-ajaxy',
title: 'Bold'
},
{
name: 'italic',
action: Easymde.toggleItalic,
className: 'material-icons mi-italic no-ajaxy',
title: 'Italic'
},
{
name: 'Title',
action: Easymde.toggleHeadingSmaller,
className: 'material-icons mi-title no-ajaxy',
title: 'Title'
},
'|',
{
name: 'Code',
action: Easymde.toggleCodeBlock,
className: 'material-icons mi-code no-ajaxy',
title: 'Code'
},
{
name: 'Quote',
action: Easymde.toggleBlockquote,
className: 'material-icons mi-quote no-ajaxy',
title: 'Quote'
},
{
name: 'Generic List',
action: Easymde.toggleUnorderedList,
className: 'material-icons mi-list no-ajaxy',
title: 'Generic List'
},
{
name: 'Numbered List',
action: Easymde.toggleOrderedList,
className: 'material-icons mi-numlist no-ajaxy',
title: 'Numbered List'
},
'|',
{
name: 'Create Link',
action: Easymde.drawLink,
className: 'material-icons mi-link no-ajaxy',
title: 'Create Link'
},
'|',
{
name: 'Toggle Preview',
action: Easymde.togglePreview,
className: 'material-icons mi-preview no-disable no-mobile no-ajaxy',
title: 'Toggle Preview'
}
]
}

render () {
setTimeout(() => {
this.easymde.codemirror.refresh()
}, 1)
return <textarea ref={i => (this.element = i)} value={this.state.value} onChange={e => this.onTextareaChanged(e)} />
}
}

EasyMDE.propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
defaultValue: PropTypes.string
}

export default EasyMDE
2 changes: 1 addition & 1 deletion src/client/components/Nav/Sidebar/index.jsx
Original file line number Diff line number Diff line change
@@ -212,7 +212,7 @@ class Sidebar extends React.Component {
<SidebarItem
text='Settings'
icon='settings'
href='/settings'
href='/settings/general'
class='navSettings no-ajaxy'
hasSubmenu={true}
subMenuTarget='settings'
9 changes: 7 additions & 2 deletions src/client/components/Settings/EnableSwitch/index.jsx
Original file line number Diff line number Diff line change
@@ -14,11 +14,13 @@

import React from 'react'
import PropTypes from 'prop-types'
import { merge } from 'lodash'

class EnableSwitch extends React.Component {
render () {
const combinedStyle = merge({ margin: '17px 0 0 0' }, this.props.style)
return (
<div className='uk-float-right md-switch md-green' style={{ margin: '17px 0 0 0' }}>
<div className='uk-float-right md-switch md-green' style={combinedStyle}>
<label>
{this.props.label}
<input
@@ -27,6 +29,7 @@ class EnableSwitch extends React.Component {
name={this.props.stateName}
onChange={this.props.onChange}
checked={this.props.checked}
disabled={this.props.disabled}
/>
<span className='lever' />
</label>
@@ -38,8 +41,10 @@ class EnableSwitch extends React.Component {
EnableSwitch.propTypes = {
stateName: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
style: PropTypes.object,
onChange: PropTypes.func,
checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
}

export default EnableSwitch
Loading

0 comments on commit 257efc2

Please sign in to comment.