@kaspernj/api-maker 1.0.229 → 1.0.230

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.229",
+  "version": "1.0.230",
   "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/bootstrap/card.jsx

@@ -18,6 +18,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 +40,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
       defaultExpanded,
       expandable,
       expandableHide,
+      footer,
       header,
       responsiveTable,
       striped,
@@ -48,7 +50,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
     const {expanded} = digs(this.state, "expanded")
 
     return (
-      <div className={this.classNames()} ref="card" {...restProps}>
+      <div className={this.classNames()} data-has-footer={Boolean(footer)} ref="card" {...restProps}>
         {(controls || expandable || header) &&
           <div className={`card-header d-flex ${!expanded && "border-bottom-0"}`}>
             <div style={{alignSelf: "center", marginRight: "auto"}}>
@@ -81,6 +83,11 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
             {!table && children}
           </div>
         }
+        {footer &&
+          <div className="card-footer">
+            {footer}
+          </div>
+        }
       </div>
     )
   }

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
@@ -249,7 +251,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/table.jsx

@@ -7,7 +7,6 @@ import columnVisible from "./column-visible.mjs"
 import {debounce} from "debounce"
 import {digg, digs} from "diggerize"
 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"
@@ -300,7 +299,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={controlsContent} header={headerContent} footer={this.tableFooter()} table={!this.isSmallScreen()} {...restProps}>
             {this.tableContent()}
           </Card>
         }
@@ -384,7 +383,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)