@kaspernj/api-maker 1.0.304 → 1.0.306

package/package.json

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

package/src/inputs/input-wrapper.jsx

@@ -121,7 +121,7 @@ const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => {
         return this.formatValue(this.props.defaultValue)
       } else if (this.props.model) {
         if (!this.props.model[this.props.attribute]) {
-          throw new Error(`No such attribute: ${digg(this.props.model.modelClassData(), "name")}#${this.props.attribute}`)
+          throw new Error(`No such attribute defined on resource: ${digg(this.props.model.modelClassData(), "name")}#${this.props.attribute}`)
         }
 
         return this.formatValue(this.props.model[this.props.attribute]())

package/src/super-admin/edit-page.jsx

@@ -0,0 +1,100 @@
+import ConfigReader from "./config-reader"
+import {digg} from "diggerize"
+import * as inflection from "inflection"
+import Input from "../bootstrap/input"
+import Locales from "shared/locales"
+import {useCallback, memo} from "react"
+import useCurrentUser from "../use-current-user"
+import useModel from "../use-model"
+import useQueryParams from "on-location-changed/src/use-query-params"
+
+const EditPage = ({modelClass}) => {
+  const availableLocales = Locales.availableLocales()
+  const currentUser = useCurrentUser()
+  const queryParams = useQueryParams()
+  const configReader = ConfigReader.forModel(modelClass)
+  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+  const modelClassName = modelClass.modelClassData().name
+  const modelIdVarName = `${inflection.camelize(modelClass.modelClassData().name, true)}Id`
+  const modelVarName = inflection.camelize(modelClass.modelClassData().name, true)
+  const extraContent = configReader.modelConfig?.edit?.extraContentconst
+  const attributes = configReader.modelConfig?.edit?.attributes
+  const selectedModelAttributes = ["id"]
+  const selectedAttributes = {}
+
+  selectedAttributes[modelClassName] = selectedModelAttributes
+
+  for (const attribute of attributes) {
+    if (attribute.translated) {
+      for (const locale of availableLocales) {
+        selectedModelAttributes.push(`${attribute.attribute}${inflection.camelize(locale)}`)
+      }
+    } else {
+      selectedModelAttributes.push(attribute.attribute)
+    }
+  }
+
+  const useModelResult = useModel(modelClass, {
+    cacheArgs: [currentUser?.id()],
+    loadByQueryParam: (props) => props.queryParams.model_id,
+    newIfNoId: true,
+    select: selectedAttributes
+  })
+
+  const model = digg(useModelResult, modelVarName)
+  const modelId = queryParams.model_id
+  const modelArgs = {}
+
+  modelArgs[modelIdVarName] = modelId
+
+  const onSubmit = useCallback(async (e) => {
+    e.preventDefault()
+
+    const form = digg(e, "target")
+    const formData = new FormData(form)
+
+    try {
+      await model.saveRaw(formData)
+      Params.changeParams({mode: undefined, model_id: model.id()})
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }, [model])
+
+  return (
+    <div className="super-admin--edit-page">
+      <form onSubmit={onSubmit}>
+        {model && attributes?.map((attribute) =>
+          <div key={attribute.attribute}>
+            {attribute.translated && availableLocales.map((locale) =>
+              <div key={locale}>
+                <Input
+                  attribute={`${attribute.attribute}${inflection.camelize(locale)}`}
+                  id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}_${locale}`}
+                  label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
+                  model={model}
+                  name={`${camelizedLower}[${inflection.underscore(attribute.attribute)}_${locale}]`}
+                />
+              </div>
+            )}
+            {!attribute.translated &&
+              <Input
+                attribute={attribute.attribute}
+                id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+                label={modelClass.humanAttributeName(attribute.attribute)}
+                model={model}
+                name={`${camelizedLower}[${inflection.underscore(attribute.attribute)}]`}
+              />
+            }
+          </div>
+        )}
+        {extraContent && extraContent(modelArgs)}
+        <button style={{marginTop: "10px"}} type="submit">
+          Submit
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default memo(EditPage)

package/src/super-admin/index-page.jsx

@@ -1,24 +1,17 @@
-import {digs} from "diggerize"
 import ModelClassTable from "./model-class-table"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
 
-export default class ApiMakerSuperAdminIndexPage extends React.PureComponent {
-  static propTypes = {
-    currentUser: PropTypes.object,
-    modelClass: PropTypes.func.isRequired,
-    queryParams: PropTypes.object.isRequired
-  }
-
-  render() {
-    const {currentUser, modelClass, queryParams} = digs(this.props, "currentUser", "modelClass", "queryParams")
+const ApiMakerSuperAdminIndexPage = ({modelClass}) => {
+  return (
+    <ModelClassTable
+      modelClass={modelClass}
+    />
+  )
+}
 
-    return (
-      <ModelClassTable
-        currentUser={currentUser}
-        modelClass={modelClass}
-        queryParams={queryParams}
-      />
-    )
-  }
+ApiMakerSuperAdminIndexPage.propTypes = {
+  modelClass: PropTypes.func.isRequired
 }
+
+export default memo(ApiMakerSuperAdminIndexPage)

package/src/super-admin/index.jsx

@@ -1,70 +1,80 @@
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
+import EditPage from "./edit-page"
 import IndexPage from "./index-page"
 import Layout from "./layout"
+import Link from "../link"
+import {memo, useMemo} from "react"
 import * as modelsModule from "@kaspernj/api-maker/src/models.mjs.erb"
-import PropTypes from "prop-types"
 import ShowPage from "./show-page"
 import ShowReflectionPage from "./show-reflection-page"
-import withQueryParams from "on-location-changed/src/with-query-params"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
-class ApiMakerSuperAdmin extends React.PureComponent {
-  static propTypes = {
-    currentUser: PropTypes.object,
-    queryParams: PropTypes.object.isRequired
-  }
-
-  render() {
-    const {currentUser} = this.props
-    const {queryParams} = digs(this.props, "queryParams")
-    const pageToShow = this.pageToShow()
-    let modelClass
+const ApiMakerSuperAdmin = () => {
+  const queryParams = useQueryParams()
+  let modelClass, pageToShow
 
-    if (queryParams.model) modelClass = modelsModule[queryParams.model]
+  if (queryParams.model) modelClass = modelsModule[queryParams.model]
 
-    return (
-      <Layout active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
-        {pageToShow == "index" &&
-          <IndexPage
-            currentUser={currentUser}
-            key={`index-page-${digg(modelClass.modelClassData(), "name")}`}
-            modelClass={modelClass}
-            queryParams={queryParams}
-          />
-        }
-        {pageToShow == "show" &&
-          <ShowPage
-            key={`show-page-${digg(modelClass.modelClassData(), "name")}-${queryParams.modelId}`}
-            modelClass={modelClass}
-            modelId={queryParams.modelId}
-            queryParams={queryParams}
-          />
-        }
-        {pageToShow == "show_reflection" &&
-          <ShowReflectionPage
-            currentUser={currentUser}
-            key={`show-reflection-page-${digg(modelClass.modelClassData(), "name")}-${queryParams.modelId}`}
-            modelClass={modelClass}
-            modelId={queryParams.modelId}
-            queryParams={queryParams}
-          />
-        }
-      </Layout>
-    )
+  if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
+    pageToShow = "show_reflection"
+  } else if (queryParams.model && queryParams.model_id && queryParams.mode == "edit") {
+    pageToShow = "edit"
+  } else if (queryParams.model && queryParams.model_id) {
+    pageToShow = "show"
+  } else if (queryParams.model && queryParams.mode == "new") {
+    pageToShow = "edit"
+  } else if (queryParams.model) {
+    pageToShow = "index"
+  } else {
+    pageToShow = "welcome"
   }
 
-  pageToShow() {
-    const {queryParams} = digs(this.props, "queryParams")
+  const actions = useMemo(
+    () => <>
+      {modelClass && pageToShow == "index" &&
+        <Link className="create-new-model-link" to={Params.withParams({model: modelClass.modelClassData().name, mode: "new"})}>
+          Create new
+        </Link>
+      }
+      {modelClass && pageToShow == "show" &&
+        <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id, mode: "edit"})}>
+          Edit
+        </Link>
+      }
+    </>,
+    [modelClass, pageToShow]
+  )
 
-    if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
-      return "show_reflection"
-    } else if (queryParams.model && queryParams.model_id) {
-      return "show"
-    } else if (queryParams.model) {
-      return "index"
-    }
-
-    return "welcome"
-  }
+  return (
+    <Layout actions={actions} active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
+      {pageToShow == "index" &&
+        <IndexPage
+          key={`index-page-${digg(modelClass.modelClassData(), "name")}`}
+          modelClass={modelClass}
+        />
+      }
+      {pageToShow == "show" &&
+        <ShowPage
+          key={`show-page-${digg(modelClass.modelClassData(), "name")}-${queryParams.modelId}`}
+          modelClass={modelClass}
+          modelId={queryParams.modelId}
+        />
+      }
+      {pageToShow == "show_reflection" &&
+        <ShowReflectionPage
+          key={`show-reflection-page-${digg(modelClass.modelClassData(), "name")}-${queryParams.modelId}`}
+          modelClass={modelClass}
+          modelId={queryParams.modelId}
+        />
+      }
+      {pageToShow == "edit" &&
+        <EditPage
+          key={`edit-page-${digg(modelClass.modelClassData(), "name")}-${queryParams.modelId}`}
+          modelClass={modelClass}
+        />
+      }
+    </Layout>
+  )
 }
 
-export default withQueryParams(ApiMakerSuperAdmin)
+export default memo(ApiMakerSuperAdmin)

package/src/super-admin/layout/header/index.jsx

@@ -1,65 +1,53 @@
 import "./style"
-import {digg, digs} from "diggerize"
 import EventListener from "../../../event-listener"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
+import {memo, useCallback, useRef, useState} from "react"
 
-export default class ApiMakerSuperAdminLayoutHeader extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    actions: PropTypes.node,
-    onTriggerMenu: PropTypes.func.isRequired,
-    title: PropTypes.string
-  })
-
-  headerActionsRef = React.createRef()
-  state = {headerActionsActive: false}
+const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
+  const headerActionsRef = useRef()
+  const [headerActionsActive, setHeaderActionsActive] = useState(false)
+  const onGearsClicked = useCallback((e) => {
+    e.preventDefault()
+    setHeaderActionsActive(!headerActionsActive)
+  }, [headerActionsActive])
 
-  render() {
-    const {headerActionsRef} = digs(this, "headerActionsRef")
-    const {onGearsClicked} = digs(this, "onGearsClicked")
-    const {actions, onTriggerMenu, title} = this.props
-    const {headerActionsActive} = digs(this.state, "headerActionsActive")
+  const onWindowMouseUp = useCallback((e) => {
+    // Close the header actions menu if clicked happened outside
+    if (headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) setHeaderActionsActive(false)
+  }, [headerActionsActive, headerActionsRef])
 
-    return (
-      <div className="components--admin--layout--header">
-        <EventListener event="mouseup" onCalled={digg(this, "onWindowMouseUp")} target={window} />
-        <div className="header-title-container">
-          {title}
+  return (
+    <div className="components--admin--layout--header">
+      <EventListener event="mouseup" onCalled={onWindowMouseUp} target={window} />
+      <div className="header-title-container">
+        {title}
+      </div>
+      {actions &&
+        <div className="header-actions-container" data-active={headerActionsActive}>
+          <div className="header-actions" ref={headerActionsRef}>
+            {actions}
+          </div>
         </div>
+      }
+      <div className="burger-menu-container">
         {actions &&
-          <div className="header-actions-container" data-active={headerActionsActive}>
-            <div className="header-actions" ref={headerActionsRef}>
-              {actions}
-            </div>
-          </div>
-        }
-        <div className="burger-menu-container">
-          {actions &&
-            <a className="actions-link" href="#" onClick={onGearsClicked}>
-              <i className="fa fa-gear" />
-            </a>
-          }
-          <a className="burger-menu-link" href="#" onClick={onTriggerMenu}>
-            <i className="fa fa-bars" />
+          <a className="actions-link" href="#" onClick={onGearsClicked}>
+            <i className="fa fa-gear" />
           </a>
-        </div>
+        }
+        <a className="burger-menu-link" href="#" onClick={onTriggerMenu}>
+          <i className="fa fa-bars" />
+        </a>
       </div>
-    )
-  }
-
-  onGearsClicked = (e) => {
-    e.preventDefault()
-    this.setState({
-      headerActionsActive: !this.state.headerActionsActive
-    })
-  }
+    </div>
+  )
+}
 
-  onWindowMouseUp = (e) => {
-    const {headerActionsRef} = digs(this, "headerActionsRef")
-    const {headerActionsActive} = digs(this.state, "headerActionsActive")
+ApiMakerSuperAdminLayoutHeader.propTypes = PropTypesExact({
+  actions: PropTypes.node,
+  onTriggerMenu: PropTypes.func.isRequired,
+  title: PropTypes.string
+})
 
-    // Close the header actions menu if clicked happened outside
-    if (headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) this.state.set({headerActionsActive: false})
-  }
-}
+export default memo(ApiMakerSuperAdminLayoutHeader)

package/src/super-admin/layout/index.jsx

@@ -1,120 +1,95 @@
 import "./style"
 import classNames from "classnames"
 import CommandsPool from "../../commands-pool"
-import {digg, digs} from "diggerize"
 import Header from "./header"
-import Link from "../../link"
 import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import withCurrentUser from "../../with-current-user"
+import {memo, useCallback, useEffect, useState} from "react"
+import useCurrentUser from "../../use-current-user"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
-class ApiMakerSuperAdminLayout extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    actions: PropTypes.node,
-    active: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    currentCustomer: PropTypes.instanceOf(User),
-    currentCustomerId: PropTypes.string,
-    currentUser: PropTypes.instanceOf(User),
-    headTitle: PropTypes.string,
-    headerTitle: PropTypes.string
-  })
-
-  componentDidMount() {
+const ApiMakerSuperAdminLayout = ({
+  actions,
+  active,
+  children,
+  className,
+  currentCustomer,
+  currentCustomerId,
+  headerTitle,
+  menu,
+  ...restProps
+}) => {
+  const currentUser = useCurrentUser()
+
+  useEffect(() => {
     CommandsPool.current().globalRequestData.layout = "admin"
     CommandsPool.current().globalRequestData.locale = I18n.locale
+  }, [])
 
-    this.setDocumentTitle()
-  }
-
-  componentDidUpdate() {
-    this.setDocumentTitle()
-  }
-
-  setDocumentTitle() {
-    const headTitle = this.props.headTitle || this.props.headerTitle
-
-    if (headTitle) {
-      document.title = headTitle
-    } else {
-      document.title = "Wooftech"
-    }
-  }
-
-  state = {
-    menuTriggered: false
-  }
-
-  render() {
-    const {
-      actions,
-      active,
-      children,
-      className,
-      currentCustomer,
-      currentCustomerId,
-      currentUser,
-      headerTitle,
-      menu,
-      ...restProps
-    } = this.props
-    const {menuTriggered} = digs(this.state, "menuTriggered")
-    const noAccess = this.noAccess()
+  const headTitle = headTitle || headerTitle
 
-    return (
-      <div className={classNames("components--admin--layout", className)} data-menu-triggered={menuTriggered} {...restProps}>
-        <Menu
-          active={active}
-          noAccess={noAccess}
-          onRequestMenuClose={digg(this, "onRequestMenuClose")}
-          triggered={menuTriggered}
-        />
-        <Header actions={actions} onTriggerMenu={digg(this, "onTriggerMenu")} title={headerTitle} />
-        <div className="app-layout-content-container">
-          {noAccess &&
-            <>
-              <NoAccess />
-              {currentUser &&
-                <>
-                  <div className="mb-4">
-                    {I18n.t("js.api_maker.super_admin.layout.try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
-                  </div>
-                </>
-              }
-              {!currentUser &&
-                <>
-                  <div className="mb-4">
-                    {I18n.t("js.api_maker.super_admin.layout.try_signing_in", {defaultValue: "Try signing in."})}
-                  </div>
-                </>
-              }
-            </>
-          }
-          {!noAccess && children}
-        </div>
-      </div>
-    )
+  if (headTitle) {
+    document.title = headTitle
+  } else {
+    document.title = "Wooftech"
   }
 
-  onRequestMenuClose = () => this.setState({menuTriggered: false})
-
-  onTriggerMenu = (e) => {
+  const [menuTriggered, setMenuTriggered] = useState(false)
+  const noAccess = !currentUser
+  const onRequestMenuClose = useCallback(() => setMenuTriggered(false), [])
+  const onTriggerMenu = useCallback((e) => {
     e.preventDefault()
 
-    this.setState({menuTriggered: !this.state.menuTriggered})
-  }
-
-  noAccess() {
-    const {currentUser} = digs(this.props, "currentUser")
-
-    if (!currentUser) return true
-
-    return false
-  }
+    setMenuTriggered(!menuTriggered)
+  }, [menuTriggered])
+
+  return (
+    <div className={classNames("components--admin--layout", className)} data-menu-triggered={menuTriggered} {...restProps}>
+      <Menu
+        active={active}
+        noAccess={noAccess}
+        onRequestMenuClose={onRequestMenuClose}
+        triggered={menuTriggered}
+      />
+      <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
+      <div className="app-layout-content-container">
+        {noAccess &&
+          <>
+            <NoAccess />
+            {currentUser &&
+              <>
+                <div className="mb-4">
+                  {I18n.t("js.api_maker.super_admin.layout.try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
+                </div>
+              </>
+            }
+            {!currentUser &&
+              <>
+                <div className="mb-4">
+                  {I18n.t("js.api_maker.super_admin.layout.try_signing_in", {defaultValue: "Try signing in."})}
+                </div>
+              </>
+            }
+          </>
+        }
+        {!noAccess && children}
+      </div>
+    </div>
+  )
 }
 
-export default withCurrentUser(ApiMakerSuperAdminLayout)
+ApiMakerSuperAdminLayout.propTypes = PropTypesExact({
+  actions: PropTypes.node,
+  active: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  currentCustomer: PropTypes.instanceOf(User),
+  currentCustomerId: PropTypes.string,
+  currentUser: PropTypes.instanceOf(User),
+  headTitle: PropTypes.string,
+  headerTitle: PropTypes.string
+})
+
+export default memo(ApiMakerSuperAdminLayout)