Merge pull request #1718 from microbiomedata/add-user-table-sorting

Add search functionality for users table

Author: JamesTessmer

nmdc_server/api.py

@@ -1472,8 +1472,17 @@ async def get_users(
     db: Session = Depends(get_db),
     user: models.User = Depends(admin_required),
     pagination: Pagination = Depends(),
+    search_filter: Optional[str] = None,
 ):
     users = db.query(User)
+    if search_filter:
+        users = users.filter(
+            (
+                models.User.name.ilike(f"%{search_filter}%")
+                | models.User.orcid.ilike(f"%{search_filter}%")
+            )
+        )
+
     return pagination.response(users)
 
 

web/src/data/api.ts

@@ -685,11 +685,12 @@ async function me(): Promise<User | null> {
   }
 }
 
-async function getAllUsers(params: SearchParams) {
+async function getAllUsers(params: SearchParams, searchFilter: string) {
   const { data } = await client.get<SearchResponse<User>>('users', {
     params: {
       limit: params.limit,
       offset: params.offset,
+      search_filter: searchFilter,
     },
   });
   return data;

web/src/views/Search/SearchLayout.vue

@@ -246,7 +246,10 @@ export default defineComponent({
               class="my-3"
             >
               <v-tab-item key="omics">
-                <BiosampleVisGroup :conditions="gatedOmicsVisConditions" :vistab="vistab" />
+                <BiosampleVisGroup
+                  :conditions="gatedOmicsVisConditions"
+                  :vistab="vistab"
+                />
               </v-tab-item>
               <v-tab-item key="environments">
                 <EnvironmentVisGroup :conditions="gatedEnvironmentVisConditions" />

web/src/views/User/UserPage.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from '@vue/composition-api';
 import { DataTableHeader } from 'vuetify';
-import { api } from '@/data/api';
+import { api, SearchParams, SearchResponse } from '@/data/api';
 import { stateRefs } from '@/store';
 import { User } from '@/types';
 import usePaginatedResults from '@/use/usePaginatedResults';
@@ -18,6 +18,7 @@ export default defineComponent({
       page: 1,
       itemsPerPage,
     });
+    const searchFilter = ref('');
     const headers : DataTableHeader[] = [
       {
         text: 'ORCID',
@@ -29,8 +30,16 @@ export default defineComponent({
       { text: 'Admin', value: 'is_admin', sortable: false },
     ];
 
-    const users = usePaginatedResults(ref([]), api.getAllUsers, ref([]), itemsPerPage);
+    async function getUsers(params: SearchParams): Promise<SearchResponse<User>> {
+      return api.getAllUsers(params, searchFilter.value);
+    }
+
+    const users = usePaginatedResults(ref([]), getUsers, ref([]), itemsPerPage);
     watch(options, () => users.setPage(options.value.page), { deep: true });
+    watch(searchFilter, () => {
+      options.value.page = 1;
+      users.setPage(options.value.page);
+    }, { deep: true });
 
     async function updateAdminStatus(item: User) {
       await api.updateUser(item.id, item);
@@ -42,6 +51,7 @@ export default defineComponent({
       updateAdminStatus,
       options,
       currentUser,
+      searchFilter,
     };
   },
 });
@@ -55,6 +65,13 @@ export default defineComponent({
         <v-card-title class="text-h4">
           Users
         </v-card-title>
+        <v-text-field
+          v-model="searchFilter"
+          label="Search Users"
+          class="mb-2"
+          outlined
+          hide-details
+        />
         <v-card outlined>
           <v-data-table
             dense