@kaspernj/api-maker 1.0.461 → 1.0.463

package/src/link.jsx

@@ -5,12 +5,17 @@ import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useApiMaker} from "@kaspernj/api-maker/build/with-api-maker"
 
 export default memo(shapeComponent(class ApiMakerLink extends BaseComponent {
   static propTypes = {
     usePressable: PropTypes.bool
   }
 
+  setup() {
+    this.apiMaker = useApiMaker()
+  }
+
   render() {
     const {dataSet, to, onClick, onPress, usePressable, ...restProps} = this.props
 
@@ -58,7 +63,7 @@ export default memo(shapeComponent(class ApiMakerLink extends BaseComponent {
   }
 
   redirect = () => {
-    const history = globalThis.apiMakerConfigGlobal?.history
+    const history = this.apiMaker.config.getHistory()
 
     if (!history) throw new Error("History hasn't been set in the API maker configuration")
 

package/src/router.jsx

@@ -4,7 +4,7 @@ import propTypesExact from "prop-types-exact"
 import React, {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import {Suspense} from "react"
-import usePath from "on-location-changed/src/use-path"
+import usePath from "on-location-changed/build/use-path"
 import useRouter from "./use-router"
 
 export default memo(shapeComponent(class ApiMakerRouter extends BaseComponent {

package/src/session-status-updater.js

@@ -21,9 +21,19 @@ export default class ApiMakerSessionStatusUpdater {
   constructor(args = {}) {
     this.events = {}
     this.timeout = args.timeout || 600000
-    this.useMetaElement = ("useMetaElement" in args) ? args.useMetaElement : true
 
-    this.connectOnlineEvent()
+    if ("useMetaElement" in args) {
+      this.useMetaElement = args.useMetaElement
+    } else if (typeof document != "undefined") {
+      this.useMetaElement = true
+    } else {
+      this.useMetaElement = false
+    }
+
+    if (typeof window != "undefined") {
+      this.connectOnlineEvent()
+    }
+
     this.connectWakeEvent()
   }
 

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

@@ -16,7 +16,7 @@ import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../utils/text"
 import useCurrentUser from "../use-current-user"
 import useModel from "../use-model"
-import useQueryParams from "on-location-changed/src/use-query-params"
+import useQueryParams from "on-location-changed/build/use-query-params"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends BaseComponent {
   static propTypes = propTypesExact({

package/src/super-admin/index.jsx

@@ -17,7 +17,7 @@ import ShowReflectionPage from "./show-reflection-page"
 import Text from "../utils/text"
 import useCanCan from "../use-can-can"
 import useCurrentUser from "../use-current-user"
-import useQueryParams from "on-location-changed/src/use-query-params"
+import useQueryParams from "on-location-changed/build/use-query-params"
 
 export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponent {
   setup() {

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

@@ -1,11 +1,10 @@
 // import "../../../../src/super-admin/layout/header/style"
+import React, {useRef} from "react"
 import BaseComponent from "../../../base-component"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import Icon from "../../../utils/icon"
 import memo from "set-state-compare/src/memo"
-import {useRef} from "react"
 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 Text from "../../../utils/text"
 import {Pressable, View} from "react-native"
@@ -20,10 +19,10 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   })
 
   setup() {
-    const {name: breakpoint} = useBreakpoint()
+    const {name: breakpoint, mdUp} = useBreakpoint()
 
     this.headerActionsRef = useRef()
-    this.setInstance({breakpoint})
+    this.setInstance({breakpoint, mdUp})
     this.useStates({
       headerActionsActive: false
     })
@@ -32,7 +31,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   }
 
   render() {
-    const {breakpoint} = this.tt
+    const {breakpoint, mdUp} = this.tt
     const {actions, onTriggerMenu, title} = this.props
 
     const headerStyle = {
@@ -108,21 +107,33 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
             </View>
           </View>
         }
-        <View dataSet={{class: "burger-menu-container"}}>
-          {actions &&
-            <Pressable dataSet={{class: "actions-link"}} onPress={this.tt.onGearsClicked} style={{marginRight: 8, fontSize: 22}}>
-              <FontAwesomeIcon name="gear" size={20} />
+        {!mdUp &&
+          <View
+            dataSet={{class: "burger-menu-container"}}
+            style={{
+              flexDirection: "row",
+              marginLeft: "auto"
+            }}
+          >
+            {actions &&
+              <Pressable dataSet={{class: "actions-link"}} onPress={this.tt.onGearsClicked} style={{marginRight: 8, fontSize: 22}}>
+                <Icon name="gear" size={20} />
+              </Pressable>
+            }
+            <Pressable dataSet={{class: "burger-menu-link"}} onPress={onTriggerMenu}>
+              <Icon name="bars" size={20} />
             </Pressable>
-          }
-          <Pressable dataSet={{class: "burger-menu-link"}} onPress={onTriggerMenu}>
-            <FontAwesomeIcon icon="bars" size={20} />
-          </Pressable>
-        </View>
+          </View>
+        }
       </View>
     )
   }
 
-  onGearsClicked = () => this.setState({headerActionsActive: !this.s.headerActionsActive})
+  onGearsClicked = () => {
+    console.log("onGearsClicked")
+
+    this.setState({headerActionsActive: !this.s.headerActionsActive})
+  }
 
   onWindowMouseUp = (e) => {
     // Close the header actions menu if clicked happened outside

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

@@ -42,15 +42,4 @@
       }
     }
   }
-
-  [data-class="burger-menu-container"] {
-    @media (max-width: $sm-to) {
-      margin-left: auto;
-      font-size: 28px;
-    }
-
-    @media (min-width: $md-from) {
-      display: none;
-    }
-  }
 }

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

@@ -1,5 +1,5 @@
-// import "../../../src/super-admin/layout/style"
 import React, {useMemo} from "react"
+import {StyleSheet, View} from "react-native"
 import BaseComponent from "../../base-component"
 import CommandsPool from "../../commands-pool"
 import config from "super-admin/config"
@@ -9,12 +9,48 @@ import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+import useBreakpoint from "../../use-breakpoint"
 import useCurrentUser from "../../use-current-user"
 import useI18n from "i18n-on-steroids/src/use-i18n"
-import {View} from "react-native"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
+const styles = StyleSheet.create({
+  appLayoutContentContainer: {
+    base: {
+      minHeight: "100vh",
+      backgroundColor: "#f7f7f7"
+    },
+    mdDown: {
+      paddingTop: 130,
+      paddingRight: 30,
+      paddingBottom: 30
+    },
+    mdUp: {
+      paddingTop: 130,
+      paddingRight: 30,
+      paddingBottom: 30,
+      paddingLeft: 280
+    },
+    lgUp: {
+      paddingTop: 130,
+      paddingRight: 30,
+      paddingBottom: 30,
+      paddingLeft: 320
+    }
+  },
+  mb15: {
+    marginBottom: 15
+  },
+  rootView: {
+    width: "100%",
+    minHeight: "100vh",
+    backgroundColor: "#fff",
+    color: "#000"
+  }
+})
+
 export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseComponent {
   static propTypes = PropTypesExact({
     actions: PropTypes.node,
@@ -31,9 +67,10 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
   setup() {
     const currentUser = useCurrentUser()
     const {locale, t} = useI18n({namespace: "js.api_maker.super_admin.layout"})
+    const {lgUp, mdUp, mdDown} = useBreakpoint()
 
     this.useStates({menuTriggered: false})
-    this.setInstance({currentUser, t})
+    this.setInstance({currentUser, lgUp, mdUp, mdDown, t})
 
     useMemo(() => {
       CommandsPool.current().globalRequestData.layout = "admin"
@@ -42,7 +79,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
   }
 
   render() {
-    const {currentUser, t} = this.tt
+    const {currentUser, lgUp, mdUp, mdDown, t} = this.tt
     const {
       actions,
       active,
@@ -50,22 +87,31 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
       className,
       currentCustomer,
       currentCustomerId,
+      headTitle,
       headerTitle,
       menu,
       ...restProps
     } = this.props
-    const headTitle = headTitle || headerTitle
+    const actualHeadTitle = headTitle || headerTitle
 
-    if (headTitle) {
-      document.title = headTitle
+    if (actualHeadTitle) {
+      document.title = actualHeadTitle
     } else {
-      document.title = "Wooftech"
+      document.title = "Super Admin"
     }
 
     const noAccess = !currentUser
+    const appLayoutContentContainerStyles = [styles.appLayoutContentContainer.base]
+
+    if (mdDown) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.mdDown)
+    if (mdUp) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.mdUp)
+    if (lgUp) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.lgUp)
 
     return (
-      <View dataSet={{component: "super-admin--layout", class: className, menuTriggered: this.s.menuTriggered}} {...restProps}>
+      <View
+        dataSet={{component: "super-admin--layout", class: className, menuTriggered: this.s.menuTriggered}}
+        style={styles.rootView}
+        {...restProps}>
         <Menu
           active={active}
           noAccess={noAccess}
@@ -73,22 +119,22 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
           triggered={this.s.menuTriggered}
         />
         <Header actions={actions} onTriggerMenu={this.tt.onTriggerMenu} title={headerTitle} />
-        <View dataSet={{class: "app-layout-content-container"}}>
+        <View dataSet={{class: "app-layout-content-container"}} style={appLayoutContentContainerStyles}>
           {noAccess &&
             <>
               <NoAccess />
               {currentUser &&
                 <>
-                  <div className="mb-4">
+                  <Text style={styles.mb15}>
                     {t(".try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
-                  </div>
+                  </Text>
                 </>
               }
               {!currentUser &&
                 <>
-                  <div className="mb-4">
+                  <Text style={styles.mb15}>
                     {t(".try_signing_in", {defaultValue: "Try signing in."})}
-                  </div>
+                  </Text>
                   {config.signInContent()}
                 </>
               }
@@ -103,6 +149,6 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
   onRequestMenuClose = () => this.setState({menuTriggered: false})
   onTriggerMenu = (e) => {
     e.preventDefault()
-    setMenuTriggered(!this.s.menuTriggered)
+    this.setState({menuTriggered: !this.s.menuTriggered})
   }
 }))

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

@@ -1,5 +1,6 @@
-// import "../../../../src/super-admin/layout/menu/style"
+import {StyleSheet, View} from "react-native"
 import BaseComponent from "../../../base-component"
+import Icon from "../../../utils/icon"
 import memo from "set-state-compare/src/memo"
 import Link from "../../../link"
 import MenuContent from "./menu-content"
@@ -10,9 +11,46 @@ import PropTypesExact from "prop-types-exact"
 import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../../utils/text"
+import useBreakpoint from "../../../use-breakpoint"
 import useCurrentUser from "../../../use-current-user"
 import useI18n from "i18n-on-steroids/src/use-i18n"
-import {View} from "react-native"
+import {WithDefaultStyle} from "../../../utils/default-style"
+
+const styles = StyleSheet.create({
+  root: {
+    base: {
+      position: "fixed",
+      zIndex: 9,
+      overflowY: "auto",
+      overflowX: "hidden",
+      top: 0,
+      left: 0,
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: "#1b1c1e"
+    },
+    mdDown: {
+      width: "100%",
+      maxWidth: 250,
+      maxHeight: "100vh",
+      overflowY: "auto"
+    },
+    mdUp: {
+      width: 250
+    },
+    lgUp: {
+      width: 290
+    }
+  },
+  userName: {
+    flexShrink: 1,
+    marginLeft: 8
+  },
+  userNameContainer: {
+    overflow: "hidden",
+    maxWidth: 140
+  }
+})
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -23,53 +61,99 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
   })
 
   setup() {
+    const {lgUp, mdDown, mdUp} = useBreakpoint()
     const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
     const currentUser = useCurrentUser()
 
-    this.setInstance({currentUser, t})
+    this.setInstance({currentUser, lgUp, mdDown, mdUp, t})
   }
 
   render() {
-    const {currentUser, t} = this.tt
+    const {currentUser, lgUp, mdDown, mdUp, t} = this.tt
     const {active, noAccess, triggered} = this.props
 
+    const style = [styles.root.base]
+
+    if (mdDown) style.push(styles.root.mdDown)
+    if (mdUp) style.push(styles.root.mdUp)
+    if (lgUp) style.push(styles.root.lgUp)
+
+    if (mdDown && !triggered) {
+      return null
+    }
+
     return (
-      <View dataSet={{component: "super-admin--layout--menu", triggered}}>
-        <div className="menu-logo">
-          <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
-            <Text>
-              Admin
-            </Text>
-          </Link>
-        </div>
-        <div className="menu-items-center">
-          {!noAccess &&
-            <MenuContent active={active} />
-          }
-        </div>
-        <div className="menu-items-bottom">
-          {currentUser &&
-            <div className="menu-user-section">
-              <div className="menu-user-icon">
-                <i className="fa fa-user" />
-              </div>
-              <div className="menu-user-name">
-                <div className="menu-user-name-container">
-                  {currentUser.name()}
-                </div>
-              </div>
-            </div>
-          }
-          {currentUser &&
-            <MenuItem
-              active
-              className="sign-out-menu-item"
-              icon="sign-out-alt"
-              label={t(".sign_out", {defaultValue: "Sign out"})}
-              onClick={this.tt.onSignOutClicked}
-            />
-          }
-        </div>
+      <View dataSet={{component: "super-admin--layout--menu", triggered}} style={style}>
+        <WithDefaultStyle style={{Text: {color: "#fff"}}}>
+          <View
+            dataSet={{class: "menu-logo"}}
+            style={{
+              overflow: "hidden",
+              marginTop: 25,
+              marginRight: "auto",
+              marginLeft: "auto"
+            }}
+          >
+            <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
+              <Text
+                style={{
+                  fontSize: 42,
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }}
+              >
+                Admin
+              </Text>
+            </Link>
+          </View>
+          <View dataSet={{class: "menu-items-center"}} style={{marginTop: 25}}>
+            {!noAccess &&
+              <MenuContent active={active} />
+            }
+          </View>
+          <View dataSet={{class: "menu-items-bottom"}} style={{marginTop: "auto", marginBottom: 25}}>
+            {currentUser &&
+              <View
+                dataSet={{class: "menu-user-section"}}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  marginRight: 25,
+                  marginBottom: 25,
+                  marginLeft: 25
+                }}
+              >
+                <View
+                  dataSet={{class: "menu-user-icon"}}
+                  style={{
+                    width: 44,
+                    height: 44,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "#abbcd0",
+                    borderRadius: "50%"
+                  }}
+                >
+                  <Icon name="user" size={12} />
+                </View>
+                <View className="menu-user-name" style={styles.userName}>
+                  <Text dataSet={{class: "menu-user-name-container"}} style={styles.userNameContainer}>
+                    {currentUser.name()}
+                  </Text>
+                </View>
+              </View>
+            }
+            {currentUser &&
+              <MenuItem
+                active
+                className="sign-out-menu-item"
+                icon="sign-out-alt"
+                label={t(".sign_out", {defaultValue: "Sign out"})}
+                onClick={this.tt.onSignOutClicked}
+              />
+            }
+          </View>
+        </WithDefaultStyle>
       </View>
     )
   }

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

@@ -1,49 +1,6 @@
 @use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
 
 [data-component="super-admin--layout--menu"] {
-  position: fixed;
-  z-index: 9;
-  overflow-y: auto;
-  overflow-x: hidden;
-  top: 0;
-  left: 0;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  background: #1b1c1e;
-  color: #fff;
-
-  @media (max-width: $sm-to) {
-    width: 100%;
-    max-width: 250px;
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &[data-triggered="false"] {
-      display: none;
-    }
-  }
-
-  @media (min-width: $md-from) {
-    width: 250px;
-  }
-
-  @media (min-width: $lg-from) {
-    width: 290px;
-  }
-
-  .menu-logo {
-    overflow: hidden;
-    width: 80%;
-    margin-top: 25px;
-    margin-right: auto;
-    margin-left: auto;
-    font-size: 42px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .menu-logo-link {
     &:link,
     &:visited {
@@ -51,55 +8,4 @@
       text-decoration: none;
     }
   }
-
-  .menu-items-center {
-    margin-top: 25px;
-  }
-
-  .menu-items-bottom {
-    margin-top: auto;
-    margin-bottom: 25px;
-  }
-
-  .menu-user-section {
-    display: flex;
-    align-items: center;
-    margin-right: 25px;
-    margin-bottom: 25px;
-    margin-left: 25px;
-  }
-
-  .menu-user-icon {
-    display: flex;
-    width: 44px;
-    min-width: 44px;
-    max-width: 44px;
-    height: 44px;
-    align-items: center;
-    justify-content: center;
-    background: #abbcd0;
-    border-radius: 50%;
-  }
-
-  .menu-user-name {
-    flex-shrink: 1;
-    margin-left: 8px;
-  }
-
-  .menu-user-name-container {
-    overflow: hidden;
-    max-width: 140px;
-  }
-
-  .menu-user-items {
-    position: relative;
-    margin-left: auto;
-  }
-
-  .menu-user-items-link {
-    &:link,
-    &:visited {
-      color: #dededf;
-    }
-  }
 }

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

@@ -9,7 +9,7 @@ import {shapeComponent} from "set-state-compare/src/shape-component"
 import ShowReflectionLink from "./show-reflection-link"
 import Text from "../utils/text"
 import useI18n from "i18n-on-steroids/src/use-i18n"
-import useQueryParams from "on-location-changed/src/use-query-params"
+import useQueryParams from "on-location-changed/build/use-query-params"
 import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseComponent {

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

@@ -7,7 +7,7 @@ import ModelClassTable from "./model-class-table"
 import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import ShowNav from "./show-nav"
-import useQueryParams from "on-location-changed/src/use-query-params"
+import useQueryParams from "on-location-changed/build/use-query-params"
 import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage extends BaseComponent {

package/src/table/filters/filter.jsx

@@ -1,6 +1,6 @@
 import {Pressable, View} from "react-native"
 import BaseComponent from "../../base-component"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import Icon from "../../utils/icon"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import memo from "set-state-compare/src/memo"
@@ -47,7 +47,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
           </Text>
         </Pressable>
         <Pressable dataSet={{class: "remove-filter-button"}} onPress={this.tt.onRemoveFilterPressed} style={{marginLeft: 6}}>
-          <FontAwesomeIcon name="remove" />
+          <Icon name="remove" />
         </Pressable>
       </View>
     )

package/src/table/filters/index.jsx

@@ -11,7 +11,7 @@ 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/src/use-query-params"
+import useQueryParams from "on-location-changed/build/use-query-params"
 import {View} from "react-native"
 
 const {TableSearch} = models