@kaspernj/api-maker 1.0.373 → 1.0.375

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.373",
+  "version": "1.0.375",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.42",
+    "set-state-compare": "^1.0.45",
     "spark-md5": "^3.0.2",
     "stacktrace-parser": "^0.1.10",
     "strftime": ">= 0.10.0",

package/src/base-model/attribute.mjs

@@ -1,3 +1,4 @@
+import Column from "./column.mjs"
 import {digg} from "diggerize"
 
 export default class ApiMakerBaseModelAttribute {
@@ -5,10 +6,20 @@ export default class ApiMakerBaseModelAttribute {
     this.attributeData = attributeData
   }
 
-  isColumn() {
-    return Boolean(digg(this, "attributeData", "column"))
+  getColumn() {
+    if (!this.column) {
+      const columnData = digg(this, "attributeData", "column")
+
+      if (columnData) {
+        this.column = new Column(columnData)
+      }
+    }
+
+    return this.column
   }
 
+  isColumn = () => Boolean(digg(this, "attributeData", "column"))
+
   isSelectedByDefault() {
     const isSelectedByDefault = digg(this, "attributeData", "selected_by_default")
 
@@ -17,7 +28,5 @@ export default class ApiMakerBaseModelAttribute {
     return false
   }
 
-  name() {
-    return digg(this, "attributeData", "name")
-  }
+  name = () => digg(this, "attributeData", "name")
 }

package/src/base-model/column.mjs

@@ -0,0 +1,13 @@
+import {digg} from "diggerize"
+
+export default class ApiMakerBaseModelColumn {
+  constructor(columnData) {
+    if (!columnData) {
+      throw new Error("No column data was given")
+    }
+
+    this.columnData = columnData
+  }
+
+  getType = () => digg(this, "columnData", "type")
+}

package/src/bootstrap/attribute-row/index.jsx

@@ -1,11 +1,13 @@
 import classNames from "classnames"
 import {digg} from "diggerize"
+import * as inflection from "inflection"
 import MoneyFormatter from "../../money-formatter"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo, useMemo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
 
-export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends ShapeComponent {
   static defaultProps = {
     checkIfAttributeLoaded: false
   }
@@ -20,6 +22,13 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
     value: PropTypes.node
   }
 
+  setup() {
+    this.attribute = useMemo(
+      () => this.props.model?.constructor?.attributes()?.find((attribute) => attribute.name() == inflection.underscore(this.props.attribute)),
+      [this.props.attribute, this.props.model]
+    )
+  }
+
   render () {
     const {attribute, checkIfAttributeLoaded, children, className, identifier, label, model, value, ...restProps} = this.props
 
@@ -68,7 +77,11 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
   }
 
   valueContent(value) {
-    if (value instanceof Date) {
+    const columnType = this.attribute?.getColumn()?.getType()
+
+    if (columnType == "date") {
+      return I18n.l("date.formats.default", value)
+    } 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"})
@@ -80,4 +93,4 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
       return value
     }
   }
-}
+}))

package/src/cable-connection-pool.mjs

@@ -1,6 +1,7 @@
 import CableSubscriptionPool from "./cable-subscription-pool.mjs"
 import CableSubscription from "./cable-subscription.mjs"
 import {dig} from "diggerize"
+import RunLast from "./run-last.mjs"
 
 const shared = {}
 
@@ -96,7 +97,7 @@ export default class ApiMakerCableConnectionPool {
       currentSubscription[value].push(subscription)
     }
 
-    this.scheduleConnectUpcoming()
+    this.scheduleConnectUpcomingRunLast.queue()
 
     return subscription
   }
@@ -122,10 +123,5 @@ export default class ApiMakerCableConnectionPool {
     this.cableSubscriptionPools.push(cableSubscriptionPool)
   }
 
-  scheduleConnectUpcoming () {
-    if (this.scheduleConnectUpcomingTimeout)
-      clearTimeout(this.scheduleConnectUpcomingTimeout)
-
-    this.scheduleConnectUpcomingTimeout = setTimeout(this.connectUpcoming, 0)
-  }
+  scheduleConnectUpcomingRunLast = new RunLast(this.connectUpcoming)
 }

package/src/commands-pool.mjs

@@ -6,6 +6,7 @@ import Deserializer from "./deserializer.mjs"
 import {dig, digg} from "diggerize"
 import events from "./events.mjs"
 import FormDataObjectizer from "form-data-objectizer"
+import RunLast from "./run-last.mjs"
 import Serializer from "./serializer.mjs"
 import SessionStatusUpdater from "./session-status-updater.mjs"
 import ValidationError from "./validation-error.mjs"
@@ -26,9 +27,9 @@ export default class ApiMakerCommandsPool {
     const promiseResult = pool.addCommand(data)
 
     if (args.instant) {
-      pool.flush()
+      pool.flushRunLast.run()
     } else {
-      pool.setFlushTimeout()
+      pool.flushRunLast.queue()
     }
 
     return promiseResult
@@ -115,13 +116,11 @@ export default class ApiMakerCommandsPool {
     throw new Error("Couldnt successfully execute request")
   }
 
-  async flush() {
+  flush = async () => {
     if (this.commandsCount() == 0) {
       return
     }
 
-    this.clearTimeout()
-
     const currentPool = this.pool
     const currentPoolData = this.poolData
 
@@ -197,12 +196,6 @@ export default class ApiMakerCommandsPool {
     commandData.reject(error)
   }
 
-  clearTimeout() {
-    if (this.flushTimeout) {
-      clearTimeout(this.flushTimeout)
-    }
-  }
-
   isActive() {
     if (this.commandsCount() > 0) {
       return true
@@ -215,24 +208,5 @@ export default class ApiMakerCommandsPool {
     return false
   }
 
-  // Try to batch calls to backend while waiting for the event-queue-call to clear any other jobs before the request and reset on every flush call
-  // If only waiting a single time, then other event-queue-jobs might be before us and queue other jobs that might queue calls to the backend
-  setFlushTimeout() {
-    this.flushTriggerCount = 0
-    this.clearTimeout()
-    this.flushTrigger()
-  }
-
-  flushTrigger = () => {
-    if (this.flushTriggerCount >= 10) {
-      this.flush()
-    } else {
-      this.flushTriggerCount++
-      this.flushTriggerQueue()
-    }
-  }
-
-  flushTriggerQueue() {
-    this.flushTimeout = setTimeout(this.flushTrigger, 0)
-  }
+  flushRunLast = new RunLast(this.flush)
 }

package/src/run-last.mjs

@@ -0,0 +1,39 @@
+export default class RunLast {
+  constructor(callback) {
+    if (!callback) throw new Error("Empty callback given")
+
+    this.callback = callback
+  }
+
+  // Try to batch calls to backend while waiting for the event-queue-call to clear any other jobs before the request and reset on every flush call
+  // If only waiting a single time, then other event-queue-jobs might be before us and queue other jobs that might queue calls to the backend
+  queue() {
+    this.flushTriggerCount = 0
+    this.clearTimeout()
+    this.flushTrigger()
+  }
+
+  flushTrigger = () => {
+    if (this.flushTriggerCount >= 10) {
+      this.run()
+    } else {
+      this.flushTriggerCount++
+      this.flushTriggerQueue()
+    }
+  }
+
+  flushTriggerQueue() {
+    this.flushTimeout = setTimeout(this.flushTrigger, 0)
+  }
+
+  clearTimeout() {
+    if (this.flushTimeout) {
+      clearTimeout(this.flushTimeout)
+    }
+  }
+
+  run() {
+    clearTimeout(this.flushTimeout)
+    this.callback()
+  }
+}

package/src/table/filters/attribute-element.jsx

@@ -0,0 +1,42 @@
+import Attribute from "../../base-model/attribute"
+import {digg, digs} from "diggerize"
+import * as inflection from "inflection"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class AttributeElement extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.bool.isRequired,
+    attribute: PropTypes.instanceOf(Attribute).isRequired,
+    currentModelClass: PropTypes.func.isRequired,
+    fikter: PropTypes.object,
+    onClick: PropTypes.func.isRequired
+  })
+
+  render() {
+    const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <div
+        className="attribute-element"
+        data-attribute-name={attribute.name()}
+        data-model-class={currentModelClass.modelClassData().name}
+        onClick={digg(this, "onAttributeClicked")}
+        style={style}
+      >
+        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
+      </div>
+    )
+  }
+
+  onAttributeClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({attribute: digg(this, "props", "attribute")})
+  }
+}))

package/src/table/filters/filter-form.jsx

@@ -1,116 +1,17 @@
-import Attribute from "../../base-model/attribute"
+import AttributeElement from "./attribute-element"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import Input from "../../inputs/input"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
-import Reflection from "../../base-model/reflection"
+import {memo, useMemo, useRef} from "react"
+import ReflectionElement from "./reflection-element"
+import ScopeElement from "./scope-element"
 import Select from "../../inputs/select"
 import Services from "../../services.mjs"
-import Shape from "set-state-compare/src/shape"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
-class AttributeElement extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.bool.isRequired,
-    attribute: PropTypes.instanceOf(Attribute).isRequired,
-    currentModelClass: PropTypes.func.isRequired,
-    fikter: PropTypes.object,
-    onClick: PropTypes.func.isRequired
-  })
-
-  render() {
-    const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
-    const style = {}
-
-    if (active) style.fontWeight = "bold"
-
-    return (
-      <div
-        className="attribute-element"
-        data-attribute-name={attribute.name()}
-        data-model-class={currentModelClass.modelClassData().name}
-        onClick={digg(this, "onAttributeClicked")}
-        style={style}
-      >
-        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
-      </div>
-    )
-  }
-
-  onAttributeClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onClick({attribute: digg(this, "props", "attribute")})
-  }
-}
-
-class ReflectionElement extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    currentModelClass: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired,
-    reflection: PropTypes.instanceOf(Reflection).isRequired
-  })
-
-  render() {
-    const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
-
-    return (
-      <div
-        className="reflection-element"
-        data-model-class={currentModelClass.modelClassData().name}
-        data-reflection-name={reflection.name()}
-        onClick={digg(this, "onReflectionClicked")}
-      >
-        {currentModelClass.humanAttributeName(reflection.name())}
-      </div>
-    )
-  }
-
-  onReflectionClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onClick({reflection: digg(this, "props", "reflection")})
-  }
-}
-
-class ScopeElement extends React.PureComponent {
-  static defaultProps = {
-    active: false
-  }
-
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    scope: PropTypes.object.isRequired
-  }
-
-  render() {
-    const {active, scope} = this.props
-    const style = {}
-
-    if (active) style.fontWeight = "bold"
-
-    return (
-      <div
-        className="scope-element"
-        key={scope.name()}
-        onClick={digg(this, "onScopeClicked")}
-        style={style}
-      >
-        {scope.name()}
-      </div>
-    )
-  }
-
-  onScopeClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onScopeClicked({scope: this.props.scope})
-  }
-}
-
-
-export default class ApiMakerTableFiltersFilterForm extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends ShapeComponent {
   static propTypes = PropTypesExact({
     filter: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -118,18 +19,22 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
     querySearchName: PropTypes.string.isRequired
   })
 
-  shape = new Shape(this, {
-    attribute: this.currentModelClassFromPath(this.props.filter.p || []).ransackableAttributes().find((attribute) => attribute.name() == this.props.filter.a),
-    path: this.props.filter.p || [],
-    predicate: undefined,
-    predicates: undefined,
-    scope: this.props.filter.sc,
-    value: this.props.filter.v
-  })
-  valueInputRef = React.createRef()
+  setup() {
+    this.useStates({
+      attribute: () => this.currentModelClassFromPath(this.props.filter.p || [])
+        .ransackableAttributes()
+        .find((attribute) => attribute.name() == this.props.filter.a),
+      path: this.props.filter.p || [],
+      predicate: undefined,
+      predicates: undefined,
+      scope: this.props.filter.sc,
+      value: this.props.filter.v
+    })
+    this.valueInputRef = useRef()
 
-  componentDidMount() {
-    this.loadRansackPredicates()
+    useMemo(() => {
+      this.loadRansackPredicates()
+    }, [])
   }
 
   async loadRansackPredicates() {
@@ -141,7 +46,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
       currentPredicate = predicates.find((predicate) => predicate.name == this.props.filter.pre)
     }
 
-    this.shape.set({
+    this.setState({
       predicate: currentPredicate,
       predicates
     })
@@ -150,7 +55,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   render() {
     const {valueInputRef} = digs(this, "valueInputRef")
     const currentModelClass = this.currentModelClass()
-    const {attribute, predicate, predicates, scope, value} = digs(this.shape, "attribute", "predicate", "scope", "predicates", "value")
+    const {attribute, predicate, predicates, scope, value} = digs(this.state, "attribute", "predicate", "scope", "predicates", "value")
     let submitEnabled = false
 
     if (attribute && predicate) {
@@ -188,7 +93,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
             <div>
               {this.sortedByName(currentModelClass.ransackableAttributes(), currentModelClass).map((attribute) =>
                 <AttributeElement
-                  active={attribute.name() == this.shape.attribute?.name()}
+                  active={attribute.name() == this.state.attribute?.name()}
                   attribute={attribute}
                   currentModelClass={currentModelClass}
                   key={attribute.name()}
@@ -197,7 +102,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
               )}
               {currentModelClass.ransackableScopes().map((scope) =>
                 <ScopeElement
-                  active={scope.name() == this.shape.scope?.name()}
+                  active={scope.name() == this.state.scope?.name()}
                   key={scope.name()}
                   scope={scope}
                   onScopeClicked={digg(this, "onScopeClicked")}
@@ -205,7 +110,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
               )}
             </div>
             <div>
-              {predicates && !this.shape.scope &&
+              {predicates && !this.state.scope &&
                 <Select
                   className="predicate-select"
                   defaultValue={predicate?.name}
@@ -232,7 +137,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   currentModelClass() {
-    const {path} = digs(this.shape, "path")
+    const {path} = digs(this.state, "path")
 
     return this.currentModelClassFromPath(path)
   }
@@ -259,7 +164,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
 
   currentPathParts() {
     const {modelClass} = digs(this.props, "modelClass")
-    const {path} = digs(this.shape, "path")
+    const {path} = digs(this.state, "path")
     const result = []
     let currentModelClass = modelClass
 
@@ -284,7 +189,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   onAttributeClicked = ({attribute}) => {
-    this.shape.set({
+    this.setState({
       attribute,
       predicate: undefined,
       scope: undefined
@@ -293,15 +198,15 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
 
   onPredicateChanged = (e) => {
     const chosenPredicateName = digg(e, "target", "value")
-    const predicate = this.shape.predicates.find((predicate) => predicate.name == chosenPredicateName)
+    const predicate = this.state.predicates.find((predicate) => predicate.name == chosenPredicateName)
 
-    this.shape.set({predicate})
+    this.setState({predicate})
   }
 
   onReflectionClicked = ({reflection}) => {
-    const newPath = this.shape.path.concat([inflection.underscore(reflection.name())])
+    const newPath = this.state.path.concat([inflection.underscore(reflection.name())])
 
-    this.shape.set({
+    this.setState({
       attribute: undefined,
       path: newPath,
       predicate: undefined
@@ -311,7 +216,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   onScopeClicked = ({scope}) => {
-    this.shape.set({
+    this.setState({
       attribute: undefined,
       scope
     })
@@ -321,7 +226,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
     e.preventDefault()
 
     const {filter, querySearchName} = digs(this.props, "filter", "querySearchName")
-    const {attribute, path, predicate, scope} = digs(this.shape, "attribute", "path", "predicate", "scope")
+    const {attribute, path, predicate, scope} = digs(this.state, "attribute", "path", "predicate", "scope")
     const {filterIndex} = digs(filter, "filterIndex")
     const searchParams = Params.parse()[querySearchName] || {}
     const value = digg(this, "valueInputRef", "current", "value")
@@ -367,4 +272,4 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
       currentModelClass.humanAttributeName(a.name()).toLowerCase().localeCompare(currentModelClass.humanAttributeName(b.name()).toLowerCase())
     )
   }
-}
+}))

package/src/table/filters/filter.jsx

@@ -0,0 +1,55 @@
+import {digg, digs} from "diggerize"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    a: PropTypes.string,
+    filterIndex: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    onRemoveClicked: PropTypes.func.isRequired,
+    p: PropTypes.array.isRequired,
+    pre: PropTypes.string,
+    sc: PropTypes.string,
+    v: PropTypes.string.isRequired
+  })
+
+  render() {
+    const {p, v} = digs(this.props, "p", "v")
+    const {a, pre, sc} = this.props
+
+    return (
+      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
+        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
+          {p.length > 0 &&
+            `${p.join(".")}.`
+          }
+          {a} {sc} {pre} {v}
+        </span>
+        <span>
+          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
+            <i className="fa fa-remove la la-remove" />
+          </a>
+        </span>
+      </div>
+    )
+  }
+
+  onFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
+
+    this.props.onClick({a, filterIndex, p, pre, v})
+  }
+
+  onRemoveFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {filterIndex} = digs(this.props, "filterIndex")
+
+    this.props.onRemoveClicked({filterIndex})
+  }
+}))

package/src/table/filters/index.jsx

@@ -1,4 +1,5 @@
 import {digg, digs} from "diggerize"
+import Filter from "./filter"
 import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
@@ -8,55 +9,6 @@ import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-compon
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-const ApiMakerTableFilter = memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
-  static propTypes = {
-    a: PropTypes.string.isRequired,
-    filterIndex: PropTypes.number.isRequired,
-    onClick: PropTypes.func.isRequired,
-    onRemoveClicked: PropTypes.func.isRequired,
-    p: PropTypes.array.isRequired,
-    pre: PropTypes.string.isRequired,
-    v: PropTypes.string.isRequired
-  }
-
-  render() {
-    const {p, v} = digs(this.props, "p", "v")
-    const {a, pre, sc} = this.props
-
-    return (
-      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
-        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
-          {p.length > 0 &&
-            `${p.join(".")}.`
-          }
-          {a} {sc} {pre} {v}
-        </span>
-        <span>
-          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
-            <i className="fa fa-remove la la-remove" />
-          </a>
-        </span>
-      </div>
-    )
-  }
-
-  onFilterClicked = (e) => {
-    e.preventDefault()
-
-    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
-
-    this.props.onClick({a, filterIndex, p, pre, v})
-  }
-
-  onRemoveFilterClicked = (e) => {
-    e.preventDefault()
-
-    const {filterIndex} = digs(this.props, "filterIndex")
-
-    this.props.onRemoveClicked({filterIndex})
-  }
-}))
-
 export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
   static propTypes = {
     currentUser: PropTypes.object,
@@ -110,7 +62,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
           />
         }
         {currentFilters?.map((filterData, filterIndex) =>
-          <ApiMakerTableFilter
+          <Filter
             key={filterIndex}
             filterIndex={filterIndex}
             onClick={digg(this, "onFilterClicked")}

package/src/table/filters/reflection-element.jsx

@@ -0,0 +1,35 @@
+import {digg, digs} from "diggerize"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import Reflection from "../../base-model/reflection"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ReflectionElement extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    currentModelClass: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
+    reflection: PropTypes.instanceOf(Reflection).isRequired
+  })
+
+  render() {
+    const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
+
+    return (
+      <div
+        className="reflection-element"
+        data-model-class={currentModelClass.modelClassData().name}
+        data-reflection-name={reflection.name()}
+        onClick={digg(this, "onReflectionClicked")}
+      >
+        {currentModelClass.humanAttributeName(reflection.name())}
+      </div>
+    )
+  }
+
+  onReflectionClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({reflection: digg(this, "props", "reflection")})
+  }
+}))

package/src/table/filters/scope-element.jsx

@@ -0,0 +1,39 @@
+import {digg} from "diggerize"
+import PropTypes from "prop-types"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ScopeElement extends ShapeComponent {
+  static defaultProps = {
+    active: false
+  }
+
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    scope: PropTypes.object.isRequired
+  }
+
+  render() {
+    const {active, scope} = this.props
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <div
+        className="scope-element"
+        key={scope.name()}
+        onClick={digg(this, "onScopeClicked")}
+        style={style}
+      >
+        {scope.name()}
+      </div>
+    )
+  }
+
+  onScopeClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onScopeClicked({scope: this.props.scope})
+  }
+}))

package/src/table/model-row.jsx

@@ -105,8 +105,8 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromAttributeAndPath (column, model) {
-    const {attribute} = digs(column, "attribute")
-    const currentModelClass = this.props.modelClass
+    const {attribute: attributeName} = digs(column, "attribute")
+    const attributeNameUnderscore = inflection.underscore(attributeName)
     const path = column.path || []
     let value
     let currentModel = model
@@ -118,8 +118,18 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
       }
     }
 
-    if (!(attribute in currentModel)) throw new Error(`${currentModelClass.modelName().name} doesn't respond to ${attribute}`)
-    if (currentModel.isAttributeLoaded(attribute)) value = currentModel[attribute]()
+    if (!(attributeName in currentModel)) {
+      throw new Error(`${currentModel.constructor.modelName().human()} doesn't respond to ${attributeName}`)
+    }
+
+    if (currentModel.isAttributeLoaded(attributeName)) value = currentModel[attributeName]()
+
+    const attribute = currentModel.constructor.attributes().find((attribute) => attribute.name() == attributeNameUnderscore)
+    const modelColumn = attribute?.getColumn()
+
+    if (modelColumn?.getType() == "date") {
+      return this.presentDateTime({apiMakerType: "date", value})
+    }
 
     return this.presentColumnValue(value)
   }
@@ -155,9 +165,9 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     }
   }
 
-  presentColumnValue (value) {
+  presentColumnValue(value) {
     if (value instanceof Date) {
-      return this.presentDateTime(value)
+      return this.presentDateTime({value})
     } else if (MoneyFormatter.isMoney(value)) {
       return MoneyFormatter.format(value)
     } else if (typeof value == "boolean") {
@@ -174,15 +184,13 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     return value
   }
 
-  presentDateTime(value) {
-    const apiMakerType = value.apiMakerType || "time"
-
-    if (apiMakerType == "time") {
+  presentDateTime({apiMakerType, value}) {
+    if (!apiMakerType || apiMakerType == "time") {
       const dateTimeFormatName = this.props.liveTable.props.defaultDateTimeFormatName || "time.formats.default"
 
       return I18n.l(dateTimeFormatName, value)
     } else if (apiMakerType == "date") {
-      const dateFormatName = this.props.liveTable.props.defaultDateTimeFormatName || "date.formats.default"
+      const dateFormatName = this.props.liveTable.props.defaultDateFormatName || "date.formats.default"
 
       return I18n.l(dateFormatName, value)
     } else {

package/src/table/table.jsx

@@ -22,6 +22,7 @@ import TableSettings from "./table-settings"
 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"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
@@ -79,6 +80,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
 
   setup() {
     const {breakpoint} = useBreakpoint()
+    const queryParams = useQueryParams()
 
     this.setInstance({
       breakpoint,
@@ -91,18 +93,19 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
     if (!queryName) queryName = collectionKey
 
     const columnsAsArray = this.columnsAsArray()
+    const querySName = `${queryName}_s`
 
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
-      identifier: this.props.identifier || `${collectionKey}-default`,
+      identifier: () => this.props.identifier || `${collectionKey}-default`,
       preload: undefined,
       preparedColumns: undefined,
       queryName,
-      queryQName: `${queryName}_q`,
-      queryPageName: `${queryName}_page`,
-      querySName: `${queryName}_s`,
-      showFilters: false,
+      queryQName: () => `${queryName}_q`,
+      queryPageName: () => `${queryName}_page`,
+      querySName,
+      showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
       tableSettingFullCacheKey: undefined