@kaspernj/api-maker 1.0.375 → 1.0.376

package/package.json

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

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)
     }