@kaspernj/api-maker 1.0.418 → 1.0.419

package/package.json

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

package/src/table/header-column.jsx

@@ -42,7 +42,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const actualStyle = Object.assign(
       {
         cursor: resizing ? "col-resize" : undefined,
-        width: `${width}%`
+        width
       },
       style
     )

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"
@@ -17,60 +16,6 @@ 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,

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/table.jsx

@@ -1,5 +1,5 @@
 import {digg, digs} from "diggerize"
-import {Pressable, Text, 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"
@@ -34,6 +34,13 @@ 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 = {
@@ -87,6 +94,8 @@ 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()
@@ -111,7 +120,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       columns: columnsAsArray,
       currentWorkplace: undefined,
       currentWorkplaceCount: null,
-      flatListWidth: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -124,13 +132,13 @@ 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().then(() => {
           this.loadCurrentWorkplaceCount()
@@ -138,6 +146,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       }
     }, [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)
 
@@ -196,13 +210,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     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
     })
@@ -259,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})}
@@ -276,7 +291,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()
         }
-      </div>
+      </View>
     )
   }
 
@@ -376,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}
       />
     )
@@ -416,12 +430,12 @@ 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}) => {
@@ -517,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()}
@@ -536,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") {

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,7 +1,6 @@
 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"