Merge pull request learningequality#5 from indirectlylit/usr-mgmt

some refactoring of user management page state
rayykim · Aug 9, 2016 · 8306e86 · 8306e86
2 parents 68e7df3 + 9be7143
commit 8306e86
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 36 deletions.
diff --git a/frontend_build/src/webpack.config.base.js b/frontend_build/src/webpack.config.base.js
@@ -99,6 +99,7 @@ var config = {
   resolve: {
     alias: {
       'kolibri_module': path.resolve('kolibri/core/assets/src/kolibri_module'),
+      'core-constants': path.resolve('kolibri/core/assets/src/constants'),
       'core-base': path.resolve('kolibri/core/assets/src/vue/core-base'),
       'nav-bar-item': path.resolve('kolibri/core/assets/src/vue/nav-bar/nav-bar-item'),
       'nav-bar-item.styl': path.resolve('kolibri/core/assets/src/vue/nav-bar/nav-bar-item.styl'),

diff --git a/kolibri/plugins/management/assets/src/actions.js b/kolibri/plugins/management/assets/src/actions.js
@@ -4,9 +4,34 @@ const FacilityUserResource = Kolibri.resources.FacilityUserResource;
 const RoleResource = Kolibri.resources.RoleResource;
 
 const constants = require('./state/constants');
+const UserKinds = require('core-constants').UserKinds;
 const PageNames = constants.PageNames;
 
 
+/**
+ * Vuex State Mappers
+ *
+ * The methods below help map data from
+ * the API to state in the Vuex store
+ */
+
+function _userState(data) {
+  // assume just one role for now
+  let kind = UserKinds.LEARNER;
+  if (data.roles.length && data.roles[0].kind === 'admin') {
+    kind = UserKinds.ADMIN;
+  }
+  return {
+    id: data.id,
+    username: data.username,
+    first_name: data.first_name,
+    last_name: data.last_name,
+    roles: data.roles,
+    kind, // unused for now
+  };
+}
+
+
 /**
  * Do a POST to create new user
  * @param {object} payload
@@ -18,8 +43,7 @@ function createUser(store, payload, role) {
   newUserPromise.then((model) => {
     // assgin role to this new user if the role is not learner
     if (role === 'learner' || !role) {
-      // mutation ADD_USERS only take array
-      store.dispatch('ADD_USERS', [model]);
+      store.dispatch('ADD_USER', _userState(model));
     } else {
       const rolePayload = {
         user: model.id,
@@ -30,7 +54,7 @@ function createUser(store, payload, role) {
       const newRolePromise = RoleModel.save(rolePayload);
       newRolePromise.then((results) => {
         FacilityUserModel.fetch({}, true).then(updatedModel => {
-          store.dispatch('ADD_USERS', [updatedModel]);
+          store.dispatch('ADD_USER', _userState(updatedModel));
         });
       }).catch((error) => {
         store.dispatch('CORE_SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -160,14 +184,25 @@ function showUserPage(store) {
 
   const promises = [facilityIdPromise, userPromise, rolePromise];
 
-  Promise.all(promises).then(responses => {
-    const id = responses[0];
-    const users = responses[1];
-    const roles = responses[2];
+  Promise.all(promises).then(([facilityId, users, roles]) => {
+    store.dispatch('SET_FACILITY', facilityId[0]); // for mvp, we assume only one facility exists
+
+    // used to efficiently check for dupes
+    const uniqueRoles = {};
+    // returns array with removed duplicates
+    const filteredRoles = roles.filter(role => {
+      if (uniqueRoles.hasOwnProperty(role)) {
+        return false;
+      }
+      return (uniqueRoles[role] = true);
+    });
+
+    const pageState = {
+      users: users.map(_userState),
+      roles: filteredRoles,
+    };
 
-    store.dispatch('SET_FACILITY', id[0]); // for mvp, we assume only one facility exists
-    store.dispatch('SET_ROLES', roles);
-    store.dispatch('ADD_USERS', users);
+    store.dispatch('SET_PAGE_STATE', pageState);
     store.dispatch('CORE_SET_PAGE_LOADING', false);
     store.dispatch('CORE_SET_ERROR', null);
   },

diff --git a/kolibri/plugins/management/assets/src/state/store.js b/kolibri/plugins/management/assets/src/state/store.js
@@ -7,21 +7,11 @@ const initialState = {
   pageName: constants.PageNames.USER_MGMT_PAGE,
   pageState: {},
   facility: undefined,
-  users: [], // this should be inside page state
-  roles: [],
 };
 
 const mutations = {
-  ADD_USERS(state, users) {
-    users.forEach(user => {
-      state.users.push({
-        id: user.id,
-        username: user.username,
-        first_name: user.first_name,
-        last_name: user.last_name,
-        roles: user.roles,
-      });
-    });
+  ADD_USER(state, user) {
+    state.pageState.users.push(user);
   },
   UPDATE_USERS(state, users) {
     users.forEach(user => {
@@ -56,18 +46,6 @@ const mutations = {
     state.pageState = pageState;
   },
 
-  SET_ROLES(state, roles) {
-    // used to efficiently check for dupes
-    const uniqueRoles = {};
-    // returns array with removed duplicates
-    state.roles = roles.filter(role => {
-      if (uniqueRoles.hasOwnProperty(role)) {
-        return false;
-      }
-
-      return (uniqueRoles[role] = true);
-    });
-  },
 };
 
 

diff --git a/kolibri/plugins/management/assets/src/vue/user-page/index.vue b/kolibri/plugins/management/assets/src/vue/user-page/index.vue
@@ -151,8 +151,8 @@
     },
     vuex: {
       getters: {
-        users: state => state.users,
-        roles: state => state.roles,
+        users: state => state.pageState.users,
+        roles: state => state.pageState.roles,
       },
       actions: {
         deleteUser: actions.deleteUser,