    import Admin from 'react-crud-admin/src/admin.js'

public class | source

# Admin

#### Extends:

react~React.Component → Admin

Admin Class extends React.Component. To implement a CRUD interface similar to Django Admin you need to extend the Admin class.

## Constructor Summary

Public Constructor
public | constructor() |

## Member Summary

Public Members
public | [key]: * |
public | actions: {"delete": *} |
public | bind_exclude: * |
public | extra_fields: {} |
public | field_transforms: {} |
public | header_transforms: {} |
public | is_object_equal: * |
public | list_display: *[] |
public | list_display_links: *[] |
public | list_per_page: number |
public | live_search: boolean |
public | name: string |
public | name_plural: string |
public | pages_in_pagination: number |
public | queryset: *[] |
public | sort_fields: *[] |
public | state: {"display_type": *, "page_number": number, "object": *, "selected_objects": *, "total": number, "filter_options": *, "filter_values": *} Initialize the state of the component |

Private Members
private | _all_selected: boolean |
private | _change_uuid: * |
private | _hash_change_listener: * |

## Method Summary

Public Methods
public | action_selected(event: object) An event listener that listens to actions selected. |
public | componentWillUnmount() |
public | display_changed(display_type: string, object: object) An event listener that listens to state changes in the display type i.e. |
public | display_will_change(display_type: string, object: object) An event listener that listens to state changes in the display type i.e. |
public | get_actions(): object Gets an actions object whose properties are action names and values are action methods. |
public | get_extra_fields(): object Returns an object whose properties are extra field names not corresponding to properties of any object in the queryset and whose values are display functions. |
public | get_field_transforms(): object Returns an object whose properties are field names corresponding to properties of any object in the queryset and whose values are transform functions. |
public | get_filter_values(): * |
public | get_filters() |
public | get_form(object: object): * This functions returns a JSON Schema Form for editing the objects in the array returned by get_queryset(). |
public | get_header_transforms(): object Returns an object whose properties are field names corresponding to properties of any object in the queryset and whose values are transform functions. |
public | get_list_display(): string[] Gets the list/array of properties/field names of the objects in the queryset to be displayed on the list display page. |
public | get_list_display_links(): string[] Gets the list/array of properties of the objects in the queryset that are clickable when displayed on the list display page. |
public | get_list_per_page(): number Returns the number of items to be listed in a page. |
public | get_live_search(): boolean Returns a true/false value. |
public | get_queryset(page_number: number, list_per_page: number, queryset: object[]): object[] This function returns an array of objects that will serve as the queryset for the admin interface. |
public | has_add_permission(): boolean Grants permission to add an object. |
public | has_change_permission(object: undefined): boolean Grants permission to change an object. |
public | has_delete_permission(object: object): boolean Grants permission to delete object. |
public | has_module_permission(): boolean Grants permission to the this admin interface. |
public | hide_progress() Changes the state property "loading" to false. |
public | nextPage() An event listener that listens when the next page is selected. |
public | prevPage() An event listener that listens when the previous page is selected. |
public | register_listener() |
public | render(): * |
public | render_above_change_view() |
public | render_above_list_view() |
public | render_actions(): * Renders the actions select component |
public | render_add_button(): * Renders the add object button. |
public | render_below_actions() |
public | render_below_add_button() |
public | render_below_change_view() |
public | render_below_filters() |
public | render_below_list_view() |
public | render_below_progress() |
public | render_below_search_field() |
public | render_below_table() |
public | render_change_page(): * |
public | render_change_view(): * |
public | render_filters(): * |
public | render_list_page(): * |
public | render_list_view(): * Renders the admin interface component |
public | render_pagination(): * Renders the pagination UI |
public | render_progress(loading: *): * The default progress indicator. |
public | render_search_field(): * Renders the search component |
public | render_table(): * Renders the table in the display page. |
public | response_add(): boolean This method should be overriden and called after saving an object in the add/change view. |
public | response_change(): boolean This method should be overriden and called after saving an object in the add/change view. |
public | search(term: string, queryset: object[]): object[] Implements search. |
public | selectPage(page: number): * An event listener that listens when a page is selected. |
public | set_filter_options(filter_name: *, options: *) |
public | set_queryset(queryset: *) |
public | set_total(total: *) |
public | show_list_view() |
public | show_progress() Changes the state property "loading" to true. |
public | sort_by(sort_fields: *): * |

Private Methods
private | _create_object_link(object: object, label: string): * A private method to wrap a table entry in an tag in the display page. |
private | _display_changed() |
private | _display_field(object: *, item: *): * |
private | _display_will_change() |
private | _get_ordered_queryset(): object[] Returns an ordered queryset. |
private | _get_prop_label(label: *): * |
private | _get_table_body(): * Generate the table body for the list display page |
private | _get_table_header(): * |
private | _handle_filter_change(values: *) |
private | _handle_search(event: object) An event listener that listens to the search event. |
private | _object_link_clicked(object: *): * |
private | _order_state_arrow(field: string): * This method adds up/down arrows to field headers on the list display page table |
private | _select_all(event: *) This method is an event handler that listens to when all objects of the queryset displayed within a single display page are selected |
private | _select_one(object: *): * This method is an event handler that listens when a single objects of the queryset displayed is selected |
private | _sort_handler(field: *): * |

## Public Constructors

### public constructor() source

## Public Members

### public [key]: * source

### public actions: {"delete": *} source

### public bind_exclude: * source

### public extra_fields: {} source

### public field_transforms: {} source

### public header_transforms: {} source

### public is_object_equal: * source

### public list_display: *[] source

### public list_display_links: *[] source

### public list_per_page: number source

### public live_search: boolean source

### public name: string source

### public name_plural: string source

### public pages_in_pagination: number source

### public queryset: *[] source

### public sort_fields: *[] source

### public state: {"display_type": *, "page_number": number, "object": *, "selected_objects": *, "total": number, "filter_options": *, "filter_values": *} source

Initialize the state of the component

## Private Members

### private _all_selected: boolean source

### private _change_uuid: * source

### private _hash_change_listener: * source

## Public Methods

### public action_selected(event: object) source

An event listener that listens to actions selected.

#### Params:

Name | Type | Attribute | Description
event | object |  | the DOM on-change event

### public componentWillUnmount() source

### public display_changed(display_type: string, object: object) source

An event listener that listens to state changes in the display type i.e. from list to add/change. It is fired after state changes are made.

#### Params:

Name | Type | Attribute | Description
display_type | string |  | the current display type of the component either "list" or "change"
object | object |  | the current object or null

### public display_will_change(display_type: string, object: object) source

An event listener that listens to state changes in the display type i.e. from list to add/change . It is fired before state changes are made.

#### Params:

Name | Type | Attribute | Description
display_type | string |  | the current display type of the component either "list" or "change"
object | object |  | the current object or null

### public get_actions(): object source

Gets an actions object whose properties are action names and values are action methods. This can be overridden by the action member variable. The default "delete" method is not implemented.

Each actions object property (e.g. "delete") is passed an array of selected objects. One can then handle those objects. Actions will appear on the list display page within a dropdown. Selecting an action should have the action method applied to all currently selected objects.

#### Return:

object | An actions object

#### Example:

    actions = { "delete" : (selected_objects)=>{ } }

### public get_extra_fields(): object source

Returns an object whose properties are extra field names not corresponding to properties of any object in the queryset and whose values are display functions. This will create extra fields that are not tied to objects. Extra fields have to be manually included in the `list_display` in order to appear in the list display page. The display functions take the current object being rendered in the table row and the field name

#### Return:

object

#### Example:

    get_extra_fields()
    {
    return { 'now' : function(object,label)
                      {
                         return moment(new Date()).format('LLL');
                      }
            }
    }

### public get_field_transforms(): object source

Returns an object whose properties are field names corresponding to properties of any object in the queryset and whose values are transform functions. The example below will transform each "name" property of objects in the queryset to upper case in the list display view.

#### Return:

object

#### Example:

    get_field_transforms()
    {
    return { 'name' : function(name,object)
                      {
                          return name.toUpperCase()
                      }
            }

    }

### public get_filter_values(): * source

#### Return:

*

### public get_filters() source

### public get_form(object: object): * source

This functions returns a JSON Schema Form for editing the objects in the array returned by get_queryset(). This method needs to be overridden to so as to return a Form Component for the object. Learn more on JSON schema forms from https://github.com/mozilla-services/react-jsonschema-form and JSON Schema from https://spacetelescope.github.io/understanding-json-schema/

#### Params:

Name | Type | Attribute | Description
object | object |  | The current selected object.

#### Return:

* | A JSON Schema Form Component.

### public get_header_transforms(): object source

Returns an object whose properties are field names corresponding to properties of any object in the queryset and whose values are transform functions. The example below will transform the header "name" to upper case in the list display view.

#### Return:

object

#### Example:

    get_header_transforms()
    {
    return { 'name' : function(name)
                      {
                          return name.toUpperCase()
                      }
            }
    }

### public get_list_display(): string[] source

Gets the list/array of properties/field names of the objects in the queryset to be displayed on the list display page. It can be overridden by the member variable listdisplay. A property is any string that should exist in the objects within a queryset and works with lodash's .at function. See more at https://lodash.com/docs/#at

#### Return:

string[] | A list of properties of the object to be displayed

#### Example:

      let object={ name : "any name",{ address : { street : "any"}},emails: ["any@any.com"]}

      The properties "name","address.street" and "emails[0]" are all acceptable

### public get_list_display_links(): string[] source

Gets the list/array of properties of the objects in the queryset that are clickable when displayed on the list display page. It can be overridden by the member variable `list_display_links`. A property is any string that should exist as a property in the objects within a queryset and works with lodash's `_.at` function.

The properties "name","address.street" and "emails[0]" are all acceptable by `_.at` in the example below

#### Return:

string[] | A list of properties of the object to be displayed

#### Example:

      let object={ name : "any name",{ address : { street : "any"}},emails: ["any@any.com"]}

### public get_list_per_page(): number source

Returns the number of items to be listed in a page. Can be overridden by `list_per_page`.

#### Return:

number | The number of objects in a page

### public get_live_search(): boolean source

Returns a true/false value. Controls wether search is implement on live input or not. Can be overriden by the live_search member variable. Default is false.

#### Return:

boolean

### public get_queryset(page_number: number, list_per_page: number, queryset: object[]): object[] source

This function returns an array of objects that will serve as the queryset for the admin interface. Typically involves an HTTP request to a backend.

#### Params:

Name | Type | Attribute | Description
page_number | number |  | The current page number
list_per_page | number |  | Number items to list per page. Defaults to `list_per_page`
queryset | object[] |  | The current queryset

#### Return:

object[] | An array of objects. - Objects to display

### public has_add_permission(): boolean source

Grants permission to add an object. This method controls rendering of the Add button

#### Return:

boolean | Returns true is the object can be added or false otherwise

### public has_change_permission(object: undefined): boolean source

Grants permission to change an object. It disables all links to the add/change page when enabled

#### Params:

Name | Type | Attribute | Description
object | undefined | optional default: undefined |

#### Return:

boolean | Returns true is the object can be changed or false otherwise

### public has_delete_permission(object: object): boolean source

Grants permission to delete object. This method is not implemented and can be handled via implementing actions.

#### Params:

Name | Type | Attribute | Description
object | object |  |

#### Return:

boolean | Returns true is the object has been deleted or false otherwise

### public has_module_permission(): boolean source

Grants permission to the this admin interface.

#### Return:

boolean | Returns true if access is allowed false otherwise

### public hide_progress() source

Changes the state property "loading" to false. This method can be used to hide a progress indicator by inspecting the "loading" property of the state object.

### public nextPage() source

An event listener that listens when the next page is selected.

### public prevPage() source

An event listener that listens when the previous page is selected.

### public register_listener() source

### public render(): * source

#### Return:

*

### public render_above_change_view() source

### public render_above_list_view() source

### public render_actions(): * source

Renders the actions select component

#### Return:

* | A component that renders a select input for all actions in the list display page

### public render_add_button(): * source

Renders the add object button. Checks to see if permission is given by has_add_permission

#### Return:

* | An add button component

### public render_below_actions() source

### public render_below_add_button() source

### public render_below_change_view() source

### public render_below_filters() source

### public render_below_list_view() source

### public render_below_progress() source

### public render_below_search_field() source

### public render_below_table() source

### public render_change_page(): * source

#### Return:

*

### public render_change_view(): * source

#### Return:

*

### public render_filters(): * source

#### Return:

*

### public render_list_page(): * source

#### Return:

*

### public render_list_view(): * source

Renders the admin interface component

#### Return:

* | A component that renders the admin interface

### public render_pagination(): * source

Renders the pagination UI

#### Return:

* | A component that renders the pagination controls

### public render_progress(loading: *): * source

The default progress indicator. Can be overriden.

#### Params:

Name | Type | Attribute | Description
loading | * |  |

#### Return:

* | A progress indicator component

### public render_search_field(): * source

Renders the search component

#### Return:

* | A search input field

### public render_table(): * source

Renders the table in the display page. This calls _get_table_header and _get_table_body

#### Return:

* | An a table displaying the state queryset set objects

### public response_add(): boolean source

This method should be overriden and called after saving an object in the add/change view. This method is not called at all here but provides hints on what to do after saving an object. Change the state display_type to "list", object to "null" and refresh the quer yset.

#### Return:

boolean

### public response_change(): boolean source

This method should be overriden and called after saving an object in the add/change view. This method is not called at all here but provides hints on what to do after saving an object. Change the state display_type to "list", object to "null" and refresh the quer yset.

#### Return:

boolean

### public search(term: string, queryset: object[]): object[] source

Implements search. This method should be overridden to implement a custom search

#### Params:

Name | Type | Attribute | Description
term | string |  | the search term
queryset | object[] |  | the current queryset

#### Return:

object[] | the queryset as a result of the search

### public selectPage(page: number): * source

An event listener that listens when a page is selected.

#### Params:

Name | Type | Attribute | Description
page | number |  | the page number selected

#### Return:

*

### public set_filter_options(filter_name: *, options: *) source

#### Params:

Name | Type | Attribute | Description
filter_name | * |  |
options | * |  |

### public set_queryset(queryset: *) source

#### Params:

Name | Type | Attribute | Description
queryset | * |  |

### public set_total(total: *) source

#### Params:

Name | Type | Attribute | Description
total | * |  |

### public show_list_view() source

### public show_progress() source

Changes the state property "loading" to true. The state property can be used to show a progress indicator.

### public sort_by(sort_fields: *): * source

#### Params:

Name | Type | Attribute | Description
sort_fields | * |  |

#### Return:

*

## Private Methods

### private _create_object_link(object: object, label: string): * source

A private method to wrap a table entry in an tag in the display page. The method checks if permission is given to display links using the has_change_permission method

#### Params:

Name | Type | Attribute | Description
object | object |  | the current object to be displayed as a table entry in the display page
label | string |  | the name of the field

#### Return:

*

### private _display_changed() source

### private _display_field(object: *, item: *): * source

#### Params:

Name | Type | Attribute | Description
object | * |  |
item | * |  |

#### Return:

*

### private _display_will_change() source

### private _get_ordered_queryset(): object[] source

Returns an ordered queryset. The method checks to see if sorting is active and sorts the current queryset based on the sort order.

#### Return:

object[] | An ordered queryset

### private _get_prop_label(label: *): * source

#### Params:

Name | Type | Attribute | Description
label | * |  |

#### Return:

*

### private _get_table_body(): * source

Generate the table body for the list display page

#### Return:

* | An array of table rows <tr/>

### private _get_table_header(): * source

#### Return:

*

### private _handle_filter_change(values: *) source

#### Params:

Name | Type | Attribute | Description
values | * |  |

### private _handle_search(event: object) source

An event listener that listens to the search event. This method calls search method which implements a custom search. The method uses the "live_search" property to implement live search or not.

#### Params:

Name | Type | Attribute | Description
event | object |  | The search onChange event

### private _object_link_clicked(object: *): * source

#### Params:

Name | Type | Attribute | Description
object | * |  |

#### Return:

*

### private _order_state_arrow(field: string): * source

This method adds up/down arrows to field headers on the list display page table

#### Params:

Name | Type | Attribute | Description
field | string |  | the field/property name

#### Return:

*

### private _select_all(event: *) source

This method is an event handler that listens to when all objects of the queryset displayed within a single display page are selected

#### Params:

Name | Type | Attribute | Description
event | * |  |

### private _select_one(object: *): * source

This method is an event handler that listens when a single objects of the queryset displayed is selected

#### Params:

Name | Type | Attribute | Description
object | * |  |

#### Return:

*

### private _sort_handler(field: *): * source

#### Params:

Name | Type | Attribute | Description
field | * |  |

#### Return:

*