@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/table/filters/index.jsx

@@ -0,0 +1,170 @@
+import BaseComponent from "../../base-component"
+import {digg, digs} from "diggerize"
+import Filter from "./filter"
+import FilterForm from "./filter-form"
+import LoadSearchModal from "./load-search-modal"
+import SaveSearchModal from "./save-search-modal"
+import Params from "../../params"
+import PropTypes from "prop-types"
+import * as models from "models"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import React from "react"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import useQueryParams from "on-location-changed/build/use-query-params"
+import {View} from "react-native"
+
+const {TableSearch} = models
+
+export default memo(shapeComponent(class ApiMakerTableFilters extends BaseComponent {
+  static propTypes = {
+    currentUser: PropTypes.object,
+    modelClass: PropTypes.func.isRequired,
+    queryName: PropTypes.string.isRequired,
+    querySName: PropTypes.string.isRequired
+  }
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters"})
+
+    this.queryParams = useQueryParams()
+    this.t = t
+    this.useStates({
+      filter: undefined,
+      showLoadSearchModal: undefined,
+      showSaveSearchModal: false
+    })
+  }
+
+  render() {
+    const {modelClass, querySName} = digs(this.props, "modelClass", "querySName")
+    const {currentUser} = this.props
+    const {filter, showLoadSearchModal, showSaveSearchModal} = digs(this.state, "filter", "showLoadSearchModal", "showSaveSearchModal")
+    const currentFilters = this.currentFilters()
+
+    return (
+      <View dataSet={{class: "api-maker--table--filters"}} style={{alignItems: "flex-start"}}>
+        {filter &&
+          <FilterForm
+            filter={filter}
+            key={`filter-${filter.filterIndex}`}
+            modelClass={modelClass}
+            onApplyClicked={digg(this, "onApplyClicked")}
+            querySearchName={querySName}
+          />
+        }
+        {showLoadSearchModal &&
+          <LoadSearchModal
+            currentUser={currentUser}
+            modelClass={modelClass}
+            onEditSearchPressed={digg(this, "onEditSearchPressed")}
+            onRequestClose={digg(this, "onRequestCloseLoadSearchModal")}
+            querySearchName={querySName}
+          />
+        }
+        {showSaveSearchModal &&
+          <SaveSearchModal
+            currentFilters={digg(this, "currentFilters")}
+            currentUser={currentUser}
+            onRequestClose={digg(this, "onRequestCloseSaveSearchModal")}
+            search={showSaveSearchModal}
+          />
+        }
+        {currentFilters?.map((filterData, filterIndex) =>
+          <Filter
+            key={filterIndex}
+            filterIndex={filterIndex}
+            onClick={this.tt.onFilterClicked}
+            onRemoveClicked={this.tt.onRemoveClicked}
+            {...filterData}
+          />
+        )}
+        <View className="filter-actions" style={{flexDirection: "row", marginTop: 10}}>
+          <button className="add-new-filter-button" onClick={this.tt.onAddFilterClicked}>
+            {this.t(".add_new_filter", {defaultValue: "Add new filter"})}
+          </button>
+          {currentUser &&
+            <>
+              <button className="save-search-button" onClick={this.tt.onSaveSearchClicked} style={{marginLeft: 10}}>
+                {this.t(".save_search", {defaultValue: "Save search"})}
+              </button>
+              <button className="load-search-button" onClick={this.tt.onLoadSearchClicked} style={{marginLeft: 10}}>
+                {this.t(".load_search", {defaultValue: "Load search"})}
+              </button>
+            </>
+          }
+        </View>
+      </View>
+    )
+  }
+
+  currentFilters = () => {
+    const {querySName} = digs(this.props, "querySName")
+    const currentFilters = this.queryParams[querySName] || []
+
+    return currentFilters.map((currentFilter) => JSON.parse(currentFilter))
+  }
+
+  onAddFilterClicked = (e) => {
+    e.preventDefault()
+
+    const newFilterIndex = this.currentFilters().length
+
+    this.setState({
+      filter: {
+        filterIndex: newFilterIndex
+      }
+    })
+  }
+
+  onApplyClicked = () => this.setState({filter: undefined})
+
+  onEditSearchPressed = ({search}) => {
+    this.onRequestCloseLoadSearchModal()
+    this.setState({
+      showSaveSearchModal: search
+    })
+  }
+
+  onFilterClicked = (filter) => this.setState({filter})
+
+  onLoadSearchClicked = (e) => {
+    e.preventDefault()
+
+    this.setState({
+      showLoadSearchModal: true
+    })
+  }
+
+  onRemoveClicked = ({filterIndex}) => {
+    const {querySName} = digs(this.props, "querySName")
+    const searchParams = Params.parse()[querySName] || {}
+
+    delete searchParams[filterIndex]
+
+    const newParams = {}
+
+    newParams[querySName] = searchParams
+
+    Params.changeParams(newParams)
+
+    this.setState({
+      filter: undefined
+    })
+  }
+
+  onRequestCloseLoadSearchModal = () => this.setState({showLoadSearchModal: false})
+  onRequestCloseSaveSearchModal = () => this.setState({showSaveSearchModal: undefined})
+
+  onSaveSearchClicked = (e) => {
+    e.preventDefault()
+
+    if (this.hasAnyFilters()) {
+      this.setState({showSaveSearchModal: new TableSearch()})
+    } else {
+      FlashMessage.alert(this.t(".no_filters_has_been_set", {defaultValue: "No filters has been set"}))
+    }
+  }
+
+  hasAnyFilters = () => Object.keys(this.currentFilters()).length > 0
+}))

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

@@ -0,0 +1,146 @@
+import React, {useMemo} from "react"
+import {Pressable, View} from "react-native"
+import apiMakerConfig from "@kaspernj/api-maker/build/config"
+import BaseComponent from "../../base-component"
+import classNames from "classnames"
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import * as models from "models"
+import Params from "../../params"
+import Text from "../../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+const {TableSearch} = models
+
+const SearchLink = memo(shapeComponent(class SearchLink extends BaseComponent {
+  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 BaseComponent {
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters.load_search_modal"})
+
+    this.useStates({
+      editSearch: undefined,
+      searches: undefined
+    })
+    this.setInstance({t})
+
+    useMemo(() => {
+      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()
+
+    this.setState({searches})
+  }
+
+  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 = {}
+
+    newParams[querySearchName] = queryParams.map((queryParam) => JSON.stringify(queryParam))
+
+    Params.changeParams(newParams)
+
+    onRequestClose()
+  }
+
+  onSearchDeleted = ({search}) => {
+    this.setState({
+      searches: this.state.searches.filter((existingSearch) => existingSearch.id() != search.id())
+    })
+  }
+}))

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

@@ -0,0 +1,38 @@
+import BaseComponent from "../../base-component"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import memo from "set-state-compare/src/memo"
+import {Pressable} from "react-native"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+
+export default memo(shapeComponent(class ReflectionElement extends BaseComponent {
+  static propTypes = PropTypesExact({
+    modelClassName: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    reflection: PropTypes.object.isRequired
+  })
+
+  render() {
+    const {modelClassName, reflection} = this.p
+    const {humanName, reflectionName} = reflection
+
+    return (
+      <Pressable
+        dataSet={{
+          class: "reflection-element",
+          modelClass: modelClassName,
+          reflectionName
+        }}
+        onPress={this.tt.onReflectionClicked}
+      >
+        <Text>
+          {humanName}
+        </Text>
+      </Pressable>
+    )
+  }
+
+  onReflectionClicked = () => this.p.onClick({reflection: this.p.reflection})
+}))

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

@@ -0,0 +1,74 @@
+import apiMakerConfig from "@kaspernj/api-maker/build/config"
+import BaseComponent from "../../base-component"
+import Checkbox from "../../bootstrap/checkbox"
+import {digg} from "diggerize"
+import FlashMessage from "../../flash-message"
+import {Form} from "../../form"
+import Input from "../../bootstrap/input"
+import modelClassRequire from "../../model-class-require"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import memo from "set-state-compare/src/memo"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+const TableSearch = modelClassRequire("TableSearch")
+
+export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal extends BaseComponent {
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters.save_search_modal"})
+
+    this.t = t
+    this.useStates({form: null})
+  }
+
+  render() {
+    const {currentFilters, currentUser, onRequestClose, search, ...restProps} = this.props
+    const Modal = apiMakerConfig.getModal()
+
+    return (
+      <Modal onRequestClose={onRequestClose} {...restProps}>
+        <Form onSubmit={this.tt.onSaveSearchSubmit} setForm={this.setStates.form}>
+          <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]"
+          />
+          <button className="save-search-submit-button">
+            {this.t(".save_search", {defaultValue: "Save search"})}
+          </button>
+        </Form>
+      </Modal>
+    )
+  }
+
+  onSaveSearchSubmit = async () => {
+    const formData = this.s.form.asObject()
+    const {currentFilters, currentUser, onRequestClose, search} = this.p
+    const hasUserTypeColumn = Boolean(TableSearch.attributes().find((attribute) => attribute.name() == "user_type"))
+
+    if (search.isNewRecord()) {
+      formData.table_search.query_params = JSON.stringify(currentFilters())
+    }
+
+    if (hasUserTypeColumn) {
+      formData.table_search.user_type = digg(currentUser.modelClassData(), "className")
+    }
+
+    formData.table_search.user_id = currentUser.id()
+
+    try {
+      await search.saveRaw(formData)
+      FlashMessage.success(this.t(".", {defaultValue: "The search was saved."}))
+      onRequestClose()
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+}))

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

@@ -0,0 +1,44 @@
+import BaseComponent from "../../base-component"
+import PropTypes from "prop-types"
+import memo from "set-state-compare/src/memo"
+import {Pressable} from "react-native"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+
+export default memo(shapeComponent(class ScopeElement extends BaseComponent {
+  static defaultProps = {
+    active: false
+  }
+
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    onScopeClicked: PropTypes.func.isRequired,
+    scope: PropTypes.string.isRequired
+  }
+
+  render() {
+    const {active, scope} = this.p
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <Pressable
+        dataSet={{class: "scope-element", scopeName: scope}}
+        key={scope}
+        onPress={this.tt.onScopeClicked}
+      >
+        <Text style={style}>
+          {scope}
+        </Text>
+      </Pressable>
+    )
+  }
+
+  onScopeClicked = (e) => {
+    e.preventDefault()
+
+    this.p.onScopeClicked({scope: this.p.scope})
+  }
+}))

package/src/table/header-column-content.jsx

@@ -0,0 +1,55 @@
+import BaseComponent from "../base-component"
+import {digs} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import {View} from "react-native"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import SortLink from "../bootstrap/sort-link"
+import Text from "../utils/text"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    sortLinkProps: PropTypes.object,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const {defaultParams} = table.props
+    const {styleForHeaderText} = table.tt
+    const {query} = digs(table.collection, "query")
+    const columnProps = table.columnProps(column)
+
+    return (
+      <View
+        dataSet={{
+          component: "api-maker/table/header-column-content",
+          identifier: tableSettingColumn.identifier()
+        }}
+        style={{display: "flex", flexDirection: "row", alignItems: "center"}}
+        {...columnProps}
+      >
+        {tableSettingColumn.hasSortKey() && query &&
+          <SortLink
+            attribute={tableSettingColumn.sortKey()}
+            defaultParams={defaultParams}
+            query={query}
+            style={{whiteSpace: "nowrap", overflow: "hidden"}}
+            textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
+            title={table.headerLabelForColumn(column)}
+            {...this.props.sortLinkProps}
+          />
+        }
+        {(!tableSettingColumn.hasSortKey() || !query) &&
+          <Text ellipsizeMode="clip" numberOfLines={1} style={{fontWeight: "bold"}}>
+            {table.headerLabelForColumn(column)}
+          </Text>
+        }
+      </View>
+    )
+  }
+}))

package/src/table/header-column.jsx

@@ -0,0 +1,129 @@
+import React, {useMemo} from "react"
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import Header from "./components/header"
+import HeaderColumnContent from "./header-column-content"
+import Icon from "../utils/icon"
+import memo from "set-state-compare/src/memo"
+import {Animated, PanResponder} from "react-native"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useBreakpoint from "../use-breakpoint"
+import Widths from "./widths"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    active: PropTypes.bool.isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
+    column: PropTypes.object.isRequired,
+    resizing: PropTypes.bool.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired,
+    touchProps: PropTypes.object.isRequired,
+    widths: PropTypes.instanceOf(Widths).isRequired
+  })
+
+  setup() {
+    const {name: breakpoint, mdUp, smDown} = useBreakpoint()
+
+    this.setInstance({breakpoint, mdUp, smDown})
+    this.useStates({
+      resizing: false
+    })
+
+    this.resizePanResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (_e) => {
+          this.originalWidth = this.currentWidth
+          this.setState({resizing: true})
+          this.p.table.setState({resizing: true})
+
+          return true
+        },
+        onPanResponderMove: (_e, gestate) => {
+          const newWidth = this.tt.originalWidth + gestate.dx
+
+          this.p.widths.setWidthOfColumn({
+            identifier: this.p.tableSettingColumn.identifier(),
+            width: newWidth
+          })
+        },
+        onPanResponderRelease: this.tt.onResizeEnd,
+        onPanResponderTerminate: this.tt.onResizeEnd,
+        onPanResponderTerminationRequest: () => false // Don't let another PanResponder steal focus and stop resizing until release
+      }),
+      []
+    )
+  }
+
+  onResizeEnd = async () => {
+    this.p.table.setState({lastUpdate: new Date(), resizing: false})
+    this.setState({resizing: false})
+
+    const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
+
+    await this.p.tableSettingColumn.update({width})
+  }
+
+  render() {
+    const {mdUp} = this.tt
+    const {active, animatedWidth, column, resizing, table, tableSettingColumn, touchProps} = this.p
+    const {styleForHeader} = table.tt
+    const headerProps = table.headerProps(column)
+    const {style, ...restColumnProps} = headerProps
+    const actualStyle = useMemo(
+      () => {
+        const actualStyle = Object.assign(
+          {
+            cursor: resizing ? "col-resize" : undefined,
+            width: mdUp ? animatedWidth : "100%",
+            height: mdUp ? "100%" : undefined
+          },
+          style
+        )
+
+        return actualStyle
+      },
+      [active, animatedWidth, mdUp, resizing, style]
+    )
+
+    return (
+      <Header
+        dataSet={{
+          className: classNames(...table.headerClassNameForColumn(column)),
+          identifier: tableSettingColumn.identifier()
+        }}
+        onLayout={this.tt.onLayout}
+        style={styleForHeader({style: actualStyle})}
+        {...restColumnProps}
+      >
+        {mdUp &&
+          <Icon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
+        }
+        <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
+        {mdUp &&
+          <Animated.View
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: 10,
+              height: "100%",
+              cursor: "col-resize",
+              zIndex: 9999
+            }}
+            {...this.tt.resizePanResponder.panHandlers}
+          />
+        }
+      </Header>
+    )
+  }
+
+  onLayout = (e) => {
+    const {width} = e.nativeEvent.layout
+
+    this.currentWidth = width
+  }
+}))