@kaspernj/api-maker 1.0.400 → 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-model.mjs

@@ -42,12 +42,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
   const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
   const cacheArgs = [modelId]
 
-  if (args.cacheArgs) {
-    cacheArgs.push(...args.cacheArgs)
-  }
-
-  s.updateMeta({args, modelId, modelVariableName, queryParams})
-
   const loadExistingModel = useCallback(async () => {
     let query
 
@@ -89,13 +83,37 @@ const useModel = (modelClassArg, argsArg = {}) => {
   }, [])
 
   const loadModel = useCallback(async () => {
-    if (s.props.newIfNoId && !s.m.modelId) {
+    if ("active" in s.props && !s.props.active) {
+      // Not active - don't do anything
+    } else if (s.props.newIfNoId && !s.m.modelId) {
       return await loadNewModel()
     } else if (!s.props.optional || s.m.modelId | s.m.args.query) {
       return await loadExistingModel()
     }
   }, [])
 
+  const onDestroyed = useCallback(({model}) => {
+    const forwardArgs = {model}
+
+    forwardArgs[s.m.modelVariableName] = model
+
+    s.p.onDestroyed(forwardArgs)
+  }, [])
+
+  const onSignedIn = useCallback(() => {
+    loadModel()
+  }, [])
+
+  const onSignedOut = useCallback(() => {
+    loadModel()
+  }, [])
+
+  if (args.cacheArgs) {
+    cacheArgs.push(...args.cacheArgs)
+  }
+
+  s.updateMeta({args, modelId, modelVariableName, queryParams})
+
   useMemo(
     () => { loadModel() },
     cacheArgs
@@ -127,14 +145,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [args.eventUpdated, s.s.model?.id()])
 
-  const onSignedIn = useCallback(() => {
-    loadModel()
-  }, [])
-
-  const onSignedOut = useCallback(() => {
-    loadModel()
-  }, [])
-
   useLayoutEffect(() => {
     Devise.events().addListener("onDeviseSignIn", onSignedIn)
     Devise.events().addListener("onDeviseSignOut", onSignedOut)
@@ -145,14 +155,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   })
 
-  const onDestroyed = useCallback(({model}) => {
-    const forwardArgs = {model}
-
-    forwardArgs[s.m.modelVariableName] = model
-
-    s.p.onDestroyed(forwardArgs)
-  }, [])
-
   useLayoutEffect(() => {
     let connectDestroyed
 

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