@kaspernj/api-maker 1.0.309 → 1.0.310

package/package.json

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

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

@@ -1,48 +1,103 @@
 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 EditAttribute = ({attribute, model, modelArgs, modelClass}) => {
+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")
-  const contentArgs = () => {
-    const contentArgsResult = {
-      inputProps: {
-        attribute: attribute.attribute,
-        model
-      }
-    }
-
-    return contentArgsResult
-  }
 
   return (
     <>
-      {attribute.content && attribute.content(contentArgs())}
+      {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) =>
-        <React.Fragment 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}]`}
-          />
-        </React.Fragment>
+        <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 &&
-        <Input
-          attribute={attribute.attribute}
+        <EditAttributeInput
+          attributeName={attribute.attribute}
           id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+          inputs={inputs}
           label={modelClass.humanAttributeName(attribute.attribute)}
           model={model}
-          name={`${camelizedLower}[${inflection.underscore(attribute.attribute)}]`}
+          name={inflection.underscore(attribute.attribute)}
         />
       }
     </>
@@ -54,6 +109,7 @@ const EditPage = ({modelClass}) => {
   const currentUser = useCurrentUser()
   const queryParams = useQueryParams()
   const configReader = ConfigReader.forModel(modelClass)
+  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)
@@ -87,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)
@@ -102,17 +155,29 @@ const EditPage = ({modelClass}) => {
   }, [model])
 
   return (
-    <div className="super-admin--edit-page">
-      <form onSubmit={onSubmit}>
-        {model && attributes?.map((attribute) =>
-          <EditAttribute attribute={attribute} key={attribute.attribute} model={model} modelArgs={modelArgs} modelClass={modelClass} />
-        )}
-        {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

@@ -18,8 +18,6 @@ const AttributePresenter = ({attribute, model, modelArgs}) => {
     attributeRowProps.attribute = attribute
   }
 
-  console.log({attributeRowProps})
-
   return (
     <AttributeRow model={model} {...attributeRowProps} />
   )
@@ -73,8 +71,6 @@ const ApiMakerSuperAdminShowPage = ({modelClass}) => {
 
   modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
 
-  console.log({attributes})
-
   return (
     <div className="super-admin--show-page">
       {model &&