@kaspernj/api-maker 1.0.229 → 1.0.231

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.229",
+  "version": "1.0.231",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -73,7 +73,7 @@
     "eslint-find-rules": "^4.0.0",
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-react": "^7.23.2",
-    "i18n-on-steroids": "^1.0.2",
+    "i18n-on-steroids": "^1.0.5",
     "jest": "^29.0.1",
     "jsdom": "^20.0.0"
   }

package/src/base-model/scope.mjs

@@ -0,0 +1,12 @@
+import {digg} from "diggerize"
+import inflection from "inflection"
+
+export default class ApiMakerBaseModelScope {
+  constructor(scopeData) {
+    this.scopeData = scopeData
+  }
+
+  name() {
+    return inflection.camelize(digg(this, "scopeData", "name"), true)
+  }
+}

package/src/base-model.mjs

@@ -11,6 +11,7 @@ import ModelName from "./model-name.mjs"
 import NotLoadedError from "./not-loaded-error.mjs"
 import objectToFormData from "object-to-formdata"
 import Reflection from "./base-model/reflection.mjs"
+import Scope from "./base-model/scope.mjs"
 import Services from "./services.mjs"
 import ValidationError from "./validation-error.mjs"
 import {ValidationErrors} from "./validation-errors.mjs"
@@ -84,6 +85,41 @@ export default class BaseModel {
     return new Collection({modelClass: this}, {ransack: query})
   }
 
+  static ransackableAssociations() {
+    const relationships = digg(this.modelClassData(), "ransackable_associations")
+    const reflections = []
+
+    for (const relationshipData of relationships) {
+      reflections.push(new Reflection(relationshipData))
+    }
+
+    return reflections
+  }
+
+  static ransackableAttributes() {
+    const attributes = digg(this.modelClassData(), "ransackable_attributes")
+    const result = []
+
+    for (const attributeData of attributes) {
+      result.push(new Attribute(attributeData))
+    }
+
+    return result
+  }
+
+  static ransackableScopes() {
+    const ransackableScopes = digg(this.modelClassData(), "ransackable_scopes")
+    const result = []
+
+    for (const scopeData of ransackableScopes) {
+      const scope = new Scope(scopeData)
+
+      result.push(scope)
+    }
+
+    return result
+  }
+
   static reflections() {
     const relationships = digg(this.modelClassData(), "relationships")
     const reflections = []

package/src/bootstrap/card.jsx

@@ -1,4 +1,5 @@
-import {digs} from "diggerize"
+import classNames from "classnames"
+import {digg, digs} from "diggerize"
 import PropTypes from "prop-types"
 import React from "react"
 
@@ -18,6 +19,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
     defaultExpanded: PropTypes.bool.isRequired,
     expandable: PropTypes.bool.isRequired,
     expandableHide: PropTypes.bool.isRequired,
+    footer: PropTypes.node,
     header: PropTypes.node,
     striped: PropTypes.bool,
     responsiveTable: PropTypes.bool.isRequired,
@@ -39,6 +41,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
       defaultExpanded,
       expandable,
       expandableHide,
+      footer,
       header,
       responsiveTable,
       striped,
@@ -46,11 +49,14 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
       ...restProps
     } = this.props
     const {expanded} = digs(this.state, "expanded")
+    const cardHeaderStyle = {display: "flex"}
+
+    if (!expanded) cardHeaderStyle["borderBottom"] = "0"
 
     return (
-      <div className={this.classNames()} ref="card" {...restProps}>
+      <div className={classNames("component-bootstrap-card", "card", "card-default", className)} data-has-footer={Boolean(footer)} ref="card" {...restProps}>
         {(controls || expandable || header) &&
-          <div className={`card-header d-flex ${!expanded && "border-bottom-0"}`}>
+          <div className="card-header" style={cardHeaderStyle}>
             <div style={{alignSelf: "center", marginRight: "auto"}}>
               {header}
             </div>
@@ -58,13 +64,13 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
               <div style={{alignSelf: "center"}}>
                 {controls}
                 {expandable && expanded &&
-                  <a className="collapse-card-button text-muted" href="#" onClick={this.onCollapseClicked}>
-                    <i className="la la-angle-up" />
+                  <a className="collapse-card-button text-muted" href="#" onClick={digg(this, "onCollapseClicked")}>
+                    <i className="fa fa-angle-up" />
                   </a>
                 }
                 {expandable && !expanded &&
-                  <a className="expand-card-button text-muted" href="#" onClick={this.onExpandClicked}>
-                    <i className="la la-angle-down" />
+                  <a className="expand-card-button text-muted" href="#" onClick={digg(this, "onExpandClicked")}>
+                    <i className="fa fa-angle-down" />
                   </a>
                 }
               </div>
@@ -81,19 +87,15 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
             {!table && children}
           </div>
         }
+        {footer &&
+          <div className="card-footer">
+            {footer}
+          </div>
+        }
       </div>
     )
   }
 
-  classNames () {
-    const classNames = ["component-bootstrap-card", "card", "card-default"]
-
-    if (this.props.className)
-      classNames.push(this.props.className)
-
-    return classNames.join(" ")
-  }
-
   bodyClassNames () {
     const {expandableHide, responsiveTable, table} = digs(this.props, "expandableHide", "responsiveTable", "table")
     const {expanded} = digs(this.state, "expanded")

package/src/collection-loader.jsx

@@ -4,7 +4,6 @@ import {digg, digs} from "diggerize"
 import EventCreated from "./event-created"
 import EventDestroyed from "./event-destroyed"
 import EventUpdated from "./event-updated"
-import instanceOfClassName from "./instance-of-class-name"
 import {LocationChanged} from "on-location-changed/src/location-changed-component"
 import Params from "./params"
 import PropTypes from "prop-types"
@@ -54,9 +53,11 @@ export default class CollectionLoader extends React.PureComponent {
       query: undefined,
       queryName,
       queryQName: `${queryName}_q`,
+      querySName: `${queryName}_s`,
       queryPageName: `${queryName}_page`,
       qParams: undefined,
       result: undefined,
+      searchParams: undefined,
       showNoRecordsAvailableContent: false,
       showNoRecordsFoundContent: false
     })
@@ -83,17 +84,26 @@ export default class CollectionLoader extends React.PureComponent {
   }
 
   loadQParams () {
-    const {queryQName} = digs(this.shape, "queryQName")
+    const {queryQName, querySName} = digs(this.shape, "queryQName", "querySName")
     const params = Params.parse()
     const qParams = Object.assign({}, this.props.defaultParams, params[queryQName])
+    const searchParams = []
 
-    this.shape.set({qParams})
+    if (params[querySName]) {
+      for (const rawSearchParam of params[querySName]) {
+        const parsedSearchParam = JSON.parse(rawSearchParam)
+
+        searchParams.push(parsedSearchParam)
+      }
+    }
+
+    this.shape.set({qParams, searchParams})
   }
 
   loadModels = async () => {
     const params = Params.parse()
     const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, select, selectColumns} = this.props
-    const {qParams, queryPageName, queryQName} = digs(this.shape, "qParams", "queryPageName", "queryQName")
+    const {qParams, queryPageName, queryQName, searchParams} = digs(this.shape, "qParams", "queryPageName", "queryQName", "searchParams")
 
     let query = collection?.clone() || modelClass.ransack()
 
@@ -101,6 +111,7 @@ export default class CollectionLoader extends React.PureComponent {
 
     query = query
       .ransack(qParams)
+      .search(searchParams)
       .searchKey(queryQName)
       .page(params[queryPageName])
       .pageKey(queryPageName)
@@ -151,11 +162,7 @@ export default class CollectionLoader extends React.PureComponent {
   }
 
   onLocationChanged = () => {
-    const {queryQName} = digs(this.shape, "queryQName")
-    const params = Params.parse()
-    const qParams = Object.assign({}, this.props.defaultParams, params[queryQName])
-
-    this.shape.set({qParams})
+    this.loadQParams()
     this.loadModels()
   }
 

package/src/collection.mjs

@@ -6,7 +6,9 @@ import {incorporate} from "incorporator"
 import modelClassRequire from "./model-class-require.mjs"
 import Result from "./result.mjs"
 
-class ApiMakerCollection {
+export default class ApiMakerCollection {
+  static apiMakerType = "Collection"
+
   constructor (args, queryArgs = {}) {
     this.queryArgs = queryArgs
     this.args = args
@@ -122,6 +124,7 @@ class ApiMakerCollection {
     if (this.queryArgs.preload) params.preload = this.queryArgs.preload
     if (this.queryArgs.page) params.page = this.queryArgs.page
     if (this.queryArgs.per) params.per = this.queryArgs.per
+    if (this.queryArgs.search) params.search = this.queryArgs.search
     if (this.queryArgs.select) params.select = this.queryArgs.select
     if (this.queryArgs.selectColumns) params.select_columns = this.queryArgs.selectColumns
 
@@ -137,10 +140,7 @@ class ApiMakerCollection {
   }
 
   ransack (params) {
-    if (params) {
-      this._merge({ransack: params})
-    }
-
+    if (params) this._merge({ransack: params})
     return this
   }
 
@@ -155,11 +155,16 @@ class ApiMakerCollection {
     return result
   }
 
-  searchKey (searchKey) {
+  search(params) {
+    if (params) this._merge({search: params})
+    return this
+  }
+
+  searchKey(searchKey) {
     return this._merge({searchKey})
   }
 
-  select (originalSelect) {
+  select(originalSelect) {
     const newSelect = {}
 
     for (const originalModelName in originalSelect) {
@@ -178,7 +183,7 @@ class ApiMakerCollection {
     return this._merge({select: newSelect})
   }
 
-  selectColumns (originalSelect) {
+  selectColumns(originalSelect) {
     const newSelect = {}
 
     for (const originalModelName in originalSelect) {
@@ -249,7 +254,3 @@ class ApiMakerCollection {
     )
   }
 }
-
-ApiMakerCollection.apiMakerType = "Collection"
-
-export default ApiMakerCollection

package/src/super-admin/index.jsx

@@ -22,7 +22,7 @@ class ApiMakerSuperAdmin extends React.PureComponent {
     if (queryParams.model) modelClass = modelsModule[queryParams.model]
 
     return (
-      <Layout headerTitle={modelClass?.modelName()?.human({count: 2})}>
+      <Layout active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
         {pageToShow == "index" &&
           <IndexPage
             currentUser={currentUser}

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

@@ -0,0 +1,277 @@
+import Attribute from "../../base-model/attribute"
+import {digs} from "diggerize"
+import Input from "../../inputs/input"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+import Reflection from "../../base-model/reflection"
+import Select from "../../inputs/select"
+import Services from "../../services.mjs"
+import Shape from "set-state-compare/src/shape"
+
+class AttributeElement extends React.PureComponent {
+  static propTypes = {
+    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")
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <div onClick={digg(this, "onAttributeClicked")} style={style}>
+        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
+      </div>
+    )
+  }
+
+  onAttributeClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({attribute: digg(this, "props", "attribute")})
+  }
+}
+
+class ReflectionElement extends React.PureComponent {
+  static propTypes = {
+    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")}>
+        {currentModelClass.humanAttributeName(reflection.name())}
+      </div>
+    )
+  }
+
+  onReflectionClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({reflection: digg(this, "props", "reflection")})
+  }
+}
+
+export default class ApiMakerTableFiltersRelationshipSelect extends React.PureComponent {
+  static propTypes = PropTypesExact({
+    filter: PropTypes.object,
+    modelClass: PropTypes.func.isRequired,
+    querySearchName: PropTypes.string.isRequired
+  })
+
+  shape = new Shape(this, {
+    attribute: this.currentModelClassFromPath(this.props.filter.p || []).ransackableAttributes().find((attribute) => attribute.name() == this.props.filter.a),
+    path: this.props.filter.p || [],
+    predicate: undefined,
+    predicates: undefined,
+    value: this.props.filter.v
+  })
+  valueInputRef = React.createRef()
+
+  componentDidMount() {
+    this.loadRansackPredicates()
+  }
+
+  async loadRansackPredicates() {
+    const response = await Services.current().sendRequest("Ransack::Predicates")
+    const predicates = digg(response, "predicates")
+    let currentPredicate
+
+    if (this.props.filter.pre) {
+      currentPredicate = predicates.find((predicate) => predicate.name == this.props.filter.pre)
+    }
+
+    this.shape.set({
+      predicate: currentPredicate,
+      predicates
+    })
+  }
+
+  render() {
+    const {valueInputRef} = digs(this, "valueInputRef")
+    const currentModelClass = this.currentModelClass()
+    const {attribute, predicate, predicates, value} = digs(this.shape, "attribute", "predicate", "predicates", "value")
+
+    return (
+      <div className="api-maker--table--filters--relationship-select">
+        <form onSubmit={digg(this, "onSubmit")}>
+          <div>
+            {this.currentPathParts().map(({translation}, pathPartIndex) =>
+              <span key={`${pathPartIndex}-${translation}`}>
+                {pathPartIndex > 0 &&
+                  <span style={{marginRight: "5px", marginLeft: "5px"}}>
+                    -
+                  </span>
+                }
+                {translation}
+              </span>
+            )}
+          </div>
+          <div style={{display: "flex"}}>
+            <div>
+              {this.sortedByName(this.reflectionsWithModelClass(currentModelClass.ransackableAssociations()), currentModelClass).map((reflection) =>
+                <ReflectionElement
+                  currentModelClass={currentModelClass}
+                  key={reflection.name()}
+                  onClick={digg(this, "onReflectionClicked")}
+                  reflection={reflection}
+                />
+              )}
+            </div>
+            <div>
+              {this.sortedByName(currentModelClass.ransackableAttributes(), currentModelClass).map((attribute) =>
+                <AttributeElement
+                  active={attribute.name() == this.shape.attribute?.name()}
+                  attribute={attribute}
+                  currentModelClass={currentModelClass}
+                  key={attribute.name()}
+                  onClick={digg(this, "onAttributeClicked")}
+                />
+              )}
+              {currentModelClass.ransackableScopes().map((scope) =>
+                <div>
+                  {scope.name()}
+                </div>
+              )}
+            </div>
+            <div>
+              {predicates &&
+                <Select
+                  defaultValue={predicate?.name}
+                  includeBlank
+                  onChange={digg(this, "onPredicateChanged")}
+                  options={predicates.map((predicate) => digg(predicate, "name"))}
+                />
+              }
+            </div>
+            <div>
+              {attribute && predicate &&
+                <Input defaultValue={value} inputRef={valueInputRef} />
+              }
+            </div>
+          </div>
+          <div>
+            <Button disabled={!attribute || !predicate}>
+              {I18n.t("js.api_maker.table.filters.relationship_select.apply", {defaultValue: "Apply"})}
+            </Button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+
+  currentModelClass() {
+    const {path} = digs(this.shape, "path")
+
+    return this.currentModelClassFromPath(path)
+  }
+
+  currentModelClassFromPath(path) {
+    const {modelClass} = digs(this.props, "modelClass")
+    let currentModelClass = modelClass
+
+    for (const pathPart of path) {
+      currentModelClass = currentModelClass.ransackableAssociations().find((reflection) => reflection.name() == pathPart).modelClass()
+    }
+
+    return currentModelClass
+  }
+
+  currentPathParts() {
+    const {modelClass} = digs(this.props, "modelClass")
+    const {path} = digs(this.shape, "path")
+    const result = []
+    let currentModelClass = modelClass
+
+    result.push({
+      modelClass,
+      translation: modelClass.modelName().human({count: 2})
+    })
+
+    for (const pathPart of path) {
+      const pathPartTranslation = currentModelClass.humanAttributeName(pathPart)
+
+      currentModelClass = currentModelClass.ransackableAssociations().find((reflection) => reflection.name() == pathPart).modelClass()
+
+      result.push({
+        modelClass: currentModelClass,
+        translation: pathPartTranslation
+      })
+    }
+
+    return result
+  }
+
+  onAttributeClicked = ({attribute}) => {
+    this.shape.set({attribute})
+  }
+
+  onPredicateChanged = (e) => {
+    const chosenPredicateName = digg(e, "target", "value")
+    const predicate = this.shape.predicates.find((predicate) => predicate.name == chosenPredicateName)
+
+    this.shape.set({predicate})
+  }
+
+  onReflectionClicked = ({reflection}) => {
+    const newPath = this.shape.path.concat([reflection.name()])
+
+    this.shape.set({
+      attribute: undefined,
+      path: newPath
+    })
+
+    this.props.onPathChanged
+  }
+
+  onSubmit = (e) => {
+    e.preventDefault()
+
+    const {filter, querySearchName} = digs(this.props, "filter", "querySearchName")
+    const {attribute, path, predicate} = digs(this.shape, "attribute", "path", "predicate")
+    const {filterIndex} = digs(filter, "filterIndex")
+    const searchParams = Params.parse()[querySearchName] || {}
+    const value = digg(this, "valueInputRef", "current", "value")
+
+    searchParams[filterIndex] = JSON.stringify({
+      a: attribute.name(),
+      p: path,
+      pre: digg(predicate, "name"),
+      v: value
+    })
+
+    const newParams = {}
+
+    newParams[querySearchName] = searchParams
+
+    Params.changeParams(newParams)
+  }
+
+  reflectionsWithModelClass(reflections) {
+    return reflections.filter((reflection) => {
+      try {
+        reflection.modelClass()
+
+        return true
+      } catch (error) {
+        return false
+      }
+    })
+  }
+
+  sortedByName(reflections, currentModelClass) {
+    return reflections.sort((a, b) =>
+      currentModelClass.humanAttributeName(a.name()).toLowerCase().localeCompare(currentModelClass.humanAttributeName(b.name()).toLowerCase())
+    )
+  }
+}

package/src/table/filters/index.jsx

@@ -0,0 +1,95 @@
+import PropTypes from "prop-types"
+import React from "react"
+import FilterForm from "./filter-form"
+import Shape from "set-state-compare/src/shape"
+import withQueryParams from "on-location-changed/src/with-query-params"
+
+class ApiMakerTableFilter extends React.PureComponent {
+  static propTypes = {
+    a: PropTypes.string.isRequired,
+    filterIndex: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    p: PropTypes.array.isRequired,
+    pre: PropTypes.string.isRequired,
+    v: PropTypes.string.isRequired
+  }
+
+  render() {
+    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>
+    )
+  }
+
+  onFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
+
+    this.props.onClick({a, filterIndex, p, pre, v})
+  }
+}
+
+class ApiMakerTableFilters extends React.PureComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired,
+    queryName: PropTypes.string.isRequired,
+    queryParams: PropTypes.object.isRequired
+  }
+
+  shape = new Shape(this, {
+    filter: undefined
+  })
+
+  render() {
+    const {modelClass} = this.props
+    const {filter} = digs(this.shape, "filter")
+    const currentFilters = this.currentFilters()
+
+    return (
+      <div className="api-maker--table--filters--edit">
+        <button onClick={digg(this, "onAddFilterClicked")}>
+          {I18n.t("js.api_maker.table.filters.add_new_filter", {defaultValue: "Add new filter"})}
+        </button>
+        {filter &&
+          <FilterForm
+            filter={filter}
+            key={`filter-${filter.filterIndex}`}
+            modelClass={modelClass}
+            querySearchName={this.querySearchName()}
+          />
+        }
+        {currentFilters?.map((filterData, filterIndex) =>
+          <ApiMakerTableFilter key={filterIndex} filterIndex={filterIndex} onClick={digg(this, "onFilterClicked")} {...JSON.parse(filterData)} />
+        )}
+      </div>
+    )
+  }
+
+  currentFilters() {
+    const {queryParams} = this.props
+    const currentFilters = queryParams[this.querySearchName()] || []
+
+    return currentFilters
+  }
+
+  onAddFilterClicked = (e) => {
+    e.preventDefault()
+
+    const newFilterIndex = this.currentFilters().length
+
+    this.shape.set({
+      filter: {
+        filterIndex: newFilterIndex
+      }
+    })
+  }
+
+  onFilterClicked = (args) => this.shape.set({filter: args})
+  querySearchName = () => `${this.props.queryName}_s`
+}
+
+export default withQueryParams(ApiMakerTableFilters)

package/src/table/table.jsx

@@ -6,8 +6,8 @@ import CollectionLoader from "../collection-loader"
 import columnVisible from "./column-visible.mjs"
 import {debounce} from "debounce"
 import {digg, digs} from "diggerize"
+import Filters from "./filters"
 import inflection from "inflection"
-import instanceOfClassName from "../instance-of-class-name"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
@@ -94,6 +94,7 @@ class ApiMakerTable extends React.PureComponent {
       queryPageName: `${queryName}_page`,
       qParams: undefined,
       result: undefined,
+      showFilters: false,
       showNoRecordsAvailableContent: false,
       showNoRecordsFoundContent: false
     })
@@ -137,8 +138,10 @@ class ApiMakerTable extends React.PureComponent {
       preload,
       qParams,
       query,
+      queryName,
       result,
       models,
+      showFilters,
       showNoRecordsAvailableContent,
       showNoRecordsFoundContent
     } = digs(
@@ -147,8 +150,10 @@ class ApiMakerTable extends React.PureComponent {
       "preload",
       "qParams",
       "query",
+      "queryName",
       "result",
       "models",
+      "showFilters",
       "showNoRecordsAvailableContent",
       "showNoRecordsFoundContent"
     )
@@ -179,6 +184,9 @@ class ApiMakerTable extends React.PureComponent {
             {noRecordsFoundContent({models, qParams, overallCount})}
           </div>
         }
+        {showFilters &&
+          <Filters modelClass={modelClass} queryName={queryName} />
+        }
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()
         }
@@ -271,6 +279,8 @@ class ApiMakerTable extends React.PureComponent {
       controlsContent = controls({models, qParams, query, result})
     }
 
+    controlsContent += this.tableControls()
+
     if (typeof header == "function") {
       headerContent = header({models, qParams, query, result})
     } else if (header) {
@@ -300,7 +310,7 @@ class ApiMakerTable extends React.PureComponent {
           this.filterForm()
         }
         {card &&
-          <Card className={classNames("mb-4", className)} controls={controlsContent} header={headerContent} table={!this.isSmallScreen()} {...restProps}>
+          <Card className={classNames("mb-4", className)} controls={this.tableControls()} header={headerContent} footer={this.tableFooter()} table={!this.isSmallScreen()} {...restProps}>
             {this.tableContent()}
           </Card>
         }
@@ -343,6 +353,24 @@ class ApiMakerTable extends React.PureComponent {
     )
   }
 
+  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>
+      </>
+    )
+  }
+
+  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")
@@ -384,7 +412,25 @@ class ApiMakerTable extends React.PureComponent {
     )
   }
 
-  className () {
+  tableFooter() {
+    const {result} = digs(this.shape, "result")
+    const currentPage = result.currentPage()
+    const totalCount = result.totalCount()
+    const perPage = result.perPage()
+    const to = Math.min(currentPage * perPage, totalCount)
+    const defaultValue = "Showing %{from} to %{to} out of %{total_count} total"
+    let from = ((currentPage - 1) * perPage) + 1
+
+    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>
+    )
+  }
+
+  className() {
     const classNames = ["component-api-maker-live-table"]
 
     if (this.props.className)