@kaspernj/api-maker 1.0.216 → 1.0.217

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

@@ -0,0 +1,60 @@
+import "./style"
+
+export default class ApiMakerSuperAdminLayoutHeader extends BaseComponent {
+  static propTypes = PropTypesExact({
+    actions: PropTypes.node,
+    onTriggerMenu: PropTypes.func.isRequired,
+    title: PropTypes.string
+  })
+
+  headerActionsRef = React.createRef()
+  shape = new Shape(this, {headerActionsActive: false})
+
+  render() {
+    const {headerActionsRef} = digs(this, "headerActionsRef")
+    const {onGearsClicked} = digs(this, "onGearsClicked")
+    const {actions, onTriggerMenu, title} = this.props
+    const {headerActionsActive} = digs(this.shape, "headerActionsActive")
+
+    return (
+      <div className="components--admin--layout--header">
+        <EventListener event="mouseup" onCalled={digg(this, "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 &&
+            <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>
+        </div>
+      </div>
+    )
+  }
+
+  onGearsClicked = (e) => {
+    e.preventDefault()
+    this.shape.set({
+      headerActionsActive: !this.shape.headerActionsActive
+    })
+  }
+
+  onWindowMouseUp = (e) => {
+    const {headerActionsRef} = digs(this, "headerActionsRef")
+    const {headerActionsActive} = digs(this.shape, "headerActionsActive")
+
+    // Close the header actions menu if clicked happened outside
+    if (headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) this.shape.set({headerActionsActive: false})
+  }
+}

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

@@ -0,0 +1,124 @@
+@import "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;
+
+  @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;
+
+      .action-button {
+        display: block;
+        padding: 11px;
+
+        .fa {
+          margin-right: 5px;
+        }
+
+        + .action-button {
+          border-top: 1px solid #c9c9c9;
+        }
+
+        &:link,
+        &:visited {
+          color: #000;
+        }
+
+        &:active,
+        &:hover {
+          background: #dddcf0;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $md-from) {
+    position: fixed;
+    left: 250px;
+    width: calc(100% - 250px);
+
+    .header-actions-container {
+      margin-left: auto;
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $lg-from) {
+    left: 290px;
+    width: calc(100% - 290px);
+  }
+
+  .burger-menu-container {
+    @media (max-width: $sm-to) {
+      margin-left: auto;
+      font-size: 28px;
+    }
+
+    @media (min-width: $md-from) {
+      display: none;
+    }
+  }
+
+  .actions-link {
+    margin-right: 8px;
+    font-size: 22px;
+  }
+
+  .actions-link,
+  .burger-menu-link {
+    &:link,
+    &:visited {
+      color: #1b1c1e;
+    }
+  }
+
+  .header-title-container {
+    font-size: 22px;
+  }
+}

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

@@ -0,0 +1,156 @@
+import "./style"
+import CommandsPool from "@kaspernj/api-maker/src/commands-pool"
+import Header from "./header"
+import Menu from "./menu"
+
+const UsersSignIn = React.lazy(() => import("components/users/sign-in"))
+const NoAccess = React.lazy(() => import("./no-access"))
+
+class ApiMakerSuperAdminLayout extends React.PureComponent {
+  static defaultProps = {
+    requireAdmin: true
+  }
+
+  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,
+    requireAdmin: PropTypes.bool.isRequired
+  })
+
+  componentDidMount() {
+    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"
+    }
+  }
+
+  shape = new Shape(this, {
+    menuTriggered: false
+  })
+
+  render() {
+    const {
+      actions,
+      active,
+      children,
+      className,
+      currentCustomer,
+      currentCustomerId,
+      currentUser,
+      headerTitle,
+      menu,
+      requireAdmin,
+      ...restProps
+    } = this.props
+    const {menuTriggered} = digs(this.shape, "menuTriggered")
+    const noAccess = this.noAccess()
+
+    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.components.app_layout.try_signing_out_and_in_with_a_different_user")}
+                  </div>
+                  {(isCurrentUserA("teacher") || isCurrentUserA("student")) &&
+                    <div className="mb-4">
+                      {this.clickHereToAccessTheUserUniverse()}
+                    </div>
+                  }
+                </>
+              }
+              {!currentUser &&
+                <>
+                  <div className="mb-4">
+                    {I18n.t("js.components.app_layout.try_signing_in")}
+                  </div>
+                  <UsersSignIn />
+                </>
+              }
+            </>
+          }
+          {!noAccess && children}
+        </div>
+      </div>
+    )
+  }
+
+  clickHereToAccessTheUserUniverse() {
+    const replaces = [
+      {
+        component: (
+          <Link key="here-user-universe-link" to={Routes.userRootPath()}>
+            {I18n.t("js.components.app_layout.here")}
+          </Link>
+        ),
+        text: "%{here}"
+      },
+      {
+        component: (
+          <Link key="user-universe-link" to={Routes.userRootPath()}>
+            {I18n.t("js.components.app_layout.user_universe")}
+          </Link>
+        ),
+        text: "%{user_universe}"
+      }
+    ]
+
+    return (
+      <TextComponentReplace
+        replaces={replaces}
+        text={I18n.t("js.components.app_layout.click_here_to_access_the_user_universe")}
+      />
+    )
+  }
+
+  onRequestMenuClose = () => this.shape.set({menuTriggered: false})
+
+  onTriggerMenu = (e) => {
+    e.preventDefault()
+
+    this.shape.set({menuTriggered: !this.shape.menuTriggered})
+  }
+
+  noAccess() {
+    const {currentUser, requireAdmin} = digs(this.props, "currentUser", "requireAdmin")
+
+    if (requireAdmin && currentUser && !isCurrentUserA("admin") && !isCurrentUserA("hacker")) return true
+    if (requireAdmin && !currentUser) return true
+
+    return false
+  }
+}
+
+export default withCurrentUser(ApiMakerSuperAdminLayout)

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

@@ -0,0 +1,116 @@
+import "./style"
+import {PopupMenu, PopupMenuItem} from "components/popup-menu"
+import MenuContent from "./menu-content"
+import MenuItem from "./menu-item"
+
+class ComponentsAdminLayoutMenu extends BaseComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.string,
+    currentUser: PropTypes.instanceOf(User),
+    noAccess: PropTypes.bool.isRequired,
+    onRequestMenuClose: PropTypes.func.isRequired,
+    triggered: PropTypes.bool.isRequired
+  })
+
+  menuUserItemsRef = React.createRef()
+  rootRef = React.createRef()
+  shape = new Shape(this, {userMenuItemOpen: false})
+
+  render() {
+    const {menuUserItemsRef, onUserItemsClicked, rootRef} = digs(this, "menuUserItemsRef", "onUserItemsClicked", "rootRef")
+    const {active} = this.props
+    const {
+      currentUser,
+      noAccess,
+      triggered
+    } = digs(
+      this.props,
+      "currentUser",
+      "noAccess",
+      "triggered"
+    )
+    const {userMenuItemOpen} = digs(this.shape, "userMenuItemOpen")
+
+    return (
+      <div className="components--admin--layout--menu" data-triggered={triggered} ref={rootRef}>
+        <EventListener event="mouseup" onCalled={digg(this, "onWindowMouseUp")} target={window} />
+        <div className="menu-logo">
+          <Link className="menu-logo-link" to={Routes.adminRootPath()}>
+            Admin
+          </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 className="menu-user-items" ref={menuUserItemsRef}>
+                {userMenuItemOpen &&
+                  <PopupMenu>
+                    <PopupMenuItem
+                      children={I18n.t("js.components.app_layout.menu.notification_settings")}
+                      className="notifications-settings-menu-item"
+                      to="#"
+                    />
+                  </PopupMenu>
+                }
+                <a className="menu-user-items-link" href="#" onClick={onUserItemsClicked}>
+                  <i className="fa fa-ellipsis" />
+                </a>
+              </div>
+            </div>
+          }
+          {currentUser &&
+            <MenuItem
+              active
+              className="sign-out-menu-item"
+              icon="sign-out-alt"
+              label={I18n.t("js.components.admin.layout.menu.sign_out")}
+              onClick={digg(this, "onSignOutClicked")}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  onSignOutClicked = async (e) => {
+    e.preventDefault()
+
+    try {
+      await Devise.signOut()
+      FlashMessage.success(I18n.t("js.components.admin.layout.menu.you_have_been_signed_out"))
+    } catch (error) {
+      FlashMessage.errorResponse(error)
+    }
+  }
+
+  onUserItemsClicked = (e) => {
+    e.preventDefault()
+    this.shape.set({userMenuItemOpen: !this.shape.userMenuItemOpen})
+  }
+
+  onWindowMouseUp = (e) => {
+    const {menuUserItemsRef, rootRef} = digs(this, "menuUserItemsRef", "rootRef")
+    const {triggered} = digs(this.props, "triggered")
+
+    // Close the menu if triggered (menu is open on mobile)
+    if (triggered && !rootRef.current.contains(e.target)) setTimeout(this.props.onRequestMenuClose)
+
+    // Close the user items menu if clicked happened outside of that
+    if (!menuUserItemsRef?.current?.contains(e.target)) this.shape.set({userMenuItemOpen: false})
+  }
+}
+
+export default withCurrentUser(ComponentsAdminLayoutMenu)

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

@@ -0,0 +1,106 @@
+import CanCanLoader from "@kaspernj/api-maker/src/can-can-loader"
+import MenuItem from "components/admin/layout/menu/menu-item"
+
+const abilities = [
+  [CheckIn, ["index"]],
+  [ClassStep, ["index"]],
+  [ScoreFactor, ["index"]],
+  [ScoreFactorGroup, ["index"]],
+  [School, ["index"]],
+  [SchoolClass, ["index"]],
+  [Survey, ["index"]],
+  [User, ["index"]]
+]
+
+export default class ComponentsAdminLayoutMenuContent extends BaseComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.string
+  })
+
+  shape = new Shape(this, {
+    canCan: undefined
+  })
+
+  render() {
+    const {active} = digs(this.props, "active")
+    const {canCan} = digs(this.shape, "canCan")
+
+    return (
+      <>
+        <CanCanLoader abilities={abilities} component={this} />
+        {canCan?.can("index", CheckIn) &&
+          <MenuItem
+            active={active}
+            icon="sitemap"
+            identifier="check-ins"
+            label={CheckIn.modelName().human({count: 2})}
+            to={Routes.adminCheckInsPath()}
+          />
+        }
+        {canCan?.can("index", ClassStep) &&
+          <MenuItem
+            active={active}
+            icon="sitemap"
+            identifier="class-steps"
+            label={ClassStep.modelName().human({count: 2})}
+            to={Routes.adminClassStepsPath()}
+          />
+        }
+        {canCan?.can("index", School) &&
+          <MenuItem
+            active={active}
+            icon="sitemap"
+            identifier="schools"
+            label={School.modelName().human({count: 2})}
+            to={Routes.adminSchoolsPath()}
+          />
+        }
+        {canCan?.can("index", SchoolClass) &&
+          <MenuItem
+            active={active}
+            icon="sitemap"
+            identifier="school-classes"
+            label={SchoolClass.modelName().human({count: 2})}
+            to={Routes.adminSchoolClassesPath()}
+          />
+        }
+        {canCan?.can("index", ScoreFactor) &&
+          <MenuItem
+            active={active}
+            icon="list-ol"
+            identifier="score-factors"
+            label={ScoreFactor.modelName().human({count: 2})}
+            to={Routes.adminScoreFactorsPath()}
+          />
+        }
+        {canCan?.can("index", ScoreFactorGroup) &&
+          <MenuItem
+            active={active}
+            icon="list-ol"
+            identifier="score-factor-groups"
+            label={ScoreFactorGroup.modelName().human({count: 2})}
+            to={Routes.adminScoreFactorGroupsPath()}
+          />
+        }
+        {canCan?.can("index", Survey) &&
+          <MenuItem
+            active={active}
+            icon="list-ol"
+            identifier="surveys"
+            label={Survey.modelName().human({count: 2})}
+            to={Routes.adminSurveysPath()}
+          />
+        }
+        {canCan?.can("index", User) &&
+          <MenuItem
+            active={active}
+            icon="users"
+            identifier="users"
+            label={User.modelName().human({count: 2})}
+            to={Routes.adminUsersPath()}
+          />
+        }
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,27 @@
+import "./style"
+
+export default class ComponentsAdminLayoutMenuMenuItem extends BaseComponent {
+  static propTypes = {
+    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    className: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    label: PropTypes.node
+  }
+
+  render() {
+    const {active, children, className, icon, identifier, label, to, ...restProps} = this.props
+
+    return (
+      <Link
+        className={classNames("components--admin--layout--menu--menu-item", className)}
+        data-active={active === true || active == identifier}
+        data-identifier={identifier}
+        to={to || "#"}
+        {...restProps}
+      >
+        <i className={`fa fa-fw fa-${icon} menu-item-icon`} />
+        {children || label}
+      </Link>
+    )
+  }
+}

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

@@ -0,0 +1,30 @@
+.components--admin--layout--menu--menu-item {
+  display: flex;
+  width: 80%;
+  align-items: center;
+  padding: 10px 14px;
+  margin-right: auto;
+  margin-left: auto;
+  text-decoration: none;
+
+  &:link,
+  &:visited {
+    color: #6f6f71;
+  }
+
+  &[data-active="true"],
+  &:hover {
+    background: #323435;
+    border-radius: 7px;
+    color: #b9b9bb;
+  }
+
+  .menu-item-icon {
+    margin-right: 4px;
+    font-size: 12px;
+  }
+
+  + .components--admin--layout--menu--menu-item {
+    margin-top: 6px;
+  }
+}