@kaspernj/api-maker 1.0.215 → 1.0.218

package/src/bootstrap/live-table/model-row.jsx

@@ -0,0 +1,150 @@
+import {digg, digs} from "diggerize"
+import inflection from "inflection"
+import MoneyFormatter from "../../money-formatter"
+import PropTypes from "prop-types"
+
+import Link from "../../link"
+
+export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
+  static propTypes = {
+    model: PropTypes.object.isRequired,
+    liveTable: PropTypes.object.isRequired
+  }
+
+  modelCallbackArgs = this._modelCallbackArgs()
+
+  render() {
+    const {model} = digs(this.props, "model")
+    const {modelClass} = digs(this.props.liveTable.props, "modelClass")
+    const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = digg(this, "props", "liveTable", "props")
+    const {columns} = digg(this, "props", "liveTable", "shape")
+
+    let editPath, viewPath
+
+    if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
+    if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
+
+    return (
+      <tr className={`${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
+        {columns && this.columnsContentFromColumns(model)}
+        {!columns && columnsContent && columnsContent(this.modelCallbackArgs)}
+        <td className="actions-column text-end text-nowrap text-right">
+          {actionsContent && actionsContent(this.modelCallbackArgs)}
+          {viewPath &&
+            <Link className="view-button" to={viewPath}>
+              <i className="fa fa-search la la-search" />
+            </Link>
+          }
+          {editPath &&
+            <Link className="edit-button" to={editPath}>
+              <i className="fa fa-edit la la-edit" />
+            </Link>
+          }
+          {destroyEnabled && model.can("destroy") &&
+            <a className="destroy-button" href="#" onClick={this.onDestroyClicked}>
+              <i className="fa fa-trash la la-trash" />
+            </a>
+          }
+        </td>
+      </tr>
+    )
+  }
+
+  columnClassNamesForColumn (column) {
+    const classNames = ["live-table-column"]
+
+    if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
+    if (column.columnProps && column.columnProps.className) classNames.push(column.columnProps.className)
+    if (column.textCenter) classNames.push("text-center")
+    if (column.textRight) classNames.push("text-end text-right")
+
+    return classNames
+  }
+
+  columnsContentFromColumns (model) {
+    const {columns} = digs(this.props.liveTable.shape, "columns")
+
+    return columns.map((column) =>
+      <td
+        className={classNames(this.columnClassNamesForColumn(column))}
+        data-identifier={this.props.liveTable.identifierForColumn(column)}
+        key={this.props.liveTable.identifierForColumn(column)}
+      >
+        {column.content && this.columnContentFromContentArg(column, model)}
+        {!column.content && column.attribute && this.columnsContentFromAttributeAndPath(column, model)}
+      </td>
+    )
+  }
+
+  columnContentFromContentArg (column, model) {
+    const value = column.content(this.modelCallbackArgs)
+
+    return this.presentColumnValue(value)
+  }
+
+  columnsContentFromAttributeAndPath (column, model) {
+    const {attribute} = digs(column, "attribute")
+    const currentModelClass = this.props.modelClass
+    const path = column.path || []
+
+    if (path.length > 0) throw new Error("'path' support not implemented")
+
+    if (!(attribute in model)) throw new Error(`${currentModelClass.modelName().name} doesn't respond to ${attribute}`)
+
+    const value = model[attribute]()
+
+    return this.presentColumnValue(value)
+  }
+
+  _modelCallbackArgs () {
+    const {model} = digs(this.props, "model")
+    const modelArgName = inflection.camelize(this.props.liveTable.props.modelClass.modelClassData().name, true)
+    const modelCallbackArgs = {}
+
+    modelCallbackArgs[modelArgName] = model
+
+    return modelCallbackArgs
+  }
+
+  onDestroyClicked = async (e) => {
+    e.preventDefault()
+
+    const {destroyMessage} = digg(this, "props", "liveTable", "props")
+    const {model} = digs(this.props, "model")
+
+    if (!confirm(I18n.t("js.shared.are_you_sure"))) {
+      return
+    }
+
+    try {
+      await model.destroy()
+
+      if (destroyMessage) {
+        FlashMessage.success(destroyMessage)
+      }
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+
+  presentColumnValue (value) {
+    if (value instanceof Date) {
+      return I18n.l("time.formats.default", value)
+    } else if (MoneyFormatter.isMoney(value)) {
+      return MoneyFormatter.format(value)
+    } else if (typeof value == "boolean") {
+      if (value) {
+        return I18n.t("js.shared.yes")
+      }
+
+      return I18n.t("js.shared.no")
+    } else if (Array.isArray(value)) {
+      return value
+        .map((valuePart) => this.presentColumnValue(valuePart))
+        .filter((valuePart) => Boolean(valuePart))
+        .join(", ")
+    }
+
+    return value
+  }
+}

package/src/bootstrap/live-table.jsx

@@ -0,0 +1,399 @@
+import Card from "./card"
+import classNames from "classnames"
+import Collection from "../collection"
+import CollectionLoader from "../collection-loader"
+import {debounce} from "debounce"
+import {digg, digs} from "diggerize"
+import instanceOfClassName from "../instance-of-class-name"
+import ModelRow from "./live-table/model-row"
+import Paginate from "./paginate"
+import Params from "../params"
+import PropTypes from "prop-types"
+import React from "react"
+import Shape from "set-state-compare/src/shape"
+import SortLink from "./sort-link"
+
+export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
+  static defaultProps = {
+    card: true,
+    destroyEnabled: true,
+    filterCard: true,
+    filterSubmitButton: true,
+    noRecordsAvailableContent: undefined,
+    noRecordsFoundContent: undefined,
+    preloads: [],
+    select: {}
+  }
+
+  static propTypes = {
+    abilities: PropTypes.object,
+    actionsContent: PropTypes.func,
+    appHistory: PropTypes.object,
+    card: PropTypes.bool.isRequired,
+    className: PropTypes.string,
+    collection: PropTypes.oneOfType([
+      instanceOfClassName("ApiMakerCollection"),
+      PropTypes.instanceOf(Collection)
+    ]),
+    columns: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+    columnsContent: PropTypes.func,
+    controls: PropTypes.func,
+    defaultParams: PropTypes.object,
+    destroyEnabled: PropTypes.bool.isRequired,
+    destroyMessage: PropTypes.string,
+    editModelPath: PropTypes.func,
+    filterCard: PropTypes.bool.isRequired,
+    filterContent: PropTypes.func,
+    filterSubmitButton: PropTypes.bool.isRequired,
+    filterSubmitLabel: PropTypes.node,
+    headersContent: PropTypes.func,
+    header: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    groupBy: PropTypes.array,
+    modelClass: PropTypes.func.isRequired,
+    noRecordsAvailableContent: PropTypes.func,
+    noRecordsFoundContent: PropTypes.func,
+    onModelsLoaded: PropTypes.func,
+    paginateContent: PropTypes.func,
+    paginationComponent: PropTypes.func,
+    preloads: PropTypes.array.isRequired,
+    queryName: PropTypes.string,
+    select: PropTypes.object,
+    selectColumns: PropTypes.object,
+    viewModelPath: PropTypes.func
+  }
+
+  constructor (props) {
+    super(props)
+
+    let queryName = props.queryName
+
+    if (!queryName) {
+      queryName = digg(props.modelClass.modelClassData(), "collectionKey")
+    }
+
+    this.shape = new Shape(this, {
+      columns: this.columnsAsArray(),
+      models: undefined,
+      overallCount: undefined,
+      query: undefined,
+      queryName,
+      queryQName: `${queryName}_q`,
+      queryPageName: `${queryName}_page`,
+      qParams: undefined,
+      result: undefined,
+      showNoRecordsAvailableContent: false,
+      showNoRecordsFoundContent: false
+    })
+  }
+
+  columnsAsArray () {
+    if (typeof this.props.columns == "function") {
+      return this.props.columns()
+    }
+
+    return this.props.columns
+  }
+
+  render () {
+    const {modelClass, noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "modelClass", "noRecordsAvailableContent", "noRecordsFoundContent")
+    const {collection, defaultParams, onModelsLoaded, preloads, select, selectColumns} = this.props
+    const {
+      overallCount,
+      qParams,
+      query,
+      result,
+      models,
+      showNoRecordsAvailableContent,
+      showNoRecordsFoundContent
+    } = digs(
+      this.shape,
+      "overallCount",
+      "qParams",
+      "query",
+      "result",
+      "models",
+      "showNoRecordsAvailableContent",
+      "showNoRecordsFoundContent"
+    )
+
+    return (
+      <div className={this.className()}>
+        <CollectionLoader
+          abilities={this.abilitiesToLoad()}
+          defaultParams={defaultParams}
+          collection={collection}
+          component={this}
+          modelClass={modelClass}
+          noRecordsAvailableContent={noRecordsAvailableContent}
+          noRecordsFoundContent={noRecordsFoundContent}
+          onModelsLoaded={onModelsLoaded}
+          preloads={preloads}
+          select={select}
+          selectColumns={selectColumns}
+        />
+        {showNoRecordsAvailableContent &&
+          <div className="live-table--no-records-available-content">
+            {noRecordsAvailableContent({models, qParams, overallCount})}
+          </div>
+        }
+        {showNoRecordsFoundContent &&
+          <div className="live-table--no-records-found-content">
+            {noRecordsFoundContent({models, qParams, overallCount})}
+          </div>
+        }
+        {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
+          this.cardOrTable()
+        }
+      </div>
+    )
+  }
+
+  abilitiesToLoad () {
+    const abilitiesToLoad = {}
+    const {abilities, modelClass} = this.props
+    const ownAbilities = []
+
+    if (this.props.destroyEnabled) {
+      ownAbilities.push("destroy")
+    }
+
+    if (this.props.editModelPath) {
+      ownAbilities.push("edit")
+    }
+
+    if (this.props.viewModelPath) {
+      ownAbilities.push("show")
+    }
+
+    if (ownAbilities.length > 0) {
+      const modelClassName = digg(modelClass.modelClassData(), "name")
+
+      abilitiesToLoad[modelClassName] = ownAbilities
+    }
+
+    if (abilities) {
+      for (const modelName in abilities) {
+        if (!(modelName in abilitiesToLoad)) {
+          abilitiesToLoad[modelName] = []
+        }
+
+        for (const ability of abilities[modelName]) {
+          abilitiesToLoad[modelName].push(ability)
+        }
+      }
+    }
+
+    return abilitiesToLoad
+  }
+
+  cardOrTable () {
+    const {
+      abilities,
+      actionsContent,
+      appHistory,
+      card,
+      className,
+      collection,
+      columns,
+      columnsContent,
+      controls,
+      defaultParams,
+      destroyEnabled,
+      destroyMessage,
+      editModelPath,
+      filterCard,
+      filterContent,
+      filterSubmitButton,
+      filterSubmitLabel,
+      headersContent,
+      header,
+      groupBy,
+      modelClass,
+      noRecordsAvailableContent,
+      noRecordsFoundContent,
+      onModelsLoaded,
+      paginateContent,
+      paginationComponent,
+      preloads,
+      queryName,
+      select,
+      selectColumns,
+      viewModelPath,
+      ...restProps
+    } = this.props
+    const {models, qParams, query, result} = digs(this.shape, "models", "qParams", "query", "result")
+
+    let controlsContent, headerContent, PaginationComponent
+
+    if (controls) {
+      controlsContent = controls({models, qParams, query, result})
+    }
+
+    if (typeof header == "function") {
+      headerContent = header({models, qParams, query, result})
+    } else if (header) {
+      headerContent = header
+    }
+
+    if (!paginateContent) {
+      if (paginationComponent) {
+        PaginationComponent = paginationComponent
+      } else {
+        PaginationComponent = Paginate
+      }
+    }
+
+    return (
+      <>
+        {filterContent && filterCard &&
+          <Card className="live-table--filter-card mb-4">
+            {this.filterForm()}
+          </Card>
+        }
+        {filterContent && !filterCard &&
+          this.filterForm()
+        }
+        {card &&
+          <Card className={classNames("mb-4", className)} controls={controlsContent} header={headerContent} table {...restProps}>
+            {this.tableContent()}
+          </Card>
+        }
+        {!card &&
+          <table className={className} {...restProps}>
+            {this.tableContent()}
+          </table>
+        }
+        {result && PaginationComponent &&
+          <PaginationComponent result={result} />
+        }
+        {result && paginateContent &&
+          paginateContent({result})
+        }
+      </>
+    )
+  }
+
+  filterForm = () => {
+    const {submitFilterDebounce} = digs(this, "submitFilterDebounce")
+    const {filterContent, filterSubmitButton} = digs(this.props, "filterContent", "filterSubmitButton")
+    const {filterSubmitLabel} = this.props
+    const {qParams} = digs(this.shape, "qParams")
+
+    return (
+      <form className="live-table--filter-form" onSubmit={this.onFilterFormSubmit} ref="filterForm">
+        {filterContent({
+          onFilterChanged: this.submitFilter,
+          onFilterChangedWithDelay: submitFilterDebounce,
+          qParams
+        })}
+        {filterSubmitButton &&
+          <input
+            className="btn btn-primary live-table--submit-filter-button"
+            type="submit"
+            value={filterSubmitLabel || I18n.t("js.api_maker_bootstrap.live_table.filter")}
+          />
+        }
+      </form>
+    )
+  }
+
+  tableContent () {
+    const {query, models} = this.shape
+
+    return (
+      <>
+        <thead>
+          <tr>
+            {this.shape.columns && this.headersContentFromColumns()}
+            {this.props.headersContent && this.props.headersContent({query})}
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {models.map((model) =>
+            <ModelRow key={model.id()} liveTable={this} model={model} />
+          )}
+        </tbody>
+      </>
+    )
+  }
+
+  className () {
+    const classNames = ["component-api-maker-live-table"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  headersContentFromColumns () {
+    const {columns} = digs(this.shape, "columns")
+
+    return columns.map((column) =>
+      <th
+        className={classNames(...this.headerClassNameForColumn(column))}
+        data-identifier={this.identifierForColumn(column)}
+        key={this.identifierForColumn(column)}
+      >
+        {column.sortKey && this.shape.query &&
+          <SortLink attribute={column.sortKey} query={this.shape.query} title={this.headerLabelForColumn(column)} />
+        }
+        {(!column.sortKey || !this.shape.query) &&
+          this.headerLabelForColumn(column)
+        }
+      </th>
+    )
+  }
+
+  headerClassNameForColumn (column) {
+    const classNames = ["live-table-header"]
+
+    if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
+    if (column.headerProps && column.headerProps.className) classNames.push(column.headerProps.className)
+    if (column.textCenter) classNames.push("text-center")
+    if (column.textRight) classNames.push("text-end text-right")
+
+    return classNames
+  }
+
+  headerLabelForColumn (column) {
+    if ("label" in column) {
+      if (typeof column.label == "function") {
+        return column.label()
+      } else {
+        return column.label
+      }
+    }
+
+    if (column.attribute) return this.props.modelClass.humanAttributeName(column.attribute)
+
+    throw new Error("No 'label' or 'attribute' was given")
+  }
+
+  identifierForColumn (column) {
+    if (column.identifier) return column.identifier
+    if (column.attribute) return `attribute-${column.attribute}`
+    if (column.sortKey) return `sort-key-${column.sortKey}`
+
+    throw new Error("No 'attribute', 'identifier' or 'sortKey' was given")
+  }
+
+  onFilterFormSubmit = (e) => {
+    e.preventDefault()
+    this.submitFilter()
+  }
+
+  submitFilter = () => {
+    const {appHistory} = this.props
+    const qParams = Params.serializeForm(this.refs.filterForm)
+    const {queryQName} = this.shape
+
+    const changeParamsParams = {}
+    changeParamsParams[queryQName] = qParams
+
+    Params.changeParams(changeParamsParams, {appHistory})
+  }
+
+  submitFilterDebounce = debounce(digg(this, "submitFilter"))
+}

package/src/bootstrap/paginate.jsx

@@ -0,0 +1,153 @@
+import instanceOfClassName from "../instance-of-class-name"
+import Link from "../link"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import qs from "qs"
+import React from "react"
+import Result from "../result"
+
+export default class ApiMakerBootstrapPaginate extends React.PureComponent {
+  static propTypes = propTypesExact({
+    result: PropTypes.oneOfType([
+      instanceOfClassName("ApiMakerResult"),
+      PropTypes.instanceOf(Result)
+    ]).isRequired
+  })
+
+  state = {
+    pages: this.pages()
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.result != this.props.result) {
+      this.setState({pages: this.pages()})
+    }
+  }
+
+  isPageActiveClass (pageNumber) {
+    if (this.props.result.currentPage() == pageNumber)
+      return "active"
+  }
+
+  pages () {
+    const currentPage = this.props.result.currentPage()
+    const pages = []
+    const totalPages = this.props.result.totalPages()
+    let pagesFrom = currentPage - 5
+    let pagesTo = currentPage + 5
+
+    if (pagesFrom < 1)
+      pagesFrom = 1
+
+    if (pagesTo > totalPages)
+      pagesTo = totalPages
+
+    for (let i = pagesFrom; i <= pagesTo; i++) {
+      pages.push(i)
+    }
+
+    return pages
+  }
+
+  pagePath (pageNumber) {
+    let pageKey = this.props.result.data.collection.queryArgs.pageKey
+
+    if (!pageKey)
+      pageKey = "page"
+
+    const currentParams = qs.parse(globalThis.location.search.substr(1))
+    currentParams[pageKey] = pageNumber
+    const newParams = qs.stringify(currentParams)
+    const newPath = `${location.pathname}?${newParams}`
+
+    return newPath
+  }
+
+  previousPagePath () {
+    let previousPage
+
+    if (this.props.result.currentPage() > 1) {
+      previousPage = this.props.result.currentPage() - 1
+    } else {
+      previousPage = this.props.result.currentPage()
+    }
+
+    return this.pagePath(previousPage)
+  }
+
+  nextPagePath () {
+    let nextPage
+
+    if (this.props.result.currentPage() < this.props.result.totalPages()) {
+      nextPage = this.props.result.currentPage() + 1
+    } else {
+      nextPage = this.props.result.currentPage()
+    }
+
+    return this.pagePath(nextPage)
+  }
+
+  showBackwardsDots () {
+    const currentPage = this.props.result.currentPage()
+    return (currentPage - 5 > 1)
+  }
+
+  showForwardsDots () {
+    const currentPage = this.props.result.currentPage()
+    const totalPages = this.props.result.totalPages()
+    return (currentPage + 5 < totalPages)
+  }
+
+  render () {
+    const {result} = this.props
+    const {pages} = this.state
+
+    return (
+      <>
+        <ul className="pagination" data-pages-length={pages.length}>
+          <li className={`page-item ${result.currentPage() <= 1 ? "disabled" : ""}`} key="page-first">
+            <Link className="page-link" to={this.pagePath(1)}>
+              ⇤
+            </Link>
+          </li>
+          <li className={`page-item ${result.currentPage() <= 1 ? "disabled" : ""}`} key="page-previous">
+            <Link className="page-link" to={this.previousPagePath()}>
+              ←
+            </Link>
+          </li>
+          {this.showBackwardsDots() &&
+            <li className="page-item">
+              <a className="page-link disabled" href="#">
+                &hellip;
+              </a>
+            </li>
+          }
+          {pages.map((page) =>
+            <li className={`page-item ${this.isPageActiveClass(page)}`} key={`page-${page}`}>
+              <Link className="page-link" to={this.pagePath(page)}>
+                {page}
+              </Link>
+            </li>
+          )}
+          {this.showForwardsDots() &&
+            <li className="page-item">
+              <a className="page-link disabled" href="#">
+                &hellip;
+              </a>
+            </li>
+          }
+          <li className={`page-item ${result.currentPage() >= result.totalPages() ? "disabled" : ""}`} key="page-next">
+            <Link className="page-link" to={this.nextPagePath()}>
+              →
+            </Link>
+          </li>
+          <li className={`page-item ${result.currentPage() >= result.totalPages() ? "disabled" : ""}`} key="page-last">
+            <Link className="page-link" to={this.pagePath(result.totalPages())}>
+              ⇥
+            </Link>
+          </li>
+        </ul>
+      </>
+    )
+  }
+}