Add search functionality for users table

nmdc_server/api.py

@@ -1,6 +1,7 @@
 import csv
 import json
 import logging
+import re
 import time
 from importlib import resources
 from io import BytesIO, StringIO
@@ -1472,8 +1473,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 type(search_filter) is str:
+        if re.match(
+            r"^\d{4}-\d{4}-\d{4}-\d{3}[\dX]$", search_filter
+        ):  # if search_filter is patterned like an ORCID then filter on that
+            users = users.filter(models.User.orcid == search_filter)
+        else:  # otherwise filter by name
+            users = users.filter(models.User.name.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, input_search_filter: String | null) {
   const { data } = await client.get<SearchResponse<User>>('users', {
     params: {
       limit: params.limit,
       offset: params.offset,
+      search_filter: input_search_filter,
     },
   });
   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 search_filter = ref(null);
     const headers : DataTableHeader[] = [
       {
         text: 'ORCID',
@@ -29,8 +30,13 @@ 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, search_filter.value);
+    }
+
+    const users = usePaginatedResults(ref([]), getUsers, ref([]), itemsPerPage);
     watch(options, () => users.setPage(options.value.page), { deep: true });
+    watch(search_filter, () => users.setPage(options.value.page), { deep: true });
 
     async function updateAdminStatus(item: User) {
       await api.updateUser(item.id, item);
@@ -42,6 +48,7 @@ export default defineComponent({
       updateAdminStatus,
       options,
       currentUser,
+      search_filter,
     };
   },
 });
@@ -55,6 +62,13 @@ export default defineComponent({
         <v-card-title class="text-h4">
           Users
         </v-card-title>
+        <v-text-field
+          v-model="search_filter"
+          label="Search Users"
+          class="mb-2"
+          outlined
+          hide-details
+        />
         <v-card outlined>
           <v-data-table
             dense