@kaspernj/api-maker 1.0.216 → 1.0.217

package/src/super-admin/layout/menu/style.scss

@@ -0,0 +1,103 @@
+@import "stylesheets/variables";
+
+.components--admin--layout--menu {
+  position: fixed;
+  z-index: 9;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  background: #1b1c1e;
+  color: #fff;
+
+  @media (max-width: $sm-to) {
+    width: 100%;
+    max-width: 250px;
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &[data-triggered="false"] {
+      display: none;
+    }
+  }
+
+  @media (min-width: $md-from) {
+    width: 250px;
+  }
+
+  @media (min-width: $lg-from) {
+    width: 290px;
+  }
+
+  .menu-logo {
+    overflow: hidden;
+    width: 80%;
+    margin-top: 25px;
+    margin-right: auto;
+    margin-left: auto;
+    font-size: 42px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-logo-link {
+    &:link,
+    &:visited {
+      color: #dededf;
+      text-decoration: none;
+    }
+  }
+
+  .menu-items-center {
+    margin-top: 25px;
+  }
+
+  .menu-items-bottom {
+    margin-top: auto;
+    margin-bottom: 25px;
+  }
+
+  .menu-user-section {
+    display: flex;
+    align-items: center;
+    margin-right: 25px;
+    margin-bottom: 25px;
+    margin-left: 25px;
+  }
+
+  .menu-user-icon {
+    display: flex;
+    width: 44px;
+    min-width: 44px;
+    max-width: 44px;
+    height: 44px;
+    align-items: center;
+    justify-content: center;
+    background: #abbcd0;
+    border-radius: 50%;
+  }
+
+  .menu-user-name {
+    flex-shrink: 1;
+    margin-left: 8px;
+  }
+
+  .menu-user-name-container {
+    overflow: hidden;
+    max-width: 140px;
+  }
+
+  .menu-user-items {
+    position: relative;
+    margin-left: auto;
+  }
+
+  .menu-user-items-link {
+    &:link,
+    &:visited {
+      color: #dededf;
+    }
+  }
+}

package/src/super-admin/layout/style.scss

@@ -0,0 +1,25 @@
+@import "stylesheets/variables";
+
+.components--admin--layout {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  color: #000;
+
+  .app-layout-content-container {
+    min-height: 100vh;
+    background: #f7f7f7;
+
+    @media (max-width: $sm-to) {
+      padding: 130px 30px 30px;
+    }
+
+    @media (min-width: $md-from) {
+      padding: 130px 30px 30px 280px;
+    }
+
+    @media (min-width: $lg-from) {
+      padding: 130px 30px 30px 320px;
+    }
+  }
+}

package/src/table/column-identifier.mjs

@@ -0,0 +1,23 @@
+export default function columnIdentifier(column) {
+  if ("identifier" in column) return column.identifier
+
+  const parts = []
+
+  if ("path" in column) {
+    for (const pathPart of column.path) {
+      parts.push(pathPart)
+    }
+  }
+
+  if ("attribute" in column) {
+    parts.push(`attribute-${column.attribute}`)
+  }
+
+  if ("sortKey" in column) {
+    parts.push(`sort-key-${column.sortKey}`)
+  }
+
+  if (parts.length == 0) throw new Error(`Couldn't figure out the identifier for that column: ${JSON.stringify(column)}`)
+
+  return parts.join("--")
+}

package/src/table/column-visible.mjs

@@ -0,0 +1,7 @@
+export default function columnVisible(column, tableSettingColumn) {
+  if (tableSettingColumn.visible() !== null) return tableSettingColumn.visible()
+  if (!column) return false
+  if ("defaultVisible" in column) return column.defaultVisible
+
+  return true
+}

package/src/table/model-row.jsx

@@ -0,0 +1,182 @@
+import classNames from "classnames"
+import columnIdentifier from "./column-identifier.mjs"
+import columnVisible from "./column-visible.mjs"
+import {digg, digs} from "diggerize"
+import inflection from "inflection"
+import Link from "../link"
+import MoneyFormatter from "../money-formatter"
+import PropTypes from "prop-types"
+
+export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
+  static propTypes = {
+    model: PropTypes.object.isRequired,
+    liveTable: PropTypes.object.isRequired,
+    preparedColumns: PropTypes.array
+  }
+
+  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)
+
+    const RowComponent = this.props.rowComponent
+    const ColumnComponent = this.props.columnComponent
+
+    return (
+      <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
+        {columns && this.columnsContentFromColumns(model)}
+        {!columns && columnsContent && columnsContent(this.modelCallbackArgs)}
+        <ColumnComponent className="actions-column">
+          {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>
+          }
+        </ColumnComponent>
+      </RowComponent>
+    )
+  }
+
+  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)
+
+    return classNames
+  }
+
+  columnsContentFromColumns (model) {
+    const {preparedColumns} = digs(this.props, "preparedColumns")
+    const ColumnComponent = this.props.columnComponent
+
+    return preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+      <ColumnComponent
+        className={classNames(this.columnClassNamesForColumn(column))}
+        data-identifier={columnIdentifier(column)}
+        key={columnIdentifier(column)}
+        {...this.props.liveTable.columnProps(column)}
+      >
+        <div className="live-table-column-label">
+          {this.props.liveTable.headerLabelForColumn(column)}
+        </div>
+        <div className="live-table-column-value">
+          {column.content && this.columnContentFromContentArg(column, model)}
+          {!column.content && column.attribute && this.columnsContentFromAttributeAndPath(column, model)}
+        </div>
+      </ColumnComponent>
+    )
+  }
+
+  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 || []
+
+    let currentModel = model
+
+    if (path.length > 0) {
+      for (const pathPart of path) {
+        currentModel = currentModel[pathPart]()
+        if (!currentModel) return
+      }
+    }
+
+    if (!(attribute in currentModel)) throw new Error(`${currentModelClass.modelName().name} doesn't respond to ${attribute}`)
+
+    const value = currentModel[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 this.presentDateTime(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
+  }
+
+  presentDateTime(value) {
+    const apiMakerType = value.apiMakerType || "time"
+
+    if (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"
+
+      return I18n.l(dateFormatName, value)
+    } else {
+      throw new Error(`Unhandled type: ${apiMakerType}`)
+    }
+  }
+}

package/src/table/select-calculator.mjs

@@ -0,0 +1,48 @@
+import {digg, digs} from "diggerize"
+import inflection from "inflection"
+import modelClassRequire from "../model-class-require.mjs"
+
+class SelectCalculator {
+  constructor({table}) {
+    this.table = table
+  }
+
+  selects() {
+    const {modelClass} = digs(this.table.props, "modelClass")
+    const select = this.table.props.select || {}
+    const {preparedColumns} = digs(this.table.shape, "preparedColumns")
+
+    for (const preparedColumn of preparedColumns) {
+      const {column} = digs(preparedColumn, "column")
+
+      if (!column?.attribute) continue // 'column' might not exist if has been removed in code but still saved in DB
+
+      const {attribute} = digs(column, "attribute")
+      const {path} = column
+
+      let currentModelClass = modelClass
+
+      if (path) {
+        for (const pathPart of path) {
+          const relationships = digg(currentModelClass.modelClassData(), "relationships")
+          const relationship = relationships.find((relationshipInArray) => relationshipInArray.name == inflection.underscore(pathPart))
+
+          if (!relationship) throw new Error(`No such relationship: ${currentModelClass.modelClassData().name}#${pathPart}`)
+
+          currentModelClass = modelClassRequire(digg(relationship, "className"))
+        }
+      }
+
+      const currentModelClassName = digg(currentModelClass.modelClassData(), "name")
+
+      if (!(currentModelClassName in select)) select[currentModelClassName] = []
+      if (!select[currentModelClassName].includes(attribute)) select[currentModelClassName].push(attribute)
+    }
+
+    return select
+  }
+}
+
+export default function selectCalculator(...props) {
+  return new SelectCalculator(...props).selects()
+}

package/src/table/style.scss

@@ -0,0 +1,72 @@
+@import "./variables";
+
+.component-api-maker-live-table {
+  .live-table-header {
+    text-align: left;
+  }
+
+  @media (max-width: $sm-to) {
+    .live-table-column {
+      display: flex;
+      justify-content: space-between;
+
+      .live-table-column-value {
+        text-align: right;
+      }
+    }
+
+    .live-table-header-row {
+      margin-bottom: 15px;
+    }
+
+    .live-table-row {
+      + .live-table-row {
+        margin-top: 15px;
+      }
+    }
+  }
+
+  @media (min-width: $md-from) {
+    .actions-column {
+      text-align: right;
+    }
+
+    .live-table-header:not(:first-child),
+    .live-table-column:not(:first-child) {
+      padding-left: 10px;
+    }
+
+    .live-table-header:not(:last-child),
+    .live-table-column:not(:last-child) {
+      padding-right: 10px;
+    }
+
+    .live-table-column {
+      .live-table-column-label {
+        display: none;
+      }
+
+      &[data-text-align="center"] {
+        .live-table-column-value {
+          text-align: center;
+        }
+      }
+
+      &[data-text-align="right"] {
+        .live-table-column-value {
+          text-align: right;
+        }
+      }
+    }
+
+    .live-table-header {
+      &[data-text-align="center"] {
+        text-align: center;
+      }
+
+      &[data-text-align="right"] {
+        text-align: right;
+      }
+    }
+  }
+}

package/src/table/table-settings.js

@@ -0,0 +1,175 @@
+import columnIdentifier from "./column-identifier.mjs"
+import columnVisible from "./column-visible.mjs"
+import {digg} from "diggerize"
+import inflection from "inflection"
+import {serialize as objectToFormData} from "object-to-formdata"
+import {TableSetting} from "../models.mjs.erb"
+
+export default class ApiMakerTableSettings {
+  constructor({table}) {
+    this.table = table
+  }
+
+  columns = () => digg(this, "table", "columnsAsArray")()
+  currentUser = () => digg(this, "table", "props", "currentUser")
+  identifier = () => digg(this, "table", "shape", "identifier")
+
+  preparedColumns = (tableSetting) => {
+    const columns = this.table.columnsAsArray()
+    const ordered = this.orderedTableSettingColumns(tableSetting)
+    const result = {
+      columns: [],
+      preload: []
+    }
+
+    if (!ordered) return
+
+    for (const tableSettingColumn of ordered) {
+      const column = columns.find((column) => columnIdentifier(column) == tableSettingColumn.identifier())
+
+      result.columns.push({column, tableSettingColumn})
+
+      // Add needed preloads if column is visible
+      if (columnVisible(column, tableSettingColumn)) {
+        if (column.path) {
+          const preload = column.path.map((pathPart) => inflection.underscore(pathPart)).join(".")
+
+          if (!result.preload.includes(preload)) result.preload.push(preload)
+        }
+      }
+    }
+
+    return result
+  }
+
+  orderedTableSettingColumns = (tableSetting) => {
+    return tableSetting
+      .columns()
+      .loaded()
+      .sort((tableSettingColumn1, tableSettingColumn2) => tableSettingColumn1.position() - tableSettingColumn2.position())
+  }
+
+  loadExistingOrCreateTableSettings = async () => {
+    let tableSetting = await this.loadTableSetting()
+
+    if (tableSetting) {
+      tableSetting = await this.updateTableSetting(tableSetting)
+    } else {
+      tableSetting = await this.createInitialTableSetting()
+    }
+
+    return tableSetting
+  }
+
+  loadTableSetting = async () => {
+    if (!TableSetting) throw new Error("TableSetting model couldn't be imported")
+
+    const tableSetting = await TableSetting
+      .ransack({
+        identifier_eq: this.identifier(),
+        user_id_eq: this.currentUser().id(),
+        user_type_eq: digg(this.currentUser().modelClassData(), "name")
+      })
+      .preload("columns")
+      .first()
+
+    return tableSetting
+  }
+
+  createInitialTableSetting = async () => {
+    const tableSettingData = {
+      identifier: this.identifier(),
+      user_id: this.currentUser().id(),
+      user_type: digg(this.currentUser().modelClassData(), "name"),
+      columns_attributes: {}
+    }
+
+    const columns = this.columns()
+
+    for (const columnKey in columns) {
+      const column = digg(columns, columnKey)
+      const identifier = columnIdentifier(column)
+      const columnData = this.columnSaveData(column, {identifier, position: columnKey})
+
+      tableSettingData.columns_attributes[columnKey] = columnData
+    }
+
+    const tableSetting = new TableSetting()
+    const tableSettingFormData = objectToFormData({table_setting: tableSettingData})
+
+    await tableSetting.saveRaw(tableSettingFormData)
+
+    const reloadedTableSetting = await this.loadTableSetting()
+
+    return reloadedTableSetting
+  }
+
+  columnSaveData(column, {identifier, position}) {
+    return {
+      attribute_name: column.attribute,
+      identifier,
+      path: column.path,
+      position,
+      sort_key: column.sortKey,
+      visible: null
+    }
+  }
+
+  updateTableSetting = async (tableSetting) => {
+    // This should remove columns no longer found
+    // This should update columns that have changed
+
+    const columns = this.columns()
+    const columnsData = {}
+    const tableSettingData = {columns_attributes: columnsData}
+    let columnsKeyCount = 0
+    let changed = false
+
+    // Add missing columns
+    for (const column of columns) {
+      const identifier = columnIdentifier(column)
+      const tableSettingColumn = tableSetting.columns().loaded().find((tableSettingColumn) => tableSettingColumn.identifier() == identifier)
+
+      if (!tableSettingColumn) {
+        const columnKey = ++columnsKeyCount
+
+        columnsData[columnKey] = this.columnSaveData(
+          column,
+          {
+            identifier,
+            position: tableSetting.columns().loaded().length + columnKey
+          }
+        )
+
+        changed = true
+      }
+    }
+
+    for (const tableSettingColumn of tableSetting.columns().loaded()) {
+      const column = columns.find((column) => columnIdentifier(column) == tableSettingColumn.identifier())
+
+      if (column) {
+        // Update column if changed
+      } else {
+        // Removed saved columns no longer found
+        const columnKey = ++columnsKeyCount
+
+        columnsData[columnKey] = {
+          id: tableSettingColumn.id(),
+          _destroy: true
+        }
+      }
+    }
+
+    if (changed) {
+      const tableSettingFormData = objectToFormData({table_setting: tableSettingData})
+
+      await tableSetting.saveRaw(tableSettingFormData)
+
+      // Maybe not necessary?
+      // tableSetting = this.loadTableSetting()
+    }
+
+    return tableSetting
+  }
+}