Prototyping User Table Design Updates

kolibri/plugins/facility/assets/src/composables/usePagination.js

@@ -0,0 +1,112 @@
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+import pickBy from 'lodash/pickBy';
+import clamp from 'lodash/clamp';
+
+/**
+ * Composable for managing pagination state and navigation
+ * Handles page changes, items per page, and URL query synchronization
+ */
+export default function usePagination({ usersCount, totalPages } = {}) {
+  const route = useRoute();
+  const router = useRouter();
+
+  // Current page from URL query params
+  const currentPage = computed({
+    get() {
+      return Number(route.query.page) || 1;
+    },
+    set(value) {
+      router.push({
+        ...route,
+        query: pickBy({
+          ...route.query,
+          page: value > 1 ? value : null, // Don't include page=1 in URL
+        }),
+      });
+    },
+  });
+
+  // Items per page from URL query params
+  const itemsPerPage = computed({
+    get() {
+      return Number(route.query.page_size) || 30;
+    },
+    set(value) {
+      router.push({
+        ...route,
+        query: pickBy({
+          ...route.query,
+          page_size: value !== 30 ? value : null, // Don't include default size in URL
+          page: null, // Reset to first page when changing page size
+        }),
+      });
+    },
+  });
+
+  // Calculate visible range for pagination display
+  const startRange = computed(() => {
+    return (currentPage.value - 1) * itemsPerPage.value;
+  });
+
+  const visibleStartRange = computed(() => {
+    const count = usersCount?.value || 0;
+    return Math.min(startRange.value + 1, count);
+  });
+
+  const endRange = computed(() => {
+    return currentPage.value * itemsPerPage.value;
+  });
+
+  const visibleEndRange = computed(() => {
+    const count = usersCount?.value || 0;
+    return Math.min(endRange.value, count);
+  });
+
+  // Button states
+  const previousButtonDisabled = computed(() => {
+    const count = usersCount?.value || 0;
+    return currentPage.value === 1 || count === 0;
+  });
+
+  const nextButtonDisabled = computed(() => {
+    const count = usersCount?.value || 0;
+    const total = totalPages?.value || 1;
+    return total === 1 || currentPage.value === total || count === 0;
+  });
+
+  // Method to change page with bounds checking
+  const changePage = change => {
+    const total = totalPages?.value || 1;
+    const newPage = clamp(currentPage.value + change, 1, total);
+    currentPage.value = newPage;
+  };
+
+  // Method to go to specific page
+  const goToPage = pageNumber => {
+    const total = totalPages?.value || 1;
+    currentPage.value = clamp(pageNumber, 1, total);
+  };
+
+  // Method to reset to first page
+  const resetToFirstPage = () => {
+    currentPage.value = 1;
+  };
+
+  return {
+    // State
+    currentPage,
+    itemsPerPage,
+
+    // Computed properties for display
+    visibleStartRange,
+    visibleEndRange,
+    previousButtonDisabled,
+    nextButtonDisabled,
+
+    // Methods
+    changePage,
+    goToPage,
+    resetToFirstPage,
+  };
+}

kolibri/plugins/facility/assets/src/composables/useUsersTableSearch.js

@@ -0,0 +1,60 @@
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+import pickBy from 'lodash/pickBy';
+import debounce from 'lodash/debounce';
+
+/**
+ * Composable for managing search functionality in the Users table
+ * Handles search term state and URL query parameter synchronization
+ */
+export default function useUsersTableSearch() {
+  const route = useRoute();
+  const router = useRouter();
+  const filterTextboxRef = ref(null);
+
+  // Create debounced function for updating search in URL
+  const updateSearchInUrl = value => {
+    if (value === '') {
+      value = null;
+    }
+    router.push({
+      ...route,
+      query: pickBy({
+        ...route.query,
+        search: value,
+        page: null, // Reset to first page when searching
+      }),
+    });
+  };
+
+  const debouncedSearchTerm = debounce(updateSearchInUrl, 300);
+
+  // Computed property for search term with getter/setter
+  const searchTerm = computed({
+    get() {
+      return route.query.search || '';
+    },
+    set(value) {
+      debouncedSearchTerm(value);
+    },
+  });
+
+  // Method to focus the search textbox
+  const focusSearchBox = () => {
+    if (filterTextboxRef.value?.focus) {
+      filterTextboxRef.value.focus();
+    }
+  };
+
+  // Method to clear search
+  const clearSearch = () => {
+    searchTerm.value = '';
+  };
+
+  return {
+    searchTerm,
+    filterTextboxRef,
+    focusSearchBox,
+    clearSearch,
+  };
+}

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

@@ -1,18 +1,20 @@
 <template>
 
   <form>
-    <PaginatedListContainerWithBackend
-      v-model="currentPage"
-      :items="facilityUsers"
-      :itemsPerPage="itemsPerPage"
-      :totalPageNumber="totalPages"
-      :numFilteredItems="totalLearners"
-    >
-      <template #filter>
-        <FilterTextbox
-          v-model="search"
-          :placeholder="coreString('searchForUser')"
-        />
+    <PaginatedListContainerWithBackend>
+      <template #topActions>
+        <div class="flex-row">
+          <FilterTextbox
+            v-model="search"
+            :placeholder="coreString('searchForUser')"
+          />
+          <PaginationActions
+            v-model="currentPage"
+            :itemsPerPage="itemsPerPage"
+            :totalPageNumber="totalPages"
+            :numFilteredItems="totalLearners"
+          />
+        </div>
       </template>
       <template>
         <UserTable
@@ -24,6 +26,14 @@
         />
       </template>
     </PaginatedListContainerWithBackend>
+    <PaginationActions
+      v-if="totalPages > 1"
+      v-model="currentPage"
+      style="text-align: right"
+      :itemsPerPage="itemsPerPage"
+      :totalPageNumber="totalPages"
+      :numFilteredItems="totalLearners"
+    />
     <SelectionBottomBar
       :count="selectedUsers.length"
       :disabled="disabled || selectedUsers.length === 0"
@@ -44,13 +54,15 @@
   import FilterTextbox from 'kolibri/components/FilterTextbox';
   import UserTable from 'kolibri-common/components/UserTable';
   import PaginatedListContainerWithBackend from 'kolibri-common/components/PaginatedListContainerWithBackend';
+  import PaginationActions from 'kolibri-common/components/PaginationActions';
   import SelectionBottomBar from './SelectionBottomBar';
 
   export default {
     name: 'ClassEnrollForm',
     components: {
       SelectionBottomBar,
       PaginatedListContainerWithBackend,
+      PaginationActions,
       UserTable,
       FilterTextbox,
     },
@@ -168,4 +180,11 @@
     justify-content: flex-end;
   }
 
+  .flex-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em 0;
+  }
+
 </style>

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

@@ -4,8 +4,11 @@
     :title="title"
     :appearanceOverrides="appearanceOverrides"
   >
-    <template #default="{ pageContentHeight }">
-      <slot :pageContentHeight="pageContentHeight"></slot>
+    <template #default="{ pageContentHeight, appBarHeight }">
+      <slot
+        :pageContentHeight="pageContentHeight"
+        :appBarHeight="appBarHeight"
+      ></slot>
     </template>
   </AppBarPage>