@kaspernj/api-maker 1.0.2053 → 1.0.2054

package/src/table/filters/index.jsx

@@ -1,171 +0,0 @@
-import BaseComponent from "../../base-component"
-import {digg, digs} from "diggerize"
-import Filter from "./filter"
-import FilterForm from "./filter-form"
-import {FlashNotifications} from "flash-notifications"
-import LoadSearchModal from "./load-search-modal"
-import SaveSearchModal from "./save-search-modal"
-import Params from "../../params"
-import PropTypes from "prop-types"
-import {TableSearch} 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"
-
-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={this.rootViewDataSet ||= {class: "api-maker--table--filters"}} style={this.rootViewStyle ||= {alignItems: "flex-start"}}>
-        {filter &&
-          <FilterForm
-            filter={filter}
-            key={`filter-${filter.filterIndex}`}
-            modelClass={modelClass}
-            onApplyClicked={this.tt.onApplyClicked}
-            onRequestClose={this.tt.onFilterFormRequestClose}
-            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 dataSet={this.filterActionsDataSet ||= {class: "filter-actions"}} style={this.filterActionsStyle ||= {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})
-  onFilterFormRequestClose = () => this.setState({filter: undefined})
-
-  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 {
-      FlashNotifications.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

@@ -1,157 +0,0 @@
-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 Params from "../../params"
-import {TableSearch} from "models"
-import Text from "../../utils/text"
-import useI18n from "i18n-on-steroids/src/use-i18n"
-
-const SearchLink = memo(shapeComponent(class SearchLink extends BaseComponent {
-  render() {
-    const {search} = this.props
-
-    return (
-      <View
-        dataSet={this.cache("rootViewStyle", {class: "search-row", searchId: search.id()}, [search.id()])}
-        style={this.rootViewStyle ||= {flexDirection: "row", width: "100%"}}
-      >
-        <Pressable
-          dataSet={this.loadSearchLinkPressableDataSet ||= {class: "load-search-link"}}
-          onPress={this.tt.onSearchClicked}
-          style={this.loadSearchLinkPressableStyle ||= {justifyContent: "center"}}
-        >
-          <Text>
-            {search.name()}
-          </Text>
-        </Pressable>
-        <View style={this.actionsViewStyle ||= {flexDirection: "row", marginLeft: "auto"}}>
-          <Pressable
-            dataSet={this.editSearchButtonDataSet ||= {class: "edit-search-button"}}
-            onPress={this.tt.onEditPressed}
-            style={this.editSearchButtonStyle ||= {
-              alignItems: "center",
-              justifyContent: "center",
-              width: 25,
-              height: 25,
-              backgroundColor: "#fff",
-              border: "1px solid #007bff",
-              borderRadius: 5,
-              color: "#007bff"
-            }}
-          >
-            <Text>
-              &#x270E;
-            </Text>
-          </Pressable>
-          <Pressable
-            dataSet={this.deleteSearchButtonDataSet ||= {class: "delete-search-button"}}
-            onPress={this.tt.onDeletePressed}
-            style={this.deleteSearchButtonStyle ||= {
-              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.tt
-    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.tt.onSearchClicked}
-            onDeleted={this.tt.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

@@ -1,38 +0,0 @@
-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

@@ -1,74 +0,0 @@
-import apiMakerConfig from "@kaspernj/api-maker/build/config"
-import BaseComponent from "../../base-component"
-import Checkbox from "../../bootstrap/checkbox"
-import {digg} from "diggerize"
-import {FlashNotifications} from "flash-notifications"
-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)
-      FlashNotifications.success(this.t(".", {defaultValue: "The search was saved."}))
-      onRequestClose()
-    } catch (error) {
-      FlashNotifications.errorResponse(error)
-    }
-  }
-}))

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

@@ -1,44 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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={this.cache("rootViewDataSet", {
-          component: "api-maker/table/header-column-content",
-          identifier: tableSettingColumn.identifier()
-        }, [tableSettingColumn.identifier()])}
-        style={this.rootViewStyle ||= {display: "flex", flexDirection: "row", alignItems: "center"}}
-        {...columnProps}
-      >
-        {tableSettingColumn.hasSortKey() && query &&
-          <SortLink
-            attribute={tableSettingColumn.sortKey()}
-            defaultParams={defaultParams}
-            query={query}
-            style={this.sortLinkStyle ||= {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={this.headerLabelStyle ||= {fontWeight: "bold"}}>
-            {table.headerLabelForColumn(column)}
-          </Text>
-        }
-      </View>
-    )
-  }
-}))

package/src/table/header-column.jsx

@@ -1,129 +0,0 @@
-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={this.barsIconStyle ||= {marginRight: 3, fontSize: 12}} {...touchProps} />
-        }
-        <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
-        {mdUp &&
-          <Animated.View
-            style={this.resizeColumnViewStyle ||= {
-              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
-  }
-}))