@kaspernj/api-maker 1.0.232 → 1.0.234

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.232",
+  "version": "1.0.234",
   "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/filters/filter-form.jsx

@@ -75,10 +75,11 @@ class ReflectionElement extends React.PureComponent {
   }
 }
 
-export default class ApiMakerTableFiltersRelationshipSelect extends React.PureComponent {
+export default class ApiMakerTableFiltersFilterForm extends React.PureComponent {
   static propTypes = PropTypesExact({
     filter: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
+    onApplyClicked: PropTypes.func.isRequired,
     querySearchName: PropTypes.string.isRequired
   })
 
@@ -269,6 +270,8 @@ export default class ApiMakerTableFiltersRelationshipSelect extends React.PureCo
     newParams[querySearchName] = searchParams
 
     Params.changeParams(newParams)
+
+    this.props.onApplyClicked()
   }
 
   reflectionsWithModelClass(reflections) {

package/src/table/filters/index.jsx

@@ -10,6 +10,7 @@ class ApiMakerTableFilter extends React.PureComponent {
     a: PropTypes.string.isRequired,
     filterIndex: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
+    onRemoveClicked: PropTypes.func.isRequired,
     p: PropTypes.array.isRequired,
     pre: PropTypes.string.isRequired,
     v: PropTypes.string.isRequired
@@ -19,8 +20,18 @@ class ApiMakerTableFilter extends React.PureComponent {
     const {a, p, pre, v} = digs(this.props, "a", "p", "pre", "v")
 
     return (
-      <div onClick={digg(this, "onFilterClicked")} style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
-        {p.join(".")}.{a} {pre} {v}
+      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
+        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
+          {p.length > 0 &&
+            `${p.join(".")}.`
+          }
+          {a} {pre} {v}
+        </span>
+        <span>
+          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
+            <i className="fa fa-remove la la-remove" />
+          </a>
+        </span>
       </div>
     )
   }
@@ -32,6 +43,14 @@ class ApiMakerTableFilter extends React.PureComponent {
 
     this.props.onClick({a, filterIndex, p, pre, v})
   }
+
+  onRemoveFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {filterIndex} = digs(this.props, "filterIndex")
+
+    this.props.onRemoveClicked({filterIndex})
+  }
 }
 
 class ApiMakerTableFilters extends React.PureComponent {
@@ -60,11 +79,18 @@ class ApiMakerTableFilters extends React.PureComponent {
             filter={filter}
             key={`filter-${filter.filterIndex}`}
             modelClass={modelClass}
+            onApplyClicked={digg(this, "onApplyClicked")}
             querySearchName={this.querySearchName()}
           />
         }
         {currentFilters?.map((filterData, filterIndex) =>
-          <ApiMakerTableFilter key={filterIndex} filterIndex={filterIndex} onClick={digg(this, "onFilterClicked")} {...JSON.parse(filterData)} />
+          <ApiMakerTableFilter
+            key={filterIndex}
+            filterIndex={filterIndex}
+            onClick={digg(this, "onFilterClicked")}
+            onRemoveClicked={digg(this, "onRemoveClicked")}
+            {...JSON.parse(filterData)}
+          />
         )}
       </div>
     )
@@ -89,6 +115,24 @@ class ApiMakerTableFilters extends React.PureComponent {
     })
   }
 
+  onApplyClicked = () => this.shape.set({filter: undefined})
+
+  onRemoveClicked = ({filterIndex}) => {
+    const searchParams = Params.parse()[this.querySearchName()] || {}
+
+    delete searchParams[filterIndex]
+
+    const newParams = {}
+
+    newParams[this.querySearchName()] = searchParams
+
+    Params.changeParams(newParams)
+
+    this.shape.set({
+      filter: undefined
+    })
+  }
+
   onFilterClicked = (args) => this.shape.set({filter: args})
   querySearchName = () => `${this.props.queryName}_s`
 }

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>
     )
   }