@kaspernj/api-maker 1.0.216 → 1.0.219

package/src/inputs/input-wrapper.jsx

@@ -0,0 +1,170 @@
+import {dig, digg, digs} from "diggerize"
+import EventListener from "../event-listener"
+import React from "react"
+import idForComponent from "./id-for-component.mjs"
+import nameForComponent from "./name-for-component.mjs"
+import strftime from "strftime"
+
+const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => {
+  return class ApiMakerInputWrapper extends React.PureComponent {
+    state = {
+      errors: [],
+      form: undefined
+    }
+
+    componentDidMount() {
+      this.setForm()
+    }
+
+    componentDidUpdate() {
+      this.setForm()
+    }
+
+    render() {
+      const {errors, form} = digs(this.state, "errors", "form")
+      const type = this.inputType()
+      const inputProps = {
+        id: idForComponent(this),
+        name: nameForComponent(this),
+        ref: this.inputRef()
+      }
+
+      if (!inputProps.ref) throw new Error("No input ref?")
+
+      if (this.handleAsCheckbox()) {
+        inputProps.defaultChecked = this.inputDefaultChecked()
+      } else {
+        inputProps.defaultValue = this.inputDefaultValue()
+      }
+
+      if (!this.handleAsSelect()) inputProps.type = type
+
+      const wrapperOpts = {
+        errors,
+        form,
+        label: this.label()
+      }
+
+      return (
+        <>
+          {form &&
+            <EventListener event="validation-errors" onCalled={digg(this, "onValidationErrors")} target={form} />
+          }
+          <WrapperComponentClass
+            inputProps={inputProps}
+            wrapperOpts={wrapperOpts}
+            {...this.props}
+          />
+        </>
+      )
+    }
+
+    formatValue (value) {
+      const {formatValue} = this.props
+
+      if (formatValue) {
+        return formatValue(value)
+      } else if (value instanceof Date && !isNaN(value.getTime())) {
+        // We need to use a certain format for datetime-local
+        if (this.inputType() == "datetime-local") {
+          return strftime("%Y-%m-%dT%H:%M:%S", value)
+        } else if (this.inputType() == "date") {
+          return strftime("%Y-%m-%d", value)
+        }
+      }
+
+      return value
+    }
+
+    handleAsCheckbox() {
+      if (this.props.type == "checkbox") return true
+      if (!("type" in this.props) && wrapperOptions.type == "checkbox") return true
+
+      return false
+    }
+
+    handleAsSelect() {
+      if (wrapperOptions.type == "select") return true
+
+      return false
+    }
+
+    inputDefaultChecked () {
+      if ("defaultChecked" in this.props) {
+        return this.props.defaultChecked
+      } else if (this.props.model) {
+        if (!this.props.model[this.props.attribute])
+          throw new Error(`No such attribute: ${this.props.attribute}`)
+
+        return this.props.model[this.props.attribute]()
+      }
+    }
+
+    inputDefaultValue() {
+      if ("defaultValue" in this.props) {
+        return this.formatValue(this.props.defaultValue)
+      } else if (this.props.model) {
+        if (!this.props.model[this.props.attribute]) {
+          throw new Error(`No such attribute: ${digg(this.props.model.modelClassData(), "name")}#${this.props.attribute}`)
+        }
+
+        return this.formatValue(this.props.model[this.props.attribute]())
+      }
+    }
+
+    inputName() {
+      if (this.state.blankInputName) return ""
+
+      return nameForComponent(this)
+    }
+
+    inputRefBackup() {
+      if (!this._inputRefBackup) this._inputRefBackup = React.createRef()
+
+      return this._inputRefBackup
+    }
+
+    inputRef() {
+      return this.props.inputRef || this.inputRefBackup()
+    }
+
+    inputType() {
+      if ("type" in this.props) {
+        return this.props.type
+      } else if (wrapperOptions.type == "checkbox") {
+        return "checkbox"
+      } else {
+        return "text"
+      }
+    }
+
+    label() {
+      if ("label" in this.props) {
+        return this.props.label
+      } else if (this.props.model) {
+        return this.props.model.modelClass().humanAttributeName(this.props.attribute)
+      }
+    }
+
+    onValidationErrors = (event) => {
+      const errors = event.detail.getValidationErrorsForInput({
+        attribute: this.props.attribute,
+        inputName: this.inputName(),
+        onMatchValidationError: this.props.onMatchValidationError
+      })
+
+      this.setState({errors})
+    }
+
+    setForm () {
+      const inputElement = this.inputRef().current
+
+      let form
+
+      if (inputElement) form = dig(inputElement, "form")
+      if (form && form != this.state.form) this.setState({form})
+    }
+  }
+}
+
+export default inputWrapper

package/src/inputs/input.jsx

@@ -0,0 +1,235 @@
+import AutoSubmit from "./auto-submit.mjs"
+import {dig, digg, digs} from "diggerize"
+import EventUpdated from "../event-updated"
+import inputWrapper from "./input-wrapper"
+import Money from "./money"
+import PropTypes from "prop-types"
+import React from "react"
+import replaceall from "replaceall"
+import strftime from "strftime"
+
+class ApiMakerInputsInput extends React.PureComponent {
+  static defaultProps = {
+    autoRefresh: false,
+    autoSubmit: false,
+    localizedNumber: false
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    autoRefresh: PropTypes.bool.isRequired,
+    autoSubmit: PropTypes.bool.isRequired,
+    className: PropTypes.string,
+    formatValue: PropTypes.func,
+    id: PropTypes.string,
+    localizedNumber: PropTypes.bool.isRequired,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    onMatchValidationError: PropTypes.func,
+    type: PropTypes.string
+  }
+
+  visibleInputRef = React.createRef()
+  state = {
+    blankInputName: digg(this, "props", "inputProps", "type") == "file"
+  }
+
+  render () {
+    const {
+      attribute,
+      autoRefresh,
+      autoSubmit,
+      defaultValue,
+      formatValue,
+      id,
+      inputProps,
+      inputRef,
+      localizedNumber,
+      model,
+      name,
+      onChange,
+      onErrors,
+      onMatchValidationError,
+      type,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+
+    const sharedProps = {
+      id: localizedNumber ? null : inputProps.id,
+      name: localizedNumber ? null : inputProps.name,
+    }
+    const ref = localizedNumber ? this.visibleInputRef : this.inputReference()
+    const {ref: inputPropsRef, ...inputPropsWithoutRef} = inputProps
+
+    return (
+      <>
+        {autoRefresh && model &&
+          <EventUpdated model={model} onUpdated={this.onModelUpdated} />
+        }
+        {localizedNumber &&
+          <input
+            defaultValue={defaultValue}
+            id={inputProps.id}
+            name={this.inputName()}
+            ref={this.inputReference()}
+            type="hidden"
+          />
+        }
+        {type == "money" &&
+          <Money
+            attribute={attribute}
+            defaultValue={this.inputDefaultValueLocalized()}
+            inputRef={this.inputReference()}
+            model={model}
+            onChange={this.onInputChanged}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            {...restProps}
+          />
+        }
+        {type == "textarea" &&
+          <textarea
+            defaultValue={this.inputDefaultValueLocalized()}
+            onChange={this.onInputChanged}
+            ref={ref}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            {...restProps}
+          />
+        }
+        {type != "money" && type != "textarea" &&
+          <input
+            defaultValue={this.inputDefaultValueLocalized()}
+            onChange={this.onInputChanged}
+            ref={ref}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            name={localizedNumber ? null : this.inputName()}
+            {...restProps}
+          />
+        }
+      </>
+    )
+  }
+
+  actualValue (visibleInput) {
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+    const value = digg(visibleInput, "value")
+
+    if (localizedNumber) {
+      const decimal = I18n.t("number.currency.format.separator")
+      const integerSeparator = I18n.t("number.currency.format.delimiter")
+
+      let unformatted = replaceall(integerSeparator, "", value)
+
+      unformatted = replaceall(decimal, ".", unformatted)
+
+      return unformatted
+    }
+
+    return value
+  }
+
+  autoSubmit = () => {
+    new AutoSubmit({component: this}).autoSubmit()
+  }
+
+  formatValue (value) {
+    const {formatValue, type} = this.props
+
+    if (formatValue) {
+      return formatValue(value)
+    } else if (value instanceof Date && !isNaN(value.getTime())) {
+      // We need to use a certain format for datetime-local
+      if (type == "datetime-local") {
+        return strftime("%Y-%m-%dT%H:%M:%S", value)
+      } else if (type == "date") {
+        return strftime("%Y-%m-%d", value)
+      }
+    }
+
+    return value
+  }
+
+  inputDefaultValueLocalized () {
+    const {defaultValue} = this.props
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+
+    if (localizedNumber && defaultValue !== null && defaultValue !== undefined) {
+      const separator = I18n.t("number.currency.format.separator")
+      const delimiter = I18n.t("number.currency.format.delimiter")
+
+      let formatted = `${defaultValue}`
+
+      formatted = replaceall(".", "{{separator}}", formatted)
+      formatted = replaceall(",", "{{delimiter}}", formatted)
+      formatted = replaceall("{{separator}}", separator, formatted)
+      formatted = replaceall("{{delimiter}}", delimiter, formatted)
+
+      return formatted
+    }
+
+    return defaultValue
+  }
+
+  inputName () {
+    if (this.state.blankInputName) return ""
+
+    return this.props.inputProps.name
+  }
+
+  inputReference() {
+    return digg(this, "props", "inputProps", "ref")
+  }
+
+  onModelUpdated = (args) => {
+    const inputRef = this.inputReference()
+
+    if (!inputRef.current) {
+      // This can happen if the component is being unmounted
+      return
+    }
+
+    const {attribute} = digs(this.props, "attribute")
+    const newModel = digg(args, "model")
+    const currentValue = digg(inputRef, "current", "value")
+    const newValue = newModel.readAttribute(attribute)
+    const newFormattedValue = this.formatValue(newValue)
+
+    if (currentValue != newFormattedValue) {
+      inputRef.current.value = newFormattedValue
+    }
+  }
+
+  onInputChanged = (e) => {
+    const {attribute, autoSubmit, inputProps, model, onChange} = this.props
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+
+    if (localizedNumber) this.inputReference().current.value = this.actualValue(digg(e, "target"))
+
+    if (attribute && autoSubmit && model) this.delayAutoSubmit()
+    if (digg(inputProps, "type") == "file") this.setState({blankInputName: this.getBlankInputName()})
+    if (onChange) onChange(e)
+  }
+
+  delayAutoSubmit () {
+    if (this.delayAutoSubmitTimeout) {
+      clearTimeout(this.delayAutoSubmitTimeout)
+    }
+
+    this.delayAutoSubmitTimeout = setTimeout(this.autoSubmit, 200)
+  }
+
+  // This fixes an issue in Firefox and ActiveStorage, where uploads would be a blank string if a file wasn't chosen
+  getBlankInputName () {
+    const value = dig(this.inputReference(), "current", "value")
+
+    if (this.props.inputProps.type == "file" && value == "")
+      return true
+  }
+}
+
+export {ApiMakerInputsInput as Input}
+export default inputWrapper(ApiMakerInputsInput)

package/src/inputs/money.jsx

@@ -0,0 +1,177 @@
+import classNames from "classnames"
+import Config from "../config.mjs"
+import {digg} from "diggerize"
+import idForComponent from "./id-for-component.mjs"
+import inflection from "inflection"
+import MoneyFormatter from "../money-formatter"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+export default class ApiMakerInputsMoney extends React.PureComponent {
+  static defaultProps = {
+    disabled: false,
+    showCurrencyOptions: true
+  }
+
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    centsInputName: PropTypes.string,
+    className: PropTypes.string,
+    currenciesCollection: PropTypes.array,
+    currencyName: PropTypes.string,
+    defaultValue: PropTypes.object,
+    disabled: PropTypes.bool.isRequired,
+    id: PropTypes.string,
+    inputRef: PropTypes.object,
+    label: PropTypes.node,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.node,
+    showCurrencyOptions: PropTypes.bool,
+    small: PropTypes.bool,
+    type: PropTypes.string
+  })
+
+  inputRef = React.createRef()
+
+  getInputRef () {
+    return this.props.inputRef || this.inputRef
+  }
+
+  render () {
+    const {attribute, className, disabled, model, showCurrencyOptions} = this.props
+    let {currenciesCollection} = this.props
+
+    if (!currenciesCollection) currenciesCollection = Config.getCurrenciesCollection()
+
+    return (
+      <div className="api-maker-inputs-money" data-attribute={attribute} data-model-id={model?.id()}>
+        <input defaultValue={this.inputDefaultCentsValue()} id={this.inputCentsId()} name={this.inputCentsName()} ref={this.getInputRef()} type="hidden" />
+        <input
+          className={classNames("money-cents", className)}
+          defaultValue={this.inputDefaultValue()}
+          disabled={disabled}
+          id={this.inputId()}
+          onBlur={digg(this, "setAmount")}
+          onChange={digg(this, "setCents")}
+          onKeyUp={digg(this, "setCents")}
+          placeholder={this.props.placeholder}
+          ref="whole"
+          type="text"
+        />
+        {showCurrencyOptions &&
+          <select
+            className="money-currency"
+            defaultValue={this.inputCurrencyValue()}
+            disabled={disabled}
+            id={this.inputCurrencyId()}
+            name={this.inputCurrencyName()}
+            onChange={digg(this, "onCurrencyChanged")}
+            ref="currency"
+          >
+            <option></option>
+            {currenciesCollection.map((option) => (
+              <option key={`select-option-${option[1]}`} value={option[1]}>
+                {this.props.small && option[1]}
+                {!this.props.small && option[0]}
+              </option>
+            ))}
+          </select>
+        }
+      </div>
+    )
+  }
+
+  inputCurrencyId () {
+    return `${this.inputId()}_currency`
+  }
+
+  inputCurrencyName () {
+    if ("currencyName" in this.props)
+      return this.props.currencyName
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_currency]`
+  }
+
+  inputCurrencyValue () {
+    const {defaultValue} = this.props
+
+    if (defaultValue) {
+      return MoneyFormatter.currencyFromMoney(defaultValue).code
+    } else {
+      return "DKK"
+    }
+  }
+
+  inputDefaultValue () {
+    const {defaultValue} = this.props
+
+    if (defaultValue) {
+      return MoneyFormatter.fromMoney({amount: defaultValue.amount, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+    } else {
+      return ""
+    }
+  }
+
+  inputDefaultCentsValue () {
+    const {defaultValue} = this.props
+
+    if (this.getInputRef().current) {
+      return digg(this.getInputRef(), "current", "value")
+    } else if (defaultValue) {
+      return MoneyFormatter.amountFromMoney(defaultValue)
+    }
+  }
+
+  inputCentsId () {
+    return `${this.inputId()}_cents`
+  }
+
+  inputCentsName () {
+    if ("name" in this.props)
+      return this.props.name
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_cents]`
+  }
+
+  inputId () {
+    return idForComponent(this)
+  }
+
+  onCurrencyChanged = () => {
+    if (this.props.onChange)
+      this.props.onChange()
+  }
+
+  setAmount = () => {
+    const inputElement = this.getInputRef().current
+
+    if (!inputElement.value && inputElement.value == "") {
+      this.refs.whole.value = ""
+    } else {
+      const cents = parseFloat(inputElement.value)
+      const formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+
+      this.refs.whole.value = formatted
+    }
+  }
+
+  setCents = () => {
+    const inputElement = this.getInputRef().current
+
+    let whole = MoneyFormatter.stringToFloat(this.refs.whole.value)
+    let cents = parseInt(whole * 100, 10)
+    let oldCents = parseInt(inputElement.value, 10)
+
+    if (cents) {
+      inputElement.value = cents
+    } else {
+      inputElement.value = ''
+    }
+
+    if (this.props.onChange && oldCents != cents)
+      this.props.onChange()
+  }
+}

package/src/inputs/name-for-component.mjs

@@ -0,0 +1,15 @@
+import inflection from "inflection"
+
+export default function apiMakerNameForComponent (component) {
+  if ("name" in component.props) {
+    return component.props.name
+  } else if (component.props.attribute && component.props.model) {
+    let attributeName = inflection.underscore(component.props.attribute)
+
+    if (component.props.type == "money") {
+      attributeName += "_cents"
+    }
+
+    return `${component.props.model.modelClassData().paramKey}[${attributeName}]`
+  }
+}

package/src/inputs/select.jsx

@@ -0,0 +1,87 @@
+import {dig} from "diggerize"
+import inputWrapper from "./input-wrapper"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ApiMakerInputsSelect extends React.PureComponent {
+  static propTypes = {
+    attribute: PropTypes.string,
+    children: PropTypes.node,
+    defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]),
+    id: PropTypes.string,
+    includeBlank: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+    inputProps: PropTypes.object.isRequired,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    options: PropTypes.array,
+    wrapperOpts: PropTypes.object.isRequired
+  }
+
+  render () {
+    const {
+      attribute,
+      children,
+      defaultValue,
+      id,
+      includeBlank,
+      inputProps,
+      inputRef,
+      model,
+      name,
+      options,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+
+    return (
+      <select {...inputProps} {...restProps}>
+        {this.includeBlank() &&
+          <option data-include-blank="true">
+            {typeof includeBlank != "boolean" ? includeBlank : null}
+          </option>
+        }
+        {options && options.map((option) =>
+          <option key={this.optionKey(option)} value={this.optionValue(option)}>
+            {this.optionLabel(option)}
+          </option>
+        )}
+        {children}
+      </select>
+    )
+  }
+
+  optionKey (option) {
+    if (Array.isArray(option)) {
+      return `select-option-${option[1]}`
+    } else {
+      return `select-option-${option}`
+    }
+  }
+
+  optionLabel (option) {
+    if (Array.isArray(option)) {
+      return option[0]
+    } else {
+      return option
+    }
+  }
+
+  optionValue (option) {
+    if (Array.isArray(option)) {
+      return option[1]
+    } else {
+      return option
+    }
+  }
+
+  includeBlank () {
+    if (this.props.includeBlank && !this.props.multiple) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+
+export {ApiMakerInputsSelect as Select}
+export default inputWrapper(ApiMakerInputsSelect)

package/src/model-class-require.mjs

@@ -1,6 +1,6 @@
 import {digg} from "diggerize"
 import inflection from "inflection"
-import * as models from "@kaspernj/api-maker/src/models.mjs.erb"
+import * as models from "./models.mjs.erb"
 
 export default (modelName) => {
   const requireName = inflection.camelize(modelName)

package/src/model-name.mjs

@@ -1,4 +1,5 @@
-import Config from "@kaspernj/api-maker/src/config.mjs"
+import Config from "./config.mjs"
+import inflection from "inflection"
 
 export default class ModelName {
   constructor(data) {
@@ -23,8 +24,11 @@ export default class ModelName {
     }
 
     const key = `activerecord.models.${this.data.modelClassData.i18nKey}.${countKey}`
+    let defaultModelName = this.data.modelClassData.name
 
-    return Config.getI18n().t(key)
+    if (args?.count > 1) defaultModelName = inflection.pluralize(defaultModelName)
+
+    return Config.getI18n().t(key, {defaultValue: defaultModelName})
   }
 
   paramKey() {