sync

UI/src/components/role-picker/RolePicker.sass

@@ -4,3 +4,18 @@
   
   &.hidden 
     opacity: 0
+
+  &__categories
+    display: flex
+    align-items: flex-start
+    flex-wrap: wrap
+    flex-direction: row
+
+
+  &__category
+    // flex: 1 3 33%
+    box-sizing: border-box
+    background-color: var(--c-1)
+    padding: 15px
+    margin: 10px
+    width: 220px - 30px

UI/src/components/role-picker/actions.js

@@ -1,4 +1,4 @@
-import { Map, Set } from 'immutable'
+import { Map, Set, fromJS } from 'immutable'
 import superagent from 'superagent'
 
 export const roleUpdate = (id, oldState) => (dispatch, getState) => {
@@ -22,7 +22,6 @@ export const setup = id => async dispatch => {
   //     roles: data
   //   }
   // })
-
   dispatch(constructView(id))
 }
 
@@ -30,16 +29,33 @@ export const constructView = id => (dispatch, getState) => {
   const server = getState().servers.get(id)
   const roles = server.get('roles')
 
-  const categories = roles.groupBy(x => x.get('category'))
+  const categories = server.get('categories')
+
+  const allRoles = server.get('roles').map(r => r.get('id')).toSet()
+  const accountedRoles = categories.map(c => c.get('roles')).toSet().flatten()
+  const unaccountedRoles = allRoles.subtract(accountedRoles)
+
+  // console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS())
+
+  const vm = categories.set('Uncategorized', fromJS({
+    roles: unaccountedRoles,
+    hidden: false,
+    type: 'multi'
+  })).map(c => {
+    const roles = c.get('roles').map(r => server.get('roles').find(sr => sr.get('id') === r))
+    return c.set('roles_map', roles)
+  })
+
   const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map())
 
   console.log(categories, selected)
   dispatch({
     type: Symbol.for('setup role picker'),
     data: {
-      viewMap: categories,
+      viewMap: vm,
       rolesSelected: selected,
-      originalRolesSelected: selected
+      originalRolesSelected: selected,
+      hidden: false
     }
   })
 }

UI/src/components/role-picker/index.js

@@ -20,31 +20,53 @@ class RolePicker extends Component {
     dispatch(Actions.setup(server))
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.match.params.server !== nextProps.match.params.server) {
+      const { dispatch } = this.props
+      dispatch(Actions.setup(nextProps.match.params.server))
+    }
+  }
+
   isSelected (id) {
     return this.props.data.getIn([ 'rolesSelected', id ])
   }
 
   render () {
-    console.log(this.constructor.name, this.props)
-    if (this.props.server === undefined) {
+    const { data, server } = this.props
+    const vm = data.get('viewMap') 
+
+    if (server === undefined) {
       return null
     }
 
-    return <div className={`role-picker ${(this.props.data.hidden) ? 'hidden' : ''}`}>
-      { (this.props.server.get('message') !== '')
+    return <div className={`role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}>
+      { (server.get('message') !== '')
         ? <section>
             <h3>Server Message</h3>
-            <p>{this.props.server.get('message')}</p>
+            <p>{server.get('message')}</p>
           </section>
         : null
       }
       <section>
         <h3>Roles</h3>
+        <div className="role-picker__categories">
           {
-            this.props.server.get('roles').map((r, k) => {
-              return <Role key={k} role={r} selected={this.isSelected(r.get('id'))} onToggle={() => this.props.dispatch(Actions.roleUpdate(r.get('id'), this.isSelected(r.get('id'))))} />
-            })
+            vm.map((c, name) => {
+              if (c.get('hidden')) {
+                return null
+              }
+
+              return <div key={name} className="role-picker__category">
+                <h4>{ name }</h4>
+                {
+                  c.get('roles_map').map((r, k) => {
+                    return <Role key={k} role={r} selected={this.isSelected(r.get('id'))} onToggle={() => this.props.dispatch(Actions.roleUpdate(r.get('id'), this.isSelected(r.get('id'))))} />
+                  }).toArray()
+                }
+              </div>
+            }).toArray()
           }
+        </div>
       </section>
     </div>
   }

UI/src/components/servers/index.sass

@@ -1,6 +1,6 @@
 .servers
 
-  $fullH: calc(100vh - 75px)
+  $fullH: calc(100vh - 180px)
 
   display: grid
   grid-template-rows: 100px $fullH
@@ -19,3 +19,4 @@
     background-color: var(--c-3)
     padding: 15px
     overflow-y: scroll
+    box-sizing: border-box

UI/src/reducers/role-picker.js

@@ -2,17 +2,17 @@ import { Map, OrderedMap } from 'immutable'
 
 const initialState = Map({
   hidden: true, // should the view be hidden?
-  emptyRoles: true, // helps derender roles so there's no visible element state change
+  // emptyRoles: true, // helps derender roles so there's no visible element state change
   viewMap: OrderedMap({}), // roles in categories
-  originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected 
+  originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
   rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing
 })
 
 export default (state = initialState, { type, data }) => {
   switch (type) {
     case Symbol.for('setup role picker'):
-      return state.mergeDeep(data)
- 
+      return Map(data)
+
     case Symbol.for('hide role picker ui'):
       return {
         ...state,
@@ -27,9 +27,9 @@ export default (state = initialState, { type, data }) => {
 
     case Symbol.for('update selected roles'):
       return state.setIn(['rolesSelected', data.id], data.state)
-      
-    case Symbol.for('zero role picker'):
-      return initialState
+
+    // case Symbol.for('zero role picker'):
+      // return initialState
 
     default:
       return state

UI/src/reducers/servers.js

@@ -14,6 +14,7 @@ const blankServer = Map({
     icon: '4fa0c1063649a739f3fe1a0589aa2c03'
   },
   roles: Set([]),
+  categories: OrderedMap(),
   perms: {
     isAdmin: true,
     canManageRoles: true