api_maker 0.0.1

data/lib/api_maker/javascript/bootstrap/attribute-row.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+export default class BootstrapAttributeRow extends React.Component {
+  render() {
+    return (
+      <tr>
+        <th>
+          {this.props.label}
+        </th>
+        <td>
+          {this.props.value || this.props.children}
+        </td>
+      </tr>
+    )
+  }
+}

data/lib/api_maker/javascript/bootstrap/attribute-rows.jsx

@@ -0,0 +1,47 @@
+import AttributeRow from "./attribute-row"
+import PropTypes from "prop-types"
+import React from "react"
+
+export default class BootstrapAttributeRows extends React.Component {
+  static propTypes = {
+    attributes: PropTypes.array.isRequired,
+    model: PropTypes.object.isRequired
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      classObject: props.model.modelClass()
+    }
+  }
+
+  render() {
+    return this.props.attributes.map((attribute) =>
+      <AttributeRow key={`attribute-${attribute}`} label={this.state.classObject.humanAttributeName(attribute)}>
+        {this.valueContent(attribute)}
+      </AttributeRow>
+    )
+  }
+
+  value(attribute) {
+    if (!(attribute in this.props.model))
+      throw new Error(`Attribute not found: ${this.props.model.modelClassData().name}#${attribute}`)
+
+    return this.props.model[attribute]()
+  }
+
+  valueContent(attribute) {
+    var value = this.value(attribute)
+
+    if (value instanceof Date) {
+      return I18n.strftime(value, "%Y-%m-%d %H:%M")
+    } else if (typeof value === "boolean") {
+      if (value)
+        return I18n.t("js.shared.yes")
+
+      return I18n.t("js.shared.no")
+    } else {
+      return this.value(attribute)
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+export default class Card extends React.Component {
+  static defaultProps = {
+    responsiveTable: true
+  }
+  static propTypes = PropTypesExact({
+    className: PropTypes.string,
+    children: PropTypes.node,
+    controls: PropTypes.node,
+    header: PropTypes.string,
+    onClick: PropTypes.func,
+    striped: PropTypes.bool,
+    style: PropTypes.object,
+    responsiveTable: PropTypes.bool,
+    table: PropTypes.bool
+  })
+
+  render() {
+    var { children, controls, header, onClick, style, table } = this.props
+
+    return (
+      <div className={this.classNames()} onClick={onClick} ref="card" style={style}>
+        {(controls || header) &&
+          <div className="card-header">
+            {header}
+            {controls &&
+              <div className="float-right">
+                {controls}
+              </div>
+            }
+          </div>
+        }
+        <div className={this.bodyClassNames()}>
+          {table &&
+            <table className={this.tableClassNames()}>
+              {children}
+            </table>
+          }
+          {!table && children}
+        </div>
+      </div>
+    )
+  }
+
+  classNames() {
+    var classNames = ["component-bootstrap-card", "card", "card-default"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  bodyClassNames() {
+    var classNames = ["card-body"]
+
+    if (this.props.table) {
+      if (this.props.responsiveTable){
+        classNames.push("table-responsive")
+      }
+
+      classNames.push("p-0")
+    }
+
+    return classNames.join(" ")
+  }
+
+  tableClassNames() {
+    var classNames = ["table", "table-hover", "mb-0", "w-100"]
+
+    if (this.props.striped)
+      classNames.push("table-striped")
+
+    return classNames.join(" ")
+  }
+}

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

@@ -0,0 +1,127 @@
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapCheckbox extends React.Component {
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    "data-action": PropTypes.string,
+    "data-target": PropTypes.string,
+    defaultChecked: PropTypes.bool,
+    defaultValue: PropTypes.node,
+    hint: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    wrapperClassName: PropTypes.string
+  })
+
+  render() {
+    let id = this.inputId()
+
+    return (
+      <div className={this.wrapperClassName()}>
+        <div className="form-check">
+          <input defaultValue="0" name={this.inputName()} type="hidden" type="hidden" />
+          <input
+            data-target={this.props["data-target"]}
+            defaultChecked={this.inputDefaultChecked()}
+            className={this.className()}
+            data-action={this.props["data-action"]}
+            defaultValue="1"
+            id={id}
+            name={this.inputName()}
+            onChange={this.props.onChange}
+            ref="input"
+            type="checkbox"
+            />
+
+          {this.label() &&
+            <label className={this.labelClassName()} htmlFor={id}>
+              {this.label()}
+            </label>
+          }
+        </div>
+        {this.props.hint &&
+          <p className="text-muted">
+            {this.props.hint}
+          </p>
+        }
+      </div>
+    )
+  }
+
+  className() {
+    var classNames = ["form-check-input"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  generatedId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  }
+
+  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]()
+    }
+  }
+
+  inputId() {
+    if (this.props.id) {
+      return this.props.id
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}`
+    } else {
+      return this.generatedId()
+    }
+  }
+
+  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)}]`
+    }
+  }
+
+  wrapperClassName() {
+    let classNames = ["component-bootstrap-checkbox"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+
+  label() {
+    if (this.props.label) {
+      return this.props.label
+    } else if (this.props.model) {
+      return this.props.model.modelClass().humanAttributeName(this.props.attribute)
+    }
+  }
+
+  labelClassName() {
+    let classNames = ["form-check-label"]
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+}

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

@@ -0,0 +1,105 @@
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import React from "react"
+
+const inflection = require("inflection")
+
+export default class BootstrapCheckboxes extends React.Component {
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    defaultValue: PropTypes.array,
+    label: PropTypes.string,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    options: PropTypes.array.isRequired
+  })
+
+  render() {
+    return (
+      <div className="component-bootstrap-checkboxes form-group">
+        <label className={this.labelClassName()}>
+          {this.label()}
+        </label>
+
+        <input name={this.inputName()} type="hidden" value="" />
+        {this.props.options.map((option, index) => this.optionElement(option, index))}
+      </div>
+    )
+  }
+
+  inputDefaultValue() {
+    if (this.props.defaultValue) {
+      return this.props.defaultValue
+    } else if (this.props.model) {
+      if (!this.props.model[this.props.attribute])
+        throw `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)}]`
+    }
+  }
+
+  isDefaultSelected(option) {
+    let defaultValue = this.inputDefaultValue()
+
+    if (!defaultValue)
+      return false
+
+    if (defaultValue.constructor === Array) {
+      return defaultValue.includes(option)
+    } else {
+      return defaultValue == option
+    }
+  }
+
+  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() {
+    let classNames = []
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  generatedId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  }
+
+  optionElement(option) {
+    var id = this.generatedId()
+
+    return (
+      <div className="checkboxes-option" key={`option-${option[1]}`}>
+        <input
+          data-option-value={option[1]}
+          defaultChecked={this.isDefaultSelected(option[1])}
+          id={id}
+          name={this.inputName()}
+          type="checkbox"
+          value={option[1]} />
+
+        <label className="ml-1" htmlFor={id}>
+          {option[0]}
+        </label>
+      </div>
+    )
+  }
+}

data/lib/api_maker/javascript/bootstrap/live-table.jsx

@@ -0,0 +1,168 @@
+import Collection from "api-maker/collection"
+import EventCreated from "api-maker/event-created"
+import EventDestroyed from "api-maker/event-destroyed"
+import Paginate from "api-maker/paginate"
+import Params from "api-maker/params"
+
+const inflection = require("inflection")
+
+export default class LiveTable extends React.Component {
+  static defaultProps = {
+    preloads: [],
+    select: {}
+  }
+
+  static propTypes = PropTypesExact({
+    className: PropTypes.string,
+    collection: PropTypes.instanceOf(Collection),
+    columnsContent: PropTypes.func.isRequired,
+    defaultParams: PropTypes.object,
+    destroyMessage: PropTypes.string,
+    filterContent: PropTypes.func,
+    filterSubmitLabel: PropTypes.node,
+    headersContent: PropTypes.func.isRequired,
+    modelClass: PropTypes.func.isRequired,
+    preloads: PropTypes.array.isRequired,
+    queryName: PropTypes.string.isRequired,
+    select: PropTypes.object
+  })
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentHref: location.href,
+      queryQName: `${this.props.queryName}_q`,
+      queryPageName: `${this.props.queryName}_page`
+    }
+  }
+
+  componentDidMount() {
+    this.loadQParams().then(() => this.loadModels())
+  }
+
+  componentDidUpdate() {
+    if (this.state.currentHref != location.href) {
+      var { queryQName } = this.state
+      var params = Params.parse()
+      var qParams = params[queryQName] || {}
+      Params.setCachedParams(queryQName, qParams)
+      this.setState({currentHref: location.href, qParams}, () => this.loadModels())
+    }
+  }
+
+  async loadQParams() {
+    var { queryQName } = this.state
+    var qParams = await Params.getCachedParams(queryQName, {default: this.props.defaultParams || {}})
+    return this.setState({qParams})
+  }
+
+  async loadModels() {
+    var params = Params.parse()
+    var { modelClass, preloads, select } = this.props
+    var { qParams, queryPageName, queryQName } = this.state
+    var query
+
+    if (this.props.collection) {
+      query = this.props.collection
+    } else {
+      query = modelClass
+    }
+
+    query = query
+      .ransack(qParams)
+      .searchKey(queryQName)
+      .page(params[queryPageName])
+      .pageKey(queryPageName)
+      .preload(preloads)
+      .select(select)
+
+    var result = await query.result()
+
+    this.setState({query, result, models: result.models()})
+  }
+
+  render() {
+    var { qParams, query, result, models } = this.state
+
+    return (
+      <div className={this.className()}>
+        {qParams && query && result && models && this.content()}
+      </div>
+    )
+  }
+
+  content() {
+    var { filterContent, filterSubmitLabel, modelClass } = this.props
+    var { qParams, query, result, models } = this.state
+
+    return (
+      <div className="content-container">
+        <EventCreated modelClass={modelClass} onCreated={() => this.onModelCreated()} />
+
+        {filterContent &&
+          <Card className="mb-4">
+            <form onSubmit={(e) => this.onFilterFormSubmit(e)} ref="filterForm">
+              {filterContent({qParams})}
+              <input className="btn btn-primary" label={filterSubmitLabel} type="submit" />
+            </form>
+          </Card>
+        }
+
+        {models.map(model =>
+          <EventDestroyed key={`event-destroyed-${model.cacheKey()}`} model={model} onDestroyed={(args) => this.onModelDestroyed(args)} />
+        )}
+
+        <Card className="mb-4" striped table>
+          <thead>
+            <tr>
+              {this.props.headersContent({query})}
+            </tr>
+          </thead>
+          <tbody>
+            {models.map(model =>
+              <tr className={`${inflection.singularize(modelClass.modelClassData().collectionName)}-row`} data-model-id={model.id()} key={model.cacheKey()}>
+                {this.props.columnsContent({model})}
+              </tr>
+            )}
+          </tbody>
+        </Card>
+
+        <Paginate result={result} />
+      </div>
+    )
+  }
+
+  className() {
+    var classNames = ["component-api-maker-live-table"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  onFilterFormSubmit(e) {
+    e.preventDefault()
+
+    var qParams = Params.serializeForm(this.refs.filterForm)
+    var { queryQName } = this.state
+
+    var changeParamsParams = {}
+    changeParamsParams[queryQName] = qParams
+
+    Params.changeParams(changeParamsParams)
+    Params.setCachedParams(queryQName, qParams)
+
+    this.setState({currentHref: location.href, qParams}, () => this.loadModels())
+  }
+
+  onModelCreated() {
+    this.loadModels()
+  }
+
+  onModelDestroyed(args) {
+    this.setState({
+      models: this.state.models.filter(model => model.id() != args.model.id())
+    })
+  }
+}