@kaspernj/api-maker 1.0.401 → 1.0.402

package/src/table/table.jsx

@@ -7,6 +7,8 @@ import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
 import {digg, digs} from "diggerize"
 import Filters from "./filters"
+import FlatList from "./components/flat-list"
+import Header from "./components/header"
 import HeaderColumn from "./header-column"
 import * as inflection from "inflection"
 import modelClassRequire from "../model-class-require.mjs"
@@ -15,6 +17,7 @@ import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
 import React, {memo, useMemo, useRef} from "react"
+import Row from "./components/row"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
 import Settings from "./settings"
@@ -24,6 +27,8 @@ import uniqunize from "uniqunize"
 import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
+import {View} from "react-native"
+import Widths from "./widths"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
@@ -85,7 +90,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     this.setInstance({
       breakpoint,
-      filterFormRef: useRef()
+      filterFormRef: useRef(),
+      isSmallScreen: breakpoint == "xs" || breakpoint == "sm"
     })
 
     const collectionKey = digg(this.p.modelClass.modelClassData(), "collectionKey")
@@ -99,8 +105,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
-      fixedTableLayout: undefined,
+      flatListWidth: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
+      lastUpdate: () => new Date(),
       preload: undefined,
       preparedColumns: undefined,
       queryName,
@@ -110,19 +117,22 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
-      tableSettingFullCacheKey: undefined
+      tableSettingFullCacheKey: undefined,
+      widths: null
     })
 
     useMemo(() => {
       this.loadTableSetting()
 
-      if (this.props.workplace) this.loadCurrentWorkplace()
+      if (this.props.workplace) {
+        this.loadCurrentWorkplace()
+      }
     }, [])
 
     let collectionReady = true
     let select
 
-    if (!this.state.preparedColumns) {
+    if (!this.s.preparedColumns) {
       collectionReady = false
     }
 
@@ -162,13 +172,15 @@ 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})
 
     this.setState({
-      fixedTableLayout: tableSetting.fixedTableLayout(),
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
-      tableSettingFullCacheKey: tableSetting.fullCacheKey()
+      tableSettingFullCacheKey: tableSetting.fullCacheKey(),
+      widths
     })
   }
 
@@ -223,7 +235,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()} data-fixed-table-layout={this.s.fixedTableLayout}>
+      <div className={this.className()}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -334,7 +346,18 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       }
     }
 
-    const TableComponent = this.responsiveComponent("table")
+    const flatList = (
+      <FlatList
+        data={models}
+        dataSet={{class: className}}
+        extraData={this.s.lastUpdate}
+        keyExtractor={this.tt.keyExtrator}
+        ListHeaderComponent={this.tt.listHeaderComponent}
+        onLayout={this.tt.onFlatListLayout}
+        renderItem={this.tt.renderItem}
+        {...restProps}
+      />
+    )
 
     return (
       <>
@@ -347,15 +370,11 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           this.filterForm()
         }
         {card &&
-          <Card className={classNames("live-table--table-card", "mb-4", className)} controls={this.tableControls()} header={headerContent} footer={this.tableFooter()} table={!this.isSmallScreen()} {...restProps}>
-            {this.tableContent()}
+          <Card className={classNames("live-table--table-card", "mb-4", className)} controls={this.tableControls()} header={headerContent} footer={this.tableFooter()} {...restProps}>
+            {flatList}
           </Card>
         }
-        {!card &&
-          <TableComponent className={className} {...restProps}>
-            {this.tableContent()}
-          </TableComponent>
-        }
+        {!card && flatList}
         {result && PaginationComponent &&
           <PaginationComponent result={result} />
         }
@@ -366,6 +385,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
+  onFlatListLayout = (e) => {
+    const {width} = e.nativeEvent.layout
+    const {widths} = this.s
+
+    this.setState({flatListWidth: width})
+    widths.flatListWidth = width
+  }
+
+  keyExtrator = (model) => model.id()
+
   filterForm = () => {
     const {filterFormRef, submitFilter, submitFilterDebounce} = this.tt
     const {filterContent, filterSubmitButton} = this.p
@@ -399,10 +428,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({showFilters: !this.state.showFilters})
   }
 
-  onFixedTableLayoutChanged = (fixedTableLayout) => {
-    this.setState({fixedTableLayout})
-  }
-
   onPerPageChanged = (e) => {
     const {queryName} = this.s
     const newPerPageValue = digg(e, "target", "value")
@@ -414,6 +439,45 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     Params.changeParams(paramsChange)
   }
 
+  listHeaderComponent = () => {
+    const {workplace} = this.p
+    const {currentWorkplace} = this.s
+    const {query} = digs(this.collection, "query")
+
+    return (
+      <Row dataSet={{class: "live-table-header-row"}}>
+        {workplace && currentWorkplace &&
+          <Header style={{width: 25}}>
+            <WorkerPluginsCheckAllCheckbox
+              currentWorkplace={currentWorkplace}
+              query={query}
+              style={{marginHorizontal: "auto"}}
+            />
+          </Header>
+        }
+        {this.headersContentFromColumns()}
+        <Header />
+      </Row>
+    )
+  }
+
+  renderItem = ({item: model}) => {
+    const {preparedColumns, tableSettingFullCacheKey} = this.s
+
+    return (
+      <ModelRow
+        cacheKey={model.cacheKey()}
+        columnWidths={this.columnWidths()}
+        isSmallScreen={this.tt.isSmallScreen}
+        key={model.id()}
+        liveTable={this}
+        model={model}
+        preparedColumns={preparedColumns}
+        tableSettingFullCacheKey={tableSettingFullCacheKey}
+      />
+    )
+  }
+
   tableControls() {
     const {controls} = this.props
     const {showSettings} = this.s
@@ -427,7 +491,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         </a>
         <span style={{position: "relative"}}>
           {showSettings &&
-            <Settings onFixedTableLayoutChanged={this.tt.onFixedTableLayoutChanged} onRequestClose={this.tt.onRequestCloseSettings} table={this} />
+            <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
             <i className="fa fa-fw fa-gear la la-fw la-gear" />
@@ -437,54 +501,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  tableContent () {
-    const {workplace} = this.p
-    const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = this.s
-    const {models, query} = digs(this.collection, "models", "query")
-    const ColumnInHeadComponent = this.columnInHeadComponent()
-    const RowComponent = this.rowComponent()
-
-    let BodyComponent, HeadComponent
-
-    if (this.isSmallScreen()) {
-      BodyComponent = "div"
-      HeadComponent = "div"
-    } else {
-      BodyComponent = "tbody"
-      HeadComponent = "thead"
-    }
-
-    return (
-      <>
-        <HeadComponent>
-          <RowComponent className="live-table-header-row">
-            {workplace && currentWorkplace &&
-              <ColumnInHeadComponent style={{width: 25, textAlign: "center"}}>
-                <WorkerPluginsCheckAllCheckbox currentWorkplace={currentWorkplace} query={query} />
-              </ColumnInHeadComponent>
-            }
-            {this.headersContentFromColumns()}
-            <ColumnInHeadComponent />
-          </RowComponent>
-        </HeadComponent>
-        <BodyComponent>
-          {models.map((model) =>
-            <ModelRow
-              cacheKey={model.cacheKey()}
-              columnComponent={this.columnComponent()}
-              key={model.id()}
-              liveTable={this}
-              model={model}
-              preparedColumns={preparedColumns}
-              rowComponent={this.rowComponent()}
-              tableSettingFullCacheKey={tableSettingFullCacheKey}
-            />
-          )}
-        </BodyComponent>
-      </>
-    )
-  }
-
   tableFooter() {
     const {result} = digs(this.collection, "result")
     const currentPage = result.currentPage()
@@ -497,7 +513,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     if (to === 0) from = 0
 
     return (
-      <div style={{display: "flex", justifyContent: "space-between", marginTop: "10px"}}>
+      <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>
@@ -509,15 +525,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
             options={paginationOptions}
           />
         </div>
-      </div>
+      </View>
     )
   }
 
   className() {
     const classNames = ["api-maker--table"]
 
-    if (this.props.className)
+    if (this.props.className) {
       classNames.push(this.props.className)
+    }
 
     return classNames.join(" ")
   }
@@ -531,24 +548,24 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return props
   }
 
-  isSmallScreen() {
-    if (this.breakpoint == "xs" || this.breakpoint == "sm") return true
+  columnWidths() {
+    const columnWidths = {}
 
-    return false
-  }
+    for (const column of this.s.preparedColumns) {
+      columnWidths[column.tableSettingColumn.identifier()] = column.width
+    }
 
-  columnComponent = () => this.responsiveComponent("td")
-  columnInHeadComponent = () => this.responsiveComponent("th")
-  responsiveComponent = (largeComponent) => this.isSmallScreen() ? "div" : largeComponent
-  rowComponent = () => this.responsiveComponent("tr")
+    return columnWidths
+  }
 
-  headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+  headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn, width}) => columnVisible(column, tableSettingColumn) &&
     <HeaderColumn
       column={column}
-      fixedTableLayout={this.s.fixedTableLayout}
       key={tableSettingColumn.identifier()}
       table={this}
       tableSettingColumn={tableSettingColumn}
+      width={width}
+      widths={this.s.widths}
     />
   )
 

package/src/table/widths.mjs

@@ -0,0 +1,77 @@
+import {digg} from "diggerize"
+
+export default class TableWidths {
+  constructor({columns, flatListWidth, table}) {
+    this.columns = columns
+    this.flatListWidth = flatListWidth
+    this.table = table
+    this.setWidths()
+  }
+
+  setWidths() {
+    let widthLeft = 100.0
+
+    this.columnsWidths = {}
+
+    const updateData = []
+
+    // Set widths that are defined
+    for (const columnIndex in this.columns) {
+      const column = this.columns[columnIndex].tableSettingColumn
+
+      if (column.hasWidth()) {
+        this.columns[columnIndex].width = column.width()
+
+        widthLeft -= column.width()
+      }
+    }
+
+    // Calculate how many columns are shown
+    const columnsWithoutWidth = this.columns.filter((column) => !column.tableSettingColumn.hasWidth())
+    let amountOfColumns = columnsWithoutWidth.length
+
+    amountOfColumns++ // Actions column
+
+    if (this.table.p.workplace) amountOfColumns++
+
+    // Set widths of columns without
+    for (const columnIndex in this.columns) {
+      const column = this.columns[columnIndex].tableSettingColumn
+
+      if (!column.hasWidth()) {
+        const newWidth = widthLeft / amountOfColumns
+
+        this.columns[columnIndex].width = newWidth
+
+        updateData << {
+          id: column.id(),
+          width: newWidth
+        }
+      }
+    }
+
+    // FIXME: Should update the columns on the backend if anything changed
+  }
+
+  getWidthOfColumn(identifier) {
+    const column = this.columns.find((column) => column.tableSettingColumn.identifier() == identifier)
+
+    if (!column) throw new Error(`No such column: ${identifier}`)
+
+    return digg(column, "width")
+  }
+
+  setWidthOfColumn({identifier, width}) {
+    const column = this.columns.find((column) => column.tableSettingColumn.identifier() == identifier)
+
+    if (!column) throw new Error(`No such column: ${identifier}`)
+
+    const widthPercent = (width / this.flatListWidth) * 100
+
+    column.width = widthPercent
+
+    this.table.setState({lastUpdate: new Date()})
+
+    // FIXME: Should reduce / enlarge sibling columns to keep a 100% fit
+  }
+}

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

@@ -2,7 +2,7 @@ import classNames from "classnames"
 import Collection from "../collection.mjs"
 import EventConnection from "../event-connection"
 import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
+import propTypesExact from "prop-types-exact"
 import React from "react"
 import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
 import {useEffect, useRef} from "react"
@@ -21,9 +21,10 @@ const Checkbox = (props) => {
 }
 
 export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.PureComponent {
-  static propTypes = PropTypesExact({
+  static propTypes = propTypesExact({
     currentWorkplace: PropTypes.object,
-    query: PropTypes.instanceOf(Collection)
+    query: PropTypes.instanceOf(Collection),
+    style: PropTypes.object
   })
 
   state = {
@@ -57,7 +58,7 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
   }
 
   render() {
-    const {className, currentWorkplace} = this.props
+    const {className, currentWorkplace, style} = this.props
     const {checked, indeterminate} = this.state
 
     return (
@@ -69,6 +70,7 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
           className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
           indeterminate={indeterminate}
           onChange={this.onCheckedChanged}
+          style={style}
         />
       </>
     )

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

@@ -12,7 +12,8 @@ const Workplace = modelClassRequire("Workplace")
 export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends ShapeComponent {
   static propTypes = PropTypesExact({
     currentWorkplace: PropTypes.object,
-    model: PropTypes.object.isRequired
+    model: PropTypes.object.isRequired,
+    style: PropTypes.object
   })
 
   setup() {
@@ -38,7 +39,7 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
   }
 
   render() {
-    const {className, currentWorkplace, model} = this.props
+    const {className, currentWorkplace, model, style} = this.props
     const {checked, linkLoaded} = this.state
 
     if (!linkLoaded) {
@@ -58,7 +59,8 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
           className={classNames("api-maker--table--worker-plugins-checkbox", className)}
           data-checked={checked}
           data-model-id={model.id()}
-          onChange={this.onCheckedChanged}
+          onChange={this.tt.onCheckedChanged}
+          style={style}
           type="checkbox"
         />
       </>

package/src/use-screen-layout.mjs

@@ -18,7 +18,7 @@ const getWindowLayout = (width) => {
   }
 }
 
-const useScreenSize = () => {
+const useScreenLayout = () => {
   if (Platform.OS == "web") {
     const shared = useMemo(() => ({}))
 
@@ -46,4 +46,4 @@ const useScreenSize = () => {
   }
 }
 
-export default useScreenSize
+export default useScreenLayout

package/src/bootstrap/live-table/model-row.jsx

@@ -1,149 +0,0 @@
-import {digg, digs} from "diggerize"
-import * as inflection from "inflection"
-import Link from "../../link"
-import MoneyFormatter from "../../money-formatter"
-import PropTypes from "prop-types"
-
-export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
-  static propTypes = {
-    model: PropTypes.object.isRequired,
-    liveTable: PropTypes.object.isRequired
-  }
-
-  modelCallbackArgs = this._modelCallbackArgs()
-
-  render() {
-    const {model} = digs(this.props, "model")
-    const {modelClass} = digs(this.props.liveTable.props, "modelClass")
-    const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = digg(this, "props", "liveTable", "props")
-    const {columns} = digg(this, "props", "liveTable", "shape")
-
-    let editPath, viewPath
-
-    if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
-    if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
-
-    return (
-      <tr className={`${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
-        {columns && this.columnsContentFromColumns(model)}
-        {!columns && columnsContent && columnsContent(this.modelCallbackArgs)}
-        <td className="actions-column text-end text-nowrap text-right">
-          {actionsContent && actionsContent(this.modelCallbackArgs)}
-          {viewPath &&
-            <Link className="view-button" to={viewPath}>
-              <i className="fa fa-search la la-search" />
-            </Link>
-          }
-          {editPath &&
-            <Link className="edit-button" to={editPath}>
-              <i className="fa fa-edit la la-edit" />
-            </Link>
-          }
-          {destroyEnabled && model.can("destroy") &&
-            <a className="destroy-button" href="#" onClick={this.onDestroyClicked}>
-              <i className="fa fa-trash la la-trash" />
-            </a>
-          }
-        </td>
-      </tr>
-    )
-  }
-
-  columnClassNamesForColumn (column) {
-    const classNames = ["live-table-column"]
-
-    if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
-    if (column.columnProps && column.columnProps.className) classNames.push(column.columnProps.className)
-    if (column.textCenter) classNames.push("text-center")
-    if (column.textRight) classNames.push("text-end text-right")
-
-    return classNames
-  }
-
-  columnsContentFromColumns (model) {
-    const {columns} = digs(this.props.liveTable.shape, "columns")
-
-    return columns.map((column) =>
-      <td
-        className={classNames(this.columnClassNamesForColumn(column))}
-        data-identifier={this.props.liveTable.identifierForColumn(column)}
-        key={this.props.liveTable.identifierForColumn(column)}
-      >
-        {column.content && this.columnContentFromContentArg(column, model)}
-        {!column.content && column.attribute && this.columnsContentFromAttributeAndPath(column, model)}
-      </td>
-    )
-  }
-
-  columnContentFromContentArg (column, model) {
-    const value = column.content(this.modelCallbackArgs)
-
-    return this.presentColumnValue(value)
-  }
-
-  columnsContentFromAttributeAndPath (column, model) {
-    const {attribute} = digs(column, "attribute")
-    const currentModelClass = this.props.modelClass
-    const path = column.path || []
-
-    if (path.length > 0) throw new Error("'path' support not implemented")
-
-    if (!(attribute in model)) throw new Error(`${currentModelClass.modelName().name} doesn't respond to ${attribute}`)
-
-    const value = model[attribute]()
-
-    return this.presentColumnValue(value)
-  }
-
-  _modelCallbackArgs () {
-    const {model} = digs(this.props, "model")
-    const modelArgName = inflection.camelize(this.props.liveTable.props.modelClass.modelClassData().name, true)
-    const modelCallbackArgs = {}
-
-    modelCallbackArgs[modelArgName] = model
-
-    return modelCallbackArgs
-  }
-
-  onDestroyClicked = async (e) => {
-    e.preventDefault()
-
-    const {destroyMessage} = digg(this, "props", "liveTable", "props")
-    const {model} = digs(this.props, "model")
-
-    if (!confirm(I18n.t("js.shared.are_you_sure"))) {
-      return
-    }
-
-    try {
-      await model.destroy()
-
-      if (destroyMessage) {
-        FlashMessage.success(destroyMessage)
-      }
-    } catch (error) {
-      FlashMessage.errorResponse(error)
-    }
-  }
-
-  presentColumnValue (value) {
-    if (value instanceof Date) {
-      return I18n.l("time.formats.default", value)
-    } else if (MoneyFormatter.isMoney(value)) {
-      return MoneyFormatter.format(value)
-    } else if (typeof value == "boolean") {
-      if (value) {
-        return I18n.t("js.shared.yes")
-      }
-
-      return I18n.t("js.shared.no")
-    } else if (Array.isArray(value)) {
-      return value
-        .map((valuePart) => this.presentColumnValue(valuePart))
-        .filter((valuePart) => Boolean(valuePart))
-        .join(", ")
-    }
-
-    return value
-  }
-}