@kaspernj/api-maker 1.0.389 → 1.0.390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.389",
+  "version": "1.0.390",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.45",
+    "set-state-compare": "^1.0.46",
     "spark-md5": "^3.0.2",
     "stacktrace-parser": "^0.1.10",
     "strftime": ">= 0.10.0",

package/src/form.jsx

@@ -0,0 +1,68 @@
+import {createContext, memo, useContext, useMemo} from "react"
+import BaseComponent from "./base-component"
+import FormDataObjectizer from "form-data-objectizer"
+import {Platform} from "react-native"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+const FormContext = createContext(null)
+
+class FormClass {
+  constructor() {
+    this.inputs = {}
+  }
+
+  asObject() {
+    const result = {}
+    const formDataObjectizer = new FormDataObjectizer()
+
+    for(const key in this.inputs) {
+      const value = this.inputs[key]
+
+      formDataObjectizer.treatInitial(key, value, result)
+    }
+
+    return result
+  }
+
+  setValue(name, value) {
+    console.log("Form", {name, value})
+
+    this.inputs[name] = value
+  }
+
+  setValueWithHidden(name, value) {
+    this.setValue(name, value)
+
+    if (Platform.OS == "web") {
+      return <input name={name} type="hidden" value={value !== null && value !== undefined ? value : ""} />
+    }
+  }
+}
+
+const Form = memo(shapeComponent(class Form extends BaseComponent {
+  render() {
+    const {children, setForm, ...restProps} = this.props
+    const form = useMemo(() => new FormClass(), [])
+
+    useMemo(() => {
+      if (setForm) {
+        setForm(form)
+      }
+    }, [setForm])
+
+    return (
+      <FormContext.Provider value={form}>
+        {Platform.OS == "web" &&
+          <form {...restProps}>
+            {children}
+          </form>
+        }
+        {Platform.OS != "web" && this.props.children}
+      </FormContext.Provider>
+    )
+  }
+}))
+
+const useForm = () => useContext(FormContext)
+
+export {Form, FormContext, useForm}

package/src/inputs/attachment.jsx

@@ -1,7 +1,10 @@
+import BaseComponent from "../base-component"
 import {Input as ApiMakerInput} from "@kaspernj/api-maker/src/inputs/input"
 import {Checkbox} from "./checkbox"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerInputsAttachment extends BaseComponent {
+export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseComponent {
   static propTypes = {
     className: PropTypes.string,
     model: PropTypes.object.isRequired,
@@ -9,8 +12,10 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
     purgeName: PropTypes.string
   }
 
-  state = {
-    purgeChecked: false
+  setup() {
+    this.useStates({
+      purgeChecked: false
+    })
   }
 
   render() {
@@ -91,4 +96,4 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
 
     if (this.props.onPurgeChanged) this.props.onPurgeChanged(e)
   }
-}
+}))

package/src/inputs/checkbox.jsx

@@ -1,11 +1,14 @@
 import AutoSubmit from "./auto-submit.mjs"
+import BaseComponent from "../base-component"
 import {digg, digs} from "diggerize"
 import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useForm} from "../form"
 
-class ApiMakerInputsCheckbox extends React.PureComponent {
+const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -28,6 +31,10 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
     zeroInput: PropTypes.bool
   }
 
+  setup() {
+    this.form = useForm()
+  }
+
   render () {
     const {
       attribute,
@@ -69,9 +76,11 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
   }
 
   onChanged = (...args) => {
-    const {attribute, autoSubmit, model, onChange} = this.props
+    const {form} = this.tt
+    const {attribute, autoSubmit, model, name, onChange} = this.props
 
     if (attribute && autoSubmit && model) new AutoSubmit({component: this}).autoSubmit()
+    if (form && name) form.setValue(name, args[0].target.checked)
     if (onChange) onChange(...args)
   }
 
@@ -92,7 +101,7 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
       inputRef.current.checked = newValue
     }
   }
-}
+}))
 
 export {ApiMakerInputsCheckbox as Checkbox}
 export default inputWrapper(ApiMakerInputsCheckbox, {type: "checkbox"})

package/src/inputs/checkboxes.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digs} from "diggerize"
 import inputWrapper from "./input-wrapper"
@@ -5,9 +6,10 @@ import * as inflection from "inflection"
 import InvalidFeedback from "../bootstrap/invalid-feedback"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-class ApiMakerInputsCheckboxes extends React.PureComponent {
+const ApiMakerInputsCheckboxes = memo(shapeComponent(class ApiMakerInputsCheckboxes extends BaseComponent {
   static propTypes = propTypesExact({
     attribute: PropTypes.string,
     defaultValue: PropTypes.array,
@@ -108,6 +110,6 @@ class ApiMakerInputsCheckboxes extends React.PureComponent {
       </div>
     )
   }
-}
+}))
 
 export default inputWrapper(ApiMakerInputsCheckboxes)

package/src/inputs/input.jsx

@@ -1,4 +1,5 @@
 import AutoSubmit from "./auto-submit.mjs"
+import BaseComponent from "../base-component"
 import {dig, digg, digs} from "diggerize"
 import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
@@ -6,10 +7,11 @@ import Money from "./money"
 import PropTypes from "prop-types"
 import {memo, useRef} from "react"
 import replaceall from "replaceall"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
+import {useForm} from "../form"
 
-const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
+const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -32,6 +34,7 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   setup() {
+    this.form = useForm()
     this.visibleInputRef = useRef()
 
     this.useStates({
@@ -204,13 +207,15 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   onInputChanged = (e) => {
-    const {attribute, autoSubmit, inputProps, model, onChange} = this.props
+    const {form} = this.tt
+    const {attribute, autoSubmit, inputProps, model, name, onChange} = this.props
     const {localizedNumber} = digs(this.props, "localizedNumber")
 
     if (localizedNumber) this.inputReference().current.value = this.actualValue(digg(e, "target"))
 
     if (attribute && autoSubmit && model) this.delayAutoSubmit()
     if (digg(inputProps, "type") == "file") this.setState({blankInputName: this.getBlankInputName()})
+    if (form && name) form.setValue(name, e.target.value)
     if (onChange) onChange(e)
   }
 

package/src/inputs/select.jsx

@@ -1,9 +1,11 @@
-import {dig} from "diggerize"
+import BaseComponent from "../base-component"
 import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useForm} from "../form"
 
-class ApiMakerInputsSelect extends React.PureComponent {
+const ApiMakerInputsSelect = memo(shapeComponent(class ApiMakerInputsSelect extends BaseComponent {
   static propTypes = {
     attribute: PropTypes.string,
     children: PropTypes.node,
@@ -13,10 +15,15 @@ class ApiMakerInputsSelect extends React.PureComponent {
     inputProps: PropTypes.object.isRequired,
     model: PropTypes.object,
     name: PropTypes.string,
+    onChange: PropTypes.func,
     options: PropTypes.array,
     wrapperOpts: PropTypes.object.isRequired
   }
 
+  setup() {
+    this.form = useForm()
+  }
+
   render () {
     const {
       attribute,
@@ -28,13 +35,14 @@ class ApiMakerInputsSelect extends React.PureComponent {
       inputRef,
       model,
       name,
+      onChange,
       options,
       wrapperOpts,
       ...restProps
     } = this.props
 
     return (
-      <select {...inputProps} {...restProps}>
+      <select onChange={this.tt.onChange} {...inputProps} {...restProps}>
         {this.includeBlank() &&
           <option data-include-blank="true">
             {typeof includeBlank != "boolean" ? includeBlank : null}
@@ -50,6 +58,14 @@ class ApiMakerInputsSelect extends React.PureComponent {
     )
   }
 
+  onChange = (e) => {
+    const {form} = this.tt
+    const {name, onChange} = this.props
+
+    if (form && name) form.setValue(name, e.target.value)
+    if (onChange) onChange(e)
+  }
+
   optionKey (option) {
     if (Array.isArray(option)) {
       return `select-option-${option[1]}`
@@ -81,7 +97,7 @@ class ApiMakerInputsSelect extends React.PureComponent {
       return false
     }
   }
-}
+}))
 
 export {ApiMakerInputsSelect as Select}
 export default inputWrapper(ApiMakerInputsSelect)

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

@@ -1,35 +1,57 @@
 import BaseComponent from "../../base-component"
+import {FormContext} from "../../form"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
 export default memo(shapeComponent(class EditAttributeContent extends BaseComponent {
+  setup() {
+    const {inputs, name} = this.p
+
+    this.form = useContext(FormContext)
+    this.useStates({
+      value: () => this.defaultValue()
+    })
+
+    useMemo(() => {
+      inputs[name] = this.s.value
+
+      if (this.form) {
+        this.form.setValue(name, this.s.value)
+      }
+    }, [])
+  }
+
   render() {
-    const {attribute, id, inputs, model, name} = this.props
+    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 defaultValue = useCallback(() => model[attribute.attribute]() || "")
-    const [value, setValue] = useState(() => defaultValue())
-    const onChangeValue = useCallback((newValue) => {
-      inputs[name] = newValue
-      setValue(newValue)
-    })
-    useMemo(() => {
-      inputs[name] = value
-    }, [])
-
-    const contentArgs = () => ({
+    const contentArgs = useMemo(() => ({
       inputProps: {
         attribute: attribute.attribute,
-        defaultValue: defaultValue(),
+        defaultValue: this.defaultValue(),
         id,
         model
       },
-      onChangeValue
-    })
+      onChangeValue: this.tt.onChangeValue
+    }), [attribute.attribute, id, model])
+
+    return attribute.content(contentArgs)
+  }
+
+  defaultValue = () => this.p.model[this.p.attribute.attribute]() || ""
+
+  onChangeValue = (newValue) => {
+    const {inputs, name} = this.p
+
+    inputs[name] = newValue
+
+    if (this.form) {
+      this.form.setValue(name, newValue)
+    }
 
-    return attribute.content(contentArgs())
+    this.setState({value: newValue})
   }
 }))

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

@@ -1,4 +1,5 @@
 import BaseComponent from "../../base-component"
+import {useForm} from "../../form"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
@@ -14,12 +15,17 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
   setup() {
     const {inputs, name} = this.p
 
+    this.form = useForm()
     this.useStates({
       value: this.defaultValue()
     })
 
     useMemo(() => {
       inputs[name] = this.s.value
+
+      if (this.form) {
+        this.form.setValue(name, this.s.value)
+      }
     }, [])
   }
 
@@ -56,6 +62,11 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
     const {inputs, name} = this.p
 
     inputs[name] = newValue
+
+    if (this.form) {
+      this.form.setValue(name, newValue)
+    }
+
     this.setState({value: newValue})
   }
 }))

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

@@ -1,9 +1,10 @@
+import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
 import EditAttribute from "./edit-page/edit-attribute"
+import {Form} from "../form"
 import * as inflection from "inflection"
-import {Pressable, Text, View} from "react-native"
 import Locales from "shared/locales"
 import {memo} from "react"
 import PropTypes from "prop-types"
@@ -50,7 +51,8 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
     const useModelResult = useModel(modelClass, {
       cacheArgs: [currentUser?.id()],
       loadByQueryParam: (props) => props.queryParams.model_id,
-      newIfNoId: true,
+      newIfNoId: this.configReader.modelConfig?.edit?.newIfNoId || true,
+      preload: this.configReader.modelConfig?.edit?.preload,
       select: selectedAttributes
     })
 
@@ -61,6 +63,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
     this.modelId = queryParams.model_id
     this.modelArgs = {}
     this.modelArgs[modelIdVarName] = this.modelId
+    this.useStates({form: null})
   }
 
   render() {
@@ -70,27 +73,29 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
 
     return (
       <View dataSet={{class: "super-admin--edit-page"}}>
-        {model && attributes?.map((attribute) =>
-          <EditAttribute attribute={attribute} inputs={this.inputs} 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 setForm={this.setStates.form}>
+          {model && attributes?.map((attribute) =>
+            <EditAttribute attribute={attribute} inputs={this.inputs} 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>
     )
   }
@@ -98,8 +103,14 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
   onSubmit = async () => {
     try {
       const {inputs, model} = this.tt
+      const {form} = this.s
+
+      const formObject = form.asObject()
+      const allInputs = Object.assign({}, inputs, formObject)
+
+      console.log({allInputs})
 
-      model.assignAttributes(inputs)
+      model.assignAttributes(allInputs)
       await model.save(this.inputs)
       Params.changeParams({mode: undefined, model_id: model.id()})
     } catch (error) {