@kaspernj/api-maker 1.0.308 → 1.0.310

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.308",
+  "version": "1.0.310",
   "type": "module",
   "description": "",
   "main": "index.js",

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

@@ -1,19 +1,115 @@
 import ConfigReader from "./config-reader"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
-import Input from "../bootstrap/input"
+import {Pressable, Text, TextInput, View} from "react-native"
 import Locales from "shared/locales"
-import {useCallback, memo} from "react"
+import {memo, useCallback, useEffect, useMemo, useState} from "react"
 import useCurrentUser from "../use-current-user"
 import useModel from "../use-model"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
+const EditAttributeInput = ({attributeName, id, inputs, label, model, name}) => {
+  const defaultValue = useCallback(() => model[attributeName]() || "")
+  const [value, setValue] = useState(() => defaultValue())
+
+  useEffect(() => {
+    inputs[name] = value
+  }, [])
+
+  const onChangeText = useCallback((newValue) => {
+    inputs[name] = newValue
+    setValue(newValue)
+  }, [])
+
+  return (
+    <View style={{marginBottom: 12}}>
+      <Text>{label}</Text>
+      <View>
+        <TextInput
+          dataSet={{
+            attribute: attributeName,
+            id,
+            name
+          }}
+          onChangeText={onChangeText}
+          style={{paddingTop: 9, paddingRight: 13, paddingBottom: 9, paddingLeft: 13, borderRadius: 5, backgroundColor: "#fff", border: "1px solid #cecece"}}
+          value={value}
+        />
+      </View>
+    </View>
+  )
+}
+
+const EditAttributeContent = ({attribute, id, inputs, model, name}) => {
+  const defaultValue = useCallback(() => model[attribute.attribute]() || "")
+  const [value, setValue] = useState(() => defaultValue())
+  const onChangeValue = useCallback((newValue) => {
+    inputs[name] = newValue
+    setValue(newValue)
+  })
+  useEffect(() => {
+    inputs[name] = value
+  }, [])
+
+  const contentArgs = () => ({
+    inputProps: {
+      attribute: attribute.attribute,
+      defaultValue: defaultValue(),
+      id,
+      model
+    },
+    onChangeValue
+  })
+
+  return attribute.content(contentArgs())
+}
+
+const EditAttribute = ({attribute, inputs, model, modelClass}) => {
+  const availableLocales = Locales.availableLocales()
+  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+
+  return (
+    <>
+      {attribute.content &&
+        <EditAttributeContent
+          attribute={attribute}
+          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+          inputs={inputs}
+          model={model}
+          name={inflection.underscore(attribute.attribute)}
+        />
+      }
+      {!attribute.content && attribute.translated && availableLocales.map((locale) =>
+        <EditAttributeInput
+          attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
+          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}_${locale}`}
+          inputs={inputs}
+          label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
+          model={model}
+          name={`${inflection.underscore(attribute.attribute)}_${locale}`}
+          key={locale}
+        />
+      )}
+      {!attribute.content && !attribute.translated &&
+        <EditAttributeInput
+          attributeName={attribute.attribute}
+          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+          inputs={inputs}
+          label={modelClass.humanAttributeName(attribute.attribute)}
+          model={model}
+          name={inflection.underscore(attribute.attribute)}
+        />
+      }
+    </>
+  )
+}
+
 const EditPage = ({modelClass}) => {
   const availableLocales = Locales.availableLocales()
   const currentUser = useCurrentUser()
   const queryParams = useQueryParams()
   const configReader = ConfigReader.forModel(modelClass)
-  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+  const inputs = useMemo(() => ({}))
   const modelClassName = modelClass.modelClassData().name
   const modelIdVarName = `${inflection.camelize(modelClass.modelClassData().name, true)}Id`
   const modelVarName = inflection.camelize(modelClass.modelClassData().name, true)
@@ -47,14 +143,11 @@ const EditPage = ({modelClass}) => {
 
   modelArgs[modelIdVarName] = modelId
 
-  const onSubmit = useCallback(async (e) => {
-    e.preventDefault()
-
-    const form = digg(e, "target")
-    const formData = new FormData(form)
-
+  const onSubmit = useCallback(async () => {
     try {
-      await model.saveRaw(formData)
+      model.assignAttributes(inputs)
+
+      await model.save(inputs)
       Params.changeParams({mode: undefined, model_id: model.id()})
     } catch (error) {
       FlashMessage.errorResponse(error)
@@ -62,38 +155,29 @@ const EditPage = ({modelClass}) => {
   }, [model])
 
   return (
-    <div className="super-admin--edit-page">
-      <form onSubmit={onSubmit}>
-        {model && attributes?.map((attribute) =>
-          <div key={attribute.attribute}>
-            {attribute.translated && availableLocales.map((locale) =>
-              <div key={locale}>
-                <Input
-                  attribute={`${attribute.attribute}${inflection.camelize(locale)}`}
-                  id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}_${locale}`}
-                  label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
-                  model={model}
-                  name={`${camelizedLower}[${inflection.underscore(attribute.attribute)}_${locale}]`}
-                />
-              </div>
-            )}
-            {!attribute.translated &&
-              <Input
-                attribute={attribute.attribute}
-                id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
-                label={modelClass.humanAttributeName(attribute.attribute)}
-                model={model}
-                name={`${camelizedLower}[${inflection.underscore(attribute.attribute)}]`}
-              />
-            }
-          </div>
-        )}
-        {extraContent && extraContent(modelArgs)}
-        <button style={{marginTop: "10px"}} type="submit">
+    <View dataSet={{class: "super-admin--edit-page"}}>
+      {model && attributes?.map((attribute) =>
+        <EditAttribute attribute={attribute} inputs={inputs} key={attribute.attribute} model={model} modelClass={modelClass} />
+      )}
+      {extraContent && extraContent(modelArgs)}
+      <Pressable
+        dataSet={{class: "submit-button"}}
+        onPress={onSubmit}
+        style={{
+          paddingTop: 18,
+          paddingRight: 24,
+          paddingBottom: 18,
+          paddingLeft: 24,
+          borderRadius: 10,
+          backgroundColor: "#4c93ff",
+          marginTop: "10px"
+        }}
+      >
+        <Text style={{color: "#fff"}}>
           Submit
-        </button>
-      </form>
-    </div>
+        </Text>
+      </Pressable>
+    </View>
   )
 }
 

package/src/super-admin/index.jsx

@@ -4,7 +4,7 @@ import Layout from "./layout"
 import Link from "../link"
 import {memo, useMemo} from "react"
 import * as modelsModule from "@kaspernj/api-maker/src/models.mjs.erb"
-import {useCallback} from "react"
+import {useCallback, useEffect, useState} from "react"
 import ShowPage from "./show-page"
 import ShowReflectionPage from "./show-reflection-page"
 import useQueryParams from "on-location-changed/src/use-query-params"
@@ -17,6 +17,27 @@ const ApiMakerSuperAdmin = () => {
 
   const modelId = queryParams.model_id
   const modelName = modelClass?.modelClassData()?.name
+  const [model, setModel] = useState()
+
+  const loadModel = useCallback(async () => {
+    if (modelId && modelClass) {
+      const abilities = {}
+      const abilitiesForModel = ["destroy", "edit"]
+
+      abilities[modelName] = abilitiesForModel
+
+      const model = await modelClass
+        .ransack({id_eq: modelId})
+        .abilities(abilities)
+        .first()
+
+      setModel(model)
+    } else {
+      setModel(undefined)
+    }
+  })
+
+  useEffect(() => { loadModel() }, [modelId])
 
   if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
     pageToShow = "show_reflection"
@@ -40,15 +61,13 @@ const ApiMakerSuperAdmin = () => {
     }
 
     try {
-      const model = await modelClass.find(modelId)
-
       await model.destroy()
 
       Params.changeParams({mode: undefined, model_id: undefined})
     } catch (error) {
       FlashMessage.errorResponse(error)
     }
-  }, [modelName, modelId])
+  }, [model])
 
   const actions = useMemo(
     () => <>
@@ -57,18 +76,22 @@ const ApiMakerSuperAdmin = () => {
           Create new
         </Link>
       }
-      {modelClass && pageToShow == "show" &&
+      {model && pageToShow == "show" &&
         <>
-          <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
-            Edit
-          </Link>
-          <a className="destroy-model-link" href="#" onClick={onDestroyClicked}>
-            Delete
-          </a>
+          {model.can("edit") &&
+            <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
+              Edit
+            </Link>
+          }
+          {model.can("destroy") &&
+            <a className="destroy-model-link" href="#" onClick={onDestroyClicked}>
+              Delete
+            </a>
+          }
         </>
       }
     </>,
-    [modelClass, pageToShow]
+    [model, pageToShow]
   )
 
   return (

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

@@ -1,20 +1,72 @@
-import AttributeRows from "../../bootstrap/attribute-rows"
+import AttributeRow from "../../bootstrap/attribute-row"
 import BelongsToAttributeRow from "./belongs-to-attribute-row"
 import ConfigReader from "../config-reader"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
-import Link from "../../link"
 import PropTypes from "prop-types"
 import {memo} from "react"
 import ShowNav from "../show-nav"
-import withModel from "../../with-model"
+import useModel from "../../use-model"
 
-const ApiMakerSuperAdminShowPage = ({modelClass, ...restProps}) => {
+const AttributePresenter = ({attribute, model, modelArgs}) => {
+  const attributeRowProps = {}
+
+  if (typeof attribute == "object") {
+    attributeRowProps.attribute = attribute.attribute
+    if (attribute.content) attributeRowProps.children = attribute.content(modelArgs)
+  } else {
+    attributeRowProps.attribute = attribute
+  }
+
+  return (
+    <AttributeRow model={model} {...attributeRowProps} />
+  )
+}
+
+const ApiMakerSuperAdminShowPage = ({modelClass}) => {
   const configReader = ConfigReader.forModel(modelClass)
+  const showConfig = configReader.modelConfig?.show
   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 (!(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() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
+  }
+
+  for (const reflection of modelClass.reflections()) {
+    if (reflection.macro() != "belongs_to") continue
+
+    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())) modelClassSelect.push(reflection.foreignKey())
+  }
+
+  const useModelResult = useModel(modelClass, {
+    loadByQueryParam: ({queryParams}) => queryParams.model_id,
+    preload,
+    select
+  })
   const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
-  const model = digg(restProps, camelizedLower)
-  const extraContent = configReader.modelConfig?.show?.extraContent
+  const model = digg(useModelResult, camelizedLower)
   const modelArgs = {}
 
   modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
@@ -24,9 +76,9 @@ const ApiMakerSuperAdminShowPage = ({modelClass, ...restProps}) => {
       {model &&
         <ShowNav model={model} modelClass={modelClass} />
       }
-      {attributes && model &&
-        <AttributeRows attributes={attributes} model={model} />
-      }
+      {attributes && model && attributes.map((attribute) =>
+        <AttributePresenter attribute={attribute} key={attribute.attribute || attribute} modelArgs={modelArgs} model={model} />
+      )}
       {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to").map((reflection) =>
         <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
       )}
@@ -39,54 +91,4 @@ ApiMakerSuperAdminShowPage.propTypes = {
   modelClass: PropTypes.func.isRequired
 }
 
-const modelClassResolver = {callback: ({queryParams}) => {
-  const modelClassName = digg(queryParams, "model")
-  const modelClass = digg(require("../../models.mjs.erb"), modelClassName)
-
-  return modelClass
-}}
-
-export default withModel(
-  memo(ApiMakerSuperAdminShowPage),
-  modelClassResolver,
-  ({modelClass}) => {
-    const preload = []
-    const configReader = ConfigReader.forModel(modelClass)
-    const select = configReader.modelConfig?.show?.extraSelect || {}
-    const modelClassName = modelClass.modelClassData().name
-    const modelClassSelect = select[modelClassName] || []
-    const primaryKeyName = modelClass.primaryKey()
-
-    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() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
-    }
-
-    for (const reflection of modelClass.reflections()) {
-      if (reflection.macro() != "belongs_to") continue
-
-      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())) modelClassSelect.push(reflection.foreignKey())
-    }
-
-    return {
-      loadByQueryParam: ({props}) => props.queryParams.model_id,
-      preload,
-      select
-    }
-  }
-)
+export default memo(ApiMakerSuperAdminShowPage)