@kaspernj/api-maker 1.0.374 → 1.0.376

package/package.json

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

package/src/base-model/attribute.mjs

@@ -1,3 +1,4 @@
+import Column from "./column.mjs"
 import {digg} from "diggerize"
 
 export default class ApiMakerBaseModelAttribute {
@@ -5,10 +6,20 @@ export default class ApiMakerBaseModelAttribute {
     this.attributeData = attributeData
   }
 
-  isColumn() {
-    return Boolean(digg(this, "attributeData", "column"))
+  getColumn() {
+    if (!this.column) {
+      const columnData = digg(this, "attributeData", "column")
+
+      if (columnData) {
+        this.column = new Column(columnData)
+      }
+    }
+
+    return this.column
   }
 
+  isColumn = () => Boolean(digg(this, "attributeData", "column"))
+
   isSelectedByDefault() {
     const isSelectedByDefault = digg(this, "attributeData", "selected_by_default")
 
@@ -17,7 +28,5 @@ export default class ApiMakerBaseModelAttribute {
     return false
   }
 
-  name() {
-    return digg(this, "attributeData", "name")
-  }
+  name = () => digg(this, "attributeData", "name")
 }

package/src/base-model/column.mjs

@@ -0,0 +1,13 @@
+import {digg} from "diggerize"
+
+export default class ApiMakerBaseModelColumn {
+  constructor(columnData) {
+    if (!columnData) {
+      throw new Error("No column data was given")
+    }
+
+    this.columnData = columnData
+  }
+
+  getType = () => digg(this, "columnData", "type")
+}

package/src/bootstrap/attribute-row/index.jsx

@@ -1,11 +1,13 @@
 import classNames from "classnames"
 import {digg} from "diggerize"
+import * as inflection from "inflection"
 import MoneyFormatter from "../../money-formatter"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo, useMemo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
 
-export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends ShapeComponent {
   static defaultProps = {
     checkIfAttributeLoaded: false
   }
@@ -20,6 +22,13 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
     value: PropTypes.node
   }
 
+  setup() {
+    this.attribute = useMemo(
+      () => this.props.model?.constructor?.attributes()?.find((attribute) => attribute.name() == inflection.underscore(this.props.attribute)),
+      [this.props.attribute, this.props.model]
+    )
+  }
+
   render () {
     const {attribute, checkIfAttributeLoaded, children, className, identifier, label, model, value, ...restProps} = this.props
 
@@ -68,7 +77,11 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
   }
 
   valueContent(value) {
-    if (value instanceof Date) {
+    const columnType = this.attribute?.getColumn()?.getType()
+
+    if (columnType == "date") {
+      return I18n.l("date.formats.default", value)
+    } else if (value instanceof Date) {
       return strftime("%Y-%m-%d %H:%M", value)
     } else if (typeof value === "boolean") {
       if (value) return I18n.t("js.shared.yes", {defaultValue: "Yes"})
@@ -80,4 +93,4 @@ export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
       return value
     }
   }
-}
+}))

package/src/table/filters/index.jsx

@@ -6,8 +6,10 @@ import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
 import {memo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {TableSearch} from "../../models.mjs.erb"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
   static propTypes = {
@@ -24,7 +26,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
     this.t = t
     this.useStates({
       filter: undefined,
-      showLoadSearchModal: false,
+      showLoadSearchModal: undefined,
       showSaveSearchModal: false
     })
   }
@@ -36,7 +38,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
     const currentFilters = this.currentFilters()
 
     return (
-      <div className="api-maker--table--filters">
+      <View dataSet={{class: "api-maker--table--filters"}}>
         {filter &&
           <FilterForm
             filter={filter}
@@ -50,6 +52,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
           <LoadSearchModal
             currentUser={currentUser}
             modelClass={modelClass}
+            onEditSearchPressed={digg(this, "onEditSearchPressed")}
             onRequestClose={digg(this, "onRequestCloseLoadSearchModal")}
             querySearchName={querySName}
           />
@@ -59,6 +62,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
             currentFilters={digg(this, "currentFilters")}
             currentUser={currentUser}
             onRequestClose={digg(this, "onRequestCloseSaveSearchModal")}
+            search={showSaveSearchModal}
           />
         }
         {currentFilters?.map((filterData, filterIndex) =>
@@ -85,7 +89,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
             </>
           }
         </div>
-      </div>
+      </View>
     )
   }
 
@@ -109,10 +113,19 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
   }
 
   onApplyClicked = () => this.setState({filter: undefined})
+
+  onEditSearchPressed = ({search}) => {
+    this.onRequestCloseLoadSearchModal()
+    this.setState({
+      showSaveSearchModal: search
+    })
+  }
+
   onFilterClicked = (args) => this.setState({filter: args})
 
   onLoadSearchClicked = (e) => {
     e.preventDefault()
+
     this.setState({
       showLoadSearchModal: true
     })
@@ -136,13 +149,13 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
   }
 
   onRequestCloseLoadSearchModal = () => this.setState({showLoadSearchModal: false})
-  onRequestCloseSaveSearchModal = () => this.setState({showSaveSearchModal: false})
+  onRequestCloseSaveSearchModal = () => this.setState({showSaveSearchModal: undefined})
 
   onSaveSearchClicked = (e) => {
     e.preventDefault()
 
     if (this.hasAnyFilters()) {
-      this.setState({showSaveSearchModal: true})
+      this.setState({showSaveSearchModal: new TableSearch()})
     } else {
       FlashMessage.alert(this.t(".no_filters_has_been_set", {defaultValue: "No filters has been set"}))
     }

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

@@ -1,38 +1,127 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import classNames from "classnames"
 import {digg} from "diggerize"
+import {memo, useEffect} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
-import {useCallback, useEffect, useState} from "react"
-
-const SearchLink = (props) => {
-  const {onClick, search} = props
-  const onSearchClicked = useCallback((e) => {
-    e.preventDefault()
-    onClick({search})
-  })
-
-  return (
-    <a className="load-search-link" href="#" key={search.id()} onClick={onSearchClicked} style={{display: "block"}}>
-      {search.name()}
-    </a>
-  )
-}
-
-const ApiMakerTableFiltersLoadSearchModal = (props) => {
-  const {className, currentUser, modelClass, onRequestClose, querySearchName, ...restProps} = props
-  const Modal = apiMakerConfig.getModal()
-  const [searches, setSearches] = useState(undefined)
-
-  const loadSearches = async () => {
+import {Pressable, Text, View} from "react-native"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+
+const SearchLink = memo(shapeComponent(class SearchLink extends ShapeComponent {
+  render() {
+    const {search} = this.props
+
+    return (
+      <View dataSet={{class: "search-row", searchId: search.id()}} style={{flexDirection: "row", width: "100%"}}>
+        <Pressable dataSet={{class: "load-search-link"}} onPress={this.onSearchClicked} style={{justifyContent: "center"}}>
+          <Text>
+            {search.name()}
+          </Text>
+        </Pressable>
+        <View style={{flexDirection: "row", marginLeft: "auto"}}>
+          <Pressable
+            dataSet={{class: "edit-search-button"}}
+            onPress={this.onEditPressed}
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              width: 25,
+              height: 25,
+              backgroundColor: "#fff",
+              border: "1px solid #007bff",
+              borderRadius: 5,
+              color: "#007bff"
+            }}
+          >
+            <Text>
+              &#x270E;
+            </Text>
+          </Pressable>
+          <Pressable
+            dataSet={{class: "delete-search-button"}}
+            onPress={this.onDeletePressed}
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              marginLeft: 5,
+              width: 25,
+              height: 25,
+              backgroundColor: "#fff",
+              border: "1px solid #dc3545",
+              borderRadius: 5,
+              color: "#dc3545"
+            }}
+          >
+            <Text>
+              &#x2715;
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    )
+  }
+
+  onDeletePressed = async () => {
+    if (!confirm("Are you sure?")) {
+      return
+    }
+
+    const {search} = this.props
+
+    await search.destroy()
+    this.props.onDeleted({search})
+  }
+
+  onEditPressed = () => this.props.onEditPressed({search: this.props.search})
+  onSearchClicked = () => this.props.onClick({search: this.props.search})
+}))
+
+export default memo(shapeComponent(class ApiMakerTableFiltersLoadSearchModal extends ShapeComponent {
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters.load_search_modal"})
+
+    this.useStates({
+      editSearch: undefined,
+      searches: undefined
+    })
+    this.setInstance({t})
+
+    useEffect(() => {
+      this.loadSearches()
+    }, [])
+  }
+
+  loadSearches = async () => {
+    const {currentUser} = this.props
     const userType = digg(currentUser.modelClassData(), "name")
     const searches = await TableSearch
       .ransack({user_id_eq: currentUser.id(), user_type_eq: userType})
       .toArray()
 
-    setSearches(searches)
+    this.setState({searches})
   }
 
-  const onSearchClicked = useCallback(({search}) => {
+  render() {
+    const {t} = this
+    const {className, currentUser, modelClass, onEditSearchPressed, onRequestClose, querySearchName, ...restProps} = this.props
+    const Modal = apiMakerConfig.getModal()
+
+    return (
+      <Modal className={classNames("api-maker--table--filters--load-search-modal", className)} onRequestClose={onRequestClose} {...restProps}>
+        <View>
+          <Text>
+            {t(".choose_a_search", {defaultValue: "Choose a search"})}
+          </Text>
+        </View>
+        {this.state.searches?.map((search) =>
+          <SearchLink key={search.id()} onClick={this.onSearchClicked} onDeleted={this.onSearchDeleted} onEditPressed={onEditSearchPressed} search={search} />
+        )}
+      </Modal>
+    )
+  }
+
+  onSearchClicked = ({search}) => {
+    const {onRequestClose, querySearchName} = this.props
     const queryParams = search.queryParams()
     const newParams = {}
 
@@ -41,20 +130,11 @@ const ApiMakerTableFiltersLoadSearchModal = (props) => {
     Params.changeParams(newParams)
 
     onRequestClose()
-  })
-
-  useEffect(() => { loadSearches() }, [])
-
-  return (
-    <Modal className={classNames("api-maker--table--filters--load-search-modal", className)} onRequestClose={onRequestClose} {...restProps}>
-      <div>
-        {I18n.t("js.api_maker.table.filters.load_search_modal.choose_a_search", {defaultValue: "Choose a search"})}
-      </div>
-      {searches?.map((search) =>
-        <SearchLink key={search.id()} onClick={onSearchClicked} search={search} />
-      )}
-    </Modal>
-  )
-}
-
-export default ApiMakerTableFiltersLoadSearchModal
+  }
+
+  onSearchDeleted = ({search}) => {
+    this.setState({
+      searches: this.state.searches.filter((existingSearch) => existingSearch.id() != search.id())
+    })
+  }
+}))

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

@@ -1,9 +1,8 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import Checkbox from "@kaspernj/api-maker/src/bootstrap/checkbox"
-import {digg} from "diggerize"
+import {digg, digs} from "diggerize"
 import Input from "../../bootstrap/input"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
-import {TableSearch} from "../../models.mjs.erb"
 import {memo} from "react"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
@@ -15,18 +14,20 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
   }
 
   render() {
-    const {currentFilters, currentUser, onRequestClose, ...restProps} = this.props
+    const {currentFilters, currentUser, onRequestClose, search, ...restProps} = this.props
     const Modal = apiMakerConfig.getModal()
 
     return (
       <Modal onRequestClose={onRequestClose} {...restProps}>
         <form onSubmit={this.onSaveSearchSubmit}>
           <Input
+            defaultValue={search.name()}
             id="table_search_name"
             label={this.t(".search_name", {defaultValue: "Search name"})}
             name="table_search[name]"
           />
           <Checkbox
+            defaultChecked={search.public()}
             id="table_search_public"
             label={this.t(".public", {defaultValue: "Public"})}
             name="table_search[public]"
@@ -44,15 +45,18 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
 
     const form = digg(e, "target")
     const formData = new FormData(form)
-    const tableSearch = new TableSearch()
+    const {currentFilters, currentUser, onRequestClose, search} = digs(this.props, "currentFilters", "currentUser", "onRequestClose", "search")
 
-    formData.append("table_search[query_params]", JSON.stringify(this.props.currentFilters()))
-    formData.append("table_search[user_type]", digg(this.props.currentUser.modelClassData(), "className"))
-    formData.append("table_search[user_id]", this.props.currentUser.id())
+    if (search.isNewRecord()) {
+      formData.append("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())
 
     try {
-      await tableSearch.saveRaw(formData, {form})
-      this.props.onRequestClose()
+      await search.saveRaw(formData, {form})
+      onRequestClose()
     } catch (error) {
       FlashMessage.errorResponse(error)
     }

package/src/table/model-row.jsx

@@ -105,8 +105,8 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromAttributeAndPath (column, model) {
-    const {attribute} = digs(column, "attribute")
-    const currentModelClass = this.props.modelClass
+    const {attribute: attributeName} = digs(column, "attribute")
+    const attributeNameUnderscore = inflection.underscore(attributeName)
     const path = column.path || []
     let value
     let currentModel = model
@@ -118,8 +118,18 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
       }
     }
 
-    if (!(attribute in currentModel)) throw new Error(`${currentModelClass.modelName().name} doesn't respond to ${attribute}`)
-    if (currentModel.isAttributeLoaded(attribute)) value = currentModel[attribute]()
+    if (!(attributeName in currentModel)) {
+      throw new Error(`${currentModel.constructor.modelName().human()} doesn't respond to ${attributeName}`)
+    }
+
+    if (currentModel.isAttributeLoaded(attributeName)) value = currentModel[attributeName]()
+
+    const attribute = currentModel.constructor.attributes().find((attribute) => attribute.name() == attributeNameUnderscore)
+    const modelColumn = attribute?.getColumn()
+
+    if (modelColumn?.getType() == "date") {
+      return this.presentDateTime({apiMakerType: "date", value})
+    }
 
     return this.presentColumnValue(value)
   }
@@ -155,9 +165,9 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     }
   }
 
-  presentColumnValue (value) {
+  presentColumnValue(value) {
     if (value instanceof Date) {
-      return this.presentDateTime(value)
+      return this.presentDateTime({value})
     } else if (MoneyFormatter.isMoney(value)) {
       return MoneyFormatter.format(value)
     } else if (typeof value == "boolean") {
@@ -174,15 +184,13 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     return value
   }
 
-  presentDateTime(value) {
-    const apiMakerType = value.apiMakerType || "time"
-
-    if (apiMakerType == "time") {
+  presentDateTime({apiMakerType, value}) {
+    if (!apiMakerType || apiMakerType == "time") {
       const dateTimeFormatName = this.props.liveTable.props.defaultDateTimeFormatName || "time.formats.default"
 
       return I18n.l(dateTimeFormatName, value)
     } else if (apiMakerType == "date") {
-      const dateFormatName = this.props.liveTable.props.defaultDateTimeFormatName || "date.formats.default"
+      const dateFormatName = this.props.liveTable.props.defaultDateFormatName || "date.formats.default"
 
       return I18n.l(dateFormatName, value)
     } else {