@kaspernj/api-maker 1.0.231 → 1.0.233

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.231",
+  "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/params.mjs

@@ -1,3 +1,4 @@
+import config from "./config.mjs"
 import formSerialize from "form-serialize"
 import Incorporator from "incorporator"
 import qs from "qs"
@@ -26,8 +27,7 @@ export default class Params {
     const params = Params.change(given)
     const newParams = qs.stringify(params)
     const newPath = `${location.pathname}?${newParams}`
-
-    let appHistory = opts.appHistory || AppHistory
+    const appHistory = opts.appHistory || config.getHistory() || AppHistory
 
     appHistory.push(newPath)
   }

package/src/table/filters/filter-form.jsx

@@ -1,5 +1,6 @@
 import Attribute from "../../base-model/attribute"
-import {digs} from "diggerize"
+import {digg, digs} from "diggerize"
+import inflection from "inflection"
 import Input from "../../inputs/input"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
@@ -10,13 +11,13 @@ import Services from "../../services.mjs"
 import Shape from "set-state-compare/src/shape"
 
 class AttributeElement extends React.PureComponent {
-  static propTypes = {
+  static propTypes = PropTypesExact({
     active: PropTypes.bool.isRequired,
     attribute: PropTypes.instanceOf(Attribute).isRequired,
     currentModelClass: PropTypes.func.isRequired,
     fikter: PropTypes.object,
     onClick: PropTypes.func.isRequired
-  }
+  })
 
   render() {
     const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
@@ -25,7 +26,13 @@ class AttributeElement extends React.PureComponent {
     if (active) style.fontWeight = "bold"
 
     return (
-      <div onClick={digg(this, "onAttributeClicked")} style={style}>
+      <div
+        className="attribute-element"
+        data-attribute-name={attribute.name()}
+        data-model-class={currentModelClass.modelClassData().name}
+        onClick={digg(this, "onAttributeClicked")}
+        style={style}
+      >
         {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
       </div>
     )
@@ -39,17 +46,23 @@ class AttributeElement extends React.PureComponent {
 }
 
 class ReflectionElement extends React.PureComponent {
-  static propTypes = {
+  static propTypes = PropTypesExact({
     currentModelClass: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
     reflection: PropTypes.instanceOf(Reflection).isRequired
-  }
+  })
 
   render() {
     const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
 
     return (
-      <div key={reflection.name()} onClick={digg(this, "onReflectionClicked")}>
+      <div
+        className="reflection-element"
+        data-model-class={currentModelClass.modelClassData().name}
+        data-reflection-name={reflection.name()}
+        key={reflection.name()}
+        onClick={digg(this, "onReflectionClicked")}
+      >
         {currentModelClass.humanAttributeName(reflection.name())}
       </div>
     )
@@ -103,7 +116,7 @@ export default class ApiMakerTableFiltersRelationshipSelect extends React.PureCo
     const {attribute, predicate, predicates, value} = digs(this.shape, "attribute", "predicate", "predicates", "value")
 
     return (
-      <div className="api-maker--table--filters--relationship-select">
+      <div className="api-maker--table--filters--filter-form">
         <form onSubmit={digg(this, "onSubmit")}>
           <div>
             {this.currentPathParts().map(({translation}, pathPartIndex) =>
@@ -147,6 +160,7 @@ export default class ApiMakerTableFiltersRelationshipSelect extends React.PureCo
             <div>
               {predicates &&
                 <Select
+                  className="predicate-select"
                   defaultValue={predicate?.name}
                   includeBlank
                   onChange={digg(this, "onPredicateChanged")}
@@ -156,14 +170,14 @@ export default class ApiMakerTableFiltersRelationshipSelect extends React.PureCo
             </div>
             <div>
               {attribute && predicate &&
-                <Input defaultValue={value} inputRef={valueInputRef} />
+                <Input className="value-input" defaultValue={value} inputRef={valueInputRef} />
               }
             </div>
           </div>
           <div>
-            <Button disabled={!attribute || !predicate}>
+            <button className="apply-filter-button" disabled={!attribute || !predicate}>
               {I18n.t("js.api_maker.table.filters.relationship_select.apply", {defaultValue: "Apply"})}
-            </Button>
+            </button>
           </div>
         </form>
       </div>

package/src/table/filters/index.jsx

@@ -1,3 +1,4 @@
+import {digg, digs} from "diggerize"
 import PropTypes from "prop-types"
 import React from "react"
 import FilterForm from "./filter-form"
@@ -50,8 +51,8 @@ class ApiMakerTableFilters extends React.PureComponent {
     const currentFilters = this.currentFilters()
 
     return (
-      <div className="api-maker--table--filters--edit">
-        <button onClick={digg(this, "onAddFilterClicked")}>
+      <div className="api-maker--table--filters">
+        <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
           {I18n.t("js.api_maker.table.filters.add_new_filter", {defaultValue: "Add new filter"})}
         </button>
         {filter &&

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,
@@ -273,13 +277,7 @@ class ApiMakerTable extends React.PureComponent {
     } = this.props
     const {models, qParams, query, result} = digs(this.shape, "models", "qParams", "query", "result")
 
-    let controlsContent, headerContent, PaginationComponent
-
-    if (controls) {
-      controlsContent = controls({models, qParams, query, result})
-    }
-
-    controlsContent += this.tableControls()
+    let headerContent, PaginationComponent
 
     if (typeof header == "function") {
       headerContent = header({models, qParams, query, result})
@@ -353,24 +351,35 @@ 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
 
     return (
       <>
         {controls && controls({models, qParams, query, result})}
-        <a href="#" onClick={digg(this, "onNewFilterClick")}>
-          <i className="fa fa-fw fa-magnifying-glass" />
+        <a className="filter-button" href="#" onClick={digg(this, "onFilterClicked")}>
+          <i className="fa fa-fw fa-magnifying-glass la la-fw la-search" />
         </a>
       </>
     )
   }
 
-  onNewFilterClick = (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")
@@ -424,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>
     )
   }