api_maker 0.0.1

data/lib/api_maker/javascript/bootstrap/money-input.jsx

@@ -0,0 +1,136 @@
+import Api from "api-maker/api"
+import formatNumber from "format-number"
+import PropTypes from "prop-types"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapMoneyInput extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+
+    let formatOptions = {
+      decimal: I18n.t("number.currency.format.separator"),
+      integerSeparator: I18n.t("number.currency.format.delimiter")
+    }
+    this.formatter = formatNumber(formatOptions)
+  }
+
+  render() {
+    return (
+      <div className="component-api-maker-bootstrap-money-input">
+        <input defaultValue={this.inputDefaultCentsValue()} id={this.inputCentsId()} name={this.inputCentsName()} ref="input" type="hidden" />
+
+        <div className="input-group">
+          <input
+            className={this.props.className}
+            defaultValue={this.inputDefaultValue()}
+            id={this.inputId()}
+            onBlur={() => this.setAmount()}
+            onChange={() => this.setCents()}
+            onKeyUp={() => this.setCents()}
+            placeholder={this.props.placeholder}
+            ref="whole"
+            type="text"
+            />
+          <select className="component-bootstrap-money-input" defaultValue={this.inputCurrencyValue()} id={this.inputCurrencyId()} name={this.inputCurrencyName()} onChange={() => { this.onCurrencyChanged() }} ref="currency">
+            <option></option>
+            {this.props.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>
+      </div>
+    )
+  }
+
+  inputCurrencyId() {
+    return `${this.inputId()}_currency`
+  }
+
+  inputCurrencyName() {
+    if (this.props.currencyName)
+      return this.props.currencyName
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_currency]`
+  }
+
+  inputCurrencyValue() {
+    let value = this.props.model[this.props.attribute]()
+
+    if (value) {
+      return MoneyFormatter.currencyFromMoney(value).code
+    } else {
+      return "DKK"
+    }
+  }
+
+  inputDefaultValue() {
+    let value = this.props.model[this.props.attribute]()
+
+    if (value) {
+      return MoneyFormatter.fromMoney({amount: value.amount, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+    } else {
+      return ""
+    }
+  }
+
+  inputDefaultCentsValue() {
+    let value = this.props.model[this.props.attribute]()
+
+    if (this.refs.input)
+      return this.refs.input.value
+
+    if (value)
+      return MoneyFormatter.amountFromMoney(value)
+  }
+
+  inputCentsId() {
+    return `${this.inputId()}_cents`
+  }
+
+  inputCentsName() {
+    if (this.props.name)
+      return this.props.name
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_cents]`
+  }
+
+  inputId() {
+    return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}`
+  }
+
+  onCurrencyChanged() {
+    if (this.props.onChange)
+      this.props.onChange()
+  }
+
+  setAmount() {
+    if (!this.refs.input.value && this.refs.input.value == "") {
+      this.refs.whole.value = ""
+    } else {
+      let cents = parseFloat(this.refs.input.value)
+      let formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+
+      this.refs.whole.value = formatted
+    }
+  }
+
+  setCents() {
+    let whole = MoneyFormatter.stringToFloat(this.refs.whole.value)
+    let cents = parseInt(whole * 100)
+    let oldCents = parseInt(this.refs.input.value)
+    this.refs.input.value = cents
+
+    if (this.props.onChange && oldCents != cents)
+      this.props.onChange()
+  }
+}
+
+BootstrapMoneyInput.propTypes = {
+  currenciesCollection: PropTypes.array.isRequired
+}

data/lib/api_maker/javascript/bootstrap/radio-buttons.jsx

@@ -0,0 +1,80 @@
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapRadioButtons extends React.Component {
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    collection: PropTypes.array.isRequired,
+    defaultValue: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
+    id: PropTypes.string,
+    name: PropTypes.string,
+    model: PropTypes.object,
+    wrapperClassName: PropTypes.string
+  })
+
+  render() {
+    return (
+      <div className={this.wrapperClassName()}>
+        <input name={this.inputName()} type="hidden" value="" />
+        {this.props.collection.map(option => this.optionElement(option))}
+      </div>
+    )
+  }
+
+  inputDefaultValue() {
+    if (this.props.defaultValue) {
+      return this.props.defaultValue
+    } 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]()
+    }
+  }
+
+  inputName() {
+    if (this.props.name) {
+      return this.props.name
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
+    }
+  }
+
+  generatedId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  }
+
+  optionElement(option) {
+    let id = this.generatedId()
+
+    return (
+      <div key={`option-${option[1]}`}>
+        <input
+          data-option-value={option[1]}
+          defaultChecked={option[1] == this.inputDefaultValue()}
+          id={id}
+          name={this.inputName()}
+          type="radio"
+          value={option[1]} />
+
+        <label className="ml-1" htmlFor={id}>
+          {option[0]}
+        </label>
+      </div>
+    )
+  }
+
+  wrapperClassName() {
+    var classNames = ["component-bootstrap-radio-buttons"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}

data/lib/api_maker/javascript/bootstrap/select.jsx

@@ -0,0 +1,168 @@
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapSelect extends React.Component {
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    "data-controller": PropTypes.string,
+    defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]),
+    description: PropTypes.node,
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    includeBlank: PropTypes.bool,
+    hideSearch: PropTypes.bool,
+    hint: PropTypes.node,
+    hintBottom: PropTypes.node,
+    label: PropTypes.node,
+    labelContainerClassName: PropTypes.string,
+    model: PropTypes.object,
+    multiple: PropTypes.bool,
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+    select2: PropTypes.bool,
+    wrapperClassName: PropTypes.string,
+  })
+
+  componentDidMount() {
+    if (this.props.select2 && this.props.onChange)
+      $(this.refs.select).on("change", this.props.onChange)
+
+    // Set default value to nothing when multiple
+    if (this.props.select2 && this.props.multiple && !this.inputDefaultValue())
+      $(this.refs.select).val("")
+  }
+
+  componentWillUnmount() {
+    if (this.props.select2 && this.props.onChange)
+      $(this.refs.select).off("change", this.props.onChange)
+  }
+
+  render() {
+    return (
+      <div className={this.wrapperClassName()}>
+        {this.label() &&
+          <div className={this.props.labelContainerClassName ? this.props.labelContainerClassName : null}>
+            <label className={this.labelClassName()} htmlFor={this.inputId()}>
+              {this.label()}
+            </label>
+          </div>
+        }
+        {this.props.description &&
+          <div className="mb-4">
+            {this.props.description}
+          </div>
+        }
+        {this.props.hint &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {this.props.hint}
+          </span>
+        }
+        <select
+          data-controller={this.dataController()}
+          data-hide-search={this.props.hideSearch}
+          data-placeholder={this.props.placeholder}
+          defaultValue={this.inputDefaultValue()}
+          className={`form-control ${this.props.className}`}
+          disabled={this.props.disabled}
+          id={this.inputId()}
+          multiple={this.props.multiple}
+          name={this.inputName()}
+          onChange={this.props.onChange}
+          ref="select"
+          >
+          {this.includeBlank() &&
+            <option />
+          }
+          {this.props.options && this.props.options.map(option => (
+            <option key={`select-option-${option[1]}`} value={option[1]}>{option[0]}</option>
+          ))}
+          {this.props.children}
+        </select>
+        {this.props.hintBottom &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {this.props.hintBottom}
+          </span>
+        }
+      </div>
+    )
+  }
+
+  dataController() {
+    if ("data-controller" in this.props) {
+      return this.props["data-controller"]
+    } else if (this.props.select2) {
+      return "select2--default"
+    }
+  }
+
+  includeBlank() {
+    if (this.props.includeBlank || (this.props.placeholder && !this.props.multiple)) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  inputDefaultValue() {
+    if ("defaultValue" in this.props) {
+      return this.props.defaultValue
+    } else if (this.props.selected) {
+      return this.props.selected
+    } else if (this.props.model) {
+      if (!this.props.model[this.props.attribute])
+        throw new Error(`No attribute by that name: ${this.props.attribute}`)
+
+      return this.props.model[this.props.attribute]()
+    }
+  }
+
+  inputId() {
+    if ("id" in this.props) {
+      return this.props.id
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}`
+    }
+  }
+
+  inputName() {
+    if ("name" in this.props) {
+      return this.props.name
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
+    }
+  }
+
+  label() {
+    if ("label" in this.props) {
+      return this.props.label
+    } else if (this.props.model) {
+      let attributeMethodName = inflection.camelize(this.props.attribute.replace(/_id$/, ""), true)
+      return this.props.model.modelClass().humanAttributeName(attributeMethodName)
+    }
+  }
+
+  labelClassName() {
+    let classNames = ["form-group-label"]
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName() {
+    let classNames = ["form-group", "component-bootstrap-select"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}

data/lib/api_maker/javascript/bootstrap/string-input.jsx

@@ -0,0 +1,203 @@
+import MoneyInput from "./money-input"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapStringInput extends React.Component {
+  static propTypes = PropTypesExact({
+    append: PropTypes.node,
+    attribute: PropTypes.string,
+    autoComplete: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    className: PropTypes.string,
+    currenciesCollection: PropTypes.array,
+    currencyName: PropTypes.string,
+    "data-controller": PropTypes.string,
+    defaultValue: PropTypes.node,
+    disabled: PropTypes.bool,
+    hint: PropTypes.node,
+    hintBottom: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    maxLength: PropTypes.number,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    placeholder: PropTypes.node,
+    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    step: PropTypes.number,
+    small: PropTypes.bool,
+    type: PropTypes.string,
+    wrapperClassName: PropTypes.string
+  })
+
+  render() {
+    return (
+      <div className={this.wrapperClassName()} ref="wrapper">
+        {this.label() &&
+          <label className={this.labelClassName()} htmlFor={this.inputId()}>
+            {this.label()}
+          </label>
+        }
+        {this.props.hint &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {this.props.hint}
+          </span>
+        }
+        {this.inputType() == "textarea" &&
+          <textarea
+            className={this.inputClassName()}
+            data-controller={this.props["data-controller"]}
+            defaultValue={this.inputDefaultValue()}
+            id={this.inputId()}
+            maxLength={this.props.maxLength}
+            name={this.inputName()}
+            onChange={this.props.onChange}
+            onKeyUp={this.props.onKeyUp}
+            placeholder={this.props.placeholder}
+            ref="input"
+            rows={this.props.rows}
+            />
+        }
+        {this.inputType() == "money" &&
+          <MoneyInput
+            attribute={this.props.attribute}
+            currenciesCollection={this.props.currenciesCollection}
+            currencyName={this.props.currencyName}
+            model={this.props.model}
+            name={this.props.name}
+            className={this.inputClassName()}
+            onChange={this.props.onChange}
+            placeholder={this.props.placeholder}
+            small={this.props.small}
+            ref="money"
+            />
+        }
+        {this.inputType() != "textarea" && this.inputType() != "money" &&
+          <div className="input-group">
+            {this.props.prepend &&
+              <div className="input-group-prepend">
+                <span className="input-group-text">
+                  {this.props.prepend}
+                </span>
+              </div>
+            }
+            <input
+              autoComplete={this.props.autoComplete}
+              className={this.inputClassName()}
+              data-controller={this.props["data-controller"]}
+              defaultValue={this.inputDefaultValue()}
+              disabled={this.props.disabled}
+              id={this.inputId()}
+              name={this.inputName()}
+              onChange={this.props.onChange}
+              onKeyUp={this.props.onKeyUp}
+              placeholder={this.props.placeholder}
+              ref="input"
+              step={this.props.step}
+              type={this.inputType()}
+              />
+            {this.props.append &&
+              <div className="input-group-append">
+                <span className="input-group-text">
+                  {this.props.append}
+                </span>
+              </div>
+            }
+          </div>
+        }
+        {this.props.hintBottom &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {this.props.hintBottom}
+          </span>
+        }
+      </div>
+    )
+  }
+
+  inputClassName() {
+    var classNames = ["form-control"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  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: ${this.props.model.modelClassData().name}#${this.props.attribute}`)
+
+      return this.formatValue(this.props.model[this.props.attribute]())
+    }
+  }
+
+  formatValue(value) {
+    // We need to use a certain format for datetime-local
+    if (this.inputType() == "datetime-local" && value instanceof Date) {
+      return I18n.strftime(value, "%Y-%m-%dT%H:%M:%S")
+    } else if (this.inputType() == "date" && value instanceof Date) {
+      return I18n.strftime(value, "%Y-%m-%d")
+    }
+
+    return value
+  }
+
+  inputId() {
+    if ("id" in this.props) {
+      return this.props.id
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}`
+    }
+  }
+
+  inputName() {
+    if ("name" in this.props) {
+      return this.props.name
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
+    }
+  }
+
+  inputType() {
+    if (this.props.type) {
+      return this.props.type
+    } else {
+      return "text"
+    }
+  }
+
+  label() {
+    if (this.props.label === false) {
+      return null
+    } else if (this.props.label) {
+      return this.props.label
+    } else if (this.props.model) {
+      return this.props.model.modelClass().humanAttributeName(this.props.attribute)
+    }
+  }
+
+  labelClassName() {
+    var classNames = []
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName() {
+    var classNames = ["form-group", "component-bootstrap-string-input"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}