@kaspernj/api-maker 1.0.414 → 1.0.415

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.414",
+  "version": "1.0.415",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/table/filters/attribute-element.jsx

@@ -1,37 +1,39 @@
-import Attribute from "../../base-model/attribute"
 import BaseComponent from "../../base-component"
-import {digg, digs} from "diggerize"
-import * as inflection from "inflection"
+import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
+import {Pressable, Text} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class AttributeElement extends BaseComponent {
   static propTypes = PropTypesExact({
     active: PropTypes.bool.isRequired,
-    attribute: PropTypes.instanceOf(Attribute).isRequired,
-    currentModelClass: PropTypes.func.isRequired,
+    attribute: PropTypes.object.isRequired,
+    modelClassName: PropTypes.string.isRequired,
     fikter: PropTypes.object,
     onClick: PropTypes.func.isRequired
   })
 
   render() {
-    const {active, attribute, currentModelClass} = this.p
+    const {active, attribute, modelClassName} = this.p
     const style = {}
 
     if (active) style.fontWeight = "bold"
 
     return (
-      <div
-        className="attribute-element"
-        data-attribute-name={attribute.name()}
-        data-model-class={currentModelClass.modelClassData().name}
-        onClick={digg(this, "onAttributeClicked")}
-        style={style}
+      <Pressable
+        dataSet={{
+          class: "attribute-element",
+          attributeName: digg(attribute, "attributeName"),
+          modelClass: modelClassName
+        }}
+        onPress={this.tt.onAttributeClicked}
       >
-        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
-      </div>
+        <Text style={style}>
+          {digg(attribute, "humanName")}
+        </Text>
+      </Pressable>
     )
   }
 

package/src/table/filters/filter-form.jsx

@@ -2,10 +2,12 @@ import AttributeElement from "./attribute-element"
 import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
+import {Form} from "../../form"
 import Input from "../../inputs/input"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useMemo, useRef} from "react"
+import {ActivityIndicator, Text, View} from "react-native"
 import ReflectionElement from "./reflection-element"
 import ScopeElement from "./scope-element"
 import Select from "../../inputs/select"
@@ -22,41 +24,127 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
 
   setup() {
     this.useStates({
-      attribute: () => this.currentModelClassFromPath(this.props.filter.p || [])
-        .ransackableAttributes()
-        .find((attribute) => attribute.name() == this.props.filter.a),
-      path: this.props.filter.p || [],
+      associations: null,
+      attribute: undefined,
+      actualCurrentModelClass: () => ({modelClass: this.p.modelClass}),
+      loading: 0,
+      modelClassName: digg(this.p.modelClass.modelClassData(), "className"),
+      path: [],
       predicate: undefined,
       predicates: undefined,
+      ransackableAttributes: undefined,
+      ransackableScopes: undefined,
       scope: this.props.filter.sc,
       value: this.props.filter.v
     })
-    this.valueInputRef = useRef()
+
+    this.setInstance({valueInputRef: useRef()})
 
     useMemo(() => {
       this.loadRansackPredicates()
+
+      if (this.props.filter.v) {
+        this.loadInitialValuesWithLoadingIndicator()
+      }
     }, [])
+
+    useMemo(() => {
+      this.loadAssociations()
+    }, [this.s.modelClassName])
   }
 
-  async loadRansackPredicates() {
-    const response = await Services.current().sendRequest("Ransack::Predicates")
-    const predicates = digg(response, "predicates")
-    let currentPredicate
+  currentModelClass = () => digg(this.s.actualCurrentModelClass, "modelClass")
+
+  parseAssociationData(result) {
+    const associations = result.associations.map(({human_name, model_class_name, reflection_name, resource}) => ({
+      humanName: human_name,
+      modelClassName: model_class_name,
+      reflectionName: inflection.camelize(reflection_name, true),
+      resource
+    }))
+    const ransackableAttributes = digg(result, "ransackable_attributes").map(({attribute_name: attributeName, human_name: humanName}) => ({
+      attributeName, humanName
+    }))
+    const ransackableScopes = digg(result, "ransackable_scopes")
+
+    return {associations, ransackableAttributes, ransackableScopes}
+  }
+
+  async loadAssociations() {
+    this.increaseLoading()
+
+    try {
+      const result = await Services.current().sendRequest("Models::Associations", {model_class_name: this.s.modelClassName})
+      const {associations, ransackableAttributes, ransackableScopes} = this.parseAssociationData(result)
 
-    if (this.props.filter.pre) {
-      currentPredicate = predicates.find((predicate) => predicate.name == this.props.filter.pre)
+      this.setState({associations, ransackableAttributes, ransackableScopes})
+    } finally {
+      this.decreaseLoading()
     }
+  }
 
-    this.setState({
-      predicate: currentPredicate,
-      predicates
-    })
+  decreaseLoading = () => this.setState((prevState) => ({loading: prevState.loading - 1}))
+  increaseLoading = () => this.setState((prevState) => ({loading: prevState.loading + 1}))
+
+  async loadInitialValuesWithLoadingIndicator() {
+    try {
+      this.increaseLoading()
+      await this.loadInitialValues()
+    } finally {
+      this.decreaseLoading()
+    }
+  }
+
+  async loadInitialValues() {
+    let result = await Services.current().sendRequest("Models::Associations", {model_class_name: this.s.modelClassName})
+    let data = this.parseAssociationData(result)
+    let modelClassName
+    const path = []
+
+    for (const pathPart of this.props.filter.p) {
+      const reflection = data.associations.find((association) => digg(association, "reflectionName") == inflection.camelize(pathPart, true))
+
+      if (!reflection) throw new Error(`Couldn't find association by that name ${this.s.modelClassName}#${pathPart}`)
+
+      modelClassName = digg(reflection, "modelClassName")
+
+      result = await Services.current().sendRequest("Models::Associations", {model_class_name: modelClassName})
+      data = this.parseAssociationData(result)
+
+      path.push(reflection)
+    }
+
+    const {ransackableAttributes} = data
+    const attribute = this.p.filter.a
+    const ransackableAttribute = ransackableAttributes.find((ransackableAttribute) => digg(ransackableAttribute, "attributeName") == attribute)
+
+    this.setState({attribute: ransackableAttribute, modelClassName, path})
+  }
+
+  async loadRansackPredicates() {
+    this.increaseLoading()
+
+    try {
+      const response = await Services.current().sendRequest("Ransack::Predicates")
+      const predicates = digg(response, "predicates")
+      let currentPredicate
+
+      if (this.props.filter.pre) {
+        currentPredicate = predicates.find((predicate) => predicate.name == this.props.filter.pre)
+      }
+
+      this.setState({
+        predicate: currentPredicate,
+        predicates
+      })
+    } finally {
+      this.decreaseLoading()
+    }
   }
 
   render() {
     const {valueInputRef} = digs(this, "valueInputRef")
-    const currentModelClass = this.currentModelClass()
-    const {attribute, predicate, predicates, scope, value} = this.s
+    const {attribute, path, predicate, predicates, scope, value} = this.s
     let submitEnabled = false
 
     if (attribute && predicate) {
@@ -66,51 +154,53 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
     }
 
     return (
-      <div className="api-maker--table--filters--filter-form">
-        <form onSubmit={this.tt.onSubmit}>
-          <div>
-            {this.currentPathParts().map(({translation}, pathPartIndex) =>
-              <span key={`${pathPartIndex}-${translation}`}>
+      <View dataSet={{class: "api-maker--table--filters--filter-form"}} style={{minWidth: 50, minHeight: 50}}>
+        <Form onSubmit={this.tt.onSubmit}>
+          <View style={{flexDirection: "row"}}>
+            {path.map(({humanName, reflectionName}, pathPartIndex) =>
+              <View key={`${pathPartIndex}-${reflectionName}`} style={{flexDirection: "row"}}>
                 {pathPartIndex > 0 &&
-                  <span style={{marginRight: "5px", marginLeft: "5px"}}>
+                  <Text style={{marginRight: 5, marginLeft: 5}}>
                     -
-                  </span>
+                  </Text>
                 }
-                {translation}
-              </span>
+                <Text>
+                  {humanName}
+                </Text>
+              </View>
             )}
-          </div>
-          <div style={{display: "flex"}}>
-            <div>
-              {this.sortedByName(this.reflectionsWithModelClass(currentModelClass.ransackableAssociations()), currentModelClass).map((reflection) =>
+          </View>
+          <View style={{flexDirection: "row"}}>
+            <View>
+              {this.s.associations?.map((reflection) =>
                 <ReflectionElement
-                  currentModelClass={currentModelClass}
-                  key={reflection.name()}
+                  key={reflection.reflectionName}
+                  modelClassName={this.s.modelClassName}
                   onClick={this.tt.onReflectionClicked}
                   reflection={reflection}
                 />
               )}
-            </div>
-            <div>
-              {this.sortedByName(currentModelClass.ransackableAttributes(), currentModelClass).map((attribute) =>
+            </View>
+            <View>
+              {this.s.ransackableAttributes?.map((attribute) =>
                 <AttributeElement
-                  active={attribute.name() == this.state.attribute?.name()}
+                  active={attribute.attributeName == this.s.attribute?.attributeName}
                   attribute={attribute}
-                  currentModelClass={currentModelClass}
-                  key={attribute.name()}
+                  key={attribute.attributeName}
+                  modelClassName={this.s.modelClassName}
                   onClick={this.tt.onAttributeClicked}
                 />
               )}
-              {currentModelClass.ransackableScopes().map((scope) =>
+              {this.s.ransackableScopes?.map((scope) =>
                 <ScopeElement
-                  active={scope.name() == this.state.scope?.name()}
-                  key={scope.name()}
+                  active={scope == this.s.scope}
+                  key={scope}
                   scope={scope}
                   onScopeClicked={this.tt.onScopeClicked}
                 />
               )}
-            </div>
-            <div>
+            </View>
+            <View>
               {predicates && !this.state.scope &&
                 <Select
                   className="predicate-select"
@@ -120,25 +210,36 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   options={predicates.map((predicate) => digg(predicate, "name"))}
                 />
               }
-            </div>
-            <div>
+            </View>
+            <View>
               {((attribute && predicate) || scope) &&
                 <Input className="value-input" defaultValue={value} inputRef={valueInputRef} />
               }
-            </div>
-          </div>
-          <div>
+            </View>
+          </View>
+          <View>
             <button className="apply-filter-button" disabled={!submitEnabled}>
               {I18n.t("js.api_maker.table.filters.relationship_select.apply", {defaultValue: "Apply"})}
             </button>
-          </div>
-        </form>
-      </div>
+          </View>
+        </Form>
+        {this.s.loading > 0 &&
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              position: "absolute",
+              width: "100%",
+              height: "100%"
+            }}
+          >
+            <ActivityIndicator size="large" />
+          </View>
+        }
+      </View>
     )
   }
 
-  currentModelClass = () => this.currentModelClassFromPath(this.s.path)
-
   currentModelClassFromPath(path) {
     const {modelClass} = this.p
     let currentModelClass = modelClass
@@ -195,21 +296,22 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
 
   onPredicateChanged = (e) => {
     const chosenPredicateName = digg(e, "target", "value")
-    const predicate = this.state.predicates.find((predicate) => predicate.name == chosenPredicateName)
+    const predicate = this.s.predicates.find((predicate) => predicate.name == chosenPredicateName)
 
     this.setState({predicate})
   }
 
   onReflectionClicked = ({reflection}) => {
-    const newPath = this.state.path.concat([inflection.underscore(reflection.name())])
+    const newPath = this.s.path.concat([reflection])
 
     this.setState({
+      associations: null,
       attribute: undefined,
+      actualCurrentModelClass: {modelClass: digg(reflection, "resource")},
+      modelClassName: digg(reflection, "modelClassName"),
       path: newPath,
       predicate: undefined
     })
-
-    this.props.onPathChanged
   }
 
   onScopeClicked = ({scope}) => {
@@ -219,21 +321,20 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
     })
   }
 
-  onSubmit = (e) => {
-    e.preventDefault()
-
+  onSubmit = () => {
     const {filter, querySearchName} = this.p
     const {attribute, path, predicate, scope} = this.s
     const {filterIndex} = digs(filter, "filterIndex")
     const searchParams = Params.parse()[querySearchName] || {}
     const value = digg(this.tt.valueInputRef, "current", "value")
+    const p = path.map((reflection) => inflection.underscore(reflection.reflectionName))
     const newSearchParams = {
-      p: path,
+      p,
       v: value
     }
 
     if (attribute) {
-      newSearchParams.a = attribute.name()
+      newSearchParams.a = digg(attribute, "attributeName")
       newSearchParams.pre = digg(predicate, "name")
     } else if (scope) {
       newSearchParams.sc = inflection.underscore(scope.name())

package/src/table/filters/filter.jsx

@@ -1,5 +1,6 @@
 import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../../base-component"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
@@ -27,7 +28,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
     const {a, pre, sc} = this.props
 
     return (
-      <View style={{display: "flex", flexDirection: "row", backgroundColor: "grey", paddingVertical: 10, paddingHorizontal: 6}}>
+      <View style={{alignItems: "center", flexDirection: "row", backgroundColor: "grey", paddingVertical: 10, paddingHorizontal: 6}}>
         <Pressable dataSet={{class: "filter-label"}} onPress={this.tt.onFilterPressed}>
           <Text>
             {p.length > 0 &&
@@ -37,9 +38,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
           </Text>
         </Pressable>
         <Pressable dataSet={{class: "remove-filter-button"}} onPress={this.tt.onRemoveFilterPressed} style={{marginLeft: 6}}>
-          <Text>
-            &#10006;
-          </Text>
+          <FontAwesomeIcon name="remove" />
         </Pressable>
       </View>
     )

package/src/table/filters/reflection-element.jsx

@@ -1,36 +1,36 @@
 import BaseComponent from "../../base-component"
-import {digg, digs} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
-import Reflection from "../../base-model/reflection"
+import {Pressable, Text} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ReflectionElement extends BaseComponent {
   static propTypes = PropTypesExact({
-    currentModelClass: PropTypes.func.isRequired,
+    modelClassName: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
-    reflection: PropTypes.instanceOf(Reflection).isRequired
+    reflection: PropTypes.object.isRequired
   })
 
   render() {
-    const {currentModelClass, reflection} = this.p
+    const {modelClassName, reflection} = this.p
+    const {humanName, reflectionName} = reflection
 
     return (
-      <div
-        className="reflection-element"
-        data-model-class={currentModelClass.modelClassData().name}
-        data-reflection-name={reflection.name()}
-        onClick={digg(this, "onReflectionClicked")}
+      <Pressable
+        dataSet={{
+          class: "reflection-element",
+          modelClass: modelClassName,
+          reflectionName
+        }}
+        onPress={this.tt.onReflectionClicked}
       >
-        {currentModelClass.humanAttributeName(reflection.name())}
-      </div>
+        <Text>
+          {humanName}
+        </Text>
+      </Pressable>
     )
   }
 
-  onReflectionClicked = (e) => {
-    e.preventDefault()
-
-    this.p.onClick({reflection: digg(this, "props", "reflection")})
-  }
+  onReflectionClicked = () => this.p.onClick({reflection: this.p.reflection})
 }))

package/src/table/filters/save-search-modal.jsx

@@ -1,7 +1,8 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import BaseComponent from "../../base-component"
 import Checkbox from "../../bootstrap/checkbox"
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
+import {Form} from "../../form"
 import Input from "../../bootstrap/input"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {memo} from "react"
@@ -12,6 +13,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
     const {t} = useI18n({namespace: "js.api_maker.table.filters.save_search_modal"})
 
     this.t = t
+    this.useStates({form: null})
   }
 
   render() {
@@ -20,7 +22,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
 
     return (
       <Modal onRequestClose={onRequestClose} {...restProps}>
-        <form onSubmit={this.onSaveSearchSubmit}>
+        <Form onSubmit={this.tt.onSaveSearchSubmit} setForm={this.setStates.form}>
           <Input
             defaultValue={search.name()}
             id="table_search_name"
@@ -36,27 +38,24 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
           <button className="save-search-submit-button">
             {this.t(".save_search", {defaultValue: "Save search"})}
           </button>
-        </form>
+        </Form>
       </Modal>
     )
   }
 
-  onSaveSearchSubmit = async (e) => {
-    e.preventDefault()
-
-    const form = digg(e, "target")
-    const formData = new FormData(form)
+  onSaveSearchSubmit = async () => {
+    const formData = this.s.form.asObject()
     const {currentFilters, currentUser, onRequestClose, search} = this.p
 
     if (search.isNewRecord()) {
-      formData.append("table_search[query_params]", JSON.stringify(currentFilters()))
+      formData.table_search.query_params = JSON.stringify(currentFilters())
     }
 
-    formData.append("table_search[user_type]", digg(currentUser.modelClassData(), "className"))
-    formData.append("table_search[user_id]", currentUser.id())
+    formData.table_search.user_type = digg(currentUser.modelClassData(), "className")
+    formData.table_search.user_id = currentUser.id()
 
     try {
-      await search.saveRaw(formData, {form})
+      await search.saveRaw(formData)
       onRequestClose()
     } catch (error) {
       FlashMessage.errorResponse(error)

package/src/table/filters/scope-element.jsx

@@ -1,7 +1,7 @@
 import BaseComponent from "../../base-component"
-import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import {memo} from "react"
+import {Pressable, Text} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ScopeElement extends BaseComponent {
@@ -12,7 +12,7 @@ export default memo(shapeComponent(class ScopeElement extends BaseComponent {
   static propTypes = {
     active: PropTypes.bool.isRequired,
     onScopeClicked: PropTypes.func.isRequired,
-    scope: PropTypes.object.isRequired
+    scope: PropTypes.string.isRequired
   }
 
   render() {
@@ -22,14 +22,16 @@ export default memo(shapeComponent(class ScopeElement extends BaseComponent {
     if (active) style.fontWeight = "bold"
 
     return (
-      <div
-        className="scope-element"
-        key={scope.name()}
-        onClick={digg(this, "onScopeClicked")}
-        style={style}
+      <Pressable
+        dataSet={{class: "scope-element"}}
+        key={scope}
+        onPress={this.tt.onScopeClicked}
+
       >
-        {scope.name()}
-      </div>
+        <Text style={style}>
+          {scope}
+        </Text>
+      </Pressable>
     )
   }