@kaspernj/api-maker 1.0.277 → 1.0.279

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.277",
+  "version": "1.0.279",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/input.jsx

@@ -149,6 +149,12 @@ class ApiMakerBootstrapInput extends React.PureComponent {
       if (forwardedProp in this.props) moneyProps[forwardedProp] = this.props[forwardedProp]
     }
 
+    const forwardedInputProps = ["defaultValue"]
+
+    for (const forwardedInputProp of forwardedInputProps) {
+      if (forwardedInputProp in this.props.inputProps) moneyProps[forwardedInputProp] = this.props.inputProps[forwardedInputProp]
+    }
+
     return moneyProps
   }
 

package/src/table/model-row.jsx

@@ -14,7 +14,8 @@ export default class ApiMakerBootStrapLiveTableModelRow extends React.PureCompon
     cacheKey: PropTypes.string.isRequired,
     model: PropTypes.object.isRequired,
     liveTable: PropTypes.object.isRequired,
-    preparedColumns: PropTypes.array
+    preparedColumns: PropTypes.array,
+    tableSettingFullCacheKey: PropTypes.string.isRequired
   }
 
   render() {

package/src/table/settings/index.jsx

@@ -0,0 +1,117 @@
+import "./style"
+import columnIdentifier from "../column-identifier.mjs"
+import EventListener from "../../event-listener.jsx"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ColumnRow extends React.PureComponent {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  }
+
+  checked = this.props.tableSettingColumn.visible()
+  checkboxRef = React.createRef()
+
+  componentDidMount() {
+    this.updateCheckboxChecked()
+  }
+
+  componentDidUpdate() {
+    this.updateCheckboxChecked()
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.props
+    const checkboxProps = {}
+
+    if (tableSettingColumn.visible() === true) {
+      checkboxProps.checked = "checked"
+    } else if (tableSettingColumn.visible() === null) {
+      checkboxProps.indeterminate = "indeterminate"
+    }
+
+    return (
+      <div className="api-maker--table--settings--column-row">
+        <label>
+          <input
+            className="api-maker--table--setings--column-checkbox"
+            data-identifier={columnIdentifier(column)}
+            onChange={this.onCheckboxChange}
+            ref={this.checkboxRef}
+            type="checkbox"
+            {...checkboxProps}
+          />
+          {table.headerLabelForColumn(column)}
+        </label>
+      </div>
+    )
+  }
+
+  onCheckboxChange = () => {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checked = null
+    } else if (checked === null) {
+      this.checked = false
+    } else {
+      this.checked = true
+    }
+
+    this.updateCheckboxChecked()
+    this.updateTableSettingColumn()
+  }
+
+  updateCheckboxChecked() {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checkboxRef.current.checked = true
+      this.checkboxRef.current.indeterminate = undefined
+    } else if (checked === null) {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = true
+    } else {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = undefined
+    }
+  }
+
+  async updateTableSettingColumn() {
+    const {table, tableSettingColumn} = this.props
+
+    await tableSettingColumn.update({visible: this.checked})
+    table.updateSettingsFullCacheKey()
+  }
+}
+
+export default class ApiMakerTableSettings extends React.PureComponent {
+  static propTypes = {
+    onRequestClose: PropTypes.func.isRequired,
+    table: PropTypes.object.isRequired
+  }
+
+  rootRef = React.createRef()
+
+  render() {
+    const {table} = this.props
+    const {preparedColumns} = table.shape
+
+    return (
+      <div className="api-maker--table--settings" ref={this.rootRef}>
+        <EventListener event="mouseup" onCalled={this.onWindowMouseUp} target={window} />
+        {preparedColumns?.map(({column, tableSettingColumn}) =>
+          <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
+        )}
+      </div>
+    )
+  }
+
+  onWindowMouseUp = (e) => {
+    if (this.rootRef.current && !this.rootRef.current.contains(e.target)) {
+      this.props.onRequestClose()
+    }
+  }
+}

package/src/table/settings/style.scss

@@ -0,0 +1,8 @@
+.api-maker--table--settings {
+  position: absolute;
+  right: 0px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid black;
+  font-size: 12px;
+}

package/src/table/table.jsx

@@ -16,6 +16,7 @@ import PropTypes from "prop-types"
 import React from "react"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
+import Settings from "./settings"
 import Shape from "set-state-compare/src/shape"
 import SortLink from "../bootstrap/sort-link"
 import TableSettings from "./table-settings"
@@ -105,7 +106,8 @@ class ApiMakerTable extends React.PureComponent {
       result: undefined,
       showFilters: false,
       showNoRecordsAvailableContent: false,
-      showNoRecordsFoundContent: false
+      showNoRecordsFoundContent: false,
+      showSettings: false
     })
 
     this.loadTableSetting()
@@ -129,10 +131,14 @@ class ApiMakerTable extends React.PureComponent {
 
     this.shape.set({
       preparedColumns: columns,
-      preload: this.mergedPreloads(preload)
+      preload: this.mergedPreloads(preload),
+      tableSetting,
+      tableSettingFullCacheKey: tableSetting.fullCacheKey()
     })
   }
 
+  updateSettingsFullCacheKey = () => this.shape.set({tableSettingFullCacheKey: this.shape.tableSetting.fullCacheKey()})
+
   columnsAsArray = () => {
     if (typeof this.props.columns == "function") return this.props.columns()
 
@@ -384,7 +390,7 @@ class ApiMakerTable extends React.PureComponent {
 
   tableControls() {
     const {controls} = this.props
-    const {models, qParams, query, result} = digs(this.shape, "models", "qParams", "query", "result")
+    const {models, qParams, query, result, showSettings} = digs(this.shape, "models", "qParams", "query", "result", "showSettings")
 
     return (
       <>
@@ -392,13 +398,34 @@ class ApiMakerTable extends React.PureComponent {
         <a className="filter-button" href="#" onClick={digg(this, "onFilterClicked")}>
           <i className="fa fa-fw fa-magnifying-glass la la-fw la-search" />
         </a>
+        <span style={{position: "relative"}}>
+          {showSettings &&
+            <Settings onRequestClose={this.onRequestCloseSettings} table={this} />
+          }
+          <a className="settings-button" href="#" onClick={digg(this, "onSettingsClicked")}>
+            <i className="fa fa-fw fa-gear la la-fw la-gear" />
+          </a>
+        </span>
       </>
     )
   }
 
   tableContent () {
     const {breakPoint, workplace} = digs(this.props, "breakPoint", "workplace")
-    const {currentWorkplace, models, preparedColumns, query} = digs(this.shape, "currentWorkplace", "models", "preparedColumns", "query")
+    const {
+      currentWorkplace,
+      models,
+      preparedColumns,
+      query,
+      tableSettingFullCacheKey
+    } = digs(
+      this.shape,
+      "currentWorkplace",
+      "models",
+      "preparedColumns",
+      "query",
+      "tableSettingFullCacheKey"
+    )
     const ColumnInHeadComponent = this.columnInHeadComponent()
     const RowComponent = this.rowComponent()
 
@@ -436,6 +463,7 @@ class ApiMakerTable extends React.PureComponent {
               model={model}
               preparedColumns={preparedColumns}
               rowComponent={this.rowComponent()}
+              tableSettingFullCacheKey={tableSettingFullCacheKey}
             />
           )}
         </BodyComponent>
@@ -563,6 +591,16 @@ class ApiMakerTable extends React.PureComponent {
     this.submitFilter()
   }
 
+  onRequestCloseSettings = () => this.shape.set({showSettings: false})
+
+  onSettingsClicked = (e) => {
+    e.preventDefault()
+
+    const {showSettings} = digs(this.shape, "showSettings")
+
+    this.shape.set({showSettings: !showSettings})
+  }
+
   submitFilter = () => {
     const {filterFormRef} = digs(this, "filterFormRef")
     const filterForm = digg(filterFormRef, "current")