feat: Admin User Search (#3712)

* Initial search
* oninput attempt
* Working search!
* forgot to format
* fix debounce, locale
* use core.ref

framework/core/js/src/admin/components/UserListPage.tsx

@@ -14,8 +14,8 @@ import type User from '../../common/models/User';
 import ItemList from '../../common/utils/ItemList';
 import classList from '../../common/utils/classList';
 import extractText from '../../common/utils/extractText';
-
 import AdminPage from './AdminPage';
+import { debounce } from '../../common/utils/throttleDebounce';
 
 type ColumnData = {
   /**
@@ -32,6 +32,9 @@ type ColumnData = {
  * Admin page which displays a paginated list of all users on the forum.
  */
 export default class UserListPage extends AdminPage {
+  private query: string = '';
+  private throttledSearch = debounce(250, () => this.loadPage(0));
+
   /**
    * Number of users to load per page.
    */
@@ -91,6 +94,18 @@ export default class UserListPage extends AdminPage {
     const columns = this.columns().toArray();
 
     return [
+      <div className="Search-input">
+        <input
+          className="FormControl SearchBar"
+          type="search"
+          placeholder={app.translator.trans('core.admin.users.search_placeholder')}
+          oninput={(e: InputEvent) => {
+            this.isLoadingPage = true;
+            this.query = (e?.target as HTMLInputElement)?.value;
+            this.throttledSearch();
+          }}
+        />
+      </div>,
       <p class="UserListPage-totalUsers">{app.translator.trans('core.admin.users.total_users', { count: this.userCount })}</p>,
       <section
         class={classList(['UserListPage-grid', this.isLoadingPage ? 'UserListPage-grid--loadingPage' : 'UserListPage-grid--loaded'])}
@@ -339,6 +354,7 @@ export default class UserListPage extends AdminPage {
 
     app.store
       .find<User[]>('users', {
+        filter: { q: this.query },
         page: {
           limit: this.numPerPage,
           offset: pageNumber * this.numPerPage,

framework/core/locale/core.yml

@@ -209,7 +209,7 @@ core:
       read_heading: Read
       rename_discussions_label: Rename discussions
       reply_to_discussions_label: Reply to discussions
-      search_users_label: Search users
+      search_users_label: => core.ref.search_users
       sign_up_label: Sign up
       start_discussions_label: Start discussions
       title: Permissions
@@ -276,6 +276,7 @@ core:
         next_button: Next page
         page_counter: Page {current} of {total}
 
+      search_placeholder: => core.ref.search_users
       title: => core.ref.users
       total_users: "Total users: {count}"
 
@@ -758,7 +759,8 @@ core:
     reply: Reply                                 # Referenced by flarum-mentions.yml
     reset_your_password: Reset Your Password
     restore: Restore
-    save_changes: Save Changes                   # Referenced by flarum-suspend.yml, flarum-tags.yml
+    save_changes: Save Changes     
+    search_users: Search users              # Referenced by flarum-suspend.yml, flarum-tags.yml
     settings: Settings
     sign_up: Sign Up
     some_others: "{count, plural, one {# other} other {# others}}"  # Referenced by flarum-likes.yml, flarum-mentions.yml