@bennerinformatics/ember-fw-table 2.0.19 → 2.0.21

package/addon/components/fw-pagination-wrapper.js

@@ -1,681 +1,681 @@
-import Component from '@ember/component';
-import {computed} from '@ember/object';
-import {empty, filterBy} from '@ember/object/computed';
-import {inject} from '@ember/service';
-import {isEmpty, isNone} from '@ember/utils';
-import {handleAjaxError} from '@bennerinformatics/ember-fw/utils/error';
-import exportTable from '@bennerinformatics/ember-fw-table/utils/export';
-import Table from 'ember-light-table';
-import RSVP from 'rsvp';
-import layout from '../templates/components/fw-pagination-wrapper';
-/**
- * In order to use this component, you also need to install the `ember-cli-pagination` addon
- * to your app. And to make sure that the css looks correct for the pages, in your app.scss file
- * import the styling after all related `ember-fw` imports:
- * ```css
- * @import "ember-fw/pagination/pagination-fw";
- * ```
- *
- * This component works very closely with our Informatics Framework system to create a
- * paginated table, but being such, it also expects certain things from the browse request
- * to get it to work. So that being said, this documentation will need to describe how to use
- * both the client side and the serverside of this component. If you do not use our FW system as
- * your server side, you will need to find a way to get it to return count and limited as is detailed here.
- *
- * ###Client Side
- * There are a few things that are needed to be talked about with the client side. There are some parameters
- * that are needed no matter whether you wrap a table or use a default table. But when it comes to the table,
- * you can use block form, where you specify the table (see [fw-table-sortable](FW-Table-Sortable.html)),
- * or you can pass in extra parameters so this function, and it will make a table for you.
- *
- * ####Mandatory Parameters
- * While below deals with all of the different options that you can pass in as properties to this parameter, as
- * well as all internal properties used by the component by way of explanation, referencing those parameters that
- * are necessary for the proper functioning of this component are helpful here. See below for details about each property:
- *
- * * Basic Properties
- *      - `modelName`
- *      - `defaultSortKey`
- *      - `tableWrapperClass`
- *      - `entriesPerPage`
- * * Action Properties (these need to be actions that are passed in)
- *      - `onSearch`
- *      - `makeQuery`
- *      - `getTitle`
- *      - `getExportColumns`
- *
- * ####Setting Up the Table
- * #####Table Column Usage
- * The following parameters from table columns are utilized in searching and sorting.
- * searchKey: Key to send to the server side when sorting by this column. If unset, defaults to valuePath. Most commonly used when valuePath uses a relationship property, as searchKey can then just use the relationship name.
- * component: To show the loading spinner on the header during searching, component must be set to a header component that shows a spinner when column.loading is true. fw-column-title is an option that will handle this for you.
- *
- * #####Block invoking
- * This template is typically invoked in block format, wrapping around the history search panel. When called in block form, a single hash parameter called actions is provided. This contains the following properties:
- * actions.search: Action to call to use search parameter and fetch entries.
- * actions.export: Action to call to fetch all entries and export them into a CSV file.
- *
- * These actions should be used within the search panel to create search and export buttons.
- * Table
- * The results table can be provided in two forms: block format and parameter format.
- * Parameter format
- * Calling the table in parameter format will use a default fw-table-sortable. In this format, the following additional parameters to fw-pagination-wrapper are available:
- * getTableColumns: Action callback to get the table columns. Callback in case it changes on search, but has no parameters
- * emptyText: Text to display when the table is empty. If unset, hides the table when empty.
- * tableActions: Parameter to send into fw-table-sortable’s tableActions
- * Block format
- * Block format allows passing in a custom table component instead of using fw-table-sortable. In this format, the table is included in the block with the search panel. To distinguish the two, a second parameter, table, is included. It will be an object for the table, and null for the search panel. The code below shows an example of using the block format with both parameters:
- * ```hbs
- * {{#fw-pagination-wrapper
- *   …
- *   as |actions table|
- * }}
- *   {{#unless table}}
- *      {{!-- Search panel contents --}}
- *   {{else}}
- *      {{!-- Table component invocation --}}
- *   {{/unless}}
- * {{/fw-pagination-wrapper}}
- * ```
- * In block format when table is defined, actions contains the following actions:
- * actions.sort: Action to use in fw-table-sortable’s onSort, called when a column is clicked.
- *
- * table contains the following parameters:
- * table.title: Full title for the table, pass to tables as title.
- * table.suffix: Suffix for the table title. Used in some custom table components.
- * table.entries: List of entries to display in the table. Passed to a table as the first unnamed parameter, rows.
- * table.sortKey: Currently active sort key for the table. Passed to a table as defaultSort *
- * ###Server Side
- *
- * The client side performs all history behavior using the browse method of the given model, based on the modelName parameter. The browse route must support several query parameters to handle all cases.
- * Count
- * The count parameter is a boolean that when set to true returns a count of results instead of the results. This is needed to calculate the number of pages available and to show the total in the table title.
- *
- * Count can be performed simply using $this->adapter->count in place of findAll. It takes two parameters, $modelName and $query, same as the first two parameters to findAll. For usage in the table, the result must be placed in a key, “count”, such as with the following code:
- * $count = $this->adapter->count($modelName, $query);
- * return $this->view->helper('json')->add($count, 'count');
- * Limit and Offset
- * The main feature of pagination is the ability to fetch only one page of results at a time, reducing the amount of data fetched in requests.
- * limit:
- * This parameter determines the number of entries per page, as defined by entriesPerPage.
- * This can be accomplished using a filter with $qb->limit.
- * offset:
- * This determines the first entry to be fetched for the limit.
- * This can be accomplished using a filter with $qb->offset.
- *
- * The following code implements both limit and offset:
- * ```js
- * if (isset($options->limit)) {*   $limit = $options->limit;*   $offset = $options->offset ?? 0;*   $this->adapter->addFilter($modelName, function($qb)*       use ($limit, $offset) {*     $qb->limit($limit);*     $qb->offset($offset);*   });
- * }
- * ```
- * Sorting
- * Pagination requires refetching all pages every time the sort order changes, as the first result may not be on the first page. fw-pagination-wrapper handles all the logic needed to do that client side, but it needs to be supported on the server side to work. This requires two parameters:
- * sortKey: Table key to use in sorting
- * ascending: If true, sorts results ascending. If false, sorts them descending.
- *
- * The following code implements sort key and ascending:
- * ```js
- * if (isset($options->sortKey)) {*   $sortKey = alias($options->sortKey);*   $ascending = ($options->ascending ?? 'false') == 'true';*   $ascending = $ascending ? 'ASC' : 'DESC';*   $this->adapter->addFilter($modelName, function($qb)*       use ($sortKey, $ascending) {*     $qb->orderBy($sortKey, $ascending);
- *  });
- * }
- * ```
- * In this code, alias is a function that maps the sortKey from the client side name used in the parameter to the server side name supported by SQL. Point of Sales handles this using a function in the model, called using $this->adapter->aliasKey.
- *
- * Note you may need more complex code to sort by complex table fields, such as a relationship (such as Status’s location name) or a computed value (such as Point of Sales’s transaction log total). An example of this can be found in Point of Sales.
- * Design Considerations
- * It is important to note that if you want to use SQL limiting and offsets, you should do all filtering and sorting using SQL. This means that any filters in PHP need to be migrated to SQL or otherwise some pages will return too few results.
- *
- *
- * @class FW-Pagination-Wrapper
- */
-export default Component.extend({
-    layout,
-    ajax: inject(),
-    config: inject(),
-    media: inject(),
-    notifications: inject(),
-    store: inject(),
-    tagName: '',
-
-    didReceiveAttrs() {
-        this._super(...arguments);
-        if (this.get('searchOnRender')) {
-            this.send('search');
-        }
-    },
-
-    /*
-     * Parameters
-     */
-
-    /**
-     * Name of the model in search
-     * @type {String}
-     * @property modelName
-     */
-
-    /**
-      * Whether or not the table loads on page load. If true, it will call the search based on your defaults already set, whenever the table is rendered for the first time.
-      * @type {Boolean}
-      * @property searchOnRender
-      * @default false
-      */
-    searchOnRender: false,
-    /**
-     * Default sort order for the table
-     * @type {String}
-     * @property defaultSortKey
-     */
-    defaultSortKey: null,
-
-    /**
-     * Number of entries per page
-     * @type {Number}
-     * @property entriesPerPage
-     * @default 100
-     */
-    entriesPerPage: 100,
-    /**
-     * Show the page numbers above the table. If false, they won't show.
-     * @type {Boolean}
-     * @property showPagesTop
-     * @default true
-     */
-    showPagesTop: true,
-
-    /**
-     * Show the page numbers below the table. If false, they won't show.
-     * @type {Boolean}
-     * @property showPagesBottom
-     * @default true
-     */
-    showPagesBottom: true,
-
-    /**
-     * Gets the title of this table at the given time
-     * @property getTitle
-     * @type {Action}
-     * @return {String} Title of this table
-     */
-    getTitle() {
-        return 'Table';
-    },
-
-    /**
-     * Gets a list of table columns for exporting
-     * @property getTableColumns
-     * @type {Action}
-     * @return {Array} Array of table columns
-     */
-    getExportColumns() {},
-
-    /**
-     * Action to be called when the table search button is pressed.
-     * @type {Function}
-     * @property onSearch
-     */
-    onSearch() {},
-
-    /**
-     * Called to delete the full page of entries
-     * Should be passed in with a function
-     * @property deletePage
-     */
-    deletePage: undefined,
-
-    /**
-     * Determines permission for deleteTablePermission for fw-table-sortable
-     * @property deletePagePermission
-     * @type {Boolean}
-     * @default true
-     */
-    deletePagePermission: true,
-    /**
-     * Makes a query object based on the search fields
-     * @property makeQuery
-     * @type {Action}
-     * @param  {Boolean} count  If true, counting
-     * @param  {Number}  page   If defined, page number for a page search
-     * @param  {Boolean} export If true, exporting
-     * @return {Object}         Query object
-     */
-    makeQuery(/* {count, page, export} */) {
-        return {};
-    },
-
-    /* Table generation properties */
-
-    /**
-     * Gets a list of table columns for the results. If null, yields for table
-     * @method getTableColumns
-     * @return {Array} Array of table columns
-     */
-    getTableColumns() {
-        return null;
-    },
-
-    /**
-     * Text to show for empty tables. If null, hides on empty
-     * @property emptyText
-     * @type {String}
-     */
-    emptyText: null,
-
-    /**
-     * Actions to pass into the table
-     * @property tableActions
-     * @type {Object}
-     */
-    tableActions: null,
-
-    /**
-     * Class names for the wrapper around the loading spinner and the table
-     * @property tableWrapperClass
-     * @type {String}
-     */
-    tableWrapperClass: '',
-
-    /*
-     * Search properties
-     */
-
-    /**
-     * Table title at this time
-     * @property currentTitle
-     * @type {String}
-     */
-    currentTitle: null,
-
-    /**
-     * If true, currently doing the main search
-     * @property searchingTable
-     * @type {Boolean}
-     * @default false
-     */
-    searchingTable: false,
-
-    /**
-     * If true, show export page button
-     * @property showExport
-     * @type {Boolean}
-     * @default true
-     */
-    showExport: true,
-    /**
-     * Number of pages being searched
-     * @property pagesSearching
-     * @type {Number}
-     * @default 0
-     */
-    pagesSearching: 0,
-
-    /**
-      * Array of entries, indexes are the pages
-      * @property pageEntries
-      * @type {Array}
-      */
-    pageEntries: null,
-
-    /**
-     * Currently selected page
-     * @property page
-     * @type {Number}
-     * @default 1
-     */
-    page: 1,
-
-    /**
-     * Total number of entries
-     * @property count
-     * @type {Number}
-     */
-    count: null,
-
-    /**
-     * Query last time createQuery was called
-     * @property lastQuery
-     */
-    lastQuery: null,
-
-    /**
-     * Current sort order for the table
-     * @type {String}
-     * @property currentSortKey
-     */
-    currentSortKey: null,
-
-    /*
-     * Computed properties
-     */
-
-    /**
-     * Array index for the selected page
-     * @type {Number - Computed}
-     * @property index
-     * @internal
-     */
-    index: computed('page', function() {
-        return this.get('page') - 1;
-    }),
-
-    /**
-     * Array of entries at the current page
-     * @type {Array - Computed}
-     * @property currentEntries
-     * @internal
-     */
-    currentEntries: computed('pageEntries.[]', 'index', function() {
-        let entries = this.get('pageEntries');
-        if (isNone(entries)) {
-            return [];
-        }
-        return entries.objectAt(this.get('index'));
-    }),
-
-    /**
-     * Filtered entries, removing deleted entries
-     * @type {Array - Computed}
-     * @property filteredEntries
-     * @internal
-     */
-    filteredEntries: filterBy('currentEntries', 'isDeleted', false),
-
-    /**
-     * Current table sort key based on given properties
-     * @type {String - Computed}
-     * @property tableSortKey
-     * @internal
-     */
-    tableSortKey: computed('defaultSortKey', 'currentSortKey', function() {
-        let current = this.get('currentSortKey');
-        if (isEmpty(current)) {
-            return `${this.get('defaultSortKey')}:desc`;
-        }
-        return current;
-    }),
-
-    /**
-     * Number of pages available
-     * @type {Number - Computed}
-     * @property totalPages
-     * @internal
-     */
-    totalPages: computed('count', 'entriesPerPage', function() {
-        let count = this.get('count');
-        if (isNone(count)) {
-            return 0;
-        }
-
-        return Math.ceil(count / this.get('entriesPerPage'));
-    }),
-
-    /**
-     * True if we have multiple pages
-     * @type {Boolean - Computed}
-     * @property showPages
-     * @internal
-     */
-    showPages: computed('totalPages', function() {
-        return this.get('totalPages') > 1;
-    }),
-
-    /**
-     * Maximum number of pages to show in the pagination component
-     * @type {Number - Computed}
-     * @property maxPageButtons
-     * @internal
-     */
-    maxPageButtons: computed('media.{isMobile,isTablet}', function() {
-        let media = this.get('media');
-        if (media.get('isMobile')) {
-            return 3;
-        }
-        if (media.get('isTablet')) {
-            return 5;
-        }
-
-        return 7;
-    }),
-
-    /**
-     * Gets the serverside route to use for this model name
-     * @type {String - Computed}
-     * @property routeName
-     * @internal
-     */
-    routeName: computed('modelName', function() {
-        let name = this.get('modelName');
-        return this.get('store').adapterFor(name).pathForType(name);
-    }),
-
-    /**
-     * Final piece of title for table
-     * @type {String - Computed}
-     * @property tableSuffix
-     * @internal
-     */
-    tableSuffix: computed('count', 'currentEntries', 'index', function() {
-        let count = this.get('count');
-        let entries = this.get('currentEntries');
-        if (isEmpty(entries)) {
-            return `${count} entries`;
-        }
-        return `${entries.get('length')} of ${count} entries`;
-    }),
-
-    /**
-     * Title for the table
-     * @type {String - Computed}
-     * @property fullTableTitle
-     * @internal
-     */
-    fullTableTitle: computed('currentTitle', 'tableSuffix', function() {
-        return `${this.get('currentTitle')} - ${this.get('tableSuffix')}`;
-    }),
-
-    /**
-     * If true, hide the table when empty
-     * @type {Boolean - Computed}
-     * @property hideEmpty
-     * @internal
-     */
-    hideEmpty: empty('emptyText'),
-
-    /* Functions */
-
-    /**
-     * Queries the serverside to get the total record count
-     * @method queryCount
-     * @return {Promise} Promise that resolves to a number
-     */
-    queryCount() {
-        // fetch standard query
-        let query = this.makeQuery({count: true});
-        query.count = true;
-
-        // make request
-        let url = this.get('config').formUrl(this.get('routeName'));
-        return this.get('ajax').request(url, {data: query}).then((({count}) => count)).catch(handleAjaxError.bind(this));
-    },
-
-    /**
-     * Query for settign a new sort order
-     * @method querySort
-     * @param  {Number}  page      Page number to start
-     * @param  {String}  sortKey   New sort order
-     * @param  {Boolean} ascending If true, sorts ascending, false descending
-     * @return {Promise}           Promise that resolves to a entry array
-     */
-    querySort(page, sortKey, ascending) {
-        let query = this.get('lastQuery');
-
-        // set sort key stuff if present
-        if (!isNone(ascending)) {
-            query.ascending = ascending;
-        }
-        if (!isEmpty(sortKey)) {
-            query.sortKey = sortKey;
-        }
-
-        // set limits on query
-        let entriesPerPage = this.get('entriesPerPage');
-        query.limit = entriesPerPage;
-        query.offset = (page - 1) * entriesPerPage;
-
-        // make promise
-        return RSVP.resolve(this.get('store').query(this.get('modelName'), query)).catch(handleAjaxError.bind(this));
-    },
-
-    /**
-     * Fetches the entries for the given page number
-     * @method queryPage
-     * @param  {Number}  page Page to fetch
-     * @return {Promise}      Promise that resolves to an entry array
-     */
-    queryPage(page) {
-        // same as sort, but handles the entries
-        return this.querySort(page).then((entries) => {
-            this.get('pageEntries')[page - 1] = entries;
-            return entries;
-        });
-    },
-
-    /**
-     * Gets all entries for the given query
-     * @method queryAll
-     * @return {Promise} Promise that resolves to entries
-     */
-    queryAll() {
-        let query = this.makeQuery({export: true});
-        return RSVP.resolve(this.get('store').query(this.get('modelName'), query)).catch(handleAjaxError.bind(this));
-    },
-
-    actions: {
-        /* Search buttons */
-
-        /**
-         * This action is called when the search button is pressed
-         * @method search
-         * @return {Promise} Promise that resolves after searching
-         */
-        search() {
-            // TODO: canSearch?
-            // else a title getter
-
-            // start search and clean up old data
-            this.setProperties({
-                currentTitle: this.getTitle(),
-                // search data
-                lastQuery: this.makeQuery({page: 1}),
-                pageEntries: [],
-                page: 1,
-                // searching keys
-                searchingTable: true,
-                pagesSearching: 0,
-                tableColumns: this.getTableColumns()
-            });
-
-            // search callback
-            this.onSearch();
-
-            // make two requests: one for the total count and one for the first 100 entries
-            return RSVP.hash({
-                count: this.queryCount(),
-                entries: this.queryPage(1)
-            }).then(({count}) => {
-                // entries already set as part of queryPage
-                this.setProperties({
-                    count,
-                    searchingTable: false
-                });
-            }).catch(() => {
-                // request failed, clean up data
-                this.setProperties({
-                    // search data
-                    pageEntries: null,
-                    count: 0,
-                    // searching keys
-                    searchingTable: false
-                });
-            });
-        },
-
-        /**
-         * This action is called when the export button is clicked to export all data
-         * @method export
-         * @return {Promise} Promise that resolves after exporting the table
-         */
-        export() {
-            // TODO: canSearch?
-
-            // build table for export
-            let table = new Table(this.getExportColumns());
-            return this.queryAll().then((entries) => {
-                table.setRows(entries.sortBy(this.get('defaultSortKey')).reverse());
-                exportTable(table, `${this.getTitle()} - All Entries`);
-            }).catch(handleAjaxError.bind(this));
-        },
-
-        /* Pagination */
-
-        /**
-         * This action is called when a page button is clicked to switch pages
-         * @method setPage
-         * @param {Number} page New page number to set
-         */
-        setPage(page) {
-            // clamp page number
-            let max = this.get('totalPages');
-            if (page < 1) {
-                page = 1;
-            } else if (page > max) {
-                page = max;
-            }
-
-            // if we havve entries at the page number, use those
-            // if missing, query them
-            if (isNone(this.get('pageEntries').objectAt(page - 1))) {
-                this.incrementProperty('pagesSearching');
-                this.set('page', page);
-                this.queryPage(page).then(() => {
-                    // entries set in promise logic
-                    this.decrementProperty('pagesSearching');
-                });
-            } else {
-                this.set('page', page);
-            }
-        },
-
-        /* Sorting */
-
-        /**
-         * This action resorts the entry by the given column
-         * @method sortColumn
-         * @param  {Column} column  Column to use for sorting
-         * @param  {String} sortKey String to use for sorting in the column
-         * @return {Promise}        Promise that resolves to entries
-         */
-        sortColumn(column, sortKey) {
-            // if the sort key is unchanged, do nothing
-            if (sortKey === this.get('tableSortKey')) {
-                return RSVP.resolve();
-            }
-
-            // mark that we are sorting, column properties do not add desc
-            column.set('sorting', true);
-
-            // search for data
-            let page = this.get('page');
-            return this.querySort(page, column.searchKey || column.valuePath, column.ascending).then((entries) => {
-                // set entries to new list
-                let pageEntries = [];
-                pageEntries[page - 1] = entries;
-                this.setProperties({pageEntries, currentSortKey: sortKey});
-
-                // mark that we are done sorting
-                column.set('sorting', false);
-                return entries;
-            });
-        }
-    }
-});
+import Component from '@ember/component';
+import {computed} from '@ember/object';
+import {empty, filterBy} from '@ember/object/computed';
+import {inject} from '@ember/service';
+import {isEmpty, isNone} from '@ember/utils';
+import {handleAjaxError} from '@bennerinformatics/ember-fw/utils/error';
+import exportTable from '@bennerinformatics/ember-fw-table/utils/export';
+import Table from 'ember-light-table';
+import RSVP from 'rsvp';
+import layout from '../templates/components/fw-pagination-wrapper';
+/**
+ * In order to use this component, you also need to install the `ember-cli-pagination` addon
+ * to your app. And to make sure that the css looks correct for the pages, in your app.scss file
+ * import the styling after all related `ember-fw` imports:
+ * ```css
+ * @import "ember-fw/pagination/pagination-fw";
+ * ```
+ *
+ * This component works very closely with our Informatics Framework system to create a
+ * paginated table, but being such, it also expects certain things from the browse request
+ * to get it to work. So that being said, this documentation will need to describe how to use
+ * both the client side and the serverside of this component. If you do not use our FW system as
+ * your server side, you will need to find a way to get it to return count and limited as is detailed here.
+ *
+ * ###Client Side
+ * There are a few things that are needed to be talked about with the client side. There are some parameters
+ * that are needed no matter whether you wrap a table or use a default table. But when it comes to the table,
+ * you can use block form, where you specify the table (see [fw-table-sortable](FW-Table-Sortable.html)),
+ * or you can pass in extra parameters so this function, and it will make a table for you.
+ *
+ * ####Mandatory Parameters
+ * While below deals with all of the different options that you can pass in as properties to this parameter, as
+ * well as all internal properties used by the component by way of explanation, referencing those parameters that
+ * are necessary for the proper functioning of this component are helpful here. See below for details about each property:
+ *
+ * * Basic Properties
+ *      - `modelName`
+ *      - `defaultSortKey`
+ *      - `tableWrapperClass`
+ *      - `entriesPerPage`
+ * * Action Properties (these need to be actions that are passed in)
+ *      - `onSearch`
+ *      - `makeQuery`
+ *      - `getTitle`
+ *      - `getExportColumns`
+ *
+ * ####Setting Up the Table
+ * #####Table Column Usage
+ * The following parameters from table columns are utilized in searching and sorting.
+ * searchKey: Key to send to the server side when sorting by this column. If unset, defaults to valuePath. Most commonly used when valuePath uses a relationship property, as searchKey can then just use the relationship name.
+ * component: To show the loading spinner on the header during searching, component must be set to a header component that shows a spinner when column.loading is true. fw-column-title is an option that will handle this for you.
+ *
+ * #####Block invoking
+ * This template is typically invoked in block format, wrapping around the history search panel. When called in block form, a single hash parameter called actions is provided. This contains the following properties:
+ * actions.search: Action to call to use search parameter and fetch entries.
+ * actions.export: Action to call to fetch all entries and export them into a CSV file.
+ *
+ * These actions should be used within the search panel to create search and export buttons.
+ * Table
+ * The results table can be provided in two forms: block format and parameter format.
+ * Parameter format
+ * Calling the table in parameter format will use a default fw-table-sortable. In this format, the following additional parameters to fw-pagination-wrapper are available:
+ * getTableColumns: Action callback to get the table columns. Callback in case it changes on search, but has no parameters
+ * emptyText: Text to display when the table is empty. If unset, hides the table when empty.
+ * tableActions: Parameter to send into fw-table-sortable’s tableActions
+ * Block format
+ * Block format allows passing in a custom table component instead of using fw-table-sortable. In this format, the table is included in the block with the search panel. To distinguish the two, a second parameter, table, is included. It will be an object for the table, and null for the search panel. The code below shows an example of using the block format with both parameters:
+ * ```hbs
+ * <FwPaginationWrapper
+ *   …
+ *   as |actions table|
+ * >
+ *   {{#unless table}}
+ *      {{!-- Search panel contents --}}
+ *   {{else}}
+ *      {{!-- Table component invocation --}}
+ *   {{/unless}}
+ * </FwPaginationWrapper>
+ * ```
+ * In block format when table is defined, actions contains the following actions:
+ * actions.sort: Action to use in fw-table-sortable’s onSort, called when a column is clicked.
+ *
+ * table contains the following parameters:
+ * table.title: Full title for the table, pass to tables as title.
+ * table.suffix: Suffix for the table title. Used in some custom table components.
+ * table.entries: List of entries to display in the table. Passed to a table as the first unnamed parameter, rows.
+ * table.sortKey: Currently active sort key for the table. Passed to a table as defaultSort *
+ * ###Server Side
+ *
+ * The client side performs all history behavior using the browse method of the given model, based on the modelName parameter. The browse route must support several query parameters to handle all cases.
+ * Count
+ * The count parameter is a boolean that when set to true returns a count of results instead of the results. This is needed to calculate the number of pages available and to show the total in the table title.
+ *
+ * Count can be performed simply using $this->adapter->count in place of findAll. It takes two parameters, $modelName and $query, same as the first two parameters to findAll. For usage in the table, the result must be placed in a key, “count”, such as with the following code:
+ * $count = $this->adapter->count($modelName, $query);
+ * return $this->view->helper('json')->add($count, 'count');
+ * Limit and Offset
+ * The main feature of pagination is the ability to fetch only one page of results at a time, reducing the amount of data fetched in requests.
+ * limit:
+ * This parameter determines the number of entries per page, as defined by entriesPerPage.
+ * This can be accomplished using a filter with $qb->limit.
+ * offset:
+ * This determines the first entry to be fetched for the limit.
+ * This can be accomplished using a filter with $qb->offset.
+ *
+ * The following code implements both limit and offset:
+ * ```js
+ * if (isset($options->limit)) {*   $limit = $options->limit;*   $offset = $options->offset ?? 0;*   $this->adapter->addFilter($modelName, function($qb)*       use ($limit, $offset) {*     $qb->limit($limit);*     $qb->offset($offset);*   });
+ * }
+ * ```
+ * Sorting
+ * Pagination requires refetching all pages every time the sort order changes, as the first result may not be on the first page. fw-pagination-wrapper handles all the logic needed to do that client side, but it needs to be supported on the server side to work. This requires two parameters:
+ * sortKey: Table key to use in sorting
+ * ascending: If true, sorts results ascending. If false, sorts them descending.
+ *
+ * The following code implements sort key and ascending:
+ * ```js
+ * if (isset($options->sortKey)) {*   $sortKey = alias($options->sortKey);*   $ascending = ($options->ascending ?? 'false') == 'true';*   $ascending = $ascending ? 'ASC' : 'DESC';*   $this->adapter->addFilter($modelName, function($qb)*       use ($sortKey, $ascending) {*     $qb->orderBy($sortKey, $ascending);
+ *  });
+ * }
+ * ```
+ * In this code, alias is a function that maps the sortKey from the client side name used in the parameter to the server side name supported by SQL. Point of Sales handles this using a function in the model, called using $this->adapter->aliasKey.
+ *
+ * Note you may need more complex code to sort by complex table fields, such as a relationship (such as Status’s location name) or a computed value (such as Point of Sales’s transaction log total). An example of this can be found in Point of Sales.
+ * Design Considerations
+ * It is important to note that if you want to use SQL limiting and offsets, you should do all filtering and sorting using SQL. This means that any filters in PHP need to be migrated to SQL or otherwise some pages will return too few results.
+ *
+ *
+ * @class FW-Pagination-Wrapper
+ */
+export default Component.extend({
+    layout,
+    ajax: inject(),
+    config: inject(),
+    media: inject(),
+    notifications: inject(),
+    store: inject(),
+    tagName: '',
+
+    didReceiveAttrs() {
+        this._super(...arguments);
+        if (this.get('searchOnRender')) {
+            this.send('search');
+        }
+    },
+
+    /*
+     * Parameters
+     */
+
+    /**
+     * Name of the model in search
+     * @type {String}
+     * @property modelName
+     */
+
+    /**
+      * Whether or not the table loads on page load. If true, it will call the search based on your defaults already set, whenever the table is rendered for the first time.
+      * @type {Boolean}
+      * @property searchOnRender
+      * @default false
+      */
+    searchOnRender: false,
+    /**
+     * Default sort order for the table
+     * @type {String}
+     * @property defaultSortKey
+     */
+    defaultSortKey: null,
+
+    /**
+     * Number of entries per page
+     * @type {Number}
+     * @property entriesPerPage
+     * @default 100
+     */
+    entriesPerPage: 100,
+    /**
+     * Show the page numbers above the table. If false, they won't show.
+     * @type {Boolean}
+     * @property showPagesTop
+     * @default true
+     */
+    showPagesTop: true,
+
+    /**
+     * Show the page numbers below the table. If false, they won't show.
+     * @type {Boolean}
+     * @property showPagesBottom
+     * @default true
+     */
+    showPagesBottom: true,
+
+    /**
+     * Gets the title of this table at the given time
+     * @property getTitle
+     * @type {Action}
+     * @return {String} Title of this table
+     */
+    getTitle() {
+        return 'Table';
+    },
+
+    /**
+     * Gets a list of table columns for exporting
+     * @property getTableColumns
+     * @type {Action}
+     * @return {Array} Array of table columns
+     */
+    getExportColumns() {},
+
+    /**
+     * Action to be called when the table search button is pressed.
+     * @type {Function}
+     * @property onSearch
+     */
+    onSearch() {},
+
+    /**
+     * Called to delete the full page of entries
+     * Should be passed in with a function
+     * @property deletePage
+     */
+    deletePage: undefined,
+
+    /**
+     * Determines permission for deleteTablePermission for fw-table-sortable
+     * @property deletePagePermission
+     * @type {Boolean}
+     * @default true
+     */
+    deletePagePermission: true,
+    /**
+     * Makes a query object based on the search fields
+     * @property makeQuery
+     * @type {Action}
+     * @param  {Boolean} count  If true, counting
+     * @param  {Number}  page   If defined, page number for a page search
+     * @param  {Boolean} export If true, exporting
+     * @return {Object}         Query object
+     */
+    makeQuery(/* {count, page, export} */) {
+        return {};
+    },
+
+    /* Table generation properties */
+
+    /**
+     * Gets a list of table columns for the results. If null, yields for table
+     * @method getTableColumns
+     * @return {Array} Array of table columns
+     */
+    getTableColumns() {
+        return null;
+    },
+
+    /**
+     * Text to show for empty tables. If null, hides on empty
+     * @property emptyText
+     * @type {String}
+     */
+    emptyText: null,
+
+    /**
+     * Actions to pass into the table
+     * @property tableActions
+     * @type {Object}
+     */
+    tableActions: null,
+
+    /**
+     * Class names for the wrapper around the loading spinner and the table
+     * @property tableWrapperClass
+     * @type {String}
+     */
+    tableWrapperClass: '',
+
+    /*
+     * Search properties
+     */
+
+    /**
+     * Table title at this time
+     * @property currentTitle
+     * @type {String}
+     */
+    currentTitle: null,
+
+    /**
+     * If true, currently doing the main search
+     * @property searchingTable
+     * @type {Boolean}
+     * @default false
+     */
+    searchingTable: false,
+
+    /**
+     * If true, show export page button
+     * @property showExport
+     * @type {Boolean}
+     * @default true
+     */
+    showExport: true,
+    /**
+     * Number of pages being searched
+     * @property pagesSearching
+     * @type {Number}
+     * @default 0
+     */
+    pagesSearching: 0,
+
+    /**
+      * Array of entries, indexes are the pages
+      * @property pageEntries
+      * @type {Array}
+      */
+    pageEntries: null,
+
+    /**
+     * Currently selected page
+     * @property page
+     * @type {Number}
+     * @default 1
+     */
+    page: 1,
+
+    /**
+     * Total number of entries
+     * @property count
+     * @type {Number}
+     */
+    count: null,
+
+    /**
+     * Query last time createQuery was called
+     * @property lastQuery
+     */
+    lastQuery: null,
+
+    /**
+     * Current sort order for the table
+     * @type {String}
+     * @property currentSortKey
+     */
+    currentSortKey: null,
+
+    /*
+     * Computed properties
+     */
+
+    /**
+     * Array index for the selected page
+     * @type {Number - Computed}
+     * @property index
+     * @internal
+     */
+    index: computed('page', function() {
+        return this.get('page') - 1;
+    }),
+
+    /**
+     * Array of entries at the current page
+     * @type {Array - Computed}
+     * @property currentEntries
+     * @internal
+     */
+    currentEntries: computed('pageEntries.[]', 'index', function() {
+        let entries = this.get('pageEntries');
+        if (isNone(entries)) {
+            return [];
+        }
+        return entries.objectAt(this.get('index'));
+    }),
+
+    /**
+     * Filtered entries, removing deleted entries
+     * @type {Array - Computed}
+     * @property filteredEntries
+     * @internal
+     */
+    filteredEntries: filterBy('currentEntries', 'isDeleted', false),
+
+    /**
+     * Current table sort key based on given properties
+     * @type {String - Computed}
+     * @property tableSortKey
+     * @internal
+     */
+    tableSortKey: computed('defaultSortKey', 'currentSortKey', function() {
+        let current = this.get('currentSortKey');
+        if (isEmpty(current)) {
+            return `${this.get('defaultSortKey')}:desc`;
+        }
+        return current;
+    }),
+
+    /**
+     * Number of pages available
+     * @type {Number - Computed}
+     * @property totalPages
+     * @internal
+     */
+    totalPages: computed('count', 'entriesPerPage', function() {
+        let count = this.get('count');
+        if (isNone(count)) {
+            return 0;
+        }
+
+        return Math.ceil(count / this.get('entriesPerPage'));
+    }),
+
+    /**
+     * True if we have multiple pages
+     * @type {Boolean - Computed}
+     * @property showPages
+     * @internal
+     */
+    showPages: computed('totalPages', function() {
+        return this.get('totalPages') > 1;
+    }),
+
+    /**
+     * Maximum number of pages to show in the pagination component
+     * @type {Number - Computed}
+     * @property maxPageButtons
+     * @internal
+     */
+    maxPageButtons: computed('media.{isMobile,isTablet}', function() {
+        let media = this.get('media');
+        if (media.get('isMobile')) {
+            return 3;
+        }
+        if (media.get('isTablet')) {
+            return 5;
+        }
+
+        return 7;
+    }),
+
+    /**
+     * Gets the serverside route to use for this model name
+     * @type {String - Computed}
+     * @property routeName
+     * @internal
+     */
+    routeName: computed('modelName', function() {
+        let name = this.get('modelName');
+        return this.get('store').adapterFor(name).pathForType(name);
+    }),
+
+    /**
+     * Final piece of title for table
+     * @type {String - Computed}
+     * @property tableSuffix
+     * @internal
+     */
+    tableSuffix: computed('count', 'currentEntries', 'index', function() {
+        let count = this.get('count');
+        let entries = this.get('currentEntries');
+        if (isEmpty(entries)) {
+            return `${count} entries`;
+        }
+        return `${entries.get('length')} of ${count} entries`;
+    }),
+
+    /**
+     * Title for the table
+     * @type {String - Computed}
+     * @property fullTableTitle
+     * @internal
+     */
+    fullTableTitle: computed('currentTitle', 'tableSuffix', function() {
+        return `${this.get('currentTitle')} - ${this.get('tableSuffix')}`;
+    }),
+
+    /**
+     * If true, hide the table when empty
+     * @type {Boolean - Computed}
+     * @property hideEmpty
+     * @internal
+     */
+    hideEmpty: empty('emptyText'),
+
+    /* Functions */
+
+    /**
+     * Queries the serverside to get the total record count
+     * @method queryCount
+     * @return {Promise} Promise that resolves to a number
+     */
+    queryCount() {
+        // fetch standard query
+        let query = this.makeQuery({count: true});
+        query.count = true;
+
+        // make request
+        let url = this.get('config').formUrl(this.get('routeName'));
+        return this.get('ajax').request(url, {data: query}).then((({count}) => count)).catch(handleAjaxError.bind(this));
+    },
+
+    /**
+     * Query for settign a new sort order
+     * @method querySort
+     * @param  {Number}  page      Page number to start
+     * @param  {String}  sortKey   New sort order
+     * @param  {Boolean} ascending If true, sorts ascending, false descending
+     * @return {Promise}           Promise that resolves to a entry array
+     */
+    querySort(page, sortKey, ascending) {
+        let query = this.get('lastQuery');
+
+        // set sort key stuff if present
+        if (!isNone(ascending)) {
+            query.ascending = ascending;
+        }
+        if (!isEmpty(sortKey)) {
+            query.sortKey = sortKey;
+        }
+
+        // set limits on query
+        let entriesPerPage = this.get('entriesPerPage');
+        query.limit = entriesPerPage;
+        query.offset = (page - 1) * entriesPerPage;
+
+        // make promise
+        return RSVP.resolve(this.get('store').query(this.get('modelName'), query)).catch(handleAjaxError.bind(this));
+    },
+
+    /**
+     * Fetches the entries for the given page number
+     * @method queryPage
+     * @param  {Number}  page Page to fetch
+     * @return {Promise}      Promise that resolves to an entry array
+     */
+    queryPage(page) {
+        // same as sort, but handles the entries
+        return this.querySort(page).then((entries) => {
+            this.get('pageEntries')[page - 1] = entries;
+            return entries;
+        });
+    },
+
+    /**
+     * Gets all entries for the given query
+     * @method queryAll
+     * @return {Promise} Promise that resolves to entries
+     */
+    queryAll() {
+        let query = this.makeQuery({export: true});
+        return RSVP.resolve(this.get('store').query(this.get('modelName'), query)).catch(handleAjaxError.bind(this));
+    },
+
+    actions: {
+        /* Search buttons */
+
+        /**
+         * This action is called when the search button is pressed
+         * @method search
+         * @return {Promise} Promise that resolves after searching
+         */
+        search() {
+            // TODO: canSearch?
+            // else a title getter
+
+            // start search and clean up old data
+            this.setProperties({
+                currentTitle: this.getTitle(),
+                // search data
+                lastQuery: this.makeQuery({page: 1}),
+                pageEntries: [],
+                page: 1,
+                // searching keys
+                searchingTable: true,
+                pagesSearching: 0,
+                tableColumns: this.getTableColumns()
+            });
+
+            // search callback
+            this.onSearch();
+
+            // make two requests: one for the total count and one for the first 100 entries
+            return RSVP.hash({
+                count: this.queryCount(),
+                entries: this.queryPage(1)
+            }).then(({count}) => {
+                // entries already set as part of queryPage
+                this.setProperties({
+                    count,
+                    searchingTable: false
+                });
+            }).catch(() => {
+                // request failed, clean up data
+                this.setProperties({
+                    // search data
+                    pageEntries: null,
+                    count: 0,
+                    // searching keys
+                    searchingTable: false
+                });
+            });
+        },
+
+        /**
+         * This action is called when the export button is clicked to export all data
+         * @method export
+         * @return {Promise} Promise that resolves after exporting the table
+         */
+        export() {
+            // TODO: canSearch?
+
+            // build table for export
+            let table = new Table(this.getExportColumns());
+            return this.queryAll().then((entries) => {
+                table.setRows(entries.sortBy(this.get('defaultSortKey')).reverse());
+                exportTable(table, `${this.getTitle()} - All Entries`);
+            }).catch(handleAjaxError.bind(this));
+        },
+
+        /* Pagination */
+
+        /**
+         * This action is called when a page button is clicked to switch pages
+         * @method setPage
+         * @param {Number} page New page number to set
+         */
+        setPage(page) {
+            // clamp page number
+            let max = this.get('totalPages');
+            if (page < 1) {
+                page = 1;
+            } else if (page > max) {
+                page = max;
+            }
+
+            // if we havve entries at the page number, use those
+            // if missing, query them
+            if (isNone(this.get('pageEntries').objectAt(page - 1))) {
+                this.incrementProperty('pagesSearching');
+                this.set('page', page);
+                this.queryPage(page).then(() => {
+                    // entries set in promise logic
+                    this.decrementProperty('pagesSearching');
+                });
+            } else {
+                this.set('page', page);
+            }
+        },
+
+        /* Sorting */
+
+        /**
+         * This action resorts the entry by the given column
+         * @method sortColumn
+         * @param  {Column} column  Column to use for sorting
+         * @param  {String} sortKey String to use for sorting in the column
+         * @return {Promise}        Promise that resolves to entries
+         */
+        sortColumn(column, sortKey) {
+            // if the sort key is unchanged, do nothing
+            if (sortKey === this.get('tableSortKey')) {
+                return RSVP.resolve();
+            }
+
+            // mark that we are sorting, column properties do not add desc
+            column.set('sorting', true);
+
+            // search for data
+            let page = this.get('page');
+            return this.querySort(page, column.searchKey || column.valuePath, column.ascending).then((entries) => {
+                // set entries to new list
+                let pageEntries = [];
+                pageEntries[page - 1] = entries;
+                this.setProperties({pageEntries, currentSortKey: sortKey});
+
+                // mark that we are done sorting
+                column.set('sorting', false);
+                return entries;
+            });
+        }
+    }
+});