@kaspernj/api-maker 1.0.2053 → 1.0.2054

package/src/table/header-select.jsx

@@ -1,78 +0,0 @@
-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={this.rootViewDataSet ||= {component: "api-maker/table/header-select"}}>
-        {this.s.modalOpen &&
-          <Modal dataSet={this.modalDataSet ||= {class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
-            {this.p.preparedColumns.map(({column, tableSettingColumn}) =>
-              <View
-                key={tableSettingColumn.identifier()}
-                style={this.headerColumnContentViewStyle ||= {marginVertical: 5}}
-              >
-                <HeaderColumnContent
-                  column={column}
-                  table={table}
-                  tableSettingColumn={tableSettingColumn}
-                  sortLinkProps={this.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

@@ -1,10 +0,0 @@
-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

@@ -1,86 +0,0 @@
-import {Animated, View} from "react-native"
-import React, {useMemo} from "react"
-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 {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 = useMemo(() =>
-      Object.assign(
-        table.styleForColumn({
-          column,
-          columnIndex,
-          even,
-          style: {
-            zIndex: animatedZIndex,
-            transform: this.p.animatedPosition.getTranslateTransform(),
-            width: mdUp ? animatedWidth : "100%"
-          }
-        }),
-        style
-      ),
-      [column, columnIndex, even, animatedZIndex, mdUp, animatedWidth, style]
-    )
-
-    const className = classNames(this.columnClassNamesForColumn(column))
-    const identifier = columnIdentifier(column)
-    const dataSet = useMemo(() => ({class: className, identifier}), [className])
-
-    return (
-      <Column
-        dataSet={dataSet}
-        style={actualStyle}
-        {...restColumnProps}
-      >
-        {!mdUp &&
-          <View dataSet={this.columnLabelDataSet ||= {class: "table--column-label"}}>
-            <Text style={this.columnLabelTextStyle ||= {fontWeight: "bold"}}>
-              {table.headerLabelForColumn(column)}
-            </Text>
-          </View>
-        }
-        <View dataSet={this.columnValueDataSet ||= {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

@@ -1,140 +0,0 @@
-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 {FlashNotifications} from "flash-notifications"
-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={this.cache("rowDataSet", {class: `${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`, modelId: model.id()}, [model.id(), modelClass.modelClassData().paramKey])}
-        style={styleForRow({even})}
-      >
-        {workplace &&
-          <Column dataSet={this.columnDataSet ||= {class: "workplace-column"}} style={styleForColumn({even, style: {width: 41}})}>
-            <WorkerPluginsCheckbox
-              currentWorkplace={currentWorkplace}
-              model={model}
-              style={this.workerPluginsCheckboxStyle ||= {marginHorizontal: "auto"}}
-            />
-          </Column>
-        }
-        {columns && this.columnsContentFromColumns(model, even)}
-        <Column dataSet={this.actionsColumnDataSet ||= {class: "actions-column"}} style={styleForColumn({even, style: {}, type: "actions"})}>
-          {actionsContent && actionsContent(this.tt.modelCallbackArgs)}
-          {viewPath &&
-            <Link dataSet={this.viewButtonDataSet ||= {class: "view-button"}} style={this.searchLinkStyle ||= {marginLeft: 2, marginRight: 2}} to={viewPath}>
-              <Icon name="search" size={18} />
-            </Link>
-          }
-          {editPath &&
-            <Link dataSet={this.editButtonDataSet ||= {class: "edit-button"}} style={this.editButtonStyle ||= {marginLeft: 2, marginRight: 2}} to={editPath}>
-              <Icon name="pencil" size={20} />
-            </Link>
-          }
-          {destroyEnabled && model.can("destroy") &&
-            <Pressable
-              dataSet={this.destroyButtonDataSet ||= {class: "destroy-button"}}
-              style={this.destroyButtonStyle ||= {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) {
-        FlashNotifications.success(destroyMessage)
-      }
-    } catch (error) {
-      FlashNotifications.errorResponse(error)
-    }
-  }
-}))

package/src/table/select-calculator.js

@@ -1,65 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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={this.rootViewDataSet ||= {component: "api-maker--table--settings--column-row"}} style={this.rootViewStyle ||= {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

@@ -1,73 +0,0 @@
-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({
-    l: PropTypes.func.isRequired,
-    table: PropTypes.object.isRequired
-  })
-
-  render() {
-    return (
-      <Pressable
-        dataSet={this.pressableDataSet ||= {component: "api-maker/table/settings/download-action"}}
-        onPress={this.tt.onDownloadPress}
-        style={this.pressableStyle ||= {flexDirection: "row", alignItems: "center"}}
-      >
-        <Icon name="download" size={20} />
-        <Text style={this.textStyle ||= {marginLeft: 5}}>
-          Download
-        </Text>
-      </Pressable>
-    )
-  }
-
-  onDownloadPress = () => {
-    const {l, 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, l, 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

@@ -1,66 +0,0 @@
-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 {l, t} = useI18n({namespace: "js.api_maker.table.settings"})
-
-    this.rootRef = useRef()
-    this.l = l
-    this.t = t
-  }
-
-  tableSetting = () => this.p.table.s.tableSetting
-
-  render() {
-    const {l, t} = this.tt
-    const {table} = this.p
-    const {preparedColumns} = table.s
-
-    return (
-      <Modal onBackdropPress={this.p.onRequestClose} onRequestClose={this.p.onRequestClose} style={this.rootModalStyle ||= {backgroundColor: "#000"}} transparent>
-        <View
-          dataSet={this.rootViewDataSet ||= {class: "api-maker--table--settings"}}
-          style={this.rootViewStyle ||= {
-            width: "100%",
-            maxWidth: 800,
-            padding: 20,
-            backgroundColor: "#fff",
-            border: "1px solid black"
-          }}
-        >
-          <View style={this.settingsHeaderViewStyle ||= {marginBottom: 5}}>
-            <Text style={this.settingsHeaderTextSTyle ||= {fontSize: 16, fontWeight: "bold"}}>
-              {t(".settings", {defaultValue: "Settings"})}
-            </Text>
-          </View>
-          <DownloadAction l={l} table={table} />
-          <View style={this.columnsHeaderViewStyle ||= {marginBottom: 5}}>
-            <Text style={this.columnsHeaderTextStyle ||= {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>
-    )
-  }
-}))