@kaspernj/api-maker 1.0.291 → 1.0.292

package/package.json

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

package/src/config.mjs

@@ -16,6 +16,7 @@ const accessors = {
   history: {required: false},
   host: {required: false},
   i18n: {required: false},
+  modal: {required: false},
   routes: {required: false},
   routeDefinitions: {required: false}
 }

package/src/inputs/checkbox.jsx

@@ -33,6 +33,7 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
       attribute,
       autoRefresh,
       autoSubmit,
+      checked,
       defaultChecked,
       defaultValue,
       id,

package/src/inputs/input-wrapper.jsx

@@ -32,7 +32,13 @@ const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => {
       )
 
       if (this.handleAsCheckbox()) {
-        inputProps.defaultChecked = this.inputDefaultChecked()
+        if ("checked" in this.props) {
+          inputProps.checked = this.props.checked
+        }
+
+        if ("defaultChecked" in this.props || (this.props.attribute && this.props.model)) {
+          inputProps.defaultChecked = this.inputDefaultChecked()
+        }
       } else {
         inputProps.defaultValue = this.inputDefaultValue()
       }

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

@@ -339,8 +339,6 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
       throw new Error("Dont know if should search for attribute or scope?")
     }
 
-    console.log({newSearchParams})
-
     searchParams[filterIndex] = JSON.stringify(newSearchParams)
 
     const newParams = {}

package/src/table/filters/index.jsx

@@ -1,7 +1,9 @@
 import {digg, digs} from "diggerize"
+import FilterForm from "./filter-form"
+import LoadSearchModal from "./load-search-modal"
+import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
 import React from "react"
-import FilterForm from "./filter-form"
 import Shape from "set-state-compare/src/shape"
 import withQueryParams from "on-location-changed/src/with-query-params"
 
@@ -56,6 +58,7 @@ class ApiMakerTableFilter extends React.PureComponent {
 
 class ApiMakerTableFilters extends React.PureComponent {
   static propTypes = {
+    currentUser: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
     queryName: PropTypes.string.isRequired,
     querySName: PropTypes.string.isRequired,
@@ -63,19 +66,19 @@ class ApiMakerTableFilters extends React.PureComponent {
   }
 
   shape = new Shape(this, {
-    filter: undefined
+    filter: undefined,
+    showLoadSearchModal: false,
+    showSaveSearchModal: false
   })
 
   render() {
     const {modelClass, querySName} = digs(this.props, "modelClass", "querySName")
-    const {filter} = digs(this.shape, "filter")
+    const {currentUser} = this.props
+    const {filter, showLoadSearchModal, showSaveSearchModal} = digs(this.shape, "filter", "showLoadSearchModal", "showSaveSearchModal")
     const currentFilters = this.currentFilters()
 
     return (
       <div className="api-maker--table--filters">
-        <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
-          {I18n.t("js.api_maker.table.filters.add_new_filter", {defaultValue: "Add new filter"})}
-        </button>
         {filter &&
           <FilterForm
             filter={filter}
@@ -85,24 +88,50 @@ class ApiMakerTableFilters extends React.PureComponent {
             querySearchName={querySName}
           />
         }
+        {showLoadSearchModal &&
+          <LoadSearchModal
+            currentUser={currentUser}
+            modelClass={modelClass}
+            onRequestClose={digg(this, "onRequestCloseLoadSearchModal")}
+            querySearchName={querySName}
+          />
+        }
+        {showSaveSearchModal &&
+          <SaveSearchModal currentFilters={digg(this, "currentFilters")} currentUser={currentUser} onRequestClose={digg(this, "onRequestCloseSaveSearchModal")} />
+        }
         {currentFilters?.map((filterData, filterIndex) =>
           <ApiMakerTableFilter
             key={filterIndex}
             filterIndex={filterIndex}
             onClick={digg(this, "onFilterClicked")}
             onRemoveClicked={digg(this, "onRemoveClicked")}
-            {...JSON.parse(filterData)}
+            {...filterData}
           />
         )}
+        <div className="filter-actions">
+          <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
+            {I18n.t("js.api_maker.table.filters.add_new_filter", {defaultValue: "Add new filter"})}
+          </button>
+          {currentUser &&
+            <>
+              <button className="save-search-button" onClick={digg(this, "onSaveSearchClicked")}>
+                {I18n.t("js.api_maker.table.filters.save_search", {defaultValue: "Save search"})}
+              </button>
+              <button className="load-search-button" onClick={digg(this, "onLoadSearchClicked")}>
+                {I18n.t("js.api_maker.table.filters.load_search", {defaultValue: "Load search"})}
+              </button>
+            </>
+          }
+        </div>
       </div>
     )
   }
 
-  currentFilters() {
+  currentFilters = () => {
     const {queryParams, querySName} = digs(this.props, "queryParams", "querySName")
     const currentFilters = queryParams[querySName] || []
 
-    return currentFilters
+    return currentFilters.map((currentFilter) => JSON.parse(currentFilter))
   }
 
   onAddFilterClicked = (e) => {
@@ -118,6 +147,14 @@ class ApiMakerTableFilters extends React.PureComponent {
   }
 
   onApplyClicked = () => this.shape.set({filter: undefined})
+  onFilterClicked = (args) => this.shape.set({filter: args})
+
+  onLoadSearchClicked = (e) => {
+    e.preventDefault()
+    this.shape.set({
+      showLoadSearchModal: true
+    })
+  }
 
   onRemoveClicked = ({filterIndex}) => {
     const {querySName} = digs(this.props, "querySName")
@@ -136,7 +173,20 @@ class ApiMakerTableFilters extends React.PureComponent {
     })
   }
 
-  onFilterClicked = (args) => this.shape.set({filter: args})
+  onRequestCloseLoadSearchModal = () => this.shape.set({showLoadSearchModal: false})
+  onRequestCloseSaveSearchModal = () => this.shape.set({showSaveSearchModal: false})
+
+  onSaveSearchClicked = (e) => {
+    e.preventDefault()
+
+    if (this.hasAnyFilters()) {
+      this.shape.set({showSaveSearchModal: true})
+    } else {
+      FlashMessage.alert(I18n.t("js.api_maker.table.filters.no_filters_has_been_set", {defaultValue: "No filters has been set"}))
+    }
+  }
+
+  hasAnyFilters = () => Object.keys(this.currentFilters()).length > 0
 }
 
 export default withQueryParams(ApiMakerTableFilters)

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

@@ -0,0 +1,60 @@
+import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import classNames from "classnames"
+import {digg} from "diggerize"
+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 () => {
+    const userType = digg(currentUser.modelClassData(), "name")
+    const searches = await TableSearch
+      .ransack({user_id_eq: currentUser.id(), user_type_eq: userType})
+      .toArray()
+
+    setSearches(searches)
+  }
+
+  const onSearchClicked = useCallback(({search}) => {
+    const queryParams = search.queryParams()
+    const newParams = {}
+
+    newParams[querySearchName] = queryParams.map((queryParam) => JSON.stringify(queryParam))
+
+    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

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

@@ -0,0 +1,51 @@
+import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import {digg} from "diggerize"
+import Input from "../../bootstrap/input"
+import {TableSearch} from "../../models.mjs.erb"
+import {useCallback} from "react"
+
+const ApiMakerTableFiltersSaveSearchModal = (props) => {
+  const {currentFilters, currentUser, onRequestClose, ...restProps} = props
+  const Modal = apiMakerConfig.getModal()
+
+  const onSaveSearchSubmit = useCallback(async (e) => {
+    e.preventDefault()
+
+    const form = digg(e, "target")
+    const formData = new FormData(form)
+    const tableSearch = new TableSearch()
+
+    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})
+      onRequestClose()
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  })
+
+  return (
+    <Modal onRequestClose={onRequestClose} {...restProps}>
+      <form onSubmit={onSaveSearchSubmit}>
+        <Input
+          id="table_search_name"
+          label={I18n.t("js.api_maker.table.filters.save_search_modal.search_name", {defaultValue: "Search name"})}
+          name="table_search[name]"
+        />
+        <Checkbox
+          id="table_search_public"
+          label={I18n.t("js.api_maker.table.filters.save_search_modal.public", {defaultValue: "Public"})}
+          name="table_search[public]"
+        />
+        <button className="save-search-submit-button">
+          {I18n.t("js.api_maker.table.filters.save_search_modal.save_search", {defaultValue: "Save search"})}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+export default ApiMakerTableFiltersSaveSearchModal

package/src/table/settings/index.jsx

@@ -34,7 +34,7 @@ class ColumnRow extends React.PureComponent {
 
     return (
       <div className="api-maker--table--settings--column-row">
-        <label>
+        <label style={{whiteSpace: "nowrap"}}>
           <input
             className="api-maker--table--setings--column-checkbox"
             data-identifier={columnIdentifier(column)}

package/src/table/table.jsx

@@ -157,7 +157,7 @@ class ApiMakerTable extends React.PureComponent {
 
   render () {
     const {modelClass, noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "modelClass", "noRecordsAvailableContent", "noRecordsFoundContent")
-    const {collection, defaultParams, onModelsLoaded, selectColumns} = this.props
+    const {collection, currentUser, defaultParams, onModelsLoaded, selectColumns} = this.props
     const {
       overallCount,
       preload,
@@ -221,7 +221,7 @@ class ApiMakerTable extends React.PureComponent {
           </div>
         }
         {showFilters &&
-          <Filters modelClass={modelClass} queryName={queryName} querySName={querySName} />
+          <Filters currentUser={currentUser} modelClass={modelClass} queryName={queryName} querySName={querySName} />
         }
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()