@kaspernj/api-maker 1.0.228 → 1.0.230

package/package.json

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

@@ -7,6 +7,10 @@ export default class ApiMakerBaseModelReflection {
     this.reflectionData = reflectionData
   }
 
+  foreignKey() {
+    return digg(this, "reflectionData", "foreignKey")
+  }
+
   macro() {
     return digg(this, "reflectionData", "macro")
   }

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/config-reader.jsx

@@ -9,7 +9,11 @@ export default class ApiMakerSuperAdminConfigReader {
     try {
       modelConfig = require(`super-admin/model-configs/${modelNameCamelized}`).default
     } catch (error) {
-      console.log(`No model-config for ${modelClass.modelClassData().name}`)
+      if (error.message.includes("Cannot find module")) {
+        console.log(`No model-config for ${modelClass.modelClassData().name}`)
+      } else {
+        throw error
+      }
     }
 
     return new ApiMakerSuperAdminConfigReader(modelClass, modelConfig)

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/super-admin/show-page/index.jsx

@@ -2,6 +2,7 @@ import AttributeRows from "../../bootstrap/attribute-rows"
 import BelongsToAttributeRow from "./belongs-to-attribute-row"
 import ConfigReader from "../config-reader"
 import {digg, digs} from "diggerize"
+import inflection from "inflection"
 import modelLoadWrapper from "../../model-load-wrapper"
 import PropTypes from "prop-types"
 import React from "react"
@@ -13,10 +14,16 @@ class ApiMakerSuperAdminShowPage extends React.PureComponent {
     queryParams: PropTypes.object.isRequired
   }
 
+  configReader = ConfigReader.forModel(digg(this, "props", "modelClass"))
+
   render() {
     const {modelClass, queryParams} = digs(this.props, "modelClass", "queryParams")
     const attributes = this.attributes()
     const model = this.model()
+    const extraContent = this.configReader.modelConfig?.show?.extraContent
+    const modelArgs = {}
+
+    modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
 
     return (
       <div className="super-admin--show-page">
@@ -29,16 +36,12 @@ class ApiMakerSuperAdminShowPage extends React.PureComponent {
         {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to").map((reflection) =>
           <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
         )}
+        {model && extraContent && extraContent(modelArgs)}
       </div>
     )
   }
 
-  attributes() {
-    const {modelClass} = digs(this.props, "modelClass")
-    const configReader = ConfigReader.forModel(modelClass)
-
-    return configReader.attributesToShow()
-  }
+  attributes = () => this.configReader.attributesToShow()
 
   model() {
     const {modelClass} = digs(this.props, "modelClass")
@@ -60,7 +63,19 @@ export default modelLoadWrapper(
   modelClassResolver,
   ({modelClass}) => {
     const preload = []
-    const select = {}
+    const configReader = ConfigReader.forModel(modelClass)
+    const select = configReader.modelConfig?.show?.extraSelect || {}
+    const modelClassName = modelClass.modelClassData().name
+    const modelClassSelect = select[modelClassName] || []
+    const primaryKeyName = modelClass.primaryKey()
+
+    if (!(modelClassName in select)) select[modelClassName] = modelClassSelect
+    if (!modelClassSelect.includes(primaryKeyName)) modelClassSelect.push(primaryKeyName)
+
+    // Select all attributes selected by default because they will be shown by default
+    for (const attribute of modelClass.attributes()) {
+      if (attribute.isSelectedByDefault() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
+    }
 
     for (const reflection of modelClass.reflections()) {
       if (reflection.macro() != "belongs_to") continue
@@ -70,11 +85,14 @@ export default modelLoadWrapper(
       const reflectionModelClassAttributes = reflectionModelClass.attributes()
       const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
 
-      preload.push(reflection.name())
+      preload.push(inflection.underscore(reflection.name()))
 
       if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
       if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
       if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+
+      // The foreign key is needed to look up any belongs-to-relationships
+      if (!modelClassSelect.includes(reflection.foreignKey())) modelClassSelect.push(reflection.foreignKey())
     }
 
     return {

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)