Admin page which displays a paginated list of all users on the forum.

Hierarchy

Constructors

Properties

attrs: IPageAttrs

The attributes passed into the component.

bodyClass: string = ''

A class name to apply to the body while the route is active.

element: Element

The root DOM element for the component.

isLoadingPage: boolean = false
loading: boolean = false
loadingPageNumber: number = 0

Page number being loaded. Zero-indexed.

moreData: boolean = false

Are there more users available?

numPerPage: number = 50

Number of users to load per page.

pageData: undefined | User[] = undefined

This page's array of users.

undefined when page loads as no data has been fetched.

pageNumber: number = 0

Current page number. Zero-indexed.

query: string = ''
scrollTopOnCreate: boolean = true

Whether we should scroll to the top of the page when its rendered.

settings: MutableSettings = {}
state: undefined

Class component state that is persisted between redraws.

Updating this will not automatically trigger a redraw, unlike other frameworks.

This is different to Vnode state, which is always an instance of your class component.

This is undefined by default.

throttledSearch: debounce<(() => Promise<void>)> = ...

Type declaration

useBrowserScrollRestoration: boolean = true

Whether the browser should restore scroll state on refreshes.

userCount: number = app.data.modelStatistics.users.total

Total number of forum users.

Fetched from the active AdminApplication (app), with data provided by AdminPayload.php, or flarum/statistics if installed.

Methods

  • Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

    For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

    Parameters

    • Optional selector: string

      a jQuery-compatible selector string

    Returns JQuery<HTMLElement>

    the jQuery object for the DOM node

    Final

  • buildSettingComponent takes a settings object and turns it into a component. Depending on the type of input, you can set the type to 'bool', 'select', or any standard type. Any values inside the 'extra' object will be added to the component as an attribute.

    Alternatively, you can pass a callback that will be executed in ExtensionPage's context to include custom JSX elements.

    Parameters

    Returns Children

    Example

    {
    * setting: 'acme.checkbox',
    * label: app.translator.trans('acme.admin.setting_label'),
    * type: 'bool',
    * help: app.translator.trans('acme.admin.setting_help'),
    * className: 'Setting-item'
    * }

    Example

    {
    * setting: 'acme.select',
    * label: app.translator.trans('acme.admin.setting_label'),
    * type: 'select',
    * options: {
    * 'option1': 'Option 1 label',
    * 'option2': 'Option 2 label',
    * },
    * default: 'option1',
    * }

    Example

    () => {
    return <p>My cool component</p>;
    }
  • A list of extension-defined custom setting components to be available through buildSettingComponent.

    The ItemList key represents the value for type to be provided when calling buildSettingComponent. Other attributes passed are provided as arguments to the function added to the ItemList.

    ItemList priority has no effect here.

    Returns ItemList<((attributes) => Children)>

    Example

    extend(AdminPage.prototype, 'customSettingComponents', function (items) {
    // You can access the AdminPage instance with `this` to access its `settings` property.

    // Prefixing the key with your extension ID is recommended to avoid collisions.
    items.add('my-ext.setting-component', (attrs) => {
    return (
    <div className={attrs.className}>
    <label>{attrs.label}</label>
    {attrs.help && <p className="helpText">{attrs.help}</p>}

    My setting component!
    </div>
    );
    })
    })
  • Asynchronously fetch the next set of users to be rendered.

    Returns an array of Users, plus the raw API payload.

    Uses the this.numPerPage as the response limit, and automatically calculates the offset required from pageNumber.

    Parameters

    • pageNumber: number

      The zero-based page number to load and display

    Returns Promise<void>

Generated using TypeDoc v0.24.8