Fix pagination user tables

kolibri/core/auth/api.py

@@ -214,6 +214,9 @@ class FacilityUserFilter(FilterSet):
     exclude_member_of = ModelChoiceFilter(
         method="filter_exclude_member_of", queryset=Collection.objects.all()
     )
+    exclude_coach_for = ModelChoiceFilter(
+        method="filter_exclude_coach_for", queryset=Collection.objects.all()
+    )
     exclude_user_type = ChoiceFilter(
         choices=USER_TYPE_CHOICES,
         method="filter_exclude_user_type",
@@ -232,6 +235,16 @@ def filter_user_type(self, queryset, name, value):
     def filter_exclude_member_of(self, queryset, name, value):
         return queryset.exclude(Q(memberships__collection=value) | Q(facility=value))
 
+    def filter_exclude_coach_for(self, queryset, name, value):
+        return queryset.exclude(
+            Q(roles__in=Role.objects.filter(kind=role_kinds.COACH, collection=value))
+            | Q(
+                roles__in=Role.objects.filter(
+                    kind=role_kinds.COACH, collection_id=value.parent_id
+                )
+            )
+        )
+
     def filter_exclude_user_type(self, queryset, name, value):
         if value == "learner":
             return queryset.exclude(roles__isnull=True)

kolibri/plugins/facility/assets/src/modules/classAssignMembers/handlers.js

@@ -1,40 +1,31 @@
 import ConditionalPromise from 'kolibri.lib.conditionalPromise';
+import pickBy from 'lodash/pickBy';
 import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 import { ClassroomResource, FacilityUserResource } from 'kolibri.resources';
-import { UserKinds } from 'kolibri.coreVue.vuex.constants';
 import { _userState } from '../mappers';
 
 export function showLearnerClassEnrollmentPage(store, toRoute) {
   const { id, facility_id } = toRoute.params;
   store.dispatch('preparePage');
   // facility users that are not enrolled in this class
   const userPromise = FacilityUserResource.fetchCollection({
-    getParams: {
+    getParams: pickBy({
       member_of: facility_id || store.getters.activeFacilityId,
-      page_size: 30,
-      page: 1,
+      page: toRoute.query.page || 1,
+      page_size: toRoute.query.page_size || 30,
       exclude_member_of: id,
-    },
+      exclude_coach_for: id,
+    }),
     force: true,
   });
   // current class
   const classPromise = ClassroomResource.fetchModel({ id });
-  // users in current class
-  const classUsersPromise = FacilityUserResource.fetchCollection({
-    getParams: {
-      member_of: id,
-      page_size: 30,
-      page: 1,
-    },
-    force: true,
-  });
 
-  return ConditionalPromise.all([userPromise, classPromise, classUsersPromise]).only(
+  return ConditionalPromise.all([userPromise, classPromise]).only(
     samePageCheckGenerator(store),
-    ([facilityUsers, classroom, classUsers]) => {
+    ([facilityUsers, classroom]) => {
       store.commit('classAssignMembers/SET_STATE', {
         facilityUsers: facilityUsers.results.map(_userState),
-        classUsers: classUsers.results.map(_userState),
         totalPageNumber: facilityUsers.total_pages,
         totalLearners: facilityUsers.count,
         class: classroom,
@@ -48,23 +39,20 @@ export function showLearnerClassEnrollmentPage(store, toRoute) {
   );
 }
 
-const eligibleRoles = [
-  UserKinds.ASSIGNABLE_COACH,
-  UserKinds.COACH,
-  UserKinds.ADMIN,
-  UserKinds.SUPERUSER,
-];
-
 export function showCoachClassAssignmentPage(store, toRoute) {
   const { id, facility_id } = toRoute.params;
   store.commit('CORE_SET_PAGE_LOADING', true);
   const facilityId = facility_id || store.getters.activeFacilityId;
-  // all users in facility
-  // NOTE:
-  // don't use backend pagination here, since we are filtering users with multiple eligible roles
-  // just exclude the learners to reduce the queryset size
+  // all users in facility eligible to be a coach that is not already a coach
   const userPromise = FacilityUserResource.fetchCollection({
-    getParams: { member_of: facilityId, exclude_member_of: id, exclude_user_type: 'learner' },
+    getParams: {
+      member_of: facilityId,
+      exclude_member_of: id,
+      exclude_user_type: 'learner',
+      exclude_coach_for: id,
+      page: toRoute.query.page || 1,
+      page_size: toRoute.query.page_size || 30,
+    },
     force: true,
   });
   // current class
@@ -73,17 +61,11 @@ export function showCoachClassAssignmentPage(store, toRoute) {
   return ConditionalPromise.all([userPromise, classPromise]).only(
     samePageCheckGenerator(store),
     ([facilityUsers, classroom]) => {
-      let filteredFacilityUsers = facilityUsers
-        .filter(user => {
-          // filter out users who are not eligible to be coaches
-          return user.roles.some(({ kind }) => eligibleRoles.includes(kind));
-        })
-        .map(_userState);
       store.commit('classAssignMembers/SET_STATE', {
         // facilityUsers now only contains users that are eligible for coachdom
-        // TODO rename
-        facilityUsers: filteredFacilityUsers,
-        classUsers: classroom.coaches.map(_userState),
+        facilityUsers: facilityUsers.results.map(_userState),
+        totalPageNumber: facilityUsers.total_pages,
+        totalLearners: facilityUsers.count,
         class: classroom,
         modalShown: false,
       });

kolibri/plugins/facility/assets/src/modules/classAssignMembers/index.js

@@ -4,7 +4,6 @@ import { assignCoachesToClass, enrollLearnersInClass } from './actions';
 function defaultState() {
   return {
     class: {},
-    classUsers: [],
     facilityUsers: [],
     modalShown: false,
   };

kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue

@@ -3,39 +3,22 @@
   <form>
 
     <PaginatedListContainerWithBackend
-      v-if="isBackendPaginated"
+      v-model="currentPage"
       :items="usersNotInClass"
-      :filterPlaceholder="$tr('searchForUser')"
-      :excludeMemberOf="excludeMemberOf"
+      :itemsPerPage="itemsPerPage"
       :totalPageNumber="totalPages"
-      :userAssignmentType="userAssignmentType"
-      :totalUsers="totalUsersCount"
+      :numFilteredItems="totalUsers"
     >
-      <template #default="{ items, filterInput }">
+      <template>
         <UserTable
           v-model="selectedUsers"
-          :users="items"
+          :users="usersNotInClass"
           :selectable="true"
-          :disabled="disabled"
-          :emptyMessage="emptyMessageForItems(items, filterInput)"
+          :emptyMessage="emptyMessageForItems(usersNotInClass)"
+          :showDemographicInfo="true"
         />
       </template>
     </PaginatedListContainerWithBackend>
-    <PaginatedListContainer
-      v-else
-      :items="usersNotInClass"
-      :filterPlaceholder="$tr('searchForUser')"
-    >
-      <template #default="{ items, filterInput }">
-        <UserTable
-          v-model="selectedUsers"
-          :users="items"
-          :selectable="true"
-          :disabled="disabled"
-          :emptyMessage="emptyMessageForItems(items, filterInput)"
-        />
-      </template>
-    </PaginatedListContainer>
     <SelectionBottomBar
       :count="selectedUsers.length"
       :disabled="disabled || selectedUsers.length === 0"
@@ -50,10 +33,9 @@
 
 <script>
 
-  import differenceWith from 'lodash/differenceWith';
+  import pickBy from 'lodash/pickBy';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import PaginatedListContainer from 'kolibri.coreVue.components.PaginatedListContainer';
   import PaginatedListContainerWithBackend from './PaginatedListContainerWithBackend';
   import SelectionBottomBar from './SelectionBottomBar';
   import UserTable from './UserTable';
@@ -62,9 +44,6 @@
     name: 'ClassEnrollForm',
     components: {
       SelectionBottomBar,
-      // conditionally render paginated list container based on whether there are
-      // more than one page of users
-      PaginatedListContainer,
       PaginatedListContainerWithBackend,
       UserTable,
     },
@@ -78,20 +57,10 @@
         type: String,
         required: true,
       },
-      classUsers: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
       disabled: {
         type: Boolean,
         default: false,
       },
-      classId: {
-        type: String,
-        required: false,
-        default: '',
-      },
       totalPageNumber: {
         type: Number,
         required: false,
@@ -102,11 +71,6 @@
         required: false,
         default: 0,
       },
-      isBackendPaginated: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
     },
     data() {
       return {
@@ -115,49 +79,54 @@
     },
     computed: {
       usersNotInClass() {
-        return this.isBackendPaginated
-          ? this.facilityUsers
-          : differenceWith(this.facilityUsers, this.classUsers, (a, b) => a.id === b.id);
-      },
-      excludeMemberOf() {
-        return this.classId;
+        return this.facilityUsers;
       },
       totalPages() {
         return this.totalPageNumber;
       },
-      userAssignmentType() {
-        return this.pageType;
-      },
-      totalUsersCount() {
-        return this.totalUsers;
+      currentPage: {
+        get() {
+          return Number(this.$route.query.page || 1);
+        },
+        set(value) {
+          this.$router.push({
+            ...this.$route,
+            query: pickBy({
+              ...this.$route.query,
+              page: value,
+            }),
+          });
+        },
+      },
+      itemsPerPage: {
+        get() {
+          return this.$route.query.page_size || 30;
+        },
+        set(value) {
+          this.$router.push({
+            ...this.$route,
+            query: pickBy({
+              ...this.$route.query,
+              page_size: value,
+              page: null,
+            }),
+          });
+        },
       },
     },
     methods: {
-      emptyMessageForItems(items, filterInput) {
+      emptyMessageForItems() {
         if (this.facilityUsers.length === 0) {
           return this.coreString('noUsersExistLabel');
         }
         if (this.usersNotInClass.length === 0) {
           return this.$tr('allUsersAlready');
         }
-        if (items.length === 0 && filterInput !== '') {
-          return this.$tr('noUsersMatch', { filterText: filterInput });
-        }
-
         return '';
       },
     },
     $trs: {
-      searchForUser: {
-        message: 'Search for a user',
-        context: 'Descriptive text which appears in the search field on the Facility > Users page.',
-      },
       // TODO clarify empty state messages after string freeze
-      noUsersMatch: {
-        message: 'No users match the filter: "{filterText}"',
-        context:
-          'Message that displays on the Facility > Users page when a search for a user produces no results.',
-      },
       allUsersAlready: {
         message: 'All users are already enrolled in this class',
         context:

kolibri/plugins/facility/assets/src/views/CoachClassAssignmentPage.vue

@@ -5,7 +5,8 @@
     <p>{{ $tr('pageSubheader') }}</p>
     <ClassEnrollForm
       :facilityUsers="facilityUsers"
-      :classUsers="classUsers"
+      :totalPageNumber="totalPageNumber"
+      :totalUsers="totalLearners"
       pageType="coaches"
       :disabled="formIsDisabled"
       @submit="assignCoaches"
@@ -38,7 +39,12 @@
       };
     },
     computed: {
-      ...mapState('classAssignMembers', ['class', 'classUsers', 'facilityUsers']),
+      ...mapState('classAssignMembers', [
+        'class',
+        'facilityUsers',
+        'totalLearners',
+        'totalPageNumber',
+      ]),
       className() {
         return this.class.name;
       },

kolibri/plugins/facility/assets/src/views/LearnerClassEnrollmentPage.vue

@@ -5,12 +5,9 @@
     <p>{{ $tr('pageSubheader') }}</p>
     <ClassEnrollForm
       :facilityUsers="facilityUsers"
-      :classUsers="classUsers"
       :disabled="formIsDisabled"
-      :classId="classId"
       :totalPageNumber="totalPageNumber"
       :totalUsers="totalLearners"
-      :isBackendPaginated="true"
       pageType="learners"
       @submit="enrollLearners"
     />
@@ -45,16 +42,12 @@
       ...mapState('classAssignMembers', [
         'class',
         'facilityUsers',
-        'classUsers',
-        'totalPageNumber',
         'totalLearners',
+        'totalPageNumber',
       ]),
       className() {
         return this.class.name;
       },
-      classId() {
-        return this.class.id;
-      },
     },
     methods: {
       ...mapActions('classAssignMembers', ['enrollLearnersInClass']),