@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/super-admin/model-class-table.jsx

@@ -0,0 +1,66 @@
+import BaseComponent from "../base-component"
+import ConfigReader from "./config-reader"
+import {digg} from "diggerize"
+import hasEditConfig from "./has-edit-config"
+import * as inflection from "inflection"
+import memo from "set-state-compare/src/memo"
+import Params from "../params"
+import PropTypes from "prop-types"
+import React, {useMemo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Table from "../table/table"
+import useCurrentUser from "../use-current-user"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminModelClassTable extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
+
+  render() {
+    const {modelClass, ...restProps} = this.props
+    const currentUser = useCurrentUser()
+    const configReader = useMemo(() => ConfigReader.forModel(modelClass), [modelClass])
+    const {columns, select} = useMemo(() => configReader.tableColumns(), [modelClass])
+    const tableConfig = configReader.modelConfig?.table
+    const tableProps = {}
+
+    if (!columns) throw new Error("No columns given")
+
+    if (tableConfig?.query) tableProps.collection = tableConfig.query
+
+    return (
+      <Table
+        columns={columns}
+        currentUser={currentUser}
+        editModelPath={hasEditConfig(modelClass) ? this.tt.editModelPath : undefined}
+        modelClass={modelClass}
+        select={select}
+        viewModelPath={this.tt.viewModelPath}
+        workplace
+        {...tableProps}
+        {...restProps}
+      />
+    )
+  }
+
+  editModelPath = (args) => {
+    const argName = inflection.camelize(digg(this.p.modelClass.modelClassData(), "name"), true)
+    const model = digg(args, argName)
+
+    return Params.withParams({
+      model: this.p.modelClass.modelClassData().name,
+      model_id: model.primaryKey(),
+      mode: "edit"
+    })
+  }
+
+  viewModelPath = (args) => {
+    const argName = inflection.camelize(digg(this.p.modelClass.modelClassData(), "name"), true)
+    const model = digg(args, argName)
+
+    return Params.withParams({
+      model: this.p.modelClass.modelClassData().name,
+      model_id: model.primaryKey()
+    })
+  }
+}))

package/src/super-admin/models.js

@@ -0,0 +1,11 @@
+import * as models from "models"
+
+const modelsAsArray = []
+
+for (const modelKey of Object.keys(models)) {
+  const model = models[modelKey]
+
+  modelsAsArray.push(model)
+}
+
+export default modelsAsArray

package/src/super-admin/show-nav.jsx

@@ -0,0 +1,44 @@
+import BaseComponent from "../base-component"
+import Link from "../link"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import memo from "set-state-compare/src/memo"
+import Params from "../params"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import ShowReflectionLink from "./show-reflection-link"
+import Text from "../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import useQueryParams from "on-location-changed/build/use-query-params"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseComponent {
+  static propTypes = PropTypesExact({
+    model: PropTypes.object.isRequired,
+    modelClass: PropTypes.func.isRequired
+  })
+
+  render() {
+    const {t} = useI18n({namespace: "js.api_maker.suprt_admin.show_reflection_page"})
+    const {model, modelClass} = this.props
+    const queryParams = useQueryParams()
+    const reflections = modelClass.reflections()
+
+    return (
+      <View dataSet={{component: "super-admin--show-nav"}}>
+        <View>
+          <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id})}>
+            <Text>
+              {t(".general", {defaultValue: "General"})}
+            </Text>
+          </Link>
+        </View>
+        {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
+          <View key={reflection.name()}>
+            <ShowReflectionLink model={model} modelClass={modelClass} reflection={reflection} />
+          </View>
+        )}
+      </View>
+    )
+  }
+}))

package/src/super-admin/show-page/belongs-to-attribute-row.jsx

@@ -0,0 +1,30 @@
+import AttributeRow from "../../bootstrap/attribute-row"
+import BaseComponent from "../../base-component"
+import * as inflection from "inflection"
+import Link from "../../link"
+import memo from "set-state-compare/src/memo"
+import Params from "../../params"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowPageBelongsToAttributeRow extends BaseComponent {
+  render() {
+    const {model, modelClass, reflection} = this.props
+    const reflectionMethodName = inflection.camelize(reflection.name(), true)
+    const subModel = model[reflectionMethodName]()
+
+    return (
+      <AttributeRow label={modelClass.humanAttributeName(inflection.camelize(reflection.name(), true))}>
+        {subModel &&
+          <Link to={Params.withParams({model: subModel.modelClassData().name, model_id: subModel.primaryKey()})}>
+            <Text>
+              {subModel && "name" in subModel && subModel.name()}
+              {subModel && !("name" in subModel) && subModel?.id()}
+            </Text>
+          </Link>
+        }
+      </AttributeRow>
+    )
+  }
+}))

package/src/super-admin/show-page/index.jsx

@@ -0,0 +1,141 @@
+import React, {useMemo} from "react"
+import AttributeRow from "../../bootstrap/attribute-row"
+import BaseComponent from "../../base-component"
+import BelongsToAttributeRow from "./belongs-to-attribute-row"
+import ConfigReader from "../config-reader"
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import * as inflection from "inflection"
+import PropTypes from "prop-types"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import ShowNav from "../show-nav"
+import useModel from "../../use-model"
+import {View} from "react-native"
+
+const AttributePresenter = memo(({attribute, model, modelArgs}) => {
+  const attributeRowProps = {
+    model
+  }
+
+  if (typeof attribute == "object") {
+    if (attribute.attribute) attributeRowProps.attribute = attribute.attribute
+    if (attribute.content) attributeRowProps.children = attribute.content(modelArgs)
+    if (attribute.label) attributeRowProps.label = attribute.label
+  } else if (attribute) {
+    attributeRowProps.attribute = attribute
+  }
+
+  return (
+    <AttributeRow {...attributeRowProps} />
+  )
+})
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
+
+  setup() {
+    const {modelClass} = this.props
+    const configReader = useMemo(() => ConfigReader.forModel(modelClass), [modelClass])
+    const showConfig = configReader.modelConfig?.show
+
+    this.setInstance({configReader, showConfig})
+  }
+
+  render() {
+    const {modelClass} = this.props
+    const {configReader, showConfig} = this.tt
+    const attributes = configReader.attributesToShow()
+    const extraContent = showConfig?.extraContent
+    const modelClassName = modelClass.modelClassData().name
+    const primaryKeyName = modelClass.primaryKey()
+    const preload = []
+    const select = showConfig?.extraSelect || {}
+    const modelClassSelect = select[modelClassName] || []
+
+    if (showConfig?.preload) {
+      for (const showConfigPreload of showConfig.preload) {
+        preload.push(showConfigPreload)
+      }
+    }
+
+    if (!(modelClassName in select)) select[modelClassName] = modelClassSelect
+    if (!modelClassSelect.includes(primaryKeyName)) modelClassSelect.push(primaryKeyName)
+
+    // Select all attributes selected by default because they will be shown by default
+    for (const attribute of modelClass.attributes()) {
+      if ((attribute.isSelectedByDefault() || attribute.name() == "name") && !modelClassSelect.includes(attribute.name())) {
+        modelClassSelect.push(attribute.name())
+      }
+    }
+
+    for (const reflection of modelClass.reflections()) {
+      if (reflection.macro() == "belongs_to") {
+        const reflectionModelClass = reflection.modelClass()
+        const reflectionModelClassName = reflectionModelClass.modelClassData().name
+        const reflectionModelClassAttributes = reflectionModelClass.attributes()
+        const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
+
+        preload.push(inflection.underscore(reflection.name()))
+
+        if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
+        if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
+        if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+
+        // The foreign key is needed to look up any belongs-to-relationships
+        if (!modelClassSelect.includes(reflection.foreignKey())) {
+          const foreignKeyAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == reflection.foreignKey())
+
+          if (!foreignKeyAttribute) {
+            throw new Error(`${reflection.foreignKey()} wasn't defined as an attribute on ${modelClassName}`)
+          }
+
+          modelClassSelect.push(reflection.foreignKey())
+        }
+      } else if (reflection.macro() == "has_one") {
+        const reflectionModelClass = reflection.modelClass()
+        const reflectionModelClassName = reflectionModelClass.modelClassData().name
+        const reflectionModelClassAttributes = reflectionModelClass.attributes()
+        const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
+
+        preload.push(inflection.underscore(reflection.name()))
+
+        if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
+        if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
+        if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+
+        // The foreign key is needed to look up any has-one-relationships
+        if (!modelClassSelect.includes(reflection.foreignKey()) && !select[reflectionModelClassName].includes(reflection.foreignKey()) && !reflection.through()) {
+          select[reflectionModelClassName].push(reflection.foreignKey())
+        }
+      }
+    }
+
+    const useModelResult = useModel(modelClass, {
+      loadByQueryParam: ({queryParams}) => queryParams.model_id,
+      preload,
+      select
+    })
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const model = digg(useModelResult, camelizedLower)
+    const modelArgs = {}
+
+    modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
+
+    return (
+      <View dataSet={{component: "super-admin--show-page"}}>
+        {model &&
+          <ShowNav model={model} modelClass={modelClass} />
+        }
+        {attributes && model && attributes.map((attribute) =>
+          <AttributePresenter attribute={attribute} key={attribute.key || attribute.attribute || attribute} modelArgs={modelArgs} model={model} />
+        )}
+        {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to" || reflection.macro() == "has_one").map((reflection) =>
+          <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
+        )}
+        {model && extraContent && extraContent(modelArgs)}
+      </View>
+    )
+  }
+}))

package/src/super-admin/show-reflection-actions.jsx

@@ -0,0 +1,49 @@
+import BaseComponent from "../base-component"
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import React, {useMemo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class SuperAdminShowReflectionActions extends BaseComponent {
+  static propTypes = propTypesExact({
+    model: PropTypes.object,
+    modelClass: PropTypes.func,
+    reflectionName: PropTypes.string
+  })
+
+  setup() {
+    const {modelClass, reflectionName} = this.p
+
+    this.reflection = useMemo(() => modelClass.reflections().find((reflection) => reflection.name() == reflectionName), [modelClass, reflectionName])
+    this.canCan = useCanCan(() => [[this.reflection.modelClass(), ["new"]]])
+  }
+
+  render() {
+    const {canCan, reflection} = this.tt
+    const {model} = this.p
+    const modelClassName = digg(reflection, "reflectionData", "className")
+    const modelData = {}
+    const dataParamName = inflection.singularize(reflection.reflectionData.collectionName)
+
+    modelData[reflection.foreignKey()] = model?.id()
+
+    const linkParams = {
+      model: modelClassName,
+      mode: "new"
+    }
+
+    linkParams[dataParamName] = modelData
+
+    return (
+      <>
+        {canCan?.can("new", reflection.modelClass()) &&
+          <Link dataSet={{class: "create-new-model-link"}} to={Params.withParams(linkParams)}>
+            Create new
+          </Link>
+        }
+      </>
+    )
+  }
+}))

package/src/super-admin/show-reflection-link.jsx

@@ -0,0 +1,40 @@
+import BaseComponent from "../base-component"
+import {digg} from "diggerize"
+import Link from "../link"
+import memo from "set-state-compare/src/memo"
+import Params from "../params"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../utils/text"
+import {useMemo} from "react"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionLink extends BaseComponent {
+  setup() {
+    this.useStates({count: undefined})
+
+    useMemo(() => {
+      this.countRelationship()
+    }, [])
+  }
+
+  countRelationship = async () => {
+    const {model, reflection} = this.p
+    const query = model[reflection.name()]()
+    const count = await query.ransack().count()
+
+    this.setState({count})
+  }
+
+  render() {
+    const {model, modelClass, reflection} = this.p
+    const {count} = this.s
+
+    return (
+      <Link to={Params.withParams({model: digg(modelClass.modelClassData(), "name"), model_id: model.primaryKey(), model_reflection: reflection.name()})}>
+        <Text>
+          {modelClass.humanAttributeName(reflection.name())} ({count})
+        </Text>
+      </Link>
+    )
+  }
+}))

package/src/super-admin/show-reflection-page.jsx

@@ -0,0 +1,47 @@
+import BaseComponent from "../base-component"
+import {digg} from "diggerize"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import memo from "set-state-compare/src/memo"
+import ModelClassTable from "./model-class-table"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import ShowNav from "./show-nav"
+import useQueryParams from "on-location-changed/build/use-query-params"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage extends BaseComponent {
+  static propTypes = propTypesExact({
+    modelClass: PropTypes.func.isRequired,
+    modelId: PropTypes.string.isRequired
+  })
+
+  render() {
+    const {modelClass} = this.p
+    const queryParams = useQueryParams()
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const useModelResult = useModel(modelClass, {loadByQueryParam: ({queryParams}) => digg(queryParams, "model_id")})
+    const model = digg(useModelResult, camelizedLower)
+    const reflections = modelClass.reflections()
+    const reflection = reflections.find((reflectionI) => reflectionI.name() == queryParams.model_reflection)
+    const reflectionModelClass = reflection.modelClass()
+    let collection
+
+    if (model) collection = model[reflection.name()]()
+
+    return (
+      <View dataSet={{component: "super-admin--show-page"}}>
+        {model &&
+          <ShowNav model={model} modelClass={modelClass} />
+        }
+        {collection &&
+          <ModelClassTable
+            collection={collection}
+            key={reflectionModelClass.modelName().human()}
+            modelClass={reflectionModelClass}
+          />
+        }
+      </View>
+    )
+  }
+}))

package/src/super-admin/stylesheets/variables.scss

@@ -0,0 +1,11 @@
+$xs-from: 0;
+$xs-to: 575;
+$sm-from: 576px;
+$sm-to: 767px;
+$md-from: 768px;
+$md-to: 991px;
+$lg-from: 992px;
+$lg-to: 1199px;
+$xl-from: 1200px;
+$xl-to: 1399px;
+$xxl-from: 1400px;

package/src/table/column-content.jsx

@@ -0,0 +1,122 @@
+import {digs} from "diggerize"
+import * as inflection from "inflection"
+import modelCallbackArgs from "./model-callback-args"
+import MoneyFormatter from "../money-formatter"
+import React from "react"
+import Text from "../utils/text"
+
+export default class ApiMakerTableColumnContent {
+  constructor({column, l, mode = "react-native", model, t, table}) {
+    this.column = column
+    this.l = l
+    this.mode = mode
+    this.model = model
+    this.t = t
+    this.table = table
+  }
+
+  columnContentFromContentArg() {
+    const args = modelCallbackArgs(this.table, this.model)
+
+    args.mode = this.mode
+
+    const value = this.column.content(args)
+
+    return this.presentColumnValue(value)
+  }
+
+  columnsContentFromAttributeAndPath() {
+    const {attribute: attributeName} = digs(this.column, "attribute")
+    const attributeNameUnderscore = inflection.underscore(attributeName)
+    const path = this.column.path || []
+    let value
+    let currentModel = this.model
+
+    if (path.length > 0) {
+      for (const pathPart of path) {
+        currentModel = currentModel[pathPart]()
+        if (!currentModel) return
+      }
+    }
+
+    if (!(attributeName in currentModel)) {
+      throw new Error(`${currentModel.constructor.modelName().human()} doesn't respond to ${attributeName}`)
+    }
+
+    if (currentModel.isAttributeLoaded(attributeName)) {
+      value = currentModel[attributeName]()
+    }
+
+    const attribute = currentModel.constructor.attributes().find((attribute) => attribute.name() == attributeNameUnderscore)
+    const modelColumn = attribute?.getColumn()
+
+    if (modelColumn?.getType() == "date" && value) {
+      const contentText = this.presentDateTime({apiMakerType: "date", value})
+
+      if (this.mode == "html") {
+        return contentText
+      } else {
+        return (
+          <Text>{contentText}</Text>
+        )
+      }
+    }
+
+    return this.presentColumnValue(value)
+  }
+
+  content() {
+    if (this.column.content) {
+      return this.columnContentFromContentArg()
+    } else if (!this.column.content && this.column.attribute) {
+      return this.columnsContentFromAttributeAndPath()
+    }
+  }
+
+  presentColumnValue(value) {
+    let contentText
+
+    if (value instanceof Date) {
+      contentText = this.presentDateTime({value})
+    } else if (MoneyFormatter.isMoney(value)) {
+      contentText = MoneyFormatter.format(value)
+    } else if (typeof value == "boolean") {
+      if (value) {
+        contentText = this.t("js.shared.yes", {defaultValue: "Yes"})
+      } else {
+        contentText = this.t("js.shared.no", {defaultValue: "No"})
+      }
+    } else if (Array.isArray(value)) {
+      contentText = value
+        .map((valuePart) => this.presentColumnValue(valuePart))
+        .filter((valuePart) => Boolean(valuePart))
+        .join(", ")
+
+    } else if (typeof value == "string") {
+      contentText = value
+    } else {
+      // Its a React node - just return it and trust the provider to be HTML compatible.
+      return value
+    }
+
+    if (this.mode == "html") {
+      return contentText
+    }
+
+    return <Text>{contentText}</Text>
+  }
+
+  presentDateTime({apiMakerType, value}) {
+    if (!apiMakerType || apiMakerType == "time") {
+      const dateTimeFormatName = this.table.props.defaultDateTimeFormatName || "time.formats.default"
+
+      return this.l(dateTimeFormatName, value)
+    } else if (apiMakerType == "date") {
+      const dateFormatName = this.table.props.defaultDateFormatName || "date.formats.default"
+
+      return this.l(dateFormatName, value)
+    } else {
+      throw new Error(`Unhandled type: ${apiMakerType}`)
+    }
+  }
+}

package/src/table/column-identifier.js

@@ -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.js

@@ -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/components/column.jsx

@@ -0,0 +1,19 @@
+import BaseComponent from "../../base-component"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {Animated, View} from "react-native"
+
+export default memo(shapeComponent(class SharedTableColumn extends BaseComponent {
+  render() {
+    const {dataSet, ...restProps} = this.props
+    const actualDataSet = Object.assign(
+      {component: "api-maker/table/components/column"},
+      dataSet
+    )
+
+    return (
+      <Animated.View dataSet={actualDataSet} {...restProps} />
+    )
+  }
+}))

package/src/table/components/flat-list.jsx

@@ -0,0 +1,19 @@
+import BaseComponent from "../../base-component"
+import {FlatList} from "react-native"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class SharedTagble extends BaseComponent {
+  render() {
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {width: "100%"},
+      style
+    )
+
+    return (
+      <FlatList style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/table/components/header.jsx

@@ -0,0 +1,21 @@
+import BaseComponent from "../../base-component"
+import classNames from "classnames"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {Animated} from "react-native"
+
+export default memo(shapeComponent(class SharedTableHeader extends BaseComponent {
+  render() {
+    const {dataSet, ...restProps} = this.props
+    const {component, ...restDataSet} = dataSet || {}
+    const actualDataSet = Object.assign(
+      {component: classNames("api-maker/table/header", component)},
+      restDataSet
+    )
+
+    return (
+      <Animated.View dataSet={actualDataSet} {...restProps} />
+    )
+  }
+}))