@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/super-admin/edit-page/edit-attribute-checkbox.jsx

@@ -0,0 +1,81 @@
+import React, {useMemo} from "react"
+import {StyleSheet, View} from "react-native"
+import Checkbox from "../../utils/checkbox"
+import BaseComponent from "../../base-component"
+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 {useForm} from "../../form"
+
+const styles = StyleSheet.create({
+  checkbox: {
+    marginRight: 4
+  }
+})
+
+export default memo(shapeComponent(class EditAttributeInput extends BaseComponent {
+  static propTypes = propTypesExact({
+    attributeName: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    model: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired
+  })
+
+  setup() {
+    const {attributeName, id, name} = this.p
+
+    this.form = useForm()
+    this.useStates({
+      checked: this.tt.defaultChecked
+    })
+
+    this.dataSet = useMemo(
+      () => ({
+        attribute: attributeName,
+        id,
+        name
+      }),
+      [attributeName, id, name]
+    )
+
+    useMemo(() => {
+      if (this.form) {
+        this.form.setValue(name, this.s.checked)
+      }
+    }, [])
+  }
+
+  defaultChecked = () => this.p.model[this.p.attributeName]() || false
+
+  render() {
+    const {dataSet} = this.tt
+    const {attributeName, label, model} = this.p
+    const {checked} = this.s
+
+    if (!(attributeName in model)) {
+      throw new Error(`${attributeName} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    return (
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute-input"}} style={{flexDirection: "row", alignItems: "center"}}>
+        <Checkbox
+          checked={checked}
+          dataSet={dataSet}
+          label={label}
+          onCheckedChange={this.tt.onCheckedChange}
+          style={styles.checkbox}
+        />
+      </View>
+    )
+  }
+
+  onCheckedChange = (newChecked) => {
+    if (this.form) {
+      this.form.setValue(this.p.name, newChecked)
+    }
+
+    this.setState({checked: newChecked})
+  }
+}))

package/src/super-admin/edit-page/edit-attribute-content.jsx

@@ -0,0 +1,57 @@
+import BaseComponent from "../../base-component"
+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 {useForm} from "../../form"
+import {useMemo} from "react"
+
+export default memo(shapeComponent(class EditAttributeContent extends BaseComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
+    model: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired
+  })
+
+  setup() {
+    this.form = useForm()
+    this.useStates({
+      value: () => this.defaultValue()
+    })
+  }
+
+  render() {
+    const {attribute, id, model} = this.props
+
+    if (!(attribute.attribute in model)) {
+      throw new Error(`${attribute.attribute} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    const contentArgs = useMemo(() => ({
+      inputProps: {
+        attribute: attribute.attribute,
+        defaultValue: this.defaultValue(),
+        id,
+        model
+      },
+      onChangeValue: this.tt.onChangeValue,
+      value: this.s.value
+    }), [attribute.attribute, id, model, this.s.value])
+
+    return attribute.content(contentArgs)
+  }
+
+  defaultValue = () => {
+    if (!(this.p.attribute.attribute in this.p.model)) {
+      throw new Error(`No attribute called ${this.p.attribute.attribute} in model ${this.p.model.modelClassData().name}`)
+    }
+
+    return this.p.model[this.p.attribute.attribute]() || ""
+  }
+
+  onChangeValue = (newValue) => {
+    this.setState({value: newValue})
+    this.tt.form.setValue(this.p.name, newValue)
+  }
+}))

package/src/super-admin/edit-page/edit-attribute-input.jsx

@@ -0,0 +1,71 @@
+import React, {useMemo} from "react"
+import {TextInput, View} from "react-native"
+import BaseComponent from "../../base-component"
+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 {useForm} from "../../form"
+
+export default memo(shapeComponent(class EditAttributeInput extends BaseComponent {
+  static propTypes = propTypesExact({
+    attributeName: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    model: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired
+  })
+
+  setup() {
+    const {name} = this.p
+
+    this.form = useForm()
+    this.useStates({
+      value: this.defaultValue()
+    })
+
+    useMemo(() => {
+      if (this.form) {
+        this.form.setValue(name, this.s.value)
+      }
+    }, [])
+  }
+
+  defaultValue = () => this.p.model[this.p.attributeName]() || ""
+
+  render() {
+    const {attributeName, id, label, model, name} = this.p
+    const {value} = this.s
+
+    if (!(attributeName in model)) {
+      throw new Error(`${attributeName} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    return (
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute-input"}}>
+        <Text>{label}</Text>
+        <View>
+          <TextInput
+            dataSet={{
+              attribute: attributeName,
+              id,
+              name
+            }}
+            onChangeText={this.tt.onChangeText}
+            style={{paddingTop: 9, paddingRight: 13, paddingBottom: 9, paddingLeft: 13, borderRadius: 5, backgroundColor: "#fff", border: "1px solid #cecece"}}
+            value={value}
+          />
+        </View>
+      </View>
+    )
+  }
+
+  onChangeText = (newValue) => {
+    if (this.form) {
+      this.form.setValue(this.p.name, newValue)
+    }
+
+    this.setState({value: newValue})
+  }
+}))

package/src/super-admin/edit-page/edit-attribute.jsx

@@ -0,0 +1,81 @@
+import BaseComponent from "../../base-component"
+import {digg} from "diggerize"
+import EditAttributeCheckbox from "./edit-attribute-checkbox"
+import EditAttributeContent from "./edit-attribute-content"
+import EditAttributeInput from "./edit-attribute-input"
+import * as inflection from "inflection"
+import Locales from "shared/locales"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {View} from "react-native"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class EditAttribute extends BaseComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.object.isRequired,
+    model: PropTypes.object,
+    modelClass: PropTypes.func
+  })
+
+  render() {
+    const {attribute, model, modelClass} = this.props
+    const availableLocales = Locales.availableLocales()
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const modelAttribute = modelClass.attributes().find((modelAttributeI) => modelAttributeI.name() == attribute.attribute)
+
+    return (
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute"}} style={{marginBottom: attribute.translated ? undefined : 12}}>
+        {(() => {
+          if (attribute.content) {
+            return (
+              <EditAttributeContent
+                attribute={attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          } else if (attribute.translated) {
+            return (
+              <>
+                {availableLocales.map((locale) =>
+                  <View key={locale} style={{marginBottom: 12}}>
+                    <EditAttributeInput
+                      attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
+                      id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
+                      label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
+                      model={model}
+                      name={`${inflection.underscore(attribute.attribute)}_${locale}`}
+                    />
+                  </View>
+                )}
+              </>
+            )
+          } else if (modelAttribute?.getColumn()?.getType() == "boolean") {
+            return (
+              <EditAttributeCheckbox
+                attributeName={attribute.attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                label={modelClass.humanAttributeName(attribute.attribute)}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          } else {
+            return (
+              <EditAttributeInput
+                attributeName={attribute.attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                label={modelClass.humanAttributeName(attribute.attribute)}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          }
+        })()}
+      </View>
+    )
+  }
+}))

package/src/super-admin/edit-page.jsx

@@ -0,0 +1,117 @@
+import {Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import ConfigReader from "./config-reader"
+import {digg} from "diggerize"
+import EditAttribute from "./edit-page/edit-attribute"
+import FlashMessage from "../flash-message"
+import {Form} from "../form"
+import * as inflection from "inflection"
+import Locales from "shared/locales"
+import memo from "set-state-compare/src/memo"
+import Params from "../params"
+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 useCurrentUser from "../use-current-user"
+import useModel from "../use-model"
+import useQueryParams from "on-location-changed/build/use-query-params"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends BaseComponent {
+  static propTypes = propTypesExact({
+    modelClass: PropTypes.func.isRequired
+  })
+
+  setup() {
+    const {modelClass} = this.p
+    const modelClassName = modelClass.modelClassData().name
+    const availableLocales = Locales.availableLocales()
+    this.configReader = ConfigReader.forModel(modelClass)
+    const currentUser = useCurrentUser()
+    const queryParams = useQueryParams()
+    const selectedModelAttributes = ["id"]
+    const selectedAttributes = {}
+    this.attributes = this.configReader.modelConfig?.edit?.attributes
+
+    if (!this.attributes) {
+      throw new Error(`No 'attributes' given from edit config for ${modelClass.modelClassData().name}`)
+    }
+
+    for (const attribute of this.attributes) {
+      if (attribute.translated) {
+        for (const locale of availableLocales) {
+          selectedModelAttributes.push(`${attribute.attribute}${inflection.camelize(locale)}`)
+        }
+      } else {
+        selectedModelAttributes.push(attribute.attribute)
+      }
+    }
+
+    selectedAttributes[modelClassName] = selectedModelAttributes
+
+    const useModelResult = useModel(modelClass, {
+      cacheArgs: [currentUser?.id()],
+      loadByQueryParam: (props) => props.queryParams.model_id,
+      newIfNoId: this.configReader.modelConfig?.edit?.newIfNoId || true,
+      preload: this.configReader.modelConfig?.edit?.preload,
+      select: selectedAttributes
+    })
+
+    const modelIdVarName = `${inflection.camelize(modelClass.modelClassData().name, true)}Id`
+    const modelVarName = inflection.camelize(modelClass.modelClassData().name, true)
+
+    this.model = digg(useModelResult, modelVarName)
+    this.modelId = queryParams.model_id
+    this.modelArgs = {}
+    this.modelArgs[modelIdVarName] = this.modelId
+    this.useStates({form: null})
+  }
+
+  render() {
+    const {attributes, model} = this.tt
+    const {modelClass} = this.p
+    const extraContent = this.configReader.modelConfig?.edit?.extraContentconst
+
+    return (
+      <View dataSet={{class: "super-admin--edit-page"}}>
+        <Form setForm={this.setStates.form}>
+          {model && attributes?.map((attribute) =>
+            <EditAttribute attribute={attribute} key={attribute.attribute} model={model} modelClass={modelClass} />
+          )}
+          {extraContent && extraContent(modelArgs)}
+          <Pressable
+            dataSet={{class: "submit-button"}}
+            onPress={this.tt.onSubmit}
+            style={{
+              paddingTop: 18,
+              paddingRight: 24,
+              paddingBottom: 18,
+              paddingLeft: 24,
+              borderRadius: 10,
+              backgroundColor: "#4c93ff",
+              marginTop: 10
+            }}
+          >
+            <Text style={{color: "#fff"}}>
+              Submit
+            </Text>
+          </Pressable>
+        </Form>
+      </View>
+    )
+  }
+
+  onSubmit = async () => {
+    try {
+      const {model} = this.tt
+      const formObject = this.s.form.asObject()
+
+      model.assignAttributes(formObject)
+      await model.save()
+      Params.changeParams({mode: undefined, model_id: model.id()})
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+}))

package/src/super-admin/has-edit-config.js

@@ -0,0 +1,15 @@
+import ConfigReader from "./config-reader"
+
+const hasEditConfig = (modelClass) => {
+  const configReader = ConfigReader.forModel(modelClass)
+  const extraContent = configReader.modelConfig?.edit?.extraContentconst
+  const attributes = configReader.modelConfig?.edit?.attributes
+
+  if (attributes || extraContent) {
+    return true
+  }
+
+  return false
+}
+
+export default hasEditConfig

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

@@ -0,0 +1,23 @@
+import BaseComponent from "../base-component"
+import memo from "set-state-compare/src/memo"
+import ModelClassTable from "./model-class-table"
+import PropTypes from "prop-types"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
+
+  render() {
+    const {modelClass} = this.props
+
+    return (
+      <View dataSet={{component: "super-admin--index-page"}}>
+        <ModelClassTable modelClass={modelClass} />
+      </View>
+    )
+  }
+}))

package/src/super-admin/index.jsx

@@ -0,0 +1,197 @@
+import React, {useMemo} from "react"
+import {Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import ConfigReader from "./config-reader"
+import EditPage from "./edit-page"
+import hasEditConfig from "./has-edit-config"
+import IndexPage from "./index-page"
+import Layout from "./layout/index"
+import Link from "../link"
+import memo from "set-state-compare/src/memo"
+import * as models from "models"
+import Params from "../params"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import ShowPage from "./show-page/index"
+import ShowReflectionActions from "./show-reflection-actions"
+import ShowReflectionPage from "./show-reflection-page"
+import Text from "../utils/text"
+import useCanCan from "../use-can-can"
+import useCurrentUser from "../use-current-user"
+import useQueryParams from "on-location-changed/build/use-query-params"
+
+export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponent {
+  setup() {
+    this.queryParams = useQueryParams()
+
+    if (this.queryParams.model) {
+      this.modelClass = models[this.queryParams.model]
+    } else {
+      this.modelClass = null
+    }
+
+    this.configReader = useMemo(() => this.modelClass && ConfigReader.forModel(this.modelClass), [this.modelClass])
+    this.modelId = this.queryParams.model_id
+    this.modelName = this.modelClass?.modelClassData()?.name
+    this.currentUser = useCurrentUser()
+
+    this.canCan = useCanCan(
+      () => {
+        const abilities = []
+
+        if (this.modelClass) abilities.push([this.modelClass, ["new"]])
+
+        return abilities
+      },
+      [this.currentUser?.id(), this.modelClass]
+    )
+
+    this.useStates({
+      model: undefined
+    })
+    useMemo(
+      () => { this.loadModel() },
+      [this.modelId]
+    )
+  }
+
+  loadModel = async () => {
+    const {configReader, modelClass, modelId, modelName} = this.tt
+
+    if (modelId && modelClass) {
+      const abilities = {}
+      const abilitiesForModel = ["destroy", "edit"]
+      const layoutSelect = configReader?.modelConfig?.layout?.select
+
+      abilities[modelName] = abilitiesForModel
+
+      const query = await modelClass
+        .ransack({id_eq: modelId})
+        .abilities(abilities)
+
+      if (layoutSelect) query.select(layoutSelect)
+
+      const model = await query.first()
+
+      this.setState({model})
+    } else {
+      this.setState({model: undefined})
+    }
+  }
+
+  render() {
+    const {canCan, configReader, modelClass, modelId, modelName, queryParams} = this.tt
+    const {model} = this.s
+    const modelConfigActions = configReader?.modelConfig?.actions
+    let pageToShow
+
+    if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
+      pageToShow = "show_reflection"
+    } else if (queryParams.model && queryParams.model_id && queryParams.mode == "edit") {
+      pageToShow = "edit"
+    } else if (queryParams.model && queryParams.model_id) {
+      pageToShow = "show"
+    } else if (queryParams.model && queryParams.mode == "new") {
+      pageToShow = "edit"
+    } else if (queryParams.model) {
+      pageToShow = "index"
+    } else {
+      pageToShow = "welcome"
+    }
+
+    const actions = useMemo(
+      () => <View style={{flexDirection: "row", alignItems: "center"}}>
+        {model && modelConfigActions && modelConfigActions({model})}
+        {modelClass && pageToShow == "index" &&
+          <>
+            {canCan?.can("new", modelClass) && hasEditConfig(modelClass) &&
+              <Link
+                dataSet={{class: "create-new-model-link"}}
+                style={{marginLeft: 10, marginRight: 10}}
+                to={Params.withParams({model: modelName, mode: "new"})}
+              >
+                <Text>
+                  Create new
+                </Text>
+              </Link>
+            }
+          </>
+        }
+        {model && pageToShow == "show" &&
+          <>
+            {model.can("edit") && hasEditConfig(modelClass) &&
+              <Link
+                dataSet={{class: "edit-model-link"}}
+                style={{marginLeft: 10, marginRight: 10}}
+                to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}
+              >
+                <Text>
+                  Edit
+                </Text>
+              </Link>
+            }
+            {model.can("destroy") &&
+              <Pressable
+                dataSet={{class: "destroy-model-link"}}
+                onPress={this.tt.onDestroyClicked}
+                style={{marginLeft: 10, marginRight: 10}}
+              >
+                <Text>
+                  Delete
+                </Text>
+              </Pressable>
+            }
+          </>
+        }
+        {pageToShow == "show_reflection" &&
+          <ShowReflectionActions model={model} modelClass={modelClass} reflectionName={queryParams.model_reflection} />
+        }
+      </View>,
+      [canCan, configReader?.actions, model, modelClass, pageToShow]
+    )
+
+    return (
+      <Layout actions={actions} active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
+        {pageToShow == "index" &&
+          <IndexPage
+            key={`index-page-${modelName}`}
+            modelClass={modelClass}
+          />
+        }
+        {pageToShow == "show" &&
+          <ShowPage
+            key={`show-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+            modelId={modelId}
+          />
+        }
+        {pageToShow == "show_reflection" &&
+          <ShowReflectionPage
+            key={`show-reflection-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+            modelId={modelId}
+          />
+        }
+        {pageToShow == "edit" &&
+          <EditPage
+            key={`edit-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+          />
+        }
+      </Layout>
+    )
+  }
+
+  onDestroyClicked = async () => {
+    if (!confirm("Are you sure?")) {
+      return
+    }
+
+    try {
+      await this.s.model.destroy()
+
+      Params.changeParams({mode: undefined, model_id: undefined})
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+}))