@kaspernj/api-maker 1.0.264 → 1.0.266

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.264",
+  "version": "1.0.266",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/collection.mjs

@@ -148,7 +148,7 @@ export default class ApiMakerCollection {
     const response = await this._response()
     const models = digg(response, "collection")
 
-    this._addCollectionToModels(models)
+    this._addQueryToModels(models)
 
     const result = new Result({collection: this, models, response})
 
@@ -210,7 +210,7 @@ export default class ApiMakerCollection {
     const response = await this._response()
     const models = digg(response, "collection")
 
-    this._addCollectionToModels(models)
+    this._addQueryToModels(models)
 
     return models
   }
@@ -228,7 +228,7 @@ export default class ApiMakerCollection {
   }
 
   // This is needed when reloading a version of the model with the same selected attributes and preloads
-  _addCollectionToModels(models) {
+  _addQueryToModels(models) {
     for(const model of models) {
       model.collection = this
     }

package/src/model-recipes-model-loader.mjs

@@ -36,7 +36,7 @@ export default class ApiMakerModelRecipesModelLoader {
 
     this.addAttributeMethodsToModelClass(ModelClass, attributes)
     this.addRelationshipsToModelClass(ModelClass, modelClassData, relationships)
-    this.addCollectionCommandsToModelClass(ModelClass, collectionCommands)
+    this.addQueryCommandsToModelClass(ModelClass, collectionCommands)
     this.addMemberCommandsToModelClass(ModelClass, memberCommands)
 
     return ModelClass
@@ -61,7 +61,7 @@ export default class ApiMakerModelRecipesModelLoader {
     }
   }
 
-  addCollectionCommandsToModelClass (ModelClass, collectionCommands) {
+  addQueryCommandsToModelClass (ModelClass, collectionCommands) {
     for (const collectionCommandName in collectionCommands) {
       const methodName = inflection.camelize(collectionCommandName, true)
 

package/src/table/table.jsx

@@ -456,7 +456,7 @@ class ApiMakerTable extends React.PureComponent {
 
     return (
       <div style={{display: "flex", justifyContent: "space-between", marginTop: "10px"}}>
-        <div>
+        <div className="showing-counts">
           {I18n.t("js.api_maker.table.showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
         </div>
         <div>

package/src/table/worker-plugins-check-all-checkbox.jsx

@@ -1,4 +1,20 @@
 import Collection from "../collection.mjs"
+import EventConnection from "../event-connection"
+import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
+import {useEffect, useRef} from "react"
+
+const Checkbox = (props) => {
+  const {indeterminate, ...restProps} = props
+  const checkboxRef = useRef()
+
+  useEffect(() => {
+    checkboxRef.current.indeterminate = indeterminate
+  })
+
+  return (
+    <input ref={checkboxRef} type="checkbox" {...restProps} />
+  )
+}
 
 export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -6,24 +22,80 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComp
     query: PropTypes.instanceOf(Collection)
   })
 
+  state = {
+    checked: false,
+    indeterminate: false
+  }
+
+  componentDidMount() {
+    this.updateAllChecked()
+  }
+
+  componentDidUpdate(prevProps) {
+    const previousParams = prevProps.query.params()
+    const currentParams = this.props.query.params()
+
+    if (simpleObjectDifferent(previousParams, currentParams)) {
+      this.updateAllChecked()
+    }
+  }
+
+  async updateAllChecked() {
+    const {query, currentWorkplace} = this.props
+    const queryLinksStatusResult = await currentWorkplace.queryLinksStatus({query})
+    const allChecked = queryLinksStatusResult.all_checked
+    const someChecked = queryLinksStatusResult.some_checked
+
+    this.setState({
+      checked: allChecked,
+      indeterminate: someChecked
+    })
+  }
+
   render() {
-    const {className} = this.props
+    const {className, currentWorkplace} = this.props
+    const {checked, indeterminate} = this.state
 
     return (
-      <input
-        className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
-        onChange={this.onCheckedChanged}
-        type="checkbox"
-      />
+      <>
+        <EventConnection event="workplace_links_created" model={currentWorkplace} onCall={this.onLinksCreated} />
+        <EventConnection event="workplace_links_destroyed" model={currentWorkplace} onCall={this.onLinksDestroyed} />
+        <Checkbox
+          checked={checked}
+          className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
+          indeterminate={indeterminate}
+          onChange={this.onCheckedChanged}
+        />
+      </>
     )
   }
 
+  modelClassName = () => this.props.query.modelClass().modelClassData().name
+
   onCheckedChanged = async (e) => {
     e.preventDefault()
 
     const {currentWorkplace, query} = this.props
+    const checkbox = e.target
+
+    if (checkbox.checked) {
+      await currentWorkplace.addQuery({query})
+      this.setState({checked: true, indeterminate: false})
+    } else {
+      await currentWorkplace.removeQuery({query})
+      this.setState({checked: false, indeterminate: false})
+    }
+  }
+
+  onLinksCreated = ({args}) => {
+    if (args.created[this.modelClassName()]) {
+      this.updateAllChecked()
+    }
+  }
 
-    await currentWorkplace.addCollection({query})
-    e.target.checked = true
+  onLinksDestroyed = ({args}) => {
+    if (args.destroyed[this.modelClassName()]) {
+      this.updateAllChecked()
+    }
   }
 }