@kaspernj/api-maker 1.0.417 → 1.0.418

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.417",
+  "version": "1.0.418",
   "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: `${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-row.jsx

@@ -17,6 +17,60 @@ import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
+const ModelColumn = 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: `${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
+  }
+}))
+
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
@@ -86,39 +140,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/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, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
@@ -28,6 +27,8 @@ 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"
 
@@ -37,6 +38,7 @@ const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
     card: true,
+    currentUser: null,
     destroyEnabled: true,
     filterCard: true,
     filterSubmitButton: true,
@@ -86,13 +88,15 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   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,6 +110,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
+      currentWorkplaceCount: null,
       flatListWidth: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
@@ -127,9 +132,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       this.loadTableSetting()
 
       if (this.props.workplace) {
-        this.loadCurrentWorkplace()
+        this.loadCurrentWorkplace().then(() => {
+          this.loadCurrentWorkplaceCount()
+        })
       }
-    }, [])
+    }, [this.p.currentUser?.id()])
+
+    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,6 +179,18 @@ 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})
 
@@ -402,6 +424,30 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     widths.flatListWidth = 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()
 
   filterForm = () => {
@@ -425,7 +471,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 +495,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"}}
             />
@@ -576,24 +620,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 +662,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 +697,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 +706,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/worker-plugins-checkbox.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
 import EventConnection from "../event-connection"
@@ -5,11 +6,12 @@ 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 +27,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 +44,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 +52,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;
-      }
-    }
-  }
-}