feat(UI/Roles): add category sorting

UI/package.json

@@ -42,7 +42,7 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "proxy": "http://localhost:6768",
+  "proxy": "http://localhost:6769",
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.4.0",
     "customize-cra": "^0.2.12",

UI/src/components/role-editor/Category.js

@@ -33,7 +33,6 @@ class Category extends Component {
       </div>
       {
         category.get('roles_map')
-          .sortBy(r => r.get('position'))
           .reverse()
           .map((r, k) => <Role key={k} role={r} categoryId={name} />)
           .toArray()

UI/src/components/role-editor/CategoryEditor.js

@@ -24,6 +24,28 @@ export default class CategoryEditor extends Component {
           <div className="uk-form-controls">
             <input type="text" className="uk-input" placeholder='' value={category.get('name')} onChange={this.props.onEdit('name', Symbol.for('edit: text'))} />
           </div>
+          <div className="role-editor__bumpers">
+            <div 
+              onClick={this.props.onBump(-1)}
+              className={
+                `role-editor__bumpers-bump 
+                ${category.get('position') === 0 ? 'yeet' : ''} 
+                `} 
+                uk-tooltip="delay: 1s" 
+                title="Move category up">
+                  <i uk-icon="icon: chevron-up"></i>
+            </div>
+            <div 
+              onClick={this.props.onBump(1)}
+              className={
+                `role-editor__bumpers-bump 
+                ${category.get('position') === this.props.arrMax - 1 ? 'yeet' : ''} 
+                `} 
+                uk-tooltip="delay: 1s" 
+                title="Move category down">
+                  <i uk-icon="icon: chevron-down"></i>
+            </div>
+          </div>
         </div>
         <div style={{ marginTop: 10 }}>
           <div className="uk-form-controls">

UI/src/components/role-editor/RoleEditor.sass

@@ -36,7 +36,16 @@
         color: var(--c-white)
 
         
-      
+  .role-editor__bumpers
+    position: absolute
+    top: 10px
+    right: 10px
+    display: flex
+
+    &-bump
+      transition: color 0.15s ease-in-out
+      &:hover
+        color: var(--c-white)
 
   .role-editor__category
     box-sizing: border-box

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

@@ -9,7 +9,7 @@ export const constructView = id => async (dispatch, getState) => {
   const server = getState().servers.get(id)
 
   let { viewMap, hasSafeRoles } = getViewMap(server)
-  viewMap = viewMap.map(c => c.set('mode', Symbol.for('drop')))
+  viewMap = viewMap.map((c, idx) => c.set('mode', Symbol.for('drop')))
 
   dispatch({
     type: Symbol.for('re: setup'),
@@ -115,7 +115,8 @@ export const createCategory = (dispatch, getState) => {
 
   let name = 'New Category'
   let idx = 1
-  while (vm.find(c => c.get('name') === name) !== undefined) {
+  const pred = c => c.get('name') === name
+  while (vm.find(pred) !== undefined) {
     idx++
     name = `New Category ${idx}`
   }
@@ -131,16 +132,57 @@ export const createCategory = (dispatch, getState) => {
       roles_map: Set([]),
       hidden: true,
       type: 'multi',
+      position: idx,
       mode: Symbol.for('edit')
     }
   })
 }
 
+export const bumpCategory = (category, name) => move => async (dispatch, getState) => {
+  const { roleEditor } = getState()
+  const vm = roleEditor.get('viewMap')  
+
+  const position = category.get('position')
+  const nextPos = position + move
+
+  const replaceThisOne = vm.findKey(category => category.get('position') === nextPos)
+
+  dispatch({
+    type: Symbol.for('re: edit category'),
+    data: {
+      id: name,
+      key: 'position',
+      value: nextPos
+    }
+  })
+
+  if (!!replaceThisOne) {
+    dispatch({
+      type: Symbol.for('re: edit category'),
+      data: {
+        id: replaceThisOne,
+        key: 'position',
+        value: position
+      }
+    })
+  }
+
+}
+
 export const saveServer = id => async (dispatch, getState) => {
   const viewMap = getState().roleEditor.get('viewMap')
     .filterNot((_, k) => k === 'Uncategorized')
     .map(v => v.delete('roles_map').delete('mode').delete('id'))
 
+  viewMap.map((v, idx) => {
+    if (v.has('position')) {
+      return v
+    }
+
+    console.warn('category position wasnt set, so fake ones are being made', {cat: v.toJS(), idx, position: viewMap.count()+idx})
+    return v.set('position', viewMap.count()+idx)
+  })
+
   await superagent.patch(`/api/server/${id}`).send({ categories: viewMap.toJS() })
   dispatch({ type: Symbol.for('re: swap original state') })
 }

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

@@ -107,6 +107,8 @@ class RoleEditor extends Component {
     dispatch(Actions.saveServer(server))
   }
 
+  onBump = (category, name) => (move) => () => this.props.dispatch(Actions.bumpCategory(category, name)(move))
+
   get hasChanged () {
     return this.props.editor.get('originalSnapshot').hashCode() !== this.props.editor.get('viewMap').hashCode()
   }
@@ -143,16 +145,19 @@ class RoleEditor extends Component {
           {
             vm
               .filter((_, k) => k !== 'Uncategorized')
-              .map((c, name) => <Category 
+              .sortBy(c => c.get('position'))
+              .map((c, name, arr) => <Category 
                 key={name} 
                 name={name} 
                 category={c} 
+                arrMax={arr.count()}
                 mode={c.get('mode')} 
                 onDrop={this.dropRole(c, name)} 
                 onEdit={this.editCategory(c, name)}
                 onEditOpen={this.openEditor(c, name)}
                 onSave={this.saveCategory(c, name)}
                 onDelete={this.deleteCategory(c, name)}
+                onBump={this.onBump(c, name)}
                 />)
               .toArray()
           }

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

@@ -19,6 +19,7 @@ export const setup = id => async dispatch => {
 export const getViewMap = server => {
   const roles = server.get('roles')
   const categories = server.get('categories')
+  const categoriesIds = server.get('categories').keySeq()
 
   const allRoles = server.get('roles').filter(v => v.get('safe')).map(r => r.get('id')).toSet()
   const accountedRoles = categories.map(c => c.get('roles')).toSet().flatten()
@@ -31,7 +32,17 @@ export const getViewMap = server => {
     hidden: true,
     type: 'multi',
     name: 'Uncategorized'
-  })).map(c => {
+  }))
+  .map(
+    (cat, idx) => 
+      cat.set(
+        'position', 
+        cat.get('position', categoriesIds.findIndex(v => v === idx)
+      )
+    )
+  )
+  // .sortBy(cat => cat.get('position'))
+  .map(c => {
     const roles = c.get('roles')
       // fill in roles_map
       .map(r =>

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

@@ -134,7 +134,7 @@ class RolePicker extends Component {
         </div>
         <div className="role-picker__categories">
           {
-            vm.map((c, name) => <Category key={name} name={name} category={c} isSelected={this.isSelected} onChange={(roles) => dispatch(Actions.updateRoles(roles))} />).toArray()
+            vm.sortBy(v => v.get('position')).map((c, name) => <Category key={name} name={name} category={c} isSelected={this.isSelected} onChange={(roles) => dispatch(Actions.updateRoles(roles))} />).toArray()
           }
         </div>
       </section>

UI/src/index.css

@@ -62,4 +62,8 @@ h1,h2,h3,h4,h5,h6 {
 
 .fade {
   opacity: 0;
+}
+
+.yeet {
+  display: none;
 }