Merge pull request #4 from indirectlylit/user_creation

User creation - PR review updates

docs/dev/frontend.rst

@@ -56,7 +56,7 @@ For example:
       management/
         assets/
           src/
-            learner-roster.vue  # nested-view
+            user-roster.vue  # nested-view
             vue/index.vue        # root view
             app.js              # instantiate mgmt app on client-side
           test/

docs/dev/user_management.rst

@@ -49,7 +49,7 @@ interaction with the selectors and filters. Each item in this list corresponds t
 * A ``manage`` button which summons a class and group management modal for that student.
 
 .. note::
-  The roster described here corresponds to ``learner-roster.vue``.
+  The roster described here corresponds to ``user-roster.vue``.
 
 The detail view modal displays learner account data and provides a mechanism to reset a learner's password.
 
@@ -91,9 +91,6 @@ The UI allows the list of learner in the roster to be filtered. This includes:
   to the classroom selector.
 * Potentially other filters, for example listing learners in alphabetical or reverse-alphabetical order.
 
-.. note::
-  The classroom and group selectors are both instances of ``drop-down.vue``. Space is reserved in ``app-root.vue`` right now for other filters, however they don't correspond to subcomponents.
-
 Miscellaneous widgets
 *********************
 

kolibri/auth/test/test_models.py

@@ -385,7 +385,7 @@ def test_membership_str_method(self):
         self.assertEqual(str(self.learner.membership_set.all()[0]), '"foo"@"Arkham"\'s membership in "Oodles of Fun" (learnergroup)')
 
     def test_role_str_method(self):
-        self.assertEqual(str(self.classroom_coach.role_set.all()[0]), '"bar"@"Arkham"\'s coach role for "Classroom X" (classroom)')
+        self.assertEqual(str(self.classroom_coach.roles.all()[0]), '"bar"@"Arkham"\'s coach role for "Classroom X" (classroom)')
 
     def test_facility_str_method(self):
         self.assertEqual(str(self.facility), "Arkham")

kolibri/plugins/management/assets/src/actions.js

@@ -14,8 +14,8 @@ 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_LEARNERS only take array
-      store.dispatch('ADD_LEARNERS', [model]);
+      // mutation ADD_USERS only take array
+      store.dispatch('ADD_USERS', [model]);
     } else {
       const rolePayload = {
         user: model.id,
@@ -26,7 +26,7 @@ function createUser(store, payload, role) {
       const newRolePromise = RoleModel.save(rolePayload);
       newRolePromise.then((results) => {
         FacilityUserModel.fetch({}, true).then(updatedModel => {
-          store.dispatch('ADD_LEARNERS', [updatedModel]);
+          store.dispatch('ADD_USERS', [updatedModel]);
         });
       }).catch((error) => {
         store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -66,7 +66,7 @@ function updateUser(store, id, payload, role) {
           // force role change because if the role is the only changing attribute
           // FacilityUserModel.save() will not send request to server.
           responses.roles = [newRole];
-          store.dispatch('UPDATE_LEARNERS', [responses]);
+          store.dispatch('UPDATE_USERS', [responses]);
         })
         .catch((error) => {
           store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -89,7 +89,7 @@ function updateUser(store, id, payload, role) {
             // force role change because if the role is the only changing attribute
             // FacilityUserModel.save() will not send request to server.
             responses.roles = [newRole];
-            store.dispatch('UPDATE_LEARNERS', [responses]);
+            store.dispatch('UPDATE_USERS', [responses]);
           })
           .catch((error) => {
             store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -107,7 +107,7 @@ function updateUser(store, id, payload, role) {
           // force role change because if the role is the only changing attribute
           // FacilityUserModel.save() will not send request to server.
           responses.roles = [];
-          store.dispatch('UPDATE_LEARNERS', [responses]);
+          store.dispatch('UPDATE_USERS', [responses]);
         })
         .catch((error) => {
           store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -117,7 +117,7 @@ function updateUser(store, id, payload, role) {
   } else {
   // the role is not changed
     FacilityUserModel.save(payload).then(responses => {
-      store.dispatch('UPDATE_LEARNERS', [responses]);
+      store.dispatch('UPDATE_USERS', [responses]);
     })
     .catch((error) => {
       store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
@@ -137,31 +137,26 @@ function deleteUser(store, id) {
   const FacilityUserModel = Kolibri.resources.FacilityUserResource.getModel(id);
   const newUserPromise = FacilityUserModel.delete(id);
   newUserPromise.then((userId) => {
-    store.dispatch('DELETE_LEARNERS', [userId]);
+    store.dispatch('DELETE_USERS', [userId]);
   })
   .catch((error) => {
     store.dispatch('SET_ERROR', JSON.stringify(error, null, '\t'));
   });
 }
 
 // An action for setting up the initial state of the app by fetching data from the server
-function fetch(store) {
+function fetchInitialData(store) {
   const learnerCollection = FacilityUserResource.getCollection();
   const roleCollection = RoleResource.getCollection();
   const facilityIdPromise = learnerCollection.getCurrentFacility();
-  const learnerPromise = learnerCollection.fetch();
+  const userPromise = learnerCollection.fetch();
   const rolePromise = roleCollection.fetch();
-  const promises = [facilityIdPromise, learnerPromise, rolePromise];
+  const promises = [facilityIdPromise, userPromise, rolePromise];
   Promise.all(promises).then(responses => {
     const id = responses[0];
-    if (id.constructor === Array) {
-      // for mvp, we assume only one facility ever existed.
-      store.dispatch('SET_FACILITY', id[0]);
-    } else {
-      store.dispatch('SET_FACILITY', id);
-    }
-    const learners = responses[1];
-    store.dispatch('ADD_LEARNERS', learners);
+    store.dispatch('SET_FACILITY', id[0]); // for mvp, we assume only one facility exists
+    const users = responses[1];
+    store.dispatch('ADD_USERS', users);
   },
   rejects => {
     store.dispatch('SET_ERROR', JSON.stringify(rejects, null, '\t'));
@@ -172,5 +167,5 @@ module.exports = {
   createUser,
   updateUser,
   deleteUser,
-  fetch,
+  fetchInitialData,
 };

kolibri/plugins/management/assets/src/app.js

@@ -12,11 +12,11 @@ class ManagementModule extends KolibriModule {
       store: require('./state/store.js').store,
       vuex: {
         actions: {
-          fetch: actions.fetch,
+          fetchInitialData: actions.fetchInitialData,
         },
       },
     });
-    this.vm.fetch();
+    this.vm.fetchInitialData();
   }
 }
 

kolibri/plugins/management/assets/src/state/store.js

@@ -2,45 +2,45 @@ const Vuex = require('vuex');
 
 function getInitialState() {
   return {
-    facility: 1,
-    learners: [],
+    facility: undefined,
+    users: [],
     error: '',
   };
 }
 
 
 const mutations = {
-  ADD_LEARNERS(state, learners) {
-    learners.forEach(learner => {
-      state.learners.push({
-        id: learner.id,
-        username: learner.username,
-        first_name: learner.first_name,
-        last_name: learner.last_name,
-        roles: learner.roles,
+  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,
       });
     });
   },
 
-  UPDATE_LEARNERS(state, learners) {
-    learners.forEach(learner => {
-      state.learners.forEach(existingLearner => {
-        if (existingLearner.id === learner.id.toString()) {
-          existingLearner.username = learner.username;
-          existingLearner.first_name = learner.first_name;
-          existingLearner.last_name = learner.last_name;
-          existingLearner.roles = learner.roles;
+  UPDATE_USERS(state, users) {
+    users.forEach(user => {
+      state.users.forEach(existingUser => {
+        if (existingUser.id === user.id.toString()) {
+          existingUser.username = user.username;
+          existingUser.first_name = user.first_name;
+          existingUser.last_name = user.last_name;
+          existingUser.roles = user.roles;
         }
       });
     });
   },
 
-  DELETE_LEARNERS(state, ids) {
+  DELETE_USERS(state, ids) {
     ids.forEach(id => {
-      state.learners.forEach((learner, index) => {
-        if (learner.id === id) {
+      state.users.forEach((user, index) => {
+        if (user.id === id) {
           if (index > -1) {
-            state.learners.splice(index, 1);
+            state.users.splice(index, 1);
           }
         }
       });

kolibri/plugins/management/assets/src/vue/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <core-base>
-    <learner-roster></learner-roster>
+    <user-roster></user-roster>
   </core-base>
 
 </template>
@@ -12,8 +12,7 @@
   module.exports = {
     components: {
       'core-base': require('core-base'),
-      'drop-down': require('./drop-down.vue'),
-      'learner-roster': require('./learner-roster.vue'),
+      'user-roster': require('./user-roster.vue'),
     },
     vuex: {
       actions: require('../actions.js'),

kolibri/plugins/management/assets/src/vue/user-create-modal.vue

@@ -1,16 +1,16 @@
 <template>
 
   <div class="user-creation-modal">
-    <modal btntext="+ Learner">
+    <modal btntext="+ User">
       <div class="title" slot="header">User creation</div>
       <div slot="body">
-        <br>Username: <input type="text" v-model="userName" placeholder="Please type in your username."><br>
-        <br>Password: <input type="text" v-model="passWord" placeholder="Please type in your password."><br>
+        <br>Username: <input type="text" v-model="username" placeholder="Please type in your username."><br>
+        <br>Password: <input type="text" v-model="password" placeholder="Please type in your password."><br>
         <br>First name: <input type="text" v-model="firstName" placeholder="Please type in your first name."><br>
         <br>Last name: <input type="text" v-model="lastName" placeholder="Please type in your last name."><br>
-        <!-- radio buttons for electing role -->
-        <br>Learner <input type="radio" name="picked" value="learner" v-model="role"><br>
-        <br>Admin <input type="radio" name="picked" value="admin" v-model="role"><br>
+        <!-- radio buttons for selecting role -->
+        <br>Learner <input type="radio" value="learner" v-model="role"><br>
+        <br>Admin <input type="radio" value="admin" v-model="role"><br>
       </div>
       <div slot="footer">
         <button class="create-btn" type="button" @click="createNewUser">Create User</button>
@@ -31,8 +31,8 @@
     },
     data() {
       return {
-        userName: '',
-        passWord: '',
+        username: '',
+        password: '',
         firstName: '',
         lastName: '',
         role: 'learner',
@@ -41,8 +41,8 @@
     methods: {
       createNewUser() {
         const payload = {
-          password: this.passWord,
-          username: this.userName,
+          password: this.password,
+          username: this.username,
           first_name: this.firstName,
           last_name: this.lastName,
           facility: this.facility,
@@ -67,8 +67,8 @@
 
   .title
     display: inline
-  
+
   .create-btn
     float: right
 
-</style>
+</style>