@kaspernj/api-maker 1.0.2011 → 1.0.2012

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

@@ -0,0 +1,144 @@
+// import "../../../../src/super-admin/layout/header/style"
+import React, {useRef} from "react"
+import BaseComponent from "../../../base-component"
+import Icon from "../../../utils/icon"
+import memo from "set-state-compare/src/memo"
+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 {Pressable, 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({
+    actions: PropTypes.node,
+    onTriggerMenu: PropTypes.func.isRequired,
+    title: PropTypes.string
+  })
+
+  setup() {
+    const {name: breakpoint, mdUp} = useBreakpoint()
+
+    this.headerActionsRef = useRef()
+    this.setInstance({breakpoint, mdUp})
+    this.useStates({
+      headerActionsActive: false
+    })
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
+  }
+
+  render() {
+    const {breakpoint, mdUp} = 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 (
+      <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 &&
+          <View dataSet={{active: this.s.headerActionsActive, class: "header-actions-container"}} style={headerActionsContainerStyle}>
+            <View
+              dataSet={{class: "header-actions"}}
+              ref={this.tt.headerActionsRef}
+              style={headerActionsStyle}
+            >
+              {actions}
+            </View>
+          </View>
+        }
+        {!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>
+          </View>
+        }
+      </View>
+    )
+  }
+
+  onGearsClicked = () => {
+    console.log("onGearsClicked")
+
+    this.setState({headerActionsActive: !this.s.headerActionsActive})
+  }
+
+  onWindowMouseUp = (e) => {
+    // Close the header actions menu if clicked happened outside
+    if (this.s.headerActionsActive && this.tt.headerActionsRef.current && !this.tt.headerActionsRef.current.contains(e.target)) {
+      this.setState({headerActionsActive: false})
+    }
+  }
+}))

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

@@ -0,0 +1,45 @@
+@use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
+
+[data-component="super-admin--layout--header"] {
+  @media (max-width: $sm-to) {
+    [data-class="header-actions"] {
+      .action-button {
+        display: block;
+        padding: 11px;
+
+        + .action-button {
+          border-top: 1px solid #c9c9c9;
+        }
+
+        &:link,
+        &:visited {
+          color: #000;
+        }
+
+        &:active,
+        &:hover {
+          background: #dddcf0;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $md-from) {
+    [data-class="header-actions"] {
+      .action-button {
+        display: inline-block;
+        padding: 7px 10px;
+        border: 1px solid #cbd5e1;
+        margin-right: 4px;
+        margin-bottom: 4px;
+        border-radius: 5px;
+        font-size: 13px;
+
+        &:link,
+        &:visited {
+          color: #000;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,154 @@
+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"
+import Header from "./header"
+import memo from "set-state-compare/src/memo"
+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"
+
+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,
+    active: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    currentCustomer: PropTypes.object,
+    currentCustomerId: PropTypes.string,
+    currentUser: PropTypes.object,
+    headTitle: PropTypes.string,
+    headerTitle: PropTypes.string
+  })
+
+  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, lgUp, mdUp, mdDown, t})
+
+    useMemo(() => {
+      CommandsPool.current().globalRequestData.layout = "admin"
+      CommandsPool.current().globalRequestData.locale = locale
+    }, [locale])
+  }
+
+  render() {
+    const {currentUser, lgUp, mdUp, mdDown, t} = this.tt
+    const {
+      actions,
+      active,
+      children,
+      className,
+      currentCustomer,
+      currentCustomerId,
+      headTitle,
+      headerTitle,
+      menu,
+      ...restProps
+    } = this.props
+    const actualHeadTitle = headTitle || headerTitle
+
+    if (actualHeadTitle) {
+      document.title = actualHeadTitle
+    } else {
+      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}}
+        style={styles.rootView}
+        {...restProps}>
+        <Menu
+          active={active}
+          noAccess={noAccess}
+          onRequestMenuClose={this.tt.onRequestMenuClose}
+          triggered={this.s.menuTriggered}
+        />
+        <Header actions={actions} onTriggerMenu={this.tt.onTriggerMenu} title={headerTitle} />
+        <View dataSet={{class: "app-layout-content-container"}} style={appLayoutContentContainerStyles}>
+          {noAccess &&
+            <>
+              <NoAccess />
+              {currentUser &&
+                <>
+                  <Text style={styles.mb15}>
+                    {t(".try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
+                  </Text>
+                </>
+              }
+              {!currentUser &&
+                <>
+                  <Text style={styles.mb15}>
+                    {t(".try_signing_in", {defaultValue: "Try signing in."})}
+                  </Text>
+                  {config.signInContent()}
+                </>
+              }
+            </>
+          }
+          {!noAccess && children}
+        </View>
+      </View>
+    )
+  }
+
+  onRequestMenuClose = () => this.setState({menuTriggered: false})
+  onTriggerMenu = (e) => {
+    e.preventDefault()
+    this.setState({menuTriggered: !this.s.menuTriggered})
+  }
+}))

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

@@ -0,0 +1,171 @@
+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"
+import MenuItem from "./menu-item"
+import Params from "../../../params"
+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 useBreakpoint from "../../../use-breakpoint"
+import useCurrentUser from "../../../use-current-user"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+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({
+    active: PropTypes.string,
+    noAccess: PropTypes.bool.isRequired,
+    onRequestMenuClose: PropTypes.func.isRequired,
+    triggered: PropTypes.bool.isRequired
+  })
+
+  setup() {
+    const {lgUp, mdDown, mdUp} = useBreakpoint()
+    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
+    const currentUser = useCurrentUser()
+
+    this.setInstance({currentUser, lgUp, mdDown, mdUp, t})
+  }
+
+  render() {
+    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}} 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>
+    )
+  }
+
+  onSignOutClicked = async (e) => {
+    e.preventDefault()
+
+    try {
+      await Devise.signOut()
+      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/menu-content.jsx

@@ -0,0 +1,43 @@
+import React, {useMemo} from "react"
+import BaseComponent from "../../../base-component"
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import MenuItem from "./menu-item"
+import models from "../../models"
+import Params from "../../../params"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useCanCan from "../../../use-can-can"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+export default memo(shapeComponent(class ComponentsAdminLayoutMenuContent extends BaseComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.string
+  })
+
+  render() {
+    const {locale} = useI18n({namespace: "js.api_maker.super_admin.layout.menu.menu_content"})
+    const {active} = this.p
+    const canCan = useCanCan(() => models.map((modelClass) => [modelClass, ["index"]]))
+    const sortedModels = useMemo(
+      () => models.sort((a, b) => a.modelName().human({count: 2}).toLowerCase().localeCompare(b.modelName().human({count: 2}).toLowerCase())),
+      [locale]
+    )
+
+    return (
+      <>
+        {sortedModels.map((model) => canCan?.can("index", model) &&
+          <MenuItem
+            active={active}
+            icon="sitemap"
+            identifier={digg(model.modelClassData(), "name")}
+            label={model.modelName().human({count: 2})}
+            key={model.modelClassData().name}
+            to={Params.withParams({model: model.modelClassData().name})}
+          />
+        )}
+      </>
+    )
+  }
+}))

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

@@ -0,0 +1,70 @@
+import BaseComponent from "../../../base-component"
+import classNames from "classnames"
+import Link from "../../../link"
+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 Text from "../../../utils/text"
+
+export default memo(shapeComponent(class ComponentsAdminLayoutMenuMenuItem extends BaseComponent {
+  static propTypes = {
+    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    className: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    label: PropTypes.node
+  }
+
+  setup() {
+    this.useStates({
+      hover: false
+    })
+  }
+
+  render() {
+    const {active, children, className, icon, identifier, label, to, ...restProps} = this.props
+    const {hover} = this.s
+    const textStyle = {}
+    const style = {
+      display: "flex",
+      width: "80%",
+      alignItems: "center",
+      paddingTop: 10,
+      paddingRight: 14,
+      paddingBottom: 10,
+      paddingLeft: 14,
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+    const isActive = active === true || active == identifier
+
+    if (isActive || hover) {
+      style.background = "#323435"
+      style.borderRadius = 7
+      textStyle.color = "#b9b9bb"
+    } else {
+      textStyle.color = "#6f6f71"
+    }
+
+    return (
+      <Link
+        dataSet={{
+          active: isActive,
+          class: classNames("components--admin--layout--menu--menu-item", className),
+          identifier
+        }}
+        onPointerEnter={this.tt.onPointerEnter}
+        onPointerLeave={this.tt.onPointerLeave}
+        style={style}
+        to={to || "#"}
+        {...restProps}
+      >
+        <i className={`fa fa-fw fa-${icon} menu-item-icon`} style={{color: textStyle.color, marginRight: 4, fontSize: 12}} />
+        {children || <Text style={textStyle}>{label}</Text>}
+      </Link>
+    )
+  }
+
+  onPointerEnter = () => this.setState({hover: true})
+  onPointerLeave = () => this.setState({hover: false})
+}))

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

@@ -0,0 +1,11 @@
+@use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
+
+[data-component="super-admin--layout--menu"] {
+  .menu-logo-link {
+    &:link,
+    &:visited {
+      color: #dededf;
+      text-decoration: none;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import BaseComponent from "../../base-component"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {View} from "react-native"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../../utils/text"
+import useCurrentUser from "../../use-current-user"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+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 (
+      <View
+        dataSet={{
+          component: "super-admin--layout--no-access",
+          userRoles: currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")
+        }}
+      >
+        <Text>{t(".you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}</Text>
+      </View>
+    )
+  }
+}))