From bbe8355a04165504776bec01fab111cfaae54215 Mon Sep 17 00:00:00 2001
From: dmeidlin <14339308+dmeidlin@users.noreply.github.com>
Date: Mon, 28 Feb 2022 11:59:50 -0500
Subject: [PATCH] [BI-1369] enable backend sorting for roles column of program
 users table

---
 src/breeding-insight/service/UserService.ts  |  1 -
 src/components/program/ProgramUsersTable.vue | 16 ++++++----------
 src/store/sorting/getters.ts                 |  6 +++++-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/breeding-insight/service/UserService.ts b/src/breeding-insight/service/UserService.ts
index 5a258f1d8..48d7dc92e 100644
--- a/src/breeding-insight/service/UserService.ts
+++ b/src/breeding-insight/service/UserService.ts
@@ -137,7 +137,6 @@ export class UserService {
 
       UserDAO.getAll(paginationQuery, sort).then((biResponse) => {
 
-        biResponse.result.data = PaginationController.mockSortRecords(biResponse.result.data);
         // Parse our users into the vue users param
         let users = biResponse.result.data.map((user: any) => {
           const role: Role | undefined = this.parseSystemRoles(user.systemRoles);
diff --git a/src/components/program/ProgramUsersTable.vue b/src/components/program/ProgramUsersTable.vue
index 669ebb982..014bb97df 100644
--- a/src/components/program/ProgramUsersTable.vue
+++ b/src/components/program/ProgramUsersTable.vue
@@ -131,7 +131,7 @@
       <b-table-column field="data.email" label="Email" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         {{ props.row.data.email }}
       </b-table-column>
-      <b-table-column :custom-sort="sortRole" label="Role" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="data.roleName" label="Role" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         <template v-if="rolesMap.size > 0">
           {{ getRoleName(props.row.data.roleId) }}
         </template>
@@ -263,7 +263,11 @@ export default class ProgramUsersTable extends Vue {
   }
 
   setSort(field: string, order: string) {
-    const fieldMap: any = {'data.email': UserSortField.Email, 'data.name': UserSortField.Name};
+    const fieldMap: any = {
+      'data.email': UserSortField.Email,
+      'data.name': UserSortField.Name,
+      'data.roleName': UserSortField.Roles
+    };
     if (field in fieldMap) {
       this.updateSort(new UserSort(fieldMap[field], Sort.orderAsBI(order)));
       this.getUsers();
@@ -474,14 +478,6 @@ export default class ProgramUsersTable extends Vue {
     return this.rolesMap.get(id)!.name;
   }
 
-  sortRole(a: any, b: any, isAsc: boolean) {
-    if(isAsc) {
-      return this.getRoleName(a.data.roleId)!.localeCompare(this.getRoleName(b.data.roleId)!);
-    } else {
-      return this.getRoleName(b.data.roleId)!.localeCompare(this.getRoleName(a.data.roleId)!);
-    }
-  }
-
 }
 
 </script>
diff --git a/src/store/sorting/getters.ts b/src/store/sorting/getters.ts
index 2ea89e373..9d4d7065c 100644
--- a/src/store/sorting/getters.ts
+++ b/src/store/sorting/getters.ts
@@ -61,7 +61,11 @@ export const getters: GetterTree<SortState, RootState> = {
         return state.programUserSort;
     },
     programUserSortFieldAsBuefy(state: SortState): string {
-        const fieldMap: any = {[UserSortField.Email]: 'data.email', [UserSortField.Name]: 'data.name'};
+        const fieldMap: any = {
+            [UserSortField.Email]: 'data.email',
+            [UserSortField.Name]: 'data.name',
+            [UserSortField.Roles]: 'data.roleName'
+        };
         return fieldMap[state.programUserSort.field];
     },
     programUserSortOrderAsBuefy(state: SortState): string {