Replace `CoreTable` with `KTable` in UserPage.vue

[BabyElias]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Motivation

We are replacing the usage of CoreTable with our newly introduced KTable component to address accessibility needs and provide an enhanced sorting experience. This is one of the key use cases where the sorting features of KTable will bring significant improvements, particularly for administrators.

In the future, we plan to introduce columns such as “Date created” and “Date added” to the table. These additional columns, combined with KTable's sorting capabilities, will allow administrators to quickly locate newly added users.

Guidance

The replacement will take place in UserPage.vue, specifically the following code:

<PaginatedListContainerWithBackend
    v-model="currentPage"
    :items="facilityUsers"
    ...
  >
    <template #otherFilter>
      <KSelect
        v-model="roleFilter"
        :label="coreString('userTypeLabel')"
        ...
      />
    </template>

    <template #filter>
      <FilterTextbox v-model="search" :placeholder="$tr('searchText')" />
    </template>

    <template>
      <UserTable
        class="move-down user-roster"
        :users="facilityUsers"
        ...
      >

        ...

      </UserTable>
    </template>
  </PaginatedListContainerWithBackend>

This block will be replaced with:

<PaginatedListContainerWithBackend
    v-model="currentPage"
    :items="facilityUsers"
    ...
  >
    <template #otherFilter>
      <KSelect
        v-model="roleFilter"
        :label="coreString('userTypeLabel')"
        ...
      />
    </template>

    <template #filter>
      <FilterTextbox v-model="search" :placeholder="$tr('searchText')" />
    </template>

    <template>
      <KTable ...
        sortable
        disableDefaultSorting
       @changeSort="changeSortHandler">

        ...

      </KTable>
    </template>
  </PaginatedListContainerWithBackend>
<script>
export default {
  data() {
    return {
      isLoading: false,
      sortKey: null, // Store the current column being sorted
      sortOrder: null, // Store the current sort order (asc/desc/unsorted)
    };
  },
  methods: {
    async changeSortHandler(index, currentSortOrder) {
      // Cycle through the sorting states: ascending > descending > unsorted
      // Update the current sort key and order
      // Emit the new sort state (asc/desc/unsorted)
      // Set loading state, loading state messages, error management and handle UI focus for accessibility
};
</script>

This refactor involves removing the UserTable component and replacing it with KTable. Refactoring UserTable.vue itself is not recommended as it could affect multiple other areas in the codebase. Instead, we'll integrate KTable where necessary.

---

Key Implementation Notes

• KTable will receive pre-sorted data from the backend instead of handling the sorting itself. The backend will be responsible for fetching and managing the sorted data. The backend sorting function can be viewed here
• Use the KTable’s sortable feature with disableDefaultSorting to ensure the table displays backend-sorted data without applying additional local sorting logic.
• Ensure that the table remains integrated with PaginatedListContainerWithBackend, as the latter is responsible for managing pagination.
• Implement integration with useKliveregion to announce loading states for accessibility purposes. The following messages should be announced
  • When a header is clicked and sorting begins - “Data sorting in progress”
  • When sorted data is finally loaded - “Data sorting completed”
• Handle error states with snackbars to notify users of any issues encountered during data fetching or sorting operations.
  • In case data fetching fails due to any reason : “Data sorting failed. Please try again.”

---

Resources for Implementation

• Backend sorting table example from the KTable playground page.
• Documentation for useKliveregion for managing accessibility announcements.
• Refer to KTable’s documentation for disableDefaultSorting and custom sorting logic for backend integration.

---

Acceptance Criteria

• [ ] Replace CoreTable with KTable in UserPage.vue.
• [ ] The sorting functionality should work seamlessly with data provided by the backend, using disableDefaultSorting.
• [ ] Accessibility features such as loading announcements using useKLiveRegion and error state snackbars should be properly integrated.
• [ ] The table should continue to work correctly with PaginatedListContainerWithBackend for pagination.

---

This update is a step forward in enhancing both the user experience and accessibility in the table component. It is essential to preserve existing pagination logic while introducing improved sorting and accessibility features.

[MisRob]

Reserved for @BabyElias

[BabyElias]

Started working on this. @MisRob Can you please assign this to me? Thanks!

[AlexVelezLl]

Assigned @BabyElias!

[MisRob]

Yey :) Thank you

[MisRob]

Hi @BabyElias, I wanted to mention that Learning Equality will be closed from December 23 to January 5.

[MisRob]

First part of this work is resolved in https://github.com/learningequality/kolibri/pull/13028.