@kaspernj/api-maker 1.0.417 → 1.0.419

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.417",
+  "version": "1.0.419",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/attribute-row/index.jsx

@@ -6,6 +6,7 @@ import PropTypes from "prop-types"
 import {memo, useMemo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
 export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends ShapeComponent {
   static defaultProps = {
@@ -23,6 +24,9 @@ export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends S
   }
 
   setup() {
+    const {t} = useI18n({namespace: "js.api_maker.attribute_row"})
+
+    this.t = t
     this.attribute = useMemo(
       () => {
         if (this.props.attribute) {
@@ -88,9 +92,9 @@ export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends S
     } else if (value instanceof Date) {
       return strftime("%Y-%m-%d %H:%M", value)
     } else if (typeof value === "boolean") {
-      if (value) return I18n.t("js.shared.yes", {defaultValue: "Yes"})
+      if (value) return this.t("js.shared.yes", {defaultValue: "Yes"})
 
-      return I18n.t("js.shared.no", {defaultValue: "No"})
+      return this.t("js.shared.no", {defaultValue: "No"})
     } else if (MoneyFormatter.isMoney(value)) {
       return MoneyFormatter.format(value)
     } else {

package/src/table/header-column.jsx

@@ -37,6 +37,15 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const {defaultParams} = table.props
     const {styleForHeader, styleForHeaderText} = table.tt
     const {query} = digs(table.collection, "query")
+    const columnProps = table.columnProps(column)
+    const {style, ...restColumnProps} = columnProps
+    const actualStyle = Object.assign(
+      {
+        cursor: resizing ? "col-resize" : undefined,
+        width
+      },
+      style
+    )
 
     return (
       <Header
@@ -45,11 +54,8 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
           identifier: tableSettingColumn.identifier()
         }}
         onLayout={this.tt.onLayout}
-        style={styleForHeader({style: {
-          cursor: resizing ? "col-resize" : undefined,
-          width: `${width}%`
-        }})}
-        {...table.columnProps(column)}
+        style={styleForHeader({style: actualStyle})}
+        {...restColumnProps}
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
           {tableSettingColumn.hasSortKey() && query &&

package/src/table/model-column.jsx

@@ -0,0 +1,64 @@
+import {Text, View} from "react-native"
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import Column from "./components/column"
+import ColumnContent from "./column-content"
+import columnIdentifier from "./column-identifier.mjs"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    columnIndex: PropTypes.number.isRequired,
+    even: PropTypes.bool.isRequired,
+    isSmallScreen: PropTypes.bool.isRequired,
+    model: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired,
+    width: PropTypes.number.isRequired
+  })
+
+  render() {
+    const {column, columnIndex, even, isSmallScreen, model, table, width} = this.props
+    const columnProps = table.columnProps(column)
+    const {style, ...restColumnProps} = columnProps
+    const actualStyle = Object.assign(
+      table.styleForColumn({column, columnIndex, even, style: {width}}),
+      style
+    )
+
+    return (
+      <Column
+        dataSet={{
+          class: classNames(this.columnClassNamesForColumn(column)),
+          identifier: columnIdentifier(column)
+        }}
+        style={actualStyle}
+        {...restColumnProps}
+      >
+        {isSmallScreen &&
+          <View dataSet={{class: "table--column-label"}}>
+            <Text>
+              {table.headerLabelForColumn(column)}
+            </Text>
+          </View>
+        }
+        <View dataSet={{class: "table--column-value"}}>
+          {new ColumnContent({column, model, table}).content()}
+        </View>
+      </Column>
+    )
+  }
+
+  columnClassNamesForColumn(column) {
+    const classNames = ["table--column"]
+
+    if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
+    if (column.columnProps && column.columnProps.className) classNames.push(column.columnProps.className)
+
+    return classNames
+  }
+}))

package/src/table/model-row.jsx

@@ -1,14 +1,13 @@
-import {Pressable, Text, View} from "react-native"
+import {Pressable} from "react-native"
 import BaseComponent from "../base-component"
-import classNames from "classnames"
 import Column from "./components/column"
-import ColumnContent from "./column-content"
 import columnIdentifier from "./column-identifier.mjs"
 import columnVisible from "./column-visible.mjs"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import * as inflection from "inflection"
 import modelCallbackArgs from "./model-callback-args.mjs"
 import Link from "../link"
+import ModelColumn from "./model-column"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import Row from "./components/row"
@@ -86,39 +85,21 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     )
   }
 
-  columnClassNamesForColumn(column) {
-    const classNames = ["table--column"]
-
-    if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
-    if (column.columnProps && column.columnProps.className) classNames.push(column.columnProps.className)
-
-    return classNames
-  }
-
   columnsContentFromColumns(model, even) {
     const {isSmallScreen, table, preparedColumns} = this.p
 
     return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
-      <Column
-        dataSet={{
-          class: classNames(this.columnClassNamesForColumn(column)),
-          identifier: columnIdentifier(column)
-        }}
+      <ModelColumn
+        column={column}
+        columnIndex={columnIndex}
+        even={even}
+        isSmallScreen={isSmallScreen}
         key={columnIdentifier(column)}
-        style={table.styleForColumn({column, columnIndex, even, style: {width: `${width}%`}})}
-        {...table.columnProps(column)}
-      >
-        {isSmallScreen &&
-          <View dataSet={{class: "table--column-label"}}>
-            <Text>
-              {table.headerLabelForColumn(column)}
-            </Text>
-          </View>
-        }
-        <View dataSet={{class: "table--column-value"}}>
-          {new ColumnContent({column, model, table}).content()}
-        </View>
-      </Column>
+        model={model}
+        table={table}
+        tableSettingColumn={tableSettingColumn}
+        width={width}
+      />
     )
   }
 

package/src/table/settings/column-row.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {memo, useEffect, useRef} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import {View} from "react-native"
+import {Text, View} from "react-native"
 
 export default memo(shapeComponent(class ColumnRow extends BaseComponent {
   static propTypes = propTypesExact({
@@ -43,7 +43,9 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
             type="checkbox"
             {...checkboxProps}
           />
-          {table.headerLabelForColumn(column)}
+          <Text>
+            {table.headerLabelForColumn(column)}
+          </Text>
         </label>
       </View>
     )

package/src/table/settings/index.jsx

@@ -16,10 +16,6 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
 
   setup() {
     this.rootRef = useRef()
-
-    this.useStates({
-      fixedTableLayout: this.tableSetting().fixedTableLayout()
-    })
   }
 
   tableSetting = () => this.p.table.s.tableSetting

package/src/table/table.jsx

@@ -1,6 +1,5 @@
-import "./style"
 import {digg, digs} from "diggerize"
-import {Pressable, View} from "react-native"
+import {Pressable, StyleSheet, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
@@ -28,15 +27,25 @@ import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
 import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useModelEvent from "../use-model-event.js"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
 import Widths from "./widths"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
+const styleSheet = StyleSheet.create({
+  flatList: {
+    border: "1px solid #dbdbdb",
+    borderRadius: 5,
+    overflowX: "auto"
+  }
+})
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
     card: true,
+    currentUser: null,
     destroyEnabled: true,
     filterCard: true,
     filterSubmitButton: true,
@@ -85,14 +94,18 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     workplace: PropTypes.bool.isRequired
   }
 
+  tableSetting = null
+
   setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table"})
     const {breakpoint} = useBreakpoint()
     const queryParams = useQueryParams()
 
     this.setInstance({
       breakpoint,
       filterFormRef: useRef(),
-      isSmallScreen: breakpoint == "xs" || breakpoint == "sm"
+      isSmallScreen: breakpoint == "xs" || breakpoint == "sm",
+      t
     })
 
     const collectionKey = digg(this.p.modelClass.modelClassData(), "collectionKey")
@@ -106,7 +119,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
-      flatListWidth: undefined,
+      currentWorkplaceCount: null,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -119,17 +132,28 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
+      tableSettingLoaded: false,
       tableSettingFullCacheKey: undefined,
+      width: undefined,
       widths: null
     })
 
     useMemo(() => {
-      this.loadTableSetting()
-
       if (this.props.workplace) {
-        this.loadCurrentWorkplace()
+        this.loadCurrentWorkplace().then(() => {
+          this.loadCurrentWorkplaceCount()
+        })
+      }
+    }, [this.p.currentUser?.id()])
+
+    useMemo(() => {
+      if (!this.tt.tableSetting && this.s.width) {
+        this.loadTableSetting()
       }
-    }, [])
+    }, [this.p.currentUser?.id(), this.s.width])
+
+    useModelEvent(this.s.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.s.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
 
     let collectionReady = true
     let select
@@ -169,18 +193,31 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({currentWorkplace})
   }
 
+  async loadCurrentWorkplaceCount() {
+    const WorkplaceLink = modelClassRequire("WorkplaceLink")
+    const currentWorkplaceCount = await WorkplaceLink
+      .ransack({
+        resource_type_eq: this.p.modelClass.modelClassData().name,
+        workplace_id_eq: this.s.currentWorkplace.id()
+      })
+      .count()
+
+    this.setState({currentWorkplaceCount})
+  }
+
   async loadTableSetting() {
     this.tableSettings = new TableSettings({table: this})
 
     const tableSetting = await this.tableSettings.loadExistingOrCreateTableSettings()
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
-    const {flatListWidth} = this.s
-    const widths = new Widths({columns, flatListWidth, table: this})
+    const {width} = this.s
+    const widths = new Widths({columns, table: this, width})
 
     this.setState({
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
+      tableSettingLoaded: true,
       tableSettingFullCacheKey: tableSetting.fullCacheKey(),
       widths
     })
@@ -237,7 +274,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()} style={this.props.styles?.container}>
+      <View dataSet={{class: this.className()}} onLayout={this.tt.onContainerLayout} style={this.props.styles?.container}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -254,7 +291,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()
         }
-      </div>
+      </View>
     )
   }
 
@@ -354,10 +391,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         extraData={this.s.lastUpdate}
         keyExtractor={this.tt.keyExtrator}
         ListHeaderComponent={this.tt.listHeaderComponent}
-        onLayout={this.tt.onFlatListLayout}
         renderItem={this.tt.renderItem}
         showsHorizontalScrollIndicator
-        style={{border: "1px solid #dbdbdb", borderRadius: 5, overflowX: "auto"}}
+        style={styleSheet.flatList}
         {...restProps}
       />
     )
@@ -394,12 +430,36 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  onFlatListLayout = (e) => {
+  onContainerLayout = (e) => {
     const {width} = e.nativeEvent.layout
     const {widths} = this.s
 
-    this.setState({flatListWidth: width})
-    widths.flatListWidth = width
+    this.setState({width})
+    if (widths) widths.tableWidth = width
+  }
+
+  onLinksCreated = ({args}) => {
+    const modelClassName = this.p.modelClass.modelClassData().name
+
+    if (args.created[modelClassName]) {
+      const amountCreated = args.created[modelClassName].length
+
+      this.setState((prevState) => ({
+        currentWorkplaceCount: prevState.currentWorkplaceCount + amountCreated
+      }))
+    }
+  }
+
+  onLinksDestroyed = ({args}) => {
+    const modelClassName = this.p.modelClass.modelClassData().name
+
+    if (args.destroyed[modelClassName]) {
+      const amountDestroyed = args.destroyed[modelClassName].length
+
+      this.setState((prevState) => ({
+        currentWorkplaceCount: prevState.currentWorkplaceCount - amountDestroyed
+      }))
+    }
   }
 
   keyExtrator = (model) => model.id()
@@ -425,7 +485,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
             className="btn btn-primary live-table--submit-filter-button"
             type="submit"
             style={{marginTop: "8px"}}
-            value={filterSubmitLabel || I18n.t("js.api_maker_bootstrap.live_table.filter")}
+            value={filterSubmitLabel || this.t(".filter", {defaultValue: "Filter"})}
           />
         }
       </form>
@@ -449,16 +509,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   listHeaderComponent = () => {
-    const {workplace} = this.p
-    const {currentWorkplace} = this.s
     const {query} = digs(this.collection, "query")
 
     return (
       <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
-        {workplace && currentWorkplace &&
+        {this.p.workplace && this.s.currentWorkplace &&
           <Header style={this.styleForHeader({style: {width: 41}})}>
             <WorkerPluginsCheckAllCheckbox
-              currentWorkplace={currentWorkplace}
+              currentWorkplace={this.s.currentWorkplace}
               query={query}
               style={{marginHorizontal: "auto"}}
             />
@@ -473,6 +531,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   renderItem = ({index, item: model}) => {
     const {preparedColumns, tableSettingFullCacheKey} = this.s
 
+    if (!this.s.tableSettingLoaded) {
+      return (
+        <View>
+          <Text>
+            Loading...
+          </Text>
+        </View>
+      )
+    }
+
     return (
       <ModelRow
         cacheKey={model.cacheKey()}
@@ -492,7 +560,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const defaultStyle = {
       justifyContent: "center",
       padding: 8,
-      backgroundColor: even ? "#f5f5f5" : undefined
+      backgroundColor: even ? "#f5f5f5" : undefined,
+      overflow: "hidden"
     }
 
     if (type == "actions") {
@@ -576,24 +645,31 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     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"
+    const defaultValue = "Showing %{from} to %{to} out of %{total_count} total."
     let from = ((currentPage - 1) * perPage) + 1
 
     if (to === 0) from = 0
 
     return (
-      <View style={{flexDirection: "row", justifyContent: "space-between", marginTop: "10px"}}>
-        <div className="showing-counts">
-          {I18n.t("js.api_maker.table.showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
-        </div>
-        <div>
+      <View style={{flexDirection: "row", justifyContent: "space-between", marginTop: 10}}>
+        <View dataSet={{class: "showing-counts"}} style={{flexDirection: "row"}}>
+          <Text>
+            {this.t(".showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
+          </Text>
+          {this.p.workplace && this.s.currentWorkplaceCount !== null &&
+            <Text style={{marginLeft: 3}}>
+              {this.t(".x_selected", {defaultValue: "%{selected} selected.", selected: this.s.currentWorkplaceCount})}
+            </Text>
+          }
+        </View>
+        <View>
           <Select
             className="per-page-select"
             defaultValue={perPage}
             onChange={this.tt.onPerPageChanged}
             options={paginationOptions}
           />
-        </div>
+        </View>
       </View>
     )
   }
@@ -611,8 +687,15 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   columnProps(column) {
     const props = {}
 
-    if (column.textCenter) props["data-text-align"] = "center"
-    if (column.textRight) props["data-text-align"] = "right"
+    if (column.textCenter) {
+      props.style ||= {}
+      props.style.textAlign = "center"
+    }
+
+    if (column.textRight) {
+      props.style ||= {}
+      props.style.textAlign = "right"
+    }
 
     return props
   }
@@ -639,7 +722,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     />
   )
 
-  headerClassNameForColumn (column) {
+  headerClassNameForColumn(column) {
     const classNames = ["live-table-header"]
 
     if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
@@ -648,7 +731,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return classNames
   }
 
-  headerLabelForColumn (column) {
+  headerLabelForColumn(column) {
     const {modelClass} = this.p
 
     if ("label" in column) {

package/src/table/widths.mjs

@@ -1,28 +1,28 @@
 import {digg} from "diggerize"
 
 export default class TableWidths {
-  constructor({columns, flatListWidth, table}) {
+  constructor({columns, table, width}) {
     this.columns = columns
-    this.flatListWidth = flatListWidth
+    this.tableWidth = width
     this.table = table
     this.setWidths()
   }
 
   setWidths() {
-    let widthLeft = 100.0
-
     this.columnsWidths = {}
 
+    let widthLeft = this.tableWidth
     const updateData = []
 
     // Set widths that are defined
     for (const columnIndex in this.columns) {
-      const column = this.columns[columnIndex].tableSettingColumn
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
 
-      if (column.hasWidth()) {
-        this.columns[columnIndex].width = column.width()
+      if (tableSettingColumn.hasWidth()) {
+        column.width = tableSettingColumn.width()
 
-        widthLeft -= column.width()
+        widthLeft -= tableSettingColumn.width()
       }
     }
 
@@ -36,21 +36,26 @@ export default class TableWidths {
 
     // Set widths of columns without
     for (const columnIndex in this.columns) {
-      const column = this.columns[columnIndex].tableSettingColumn
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
+
+      if (!tableSettingColumn.hasWidth()) {
+        let newWidth = widthLeft / amountOfColumns
 
-      if (!column.hasWidth()) {
-        const newWidth = widthLeft / amountOfColumns
+        if (newWidth < 200) newWidth = 200
 
-        this.columns[columnIndex].width = newWidth
+        column.width = newWidth
 
         updateData << {
-          id: column.id(),
+          id: tableSettingColumn.id(),
           width: newWidth
         }
       }
     }
 
-    // FIXME: Should update the columns on the backend if anything changed
+    if (updateData.length > 0) {
+      // FIXME: Should update the columns on the backend if anything changed
+    }
   }
 
   getWidthOfColumn(identifier) {
@@ -66,12 +71,8 @@ export default class TableWidths {
 
     if (!column) throw new Error(`No such column: ${identifier}`)
 
-    const widthPercent = (width / this.flatListWidth) * 100
-
-    column.width = widthPercent
+    column.width = width
 
     this.table.setState({lastUpdate: new Date()})
-
-    // FIXME: Should reduce / enlarge sibling columns to keep a 100% fit
   }
 }

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

@@ -1,15 +1,16 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
-import EventConnection from "../event-connection"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useMemo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useModelEvent from "../use-model-event.js"
 
 const Workplace = modelClassRequire("Workplace")
 
-export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
   static propTypes = PropTypesExact({
     currentWorkplace: PropTypes.object,
     model: PropTypes.object.isRequired,
@@ -25,6 +26,9 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
     useMemo(() => {
       this.loadCurrentLink()
     }, [])
+
+    useModelEvent(this.p.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.p.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
   }
 
   async loadCurrentLink() {
@@ -39,7 +43,7 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
   }
 
   render() {
-    const {className, currentWorkplace, model, style} = this.props
+    const {className, model, style} = this.props
     const {checked, linkLoaded} = this.state
 
     if (!linkLoaded) {
@@ -47,23 +51,15 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
     }
 
     return (
-      <>
-        {currentWorkplace &&
-          <>
-            <EventConnection event="workplace_links_created" model={currentWorkplace} onCall={this.onLinksCreated} />
-            <EventConnection event="workplace_links_destroyed" model={currentWorkplace} onCall={this.onLinksDestroyed} />
-          </>
-        }
-        <input
-          checked={checked}
-          className={classNames("api-maker--table--worker-plugins-checkbox", className)}
-          data-checked={checked}
-          data-model-id={model.id()}
-          onChange={this.tt.onCheckedChanged}
-          style={style}
-          type="checkbox"
-        />
-      </>
+      <input
+        checked={checked}
+        className={classNames("api-maker--table--worker-plugins-checkbox", className)}
+        data-checked={checked}
+        data-model-id={model.id()}
+        onChange={this.tt.onCheckedChanged}
+        style={style}
+        type="checkbox"
+      />
     )
   }
 

package/src/use-model-event.js

@@ -0,0 +1,60 @@
+import {useCallback, useLayoutEffect, useMemo} from "react"
+import debounceFunction from "debounce"
+import ModelEvents from "./model-events.mjs"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const apiMakerUseModelEvent = (model, event, onCallback, props) => {
+  const {active = true, debounce, onConnected, ...restProps} = props || {}
+
+  if (Object.keys(restProps).length > 0) {
+    throw new Error(`Unknown props given to apiMakerUseModelEvent: ${Object.keys(restProps).join(", ")}`)
+  }
+
+  const s = useShape({active, debounce, model, onCallback})
+
+  const debounceCallback = useMemo(() => {
+    if (typeof debounce == "number") {
+      return debounceFunction(s.p.onCallback, debounce)
+    } else {
+      return debounceFunction(s.p.onCallback)
+    }
+  }, [debounce])
+
+  s.updateMeta({debounceCallback})
+
+  const onCallbackCallback = useCallback((...args) => {
+    if (!s.p.active) {
+      return
+    }
+
+    if (s.p.debounce) {
+      s.m.debounceCallback(...args)
+    } else {
+      s.p.onCallback(...args)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    let connectEvent, onConnectedListener
+
+    if (model) {
+      connectEvent = ModelEvents.connect(model, event, onCallbackCallback)
+
+      if (onConnected) {
+        onConnectedListener = connectEvent.events.addListener("connected", onConnected)
+      }
+    }
+
+    return () => {
+      if (onConnectedListener) {
+        connectEvent.events.removeListener("connected", onConnected)
+      }
+
+      if (connectEvent) {
+        connectEvent.unsubscribe()
+      }
+    }
+  }, [model?.id()])
+}
+
+export default apiMakerUseModelEvent

package/src/table/style.scss

@@ -1,76 +0,0 @@
-@import "./variables";
-
-.api-maker--table {
-  &[data-fixed-table-layout="true"] {
-    table {
-      table-layout: fixed;
-    }
-  }
-
-  .live-table-header {
-    text-align: left;
-  }
-
-  @media (max-width: $sm-to) {
-    .live-table-column {
-      display: flex;
-      justify-content: space-between;
-
-      .live-table-column-value {
-        text-align: right;
-      }
-    }
-
-    .live-table-header-row {
-      margin-bottom: 15px;
-    }
-
-    .live-table-row {
-      + .live-table-row {
-        margin-top: 15px;
-      }
-    }
-  }
-
-  @media (min-width: $md-from) {
-    .actions-column {
-      display: flex;
-      align-items: center;
-      justify-content: end;
-    }
-
-    .live-table-header:not(:first-child),
-    .live-table-column:not(:first-child) {
-      padding-left: 10px;
-    }
-
-    .live-table-header:not(:last-child),
-    .live-table-column:not(:last-child) {
-      padding-right: 10px;
-    }
-
-    .live-table-column {
-      &[data-text-align="center"] {
-        .live-table-column-value {
-          text-align: center;
-        }
-      }
-
-      &[data-text-align="right"] {
-        .live-table-column-value {
-          text-align: right;
-        }
-      }
-    }
-
-    .live-table-header {
-      &[data-text-align="center"] {
-        text-align: center;
-      }
-
-      &[data-text-align="right"] {
-        text-align: right;
-      }
-    }
-  }
-}