chore(accounts): basic accounts to react

package.json

@@ -79,6 +79,7 @@
     "prop-types": "15.6.2",
     "react": "16.7.0",
     "react-dom": "16.7.0",
+    "react-infinite-scroller": "1.2.4",
     "react-redux": "6.0.0",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",

src/client/actions/accounts.js

@@ -0,0 +1,20 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    2/24/19 2:46 AM
+ *  Copyright (c) 2014-2019. All rights reserved.
+ */
+
+import { createAction } from 'redux-actions'
+import { FETCH_ACCOUNTS, SAVE_EDIT_ACCOUNT, UNLOAD_ACCOUNTS } from 'actions/types'
+
+export const fetchAccounts = createAction(FETCH_ACCOUNTS.ACTION, payload => payload, () => ({ thunk: true }))
+export const saveEditAccount = createAction(SAVE_EDIT_ACCOUNT.ACTION)
+export const unloadAccounts = createAction(UNLOAD_ACCOUNTS.ACTION, payload => payload, () => ({ thunk: true }))

src/client/actions/types.js

@@ -40,6 +40,11 @@ export const GET_TAGS_WITH_PAGE = defineAction('GET_TAGS_WITH_PAGE', [SUCCESS, E
 export const TAGS_UPDATE_CURRENT_PAGE = defineAction('TAGS_UPDATE_CURRENT_PAGE', [SUCCESS, ERROR])
 export const CREATE_TAG = defineAction('CREATE_TAG', [SUCCESS, ERROR])
 
+// Accounts
+export const FETCH_ACCOUNTS = defineAction('FETCH_ACCOUNTS', [PENDING, SUCCESS, ERROR])
+export const SAVE_EDIT_ACCOUNT = defineAction('SAVE_EDIT_ACCOUNT', [PENDING, SUCCESS, ERROR])
+export const UNLOAD_ACCOUNTS = defineAction('UNLOAD_ACCOUNTS', [SUCCESS])
+
 // Settings
 export const FETCH_SETTINGS = defineAction('FETCH_SETTINGS', [SUCCESS, ERROR])
 export const UPDATE_SETTING = defineAction('UPDATE_SETTING', [SUCCESS, ERROR])

src/client/api/index.js

@@ -108,6 +108,22 @@ api.tickets.createTag = ({ name }) => {
   })
 }
 
+api.accounts = {}
+api.accounts.getWithPage = payload => {
+  const limit = payload && payload.limit ? payload.limit : 25
+  const page = payload && payload.page ? payload.page : 0
+  let search = payload && payload.search ? payload.search : ''
+  if (search) search = `&search=${search}`
+  return axios.get(`/api/v1/users?limit=${limit}&page=${page}${search}`).then(res => {
+    return res.data
+  })
+}
+api.accounts.updateUser = payload => {
+  return axios.put(`/api/v1/users/${payload.aUsername}`, payload).then(res => {
+    return res.data
+  })
+}
+
 api.settings = {}
 api.settings.update = settings => {
   return axios.put('/api/v1/settings', settings).then(res => {

src/client/components/Drowdown/DropdownItem.jsx

@@ -16,11 +16,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 class DropdownItem extends React.Component {
+  onClick (e) {
+    if (this.props.onClick) {
+      this.props.onClick(e)
+    }
+  }
+
   render () {
-    const { closeOnClick, text, href } = this.props
+    const { closeOnClick, text, href, extraClass } = this.props
     return (
       <li className={closeOnClick ? 'uk-dropdown-close' : ''}>
-        <a href={href} close-uk-dropdown={closeOnClick.toString()}>
+        <a
+          href={href}
+          close-uk-dropdown={closeOnClick.toString()}
+          className={(!href ? 'no-ajaxy' : '') + (extraClass ? ' ' + extraClass : '')}
+          onClick={this.props.onClick}
+        >
           {text}
         </a>
       </li>
@@ -31,6 +42,8 @@ class DropdownItem extends React.Component {
 DropdownItem.propTypes = {
   href: PropTypes.string,
   text: PropTypes.string.isRequired,
+  extraClass: PropTypes.string,
+  onClick: PropTypes.func,
   closeOnClick: PropTypes.bool
 }
 

src/client/components/Grid/index.jsx

@@ -19,7 +19,12 @@ class Grid extends React.Component {
   render () {
     return (
       <div
-        className={'uk-grid uk-grid-collapse uk-clearfix' + (this.props.extraClass ? ' ' + this.props.extraClass : '')}
+        className={
+          'uk-grid uk-clearfix' +
+          (this.props.gutterSize ? ' uk-grid-' + this.props.gutterSize : '') +
+          (this.props.collapse ? ' uk-grid-collapse' : '') +
+          (this.props.extraClass ? ' ' + this.props.extraClass : '')
+        }
         style={this.props.style}
       >
         {this.props.children}
@@ -30,8 +35,14 @@ class Grid extends React.Component {
 
 Grid.propTypes = {
   extraClass: PropTypes.string,
+  gutterSize: PropTypes.string,
+  collapse: PropTypes.bool,
   style: PropTypes.object,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 }
 
+Grid.defaultProps = {
+  collapse: false
+}
+
 export default Grid

src/client/components/MultiSelect/index.jsx

@@ -0,0 +1,62 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    2/24/19 2:05 AM
+ *  Copyright (c) 2014-2019. All rights reserved.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import $ from 'jquery'
+import helpers from 'lib/helpers'
+
+class MultiSelect extends React.Component {
+  componentDidMount () {
+    const $select = $(this.select)
+    helpers.UI.multiSelect()
+
+    if (this.props.initialSelected) {
+      $select.multiSelect('select', this.props.initialSelected)
+      $select.multiSelect('refresh')
+    }
+  }
+
+  getSelected () {
+    const $select = $(this.select)
+    if (!$select) return []
+    return $select.val()
+  }
+
+  render () {
+    const { id, items } = this.props
+    return (
+      <select id={id} multiple={'multiple'} className={'multiselect'} ref={r => (this.select = r)}>
+        {items &&
+          items.map((item, i) => {
+            return (
+              <option key={i} value={item.value}>
+                {item.text}
+              </option>
+            )
+          })}
+      </select>
+    )
+  }
+}
+
+MultiSelect.propTypes = {
+  id: PropTypes.string,
+  items: PropTypes.array.isRequired,
+  initialSelected: PropTypes.array,
+  onChange: PropTypes.func.isRequired
+}
+
+export default MultiSelect

src/client/components/PageContent/index.jsx

@@ -0,0 +1,40 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    2/22/19 11:40 PM
+ *  Copyright (c) 2014-2019. All rights reserved.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import helpers from 'lib/helpers'
+
+class PageContent extends React.Component {
+  componentDidMount () {
+    helpers.resizeFullHeight()
+    helpers.setupScrollers()
+  }
+
+  render () {
+    return (
+      <div id={this.props.id} className={'page-content no-border-top full-height scrollable p-25'}>
+        <div className={'pb-100'}>{this.props.children}</div>
+      </div>
+    )
+  }
+}
+
+PageContent.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+}
+
+export default PageContent

src/client/components/PageTitle/index.jsx

@@ -0,0 +1,42 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    2/22/19 11:32 PM
+ *  Copyright (c) 2014-2019. All rights reserved.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+class PageTitle extends React.Component {
+  render () {
+    const { title, rightComponent, shadow } = this.props
+    return (
+      <div className={'nopadding'}>
+        <div className={'uk-width-1-1 page-title dt-borderBottom pl-25 uk-clearfix' + (!shadow ? ' noshadow' : '')}>
+          <p className={'uk-float-left'}>{title}</p>
+          <div className={'uk-float-right uk-clearfix uk-width-1-2'}>{rightComponent}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+PageTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  shadow: PropTypes.bool,
+  rightComponent: PropTypes.element
+}
+
+PageTitle.defaultProps = {
+  shadow: false
+}
+
+export default PageTitle

src/client/components/TruCard/index.jsx

@@ -0,0 +1,56 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    2/22/19 11:19 PM
+ *  Copyright (c) 2014-2019. All rights reserved.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import DropdownTrigger from 'components/Drowdown/DropdownTrigger'
+import Dropdown from 'components/Drowdown'
+
+class TruCard extends React.Component {
+  render () {
+    return (
+      <div className={'tru-card-wrapper'}>
+        <div className={'tru-card tru-card-hover'}>
+          <div className={'tru-card-head ' + (this.props.extraHeadClass || '')}>
+            {this.props.menu && (
+              <div className={'tru-card-head-menu'}>
+                <DropdownTrigger pos={'bottom-right'} mode={'click'}>
+                  <i className='material-icons tru-icon'>more_vert</i>
+                  <Dropdown small={true}>
+                    {this.props.menu.map(child => {
+                      return child
+                    })}
+                  </Dropdown>
+                </DropdownTrigger>
+              </div>
+            )}
+            {/* HEADER TEXT */}
+            <div className={'uk-text-center'}>{this.props.header}</div>
+          </div>
+          {/* Tru Card Content */}
+          <div className={'tru-card-content'}>{this.props.content}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+TruCard.propTypes = {
+  menu: PropTypes.arrayOf(PropTypes.element),
+  header: PropTypes.element.isRequired,
+  extraHeadClass: PropTypes.string,
+  content: PropTypes.element.isRequired
+}
+
+export default TruCard