add role diff calculations, add action buttons, fix a few regressions

This commit is contained in:
Katalina / stardust 2017-12-23 02:21:31 -06:00
parent 3d541ac480
commit 3c545bdeaa
13 changed files with 203 additions and 89 deletions

View file

@ -1,10 +1,11 @@
import React, { Component } from 'react'
import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import superagent from 'superagent'
import * as Actions from './actions'
import './RolePicker.sass'
import Role from '../role'
import { Scrollbars } from 'react-custom-scrollbars';
const mapState = ({ rolePicker, servers }, ownProps) => {
return {
@ -31,15 +32,21 @@ class RolePicker extends Component {
return this.props.data.getIn([ 'rolesSelected', id ])
}
get rolesHaveChanged () {
const { data } = this.props
return !data.get('rolesSelected').equals(data.get('originalRolesSelected'))
}
render () {
const { data, server } = this.props
const { data, server, dispatch } = this.props
const vm = data.get('viewMap')
if (server === undefined) {
return null
}
return <div className={`role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}>
return <div className={`inner role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}>
{/* <Scrollbars> */}
{ (server.get('message') !== '')
? <section>
<h3>Server Message</h3>
@ -48,7 +55,18 @@ class RolePicker extends Component {
: null
}
<section>
<h3>Roles</h3>
<div className="role-picker__roles-header">
<h3>Roles</h3>
<div className="role-picker__spacer"></div>
<div className={`role-picker__actions ${(!this.rolesHaveChanged) ? 'hidden' : ''}`}>
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.resetSelected)} className="uk-button action__button secondary">
Reset
</button>
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.submitSelected(server.id))} className="uk-button action__button primary">
Save Changes
</button>
</div>
</div>
<div className="role-picker__categories">
{
vm.map((c, name) => {
@ -68,6 +86,8 @@ class RolePicker extends Component {
}
</div>
</section>
{/* </Scrollbars> */}
</div>
}
}