@kaspernj/api-maker 1.0.232 → 1.0.233

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.232",
+  "version": "1.0.233",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/collection-loader.jsx

@@ -103,7 +103,28 @@ export default class CollectionLoader extends React.PureComponent {
   loadModels = async () => {
     const params = Params.parse()
     const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, select, selectColumns} = this.props
-    const {qParams, queryPageName, queryQName, searchParams} = digs(this.shape, "qParams", "queryPageName", "queryQName", "searchParams")
+    const {
+      qParams,
+      queryName,
+      queryPageName,
+      queryQName,
+      searchParams
+    } = digs(
+      this.shape,
+      "qParams",
+      "queryName",
+      "queryPageName",
+      "queryQName",
+      "searchParams"
+    )
+    const perKey = `${queryName}_per`
+    let per = params[perKey] || 30
+
+    if (per == "all") {
+      per = 999_999_999
+    } else {
+      per = Number(per)
+    }
 
     let query = collection?.clone() || modelClass.ransack()
 
@@ -115,6 +136,8 @@ export default class CollectionLoader extends React.PureComponent {
       .searchKey(queryQName)
       .page(params[queryPageName])
       .pageKey(queryPageName)
+      .per(per)
+      .perKey(perKey)
       .preload(preloads)
       .select(select)
 

package/src/table/table.jsx

@@ -15,12 +15,15 @@ import Params from "../params"
 import PropTypes from "prop-types"
 import React from "react"
 import selectCalculator from "./select-calculator"
+import Select from "../inputs/select"
 import Shape from "set-state-compare/src/shape"
 import SortLink from "../bootstrap/sort-link"
 import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
 import withBreakpoint from "./with-breakpoint"
 
+const paginationOptions = [30, 60, 90, ["All", "all"]]
+
 class ApiMakerTable extends React.PureComponent {
   static defaultProps = {
     card: true,
@@ -86,6 +89,7 @@ class ApiMakerTable extends React.PureComponent {
       identifier: this.props.identifier || `${collectionKey}-default`,
       models: undefined,
       overallCount: undefined,
+      perPage: 30,
       preload: undefined,
       preparedColumns: undefined,
       query: undefined,
@@ -347,6 +351,22 @@ class ApiMakerTable extends React.PureComponent {
     )
   }
 
+  onFilterClicked = (e) => {
+    e.preventDefault()
+    this.shape.set({showFilters: !this.shape.showFilters})
+  }
+
+  onPerPageChanged = (e) => {
+    const {queryName} = digs(this.shape, "queryName")
+    const newPerPageValue = digg(e, "target", "value")
+    const perKey = `${queryName}_per`
+    const paramsChange = {}
+
+    paramsChange[perKey] = newPerPageValue
+
+    Params.changeParams(paramsChange)
+  }
+
   tableControls() {
     const {controls} = this.props
 
@@ -360,11 +380,6 @@ class ApiMakerTable extends React.PureComponent {
     )
   }
 
-  onFilterClicked = (e) => {
-    e.preventDefault()
-    this.shape.set({showFilters: !this.shape.showFilters})
-  }
-
   tableContent () {
     const {breakPoint} = digs(this.props, "breakPoint")
     const {models, preparedColumns} = digs(this.shape, "models", "preparedColumns")
@@ -418,8 +433,18 @@ class ApiMakerTable extends React.PureComponent {
     if (to === 0) from = 0
 
     return (
-      <div style={{marginTop: "10px"}}>
-        {I18n.t("js.api_maker.table.showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
+      <div style={{display: "flex", justifyContent: "space-between", marginTop: "10px"}}>
+        <div>
+          {I18n.t("js.api_maker.table.showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
+        </div>
+        <div>
+          <Select
+            className="per-page-select"
+            defaultValue={perPage}
+            onChange={digg(this, "onPerPageChanged")}
+            options={paginationOptions}
+          />
+        </div>
       </div>
     )
   }