@kaspernj/api-maker 1.0.388 → 1.0.389

package/package.json

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

package/src/super-admin/config-reader.jsx

@@ -49,12 +49,12 @@ export default class ApiMakerSuperAdminConfigReader {
     const {modelConfig} = digs(this, "modelConfig")
 
     if (modelConfig?.table?.columns) {
-      return modelConfig.table.columns()
+      return {
+        columns: modelConfig.table.columns()
+      }
+    } else {
+      return this.defaultTableColumns()
     }
-
-    const {columns} = this.defaultTableColumns()
-
-    return columns
   }
 
   defaultTableColumns() {

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

@@ -3,6 +3,7 @@ import {memo} from "react"
 import ModelClassTable from "./model-class-table"
 import PropTypes from "prop-types"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends BaseComponent {
   static propTypes = {
@@ -13,9 +14,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends Bas
     const {modelClass} = this.props
 
     return (
-      <div className="super-admin--index-page">
+      <View dataSet={{component: "super-admin--index-page"}}>
         <ModelClassTable modelClass={modelClass} />
-      </div>
+      </View>
     )
   }
 }))

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

@@ -1,10 +1,12 @@
 import "./style"
 import BaseComponent from "../../../base-component"
-import EventListener from "../../../event-listener"
 import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text, View} from "react-native"
+import useBreakpoint from "../../../use-breakpoint"
+import useEventListener from "../../../use-event-listener"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -14,27 +16,93 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   })
 
   setup() {
+    const {breakpoint} = useBreakpoint()
+
     this.headerActionsRef = useRef()
+    this.setInstance({breakpoint})
     this.useStates({
       headerActionsActive: false
     })
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
   }
 
   render() {
+    const {breakpoint} = this.tt
     const {actions, onTriggerMenu, title} = this.props
 
+    const headerStyle = {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      zIndex: 9,
+      height: 100,
+      paddingRight: 30,
+      paddingLeft: 30,
+      backgroundColor: "#fff"
+    }
+
+    const headerActionsContainerStyle = {}
+    const headerActionsStyle = {}
+
+    if (breakpoint == "xs" || breakpoint == "sm") {
+      headerStyle.position = "absolute"
+      headerStyle.width = "100%"
+
+      Object.assign(headerActionsContainerStyle, {
+        position: "fixed",
+        top: 0,
+        left: 0,
+
+        display: "flex",
+        width: "100vw",
+        height: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+
+        background: "rgba(#000, .8)"
+      })
+
+      if (!this.s.headerActionsActive) {
+        headerActionsContainerStyle.display = "none"
+      }
+
+      Object.assign(headerActionsStyle, {
+        minWidth: "80vw",
+        maxWidth: "100vw",
+        backgroundColor: "#fff"
+      })
+    } else if (breakpoint == "md") {
+      headerStyle.position = "fixed"
+      headerStyle.left = 250
+      headerStyle.width = "calc(100% - 250px)"
+    } else if (breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
+      headerStyle.position = "fixed"
+      headerStyle.left = 290
+      headerStyle.width = "calc(100% - 290px)"
+    }
+
+    if (breakpoint == "md" || breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
+      headerActionsContainerStyle.marginLeft = "auto"
+    }
+
     return (
-      <div className="components--admin--layout--header">
-        <EventListener event="mouseup" onCalled={this.tt.onWindowMouseUp} target={window} />
-        <div className="header-title-container">
-          {title}
-        </div>
+      <View dataSet={{component: "super-admin--layout--header"}} style={headerStyle}>
+        <View dataSet={{class: "header-title-container"}}>
+          <Text style={{color: "#282a33", fontSize: 22}}>
+            {title}
+          </Text>
+        </View>
         {actions &&
-          <div className="header-actions-container" data-active={this.s.headerActionsActive}>
-            <div className="header-actions" ref={this.tt.headerActionsRef}>
+          <View dataSet={{active: this.s.headerActionsActive, class: "header-actions-container"}} style={headerActionsContainerStyle}>
+            <View
+              dataSet={{class: "header-actions"}}
+              ref={this.tt.headerActionsRef}
+              style={headerActionsStyle}
+            >
               {actions}
-            </div>
-          </div>
+            </View>
+          </View>
         }
         <div className="burger-menu-container">
           {actions &&
@@ -46,7 +114,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
             <i className="fa fa-bars" />
           </a>
         </div>
-      </div>
+      </View>
     )
   }
 

package/src/super-admin/layout/header/style.scss

@@ -1,42 +1,8 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout--header {
-  top: 0;
-  display: flex;
-  height: 100px;
-  align-items: center;
-  padding-right: 30px;
-  padding-left: 30px;
-  background: #fff;
-  color: #282a33;
-
+[data-component="super-admin--layout--header"] {
   @media (max-width: $sm-to) {
-    position: absolute;
-    width: 100%;
-
-    .header-actions-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-
-      display: flex;
-      width: 100vw;
-      height: 100vh;
-      align-items: center;
-      justify-content: center;
-
-      background: rgba(#000, .8);
-
-      &[data-active="false"] {
-        display: none;
-      }
-    }
-
-    .header-actions {
-      min-width: 80vw;
-      max-width: 100vw;
-      background: #fff;
-
+    [data-class="header-actions"] {
       .action-button {
         display: block;
         padding: 11px;
@@ -63,15 +29,7 @@
   }
 
   @media (min-width: $md-from) {
-    position: fixed;
-    left: 250px;
-    width: calc(100% - 250px);
-
-    .header-actions-container {
-      margin-left: auto;
-    }
-
-    .header-actions {
+    [data-class="header-actions"] {
       .action-button {
         display: inline-block;
         padding: 7px 10px;
@@ -89,11 +47,6 @@
     }
   }
 
-  @media (min-width: $lg-from) {
-    left: 290px;
-    width: calc(100% - 290px);
-  }
-
   .burger-menu-container {
     @media (max-width: $sm-to) {
       margin-left: auto;
@@ -117,8 +70,4 @@
       color: #1b1c1e;
     }
   }
-
-  .header-title-container {
-    font-size: 22px;
-  }
 }

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

@@ -7,10 +7,11 @@ import Header from "./header"
 import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useCallback, useMemo} from "react"
+import {memo, useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../use-current-user"
-import useShape from "set-state-compare/src/use-shape.js"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
@@ -27,7 +28,21 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
     headerTitle: PropTypes.string
   })
 
+  setup() {
+    const currentUser = useCurrentUser()
+    const {locale, t} = useI18n({namespace: "js.api_maker.super_admin.layout"})
+
+    this.useStates({menuTriggered: false})
+    this.setInstance({currentUser, t})
+
+    useMemo(() => {
+      CommandsPool.current().globalRequestData.layout = "admin"
+      CommandsPool.current().globalRequestData.locale = locale
+    }, [I18n.locale])
+  }
+
   render() {
+    const {currentUser, t} = this.tt
     const {
       actions,
       active,
@@ -39,14 +54,6 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
       menu,
       ...restProps
     } = this.props
-    const s = useShape()
-    const currentUser = useCurrentUser()
-
-    useMemo(() => {
-      CommandsPool.current().globalRequestData.layout = "admin"
-      CommandsPool.current().globalRequestData.locale = I18n.locale
-    }, [I18n.locale])
-
     const headTitle = headTitle || headerTitle
 
     if (headTitle) {
@@ -55,38 +62,32 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
       document.title = "Wooftech"
     }
 
-    const setMenuTriggered = s.useState("menuTriggered", false)
     const noAccess = !currentUser
-    const onRequestMenuClose = useCallback(() => setMenuTriggered(false), [])
-    const onTriggerMenu = useCallback((e) => {
-      e.preventDefault()
-      setMenuTriggered(!s.state.menuTriggered)
-    }, [])
 
     return (
-      <div className={classNames("components--admin--layout", className)} data-menu-triggered={s.state.menuTriggered} {...restProps}>
+      <View dataSet={{component: "super-admin--layout", class: className, menuTriggered: this.s.menuTriggered}} {...restProps}>
         <Menu
           active={active}
           noAccess={noAccess}
-          onRequestMenuClose={onRequestMenuClose}
-          triggered={s.state.menuTriggered}
+          onRequestMenuClose={this.tt.onRequestMenuClose}
+          triggered={this.s.menuTriggered}
         />
-        <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
-        <div className="app-layout-content-container">
+        <Header actions={actions} onTriggerMenu={this.tt.onTriggerMenu} title={headerTitle} />
+        <View dataSet={{class: "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."})}
+                    {t(".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."})}
+                    {t(".try_signing_in", {defaultValue: "Try signing in."})}
                   </div>
                   {config.signInContent()}
                 </>
@@ -94,8 +95,14 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
             </>
           }
           {!noAccess && children}
-        </div>
-      </div>
+        </View>
+      </View>
     )
   }
+
+  onRequestMenuClose = () => this.setState({menuTriggered: false})
+  onTriggerMenu = (e) => {
+    e.preventDefault()
+    setMenuTriggered(!this.s.menuTriggered)
+  }
 }))

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

@@ -8,6 +8,8 @@ import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../../use-current-user"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -17,13 +19,19 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
     triggered: PropTypes.bool.isRequired
   })
 
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
+    const currentUser = useCurrentUser()
+
+    this.setInstance({currentUser, t})
+  }
+
   render() {
+    const {currentUser, t} = this.tt
     const {active, noAccess, triggered} = this.props
-    const currentUser = useCurrentUser()
-    const rootRef = useRef()
 
     return (
-      <div className="components--admin--layout--menu" data-triggered={triggered} ref={rootRef}>
+      <View dataSet={{component: "super-admin--layout--menu", triggered}}>
         <div className="menu-logo">
           <Link className="menu-logo-link" to={Params.withParams({})}>
             Admin
@@ -52,12 +60,12 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
               active
               className="sign-out-menu-item"
               icon="sign-out-alt"
-              label={I18n.t("js.api_maker.super_admin.layout.menu.sign_out", {defaultValue: "Sign out"})}
+              label={t(".sign_out", {defaultValue: "Sign out"})}
               onClick={this.tt.onSignOutClicked}
             />
           }
         </div>
-      </div>
+      </View>
     )
   }
 
@@ -66,7 +74,7 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
 
     try {
       await Devise.signOut()
-      FlashMessage.success(I18n.t("js.api_maker.super_admin.layout.menu.you_have_been_signed_out", {defaultValue: "You have been signed out"}))
+      FlashMessage.success(this.t(".you_have_been_signed_out", {defaultValue: "You have been signed out"}))
     } catch (error) {
       FlashMessage.errorResponse(error)
     }

package/src/super-admin/layout/menu/style.scss

@@ -1,6 +1,6 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout--menu {
+[data-component="super-admin--layout--menu"] {
   position: fixed;
   z-index: 9;
   overflow-y: auto;

package/src/super-admin/layout/no-access.jsx

@@ -2,18 +2,23 @@ import BaseComponent from "../../base-component"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../use-current-user"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutNoAccess extends BaseComponent {
   render() {
     const currentUser = useCurrentUser()
+    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.no_access"})
 
     return (
-      <div
-        className="components--admin--layout-no-access"
-        data-user-roles={currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")}
+      <View
+        dataSet={{
+          component: "super-admin--layout--no-access",
+          userRoles: currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")
+        }}
       >
-        {I18n.t("js.api_maker.super_admin.layout.no_access.you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}
-      </div>
+        {t(".you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}
+      </View>
     )
   }
 }))

package/src/super-admin/layout/style.scss

@@ -1,12 +1,12 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout {
+[data-component="super-admin--layout"] {
   width: 100%;
   min-height: 100vh;
   background: #fff;
   color: #000;
 
-  .app-layout-content-container {
+  [data-class="app-layout-content-container"] {
     min-height: 100vh;
     background: #f7f7f7;
 

package/src/super-admin/model-class-table.jsx

@@ -23,6 +23,8 @@ export default memo(shapeComponent(class ApiMakerSuperAdminModelClassTable exten
     const tableConfig = configReader.modelConfig?.table
     const tableProps = {}
 
+    if (!columns) throw new Error("No columns given")
+
     if (tableConfig?.query) tableProps.collection = tableConfig.query
 
     return (

package/src/super-admin/show-nav.jsx

@@ -5,7 +5,9 @@ import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowReflectionLink from "./show-reflection-link"
+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 ApiMakerSuperAdminShowNav extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -14,23 +16,24 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseC
   })
 
   render() {
+    const {t} = useI18n({namespace: "js.api_maker.suprt_admin.show_reflection_page"})
     const {model, modelClass} = this.props
     const queryParams = useQueryParams()
     const reflections = modelClass.reflections()
 
     return (
-      <div>
-        <div>
+      <View dataSet={{component: "super-admin--show-nav"}}>
+        <View>
           <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id})}>
-            {I18n.t("js.api_maker.suprt_admin.show_reflection_page.general", {defaultValue: "General"})}
+            {t(".general", {defaultValue: "General"})}
           </Link>
-        </div>
+        </View>
         {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
-          <div key={reflection.name()}>
+          <View key={reflection.name()}>
             <ShowReflectionLink model={model} modelClass={modelClass} reflection={reflection} />
-          </div>
+          </View>
         )}
-      </div>
+      </View>
     )
   }
 }))

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

@@ -9,6 +9,7 @@ import {memo, useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowNav from "../show-nav"
 import useModel from "../../use-model"
+import {View} from "react-native"
 
 const AttributePresenter = memo(({attribute, model, modelArgs}) => {
   const attributeRowProps = {
@@ -63,7 +64,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
 
     // Select all attributes selected by default because they will be shown by default
     for (const attribute of modelClass.attributes()) {
-      if (attribute.isSelectedByDefault() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
+      if ((attribute.isSelectedByDefault() || attribute.name() == "name") && !modelClassSelect.includes(attribute.name())) {
+        modelClassSelect.push(attribute.name())
+      }
     }
 
     for (const reflection of modelClass.reflections()) {
@@ -112,7 +115,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
     modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
 
     return (
-      <div className="super-admin--show-page">
+      <View dataSet={{component: "super-admin--show-page"}}>
         {model &&
           <ShowNav model={model} modelClass={modelClass} />
         }
@@ -123,7 +126,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
           <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
         )}
         {model && extraContent && extraContent(modelArgs)}
-      </div>
+      </View>
     )
   }
 }))

package/src/super-admin/show-reflection-page.jsx

@@ -7,10 +7,12 @@ import ModelClassTable from "./model-class-table"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowNav from "./show-nav"
 import useQueryParams from "on-location-changed/src/use-query-params"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage extends BaseComponent {
   static propTypes = propTypesExact({
-    modelClass: PropTypes.func.isRequired
+    modelClass: PropTypes.func.isRequired,
+    modelId: PropTypes.string.isRequired
   })
 
   render() {
@@ -27,7 +29,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage ex
     if (model) collection = model[reflection.name()]()
 
     return (
-      <div className="super-admin--show-page">
+      <View dataSet={{component: "super-admin--show-page"}}>
         {model &&
           <ShowNav model={model} modelClass={modelClass} />
         }
@@ -38,7 +40,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage ex
             modelClass={reflectionModelClass}
           />
         }
-      </div>
+      </View>
     )
   }
 }))

package/src/table/table.jsx

@@ -21,7 +21,7 @@ import Settings from "./settings"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
-import useBreakpoint from "./use-breakpoint"
+import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
 
@@ -175,7 +175,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   updateSettingsFullCacheKey = () => this.setState({tableSettingFullCacheKey: this.state.tableSetting.fullCacheKey()})
 
   columnsAsArray = () => {
-    if (typeof this.props.columns == "function") return this.props.columns()
+    if (typeof this.props.columns == "function") {
+      return this.props.columns()
+    }
 
     return this.props.columns
   }

package/src/table/with-breakpoint.jsx

@@ -1,9 +0,0 @@
-import useBreakpoint from "./use-breakpoint"
-
-export default (WrappedComponent) => (props) => {
-  const {breakpoint} = useBreakpoint()
-
-  return (
-    <WrappedComponent breakPoint={breakpoint} {...props} />
-  )
-}