@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/table/header-select.jsx

@@ -0,0 +1,73 @@
+import {Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Collection from "../collection"
+import HeaderColumnContent from "./header-column-content"
+import memo from "set-state-compare/src/memo"
+import Modal from "../utils/modal"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import useSorting from "./use-sorting"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderSelect extends BaseComponent {
+  static propTypes = propTypesExact({
+    preparedColumns: PropTypes.array.isRequired,
+    query: PropTypes.instanceOf(Collection).isRequired,
+    table: PropTypes.object
+  })
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.header_select"})
+    const {preparedColumns, query} = this.p
+    const {qParams, searchKey, sortAttribute, sortMode} = useSorting({query})
+
+    this.useStates({
+      modalOpen: false
+    })
+    this.setInstance({qParams, searchKey, sortAttribute, sortMode, t})
+    this.sortedByPreparedColumn = preparedColumns.find((preparedColumn) => preparedColumn.tableSettingColumn.sortKey() == sortAttribute)
+  }
+
+  render() {
+    const {sortedByPreparedColumn, sortMode, t} = this.tt
+    const {table} = this.p
+    const column = sortedByPreparedColumn?.column
+    const columnLabel = column && table.headerLabelForColumn(column)
+
+    return (
+      <View dataSet={{component: "api-maker/table/header-select"}}>
+        {this.s.modalOpen &&
+          <Modal dataSet={{class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
+            {this.p.preparedColumns.map(({column, tableSettingColumn}) =>
+              <View
+                key={tableSettingColumn.identifier()}
+                style={{marginVertical: 5}}
+              >
+                <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} sortLinkProps={{usePressable: true}} />
+              </View>
+            )}
+          </Modal>
+        }
+        <Pressable onPress={this.tt.onSortedByPress}>
+          <Text>
+            {sortedByPreparedColumn && sortMode == "asc" &&
+              t(".sorted_by_column", {column: columnLabel, defaultValue: "Sorted by %{column}"})
+            }
+            {sortedByPreparedColumn && sortMode == "desc" &&
+              t(".sorted_by_column_reversed", {column: columnLabel, defaultValue: "Sorted by %{column} reversed"})
+            }
+            {!sortedByPreparedColumn &&
+              t(".not_sorted", {defaultValue: "Not sorted"})
+            }
+          </Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  onModalRequestClose = () => this.setState({modalOpen: false})
+  onSortedByPress = () => this.setState({modalOpen: true})
+}))

package/src/table/model-callback-args.js

@@ -0,0 +1,10 @@
+import * as inflection from "inflection"
+
+export default function modelCallbackArgs(table, model) {
+  const modelArgName = inflection.camelize(table.props.modelClass.modelClassData().name, true)
+  const modelCallbackArgs = {model}
+
+  modelCallbackArgs[modelArgName] = model
+
+  return modelCallbackArgs
+}

package/src/table/model-column.jsx

@@ -0,0 +1,82 @@
+import {Animated, View} from "react-native"
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import Column from "./components/column"
+import ColumnContent from "./column-content"
+import columnIdentifier from "./column-identifier"
+import EventEmitter from "events"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../utils/text"
+import useBreakpoint from "../use-breakpoint"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    animatedPosition: PropTypes.instanceOf(Animated.ValueXY).isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
+    column: PropTypes.object.isRequired,
+    columnIndex: PropTypes.number.isRequired,
+    even: PropTypes.bool.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
+    model: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  render() {
+    const {l, t} = useI18n({namespace: "js.api_maker.table.model_column"})
+    const {mdUp} = useBreakpoint()
+    const {animatedWidth, animatedZIndex, column, columnIndex, even, model, table} = this.props
+    const columnProps = table.columnProps(column)
+    const {style, ...restColumnProps} = columnProps
+    const actualStyle = Object.assign(
+      table.styleForColumn({
+        column,
+        columnIndex,
+        even,
+        style: {
+          zIndex: animatedZIndex,
+          transform: this.p.animatedPosition.getTranslateTransform(),
+          width: mdUp ? animatedWidth : "100%"
+        }
+      }),
+      style
+    )
+
+    return (
+      <Column
+        dataSet={{
+          class: classNames(this.columnClassNamesForColumn(column)),
+          identifier: columnIdentifier(column)
+        }}
+        style={actualStyle}
+        {...restColumnProps}
+      >
+        {!mdUp &&
+          <View dataSet={{class: "table--column-label"}}>
+            <Text style={{fontWeight: "bold"}}>
+              {table.headerLabelForColumn(column)}
+            </Text>
+          </View>
+        }
+        <View dataSet={{class: "table--column-value"}}>
+          {new ColumnContent({column, l, model, t, table}).content()}
+        </View>
+      </Column>
+    )
+  }
+
+  columnClassNamesForColumn(column) {
+    const classNames = ["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
+  }
+}))

package/src/table/model-row.jsx

@@ -0,0 +1,136 @@
+import {Pressable} from "react-native"
+import BaseComponent from "../base-component"
+import Column from "./components/column"
+import columnIdentifier from "./column-identifier"
+import EventEmitter from "events"
+import FlashMessage from "../flash-message"
+import Icon from "../utils/icon"
+import * as inflection from "inflection"
+import modelCallbackArgs from "./model-callback-args"
+import Link from "../link"
+import ModelColumn from "./model-column"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import Row from "./components/row"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
+
+export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
+  static propTypes = propTypesExact({
+    cacheKey: PropTypes.string.isRequired,
+    columns: PropTypes.array,
+    columnWidths: PropTypes.object.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
+    index: PropTypes.number.isRequired,
+    model: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingFullCacheKey: PropTypes.string.isRequired
+  })
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.model_row"})
+
+    this.t = t
+  }
+
+  render() {
+    const {index, table, model} = this.p
+    const {modelClass, workplace} = table.p
+    const {actionsContent, destroyEnabled, editModelPath, viewModelPath} = table.props
+    const {columns, currentWorkplace} = table.state
+    const {styleForColumn, styleForRow} = table.tt
+    const even = index % 2 == 0
+
+    this.modelCallbackArgs = modelCallbackArgs(table, model) // 'model' can change so this needs to be re-cached for every render
+
+    let editPath, viewPath
+
+    if (editModelPath && model.can("edit")) {
+      editPath = editModelPath(this.modelCallbackArgs)
+    }
+
+    if (viewModelPath && model.can("show")) {
+      viewPath = viewModelPath(this.modelCallbackArgs)
+    }
+
+    return (
+      <Row
+        dataSet={{class: `${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`, modelId: model.id()}}
+        style={styleForRow({even})}
+      >
+        {workplace &&
+          <Column dataSet={{class: "workplace-column"}} style={styleForColumn({even, style: {width: 41}})}>
+            <WorkerPluginsCheckbox
+              currentWorkplace={currentWorkplace}
+              model={model}
+              style={{marginHorizontal: "auto"}}
+            />
+          </Column>
+        }
+        {columns && this.columnsContentFromColumns(model, even)}
+        <Column dataSet={{class: "actions-column"}} style={styleForColumn({even, style: {}, type: "actions"})}>
+          {actionsContent && actionsContent(this.tt.modelCallbackArgs)}
+          {viewPath &&
+            <Link dataSet={{class: "view-button"}} style={{marginLeft: 2, marginRight: 2}} to={viewPath}>
+              <Icon name="search" size={18} />
+            </Link>
+          }
+          {editPath &&
+            <Link dataSet={{class: "edit-button"}} style={{marginLeft: 2, marginRight: 2}} to={editPath}>
+              <Icon name="pencil" size={20} />
+            </Link>
+          }
+          {destroyEnabled && model.can("destroy") &&
+            <Pressable dataSet={{class: "destroy-button"}} style={{marginLeft: 2, marginRight: 2}} onPress={this.tt.onDestroyClicked}>
+              <Icon name="remove" size={22} />
+            </Pressable>
+          }
+        </Column>
+      </Row>
+    )
+  }
+
+  columnsContentFromColumns(model, even) {
+    const {columns, events, table} = this.p
+
+    return columns?.map(({animatedPosition, animatedWidth, animatedZIndex, column, tableSettingColumn}, columnIndex) =>
+      <ModelColumn
+        animatedPosition={animatedPosition}
+        animatedWidth={animatedWidth}
+        animatedZIndex={animatedZIndex}
+        column={column}
+        columnIndex={columnIndex}
+        even={even}
+        events={events}
+        key={columnIdentifier(column)}
+        model={model}
+        table={table}
+        tableSettingColumn={tableSettingColumn}
+      />
+    )
+  }
+
+  onDestroyClicked = async () => {
+    const {t} = this.tt
+    const {destroyMessage} = this.p.table.props
+    const {model} = this.p
+
+    if (!confirm(t("js.shared.are_you_sure"))) {
+      return
+    }
+
+    try {
+      await model.destroy()
+
+      if (destroyMessage) {
+        FlashMessage.success(destroyMessage)
+      }
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+}))

package/src/table/select-calculator.js

@@ -0,0 +1,65 @@
+import {digg, digs} from "diggerize"
+import * as inflection from "inflection"
+import modelClassRequire from "../model-class-require"
+
+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.state, "preparedColumns")
+
+
+    // Ensure the primary key column is loader for the primary model class
+    const className = digg(modelClass.modelClassData(), "name")
+    const primaryKeyColumnName = modelClass.primaryKey()
+
+    if (!(className in select)) select[className] = []
+    if (!select[className].includes(primaryKeyColumnName)) select[className].push(primaryKeyColumnName)
+
+
+    // Ensure 'updatedAt' is selected if defined as an attribute, because it is used for cacheKey and updates in the table
+    if (modelClass.hasAttribute("updatedAt")) {
+      if (!(className in select)) select[className] = []
+      if (!select[className].includes("updatedAt")) select[className].push("updatedAt")
+    }
+
+
+    // Ensure columns used for columns are loaded
+    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, "resource_name"))
+        }
+      }
+
+      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/settings/column-row.jsx

@@ -0,0 +1,93 @@
+import React, {useEffect, useRef} from "react"
+import BaseComponent from "../../base-component"
+import columnIdentifier from "../column-identifier"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ColumnRow extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.checked = this.p.tableSettingColumn.visible()
+    this.checkboxRef = useRef()
+
+    useEffect(() => {
+      this.updateCheckboxChecked()
+    }, [this.checked])
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const checkboxProps = {}
+
+    if (tableSettingColumn.visible() === true) {
+      checkboxProps.checked = "checked"
+    } else if (tableSettingColumn.visible() === null) {
+      checkboxProps.indeterminate = "indeterminate"
+    }
+
+    return (
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+        <label style={{whiteSpace: "nowrap"}}>
+          <input
+            className="api-maker--table--setings--column-checkbox"
+            data-identifier={columnIdentifier(column)}
+            onChange={this.onCheckboxChange}
+            ref={this.checkboxRef}
+            type="checkbox"
+            {...checkboxProps}
+          />
+          <Text>
+            {table.headerLabelForColumn(column)}
+          </Text>
+        </label>
+      </View>
+    )
+  }
+
+  onCheckboxChange = () => {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checked = null
+    } else if (checked === null) {
+      this.checked = false
+    } else {
+      this.checked = true
+    }
+
+    this.updateCheckboxChecked()
+    this.updateTableSettingColumn()
+  }
+
+  updateCheckboxChecked() {
+    const {checked} = this.tt
+
+    if (checked === true) {
+      this.checkboxRef.current.checked = true
+      this.checkboxRef.current.indeterminate = undefined
+    } else if (checked === null) {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = true
+    } else {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = undefined
+    }
+  }
+
+  async updateTableSettingColumn() {
+    const {table, tableSettingColumn} = this.p
+
+    await tableSettingColumn.update({visible: this.checked})
+
+    table.events.emit("columnVisibilityUpdated", {tableSettingColumn})
+  }
+}))

package/src/table/settings/download-action.jsx

@@ -0,0 +1,68 @@
+import BaseComponent from "../../base-component"
+import ColumnContent from "../column-content"
+import columnIdentifier from "../column-identifier"
+import columnVisible from "../column-visible"
+import {saveAs} from "file-saver"
+import Icon from "../../utils/icon"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {renderToString} from "react-dom/server"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {Pressable} from "react-native"
+import Text from "../../utils/text"
+
+export default memo(shapeComponent(class ApiMakerTableSettingsDownloadAction extends BaseComponent {
+  static propTypes = propTypesExact({
+    table: PropTypes.object.isRequired
+  })
+
+  render() {
+    return (
+      <Pressable onPress={this.tt.onDownloadPress} style={{flexDirection: "row", alignItems: "center"}}>
+        <Icon name="download" size={20} />
+        <Text style={{marginLeft: 5}}>
+          Download
+        </Text>
+      </Pressable>
+    )
+  }
+
+  onDownloadPress = () => {
+    const {table} = this.p
+    const {modelClass} = table.p
+    const {collection} = table.tt
+    const {models} = collection
+    const {preparedColumns} = table.s
+    const tableElement = (
+      <table>
+        <thead>
+          <tr>
+            {preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+              <th key={columnIdentifier(column)}>
+                {table.headerLabelForColumn(column)}
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {models.map((model) =>
+            <tr key={model.id()}>
+              {preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+                <td key={columnIdentifier(column)}>
+                  {new ColumnContent({column, mode: "html", model, table}).content()}
+                </td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    )
+    const tableHTML = renderToString(tableElement)
+    const blob = new Blob([tableHTML], {type: "text/html;charset=utf-8"})
+    const fileName = `${modelClass.modelName().human({count: 2})}.html`
+
+    saveAs(blob, fileName)
+  }
+}))

package/src/table/settings/index.jsx

@@ -0,0 +1,65 @@
+import React, {useRef} from "react"
+import BaseComponent from "../../base-component"
+import columnIdentifier from "../column-identifier"
+import ColumnRow from "./column-row"
+import DownloadAction from "./download-action"
+import memo from "set-state-compare/src/memo"
+import Modal from "../../modal"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {View} from "react-native"
+import Text from "../../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
+  static propTypes = propTypesExact({
+    onRequestClose: PropTypes.func.isRequired,
+    table: PropTypes.object.isRequired
+  })
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.settings"})
+
+    this.rootRef = useRef()
+    this.t = t
+  }
+
+  tableSetting = () => this.p.table.s.tableSetting
+
+  render() {
+    const {t} = this.tt
+    const {table} = this.p
+    const {preparedColumns} = table.s
+
+    return (
+      <Modal onBackdropPress={this.p.onRequestClose} onRequestClose={this.p.onRequestClose} style={{backgroundColor: "#000"}} transparent>
+        <View
+          dataSet={{class: "api-maker--table--settings"}}
+          style={{
+            width: "100%",
+            maxWidth: 800,
+            padding: 20,
+            backgroundColor: "#fff",
+            border: "1px solid black"
+          }}
+        >
+          <View style={{marginBottom: 5}}>
+            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+              {t(".settings", {defaultValue: "Settings"})}
+            </Text>
+          </View>
+          <DownloadAction table={table} />
+          <View style={{marginBottom: 5}}>
+            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+              {t(".columns", {defaultValue: "Columns"})}
+            </Text>
+          </View>
+          {preparedColumns?.map(({column, tableSettingColumn}) =>
+            <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
+          )}
+        </View>
+      </Modal>
+    )
+  }
+}))