chore(ui): fixes

polonel · Apr 14, 2019 · 52246f2 · 52246f2
1 parent 82c2f44
commit 52246f2
Show file tree

Hide file tree

Showing 17 changed files with 172 additions and 114 deletions.
diff --git a/src/client/api/index.js b/src/client/api/index.js
@@ -140,10 +140,13 @@ api.accounts.getWithPage = payload => {
   const type = payload && payload.type ? payload.type : 'all'
   let search = payload && payload.search ? payload.search : ''
   if (search) search = `&search=${search}`
+  const showDeleted = payload && payload.showDeleted ? payload.showDeleted : false
 
-  return axios.get(`/api/v2/accounts?type=${type}&limit=${limit}&page=${page}${search}`).then(res => {
-    return res.data
-  })
+  return axios
+    .get(`/api/v2/accounts?type=${type}&limit=${limit}&page=${page}${search}&showDeleted=${showDeleted}`)
+    .then(res => {
+      return res.data
+    })
 }
 api.accounts.updateUser = payload => {
   return axios.put(`/api/v2/accounts/${payload.username}`, payload).then(res => {
@@ -168,7 +171,7 @@ api.groups.create = payload => {
   })
 }
 api.groups.get = payload => {
-  const limit = payload && payload.limit ? payload.limit : 25
+  const limit = payload && payload.limit ? payload.limit : 50
   const page = payload && payload.page ? payload.page : 0
   const type = payload && payload.type ? `&type=${payload.type}` : ''
 

diff --git a/src/client/containers/Accounts/index.jsx b/src/client/containers/Accounts/index.jsx
@@ -82,8 +82,9 @@ class AccountsContainer extends React.Component {
   }
 
   getUsersWithPage (page) {
-    this.props.fetchAccounts({ page, limit: 25, type: this.props.view }).then(({ response }) => {
-      if (response.count < 25) this.hasMore = false
+    this.hasMore = false
+    this.props.fetchAccounts({ page, limit: 25, type: this.props.view, showDeleted: true }).then(({ response }) => {
+      this.hasMore = response.count >= 25
     })
   }
 
@@ -93,9 +94,10 @@ class AccountsContainer extends React.Component {
     if (keyCode === 13) {
       if (search.length > 2) {
         this.props.unloadAccounts().then(() => {
-          this.props.fetchAccounts({ limit: 1000, search: search }).then(({ response }) => {
+          this.hasMore = false
+          this.props.fetchAccounts({ limit: -1, search: search }).then(({ response }) => {
             this.pageStart = -1
-            if (response.count < 25) this.hasMore = false
+            this.hasMore = response.count >= 25
           })
         })
       } else if (search.length === 0) {

diff --git a/src/client/containers/Groups/index.jsx b/src/client/containers/Groups/index.jsx
@@ -71,32 +71,37 @@ class GroupsContainer extends React.Component {
       return (
         <TableRow key={group.get('_id')} className={'vam nbb'}>
           <TableCell style={{ fontWeight: 500, padding: '18px 15px' }}>{group.get('name')}</TableCell>
-          <TableCell style={{ padding: '13px 8px 8px 8px' }}>
+          <TableCell style={{ padding: '13px 20px 8px 8px' }}>
             {group.get('members') &&
               group.get('members').size > 0 &&
-              group.get('members').map(user => {
-                const profilePic = user.get('image') || 'defaultProfile.jpg'
-                return (
-                  <div
-                    key={user.get('_id')}
-                    className={'uk-float-left uk-position-relative mb-10'}
-                    data-uk-tooltip={'{pos: "bottom"}'}
-                    title={user.get('fullname')}
-                  >
-                    <img
-                      style={{ width: 25, height: 25, marginRight: 5 }}
-                      className={'round'}
-                      src={`/uploads/users/${profilePic}`}
-                      alt={user.get('fullname')}
-                    />
-                    <span
-                      data-user-status-id={user.get('_id')}
-                      className='user-offline uk-border-circle'
-                      style={{ width: 13, height: 13 }}
-                    />
-                  </div>
-                )
-              })}
+              group
+                .get('members')
+                .filter(user => {
+                  return !user.get('deleted')
+                })
+                .map(user => {
+                  const profilePic = user.get('image') || 'defaultProfile.jpg'
+                  return (
+                    <div
+                      key={user.get('_id')}
+                      className={'uk-float-left uk-position-relative mb-10'}
+                      data-uk-tooltip={'{pos: "bottom"}'}
+                      title={user.get('fullname')}
+                    >
+                      <img
+                        style={{ width: 25, height: 25, marginRight: 5 }}
+                        className={'round'}
+                        src={`/uploads/users/${profilePic}`}
+                        alt={user.get('fullname')}
+                      />
+                      <span
+                        data-user-status-id={user.get('_id')}
+                        className='user-offline uk-border-circle'
+                        style={{ width: 13, height: 13 }}
+                      />
+                    </div>
+                  )
+                })}
             {!group.get('members') && <div />}
           </TableCell>
           <TableCell style={{ textAlign: 'right', paddingRight: 15 }}>

diff --git a/src/client/containers/Modals/CreateTeamModal.jsx b/src/client/containers/Modals/CreateTeamModal.jsx
@@ -33,7 +33,7 @@ class CreateTeamModal extends React.Component {
   @observable name = ''
 
   componentDidMount () {
-    this.props.fetchAccounts()
+    this.props.fetchAccounts({ limit: -1 })
 
     helpers.UI.inputs()
     helpers.UI.reRenderInputs()
@@ -68,7 +68,7 @@ class CreateTeamModal extends React.Component {
   render () {
     const mappedAccounts = this.props.accounts
       .filter(account => {
-        return account.getIn(['role', 'isAgent']) === true
+        return account.getIn(['role', 'isAgent']) === true && !account.get('deleted')
       })
       .map(account => {
         return { text: account.get('fullname'), value: account.get('_id') }

diff --git a/src/client/containers/Modals/EditGroupModal.jsx b/src/client/containers/Modals/EditGroupModal.jsx
@@ -27,12 +27,13 @@ import Button from 'components/Button'
 
 import helpers from 'lib/helpers'
 import $ from 'jquery'
+import SpinLoader from 'components/SpinLoader'
 
 @observer
 class EditGroupModal extends React.Component {
   @observable name = ''
   componentDidMount () {
-    this.props.fetchAccounts({ type: 'customers' })
+    this.props.fetchAccounts({ type: 'customers', limit: -1 })
     this.name = this.props.group.name
 
     helpers.UI.inputs()
@@ -74,8 +75,9 @@ class EditGroupModal extends React.Component {
     })
     return (
       <BaseModal>
+        <SpinLoader active={this.props.accountsLoading} />
         <div className={'mb-25'}>
-          <h2>Create Group</h2>
+          <h2>Edit Group</h2>
         </div>
         <form className={'uk-form-stacked'} onSubmit={e => this.onFormSubmit(e)}>
           <div className={'uk-margin-medium-bottom'}>
@@ -114,11 +116,13 @@ EditGroupModal.propTypes = {
   accounts: PropTypes.object.isRequired,
   updateGroup: PropTypes.func.isRequired,
   fetchAccounts: PropTypes.func.isRequired,
-  unloadAccounts: PropTypes.func.isRequired
+  unloadAccounts: PropTypes.func.isRequired,
+  accountsLoading: PropTypes.bool.isRequired
 }
 
 const mapStateToProps = state => ({
-  accounts: state.accountsState.accounts
+  accounts: state.accountsState.accounts,
+  accountsLoading: state.accountsState.loading
 })
 
 export default connect(

diff --git a/src/client/containers/Modals/EditTeamModal.jsx b/src/client/containers/Modals/EditTeamModal.jsx
@@ -27,13 +27,14 @@ import helpers from 'lib/helpers'
 import Button from 'components/Button'
 import MultiSelect from 'components/MultiSelect'
 import $ from 'jquery'
+import SpinLoader from 'components/SpinLoader'
 
 @observer
 class EditTeamModal extends React.Component {
   @observable name = ''
 
   componentDidMount () {
-    this.props.fetchAccounts({ type: 'all' })
+    this.props.fetchAccounts({ type: 'all', limit: -1 })
     this.name = this.props.team.name
 
     helpers.UI.inputs()
@@ -70,16 +71,18 @@ class EditTeamModal extends React.Component {
   render () {
     const mappedAccounts = this.props.accounts
       .filter(account => {
-        return account.getIn(['role', 'isAgent']) === true
+        return account.getIn(['role', 'isAgent']) === true && !account.get('deleted')
       })
       .map(account => {
         return { text: account.get('fullname'), value: account.get('_id') }
       })
       .toArray()
+
     const selectedMembers = this.props.team.members
 
     return (
       <BaseModal {...this.props} options={{ bgclose: false }}>
+        <SpinLoader active={this.props.accountsLoading} />
         <div className={'mb-25'}>
           <h2>Edit Team</h2>
         </div>
@@ -120,11 +123,13 @@ EditTeamModal.propTypes = {
   fetchAccounts: PropTypes.func.isRequired,
   unloadAccounts: PropTypes.func.isRequired,
   saveEditTeam: PropTypes.func.isRequired,
-  accounts: PropTypes.object.isRequired
+  accounts: PropTypes.object.isRequired,
+  accountsLoading: PropTypes.bool.isRequired
 }
 
 const mapStateToProps = state => ({
-  accounts: state.accountsState.accounts
+  accounts: state.accountsState.accounts,
+  accountsLoading: state.accountsState.loading
 })
 
 export default connect(

diff --git a/src/client/containers/Teams/index.jsx b/src/client/containers/Teams/index.jsx
@@ -93,29 +93,34 @@ class TeamsContainer extends React.Component {
           <TableCell style={{ padding: '13px 8px 8px 8px' }}>
             {team.get('members') &&
               team.get('members').size > 0 &&
-              team.get('members').map(user => {
-                const profilePic = user.get('image') || 'defaultProfile.jpg'
-                return (
-                  <div
-                    key={user.get('_id')}
-                    className={'uk-float-left uk-position-relative mb-10'}
-                    data-uk-tooltip={'{pos: "bottom"}'}
-                    title={user.get('fullname')}
-                  >
-                    <img
-                      style={{ width: 25, height: 25, marginRight: 5 }}
-                      className={'round'}
-                      src={`/uploads/users/${profilePic}`}
-                      alt={user.get('fullname')}
-                    />
-                    <span
-                      data-user-status-id={user.get('_id')}
-                      className='user-offline uk-border-circle'
-                      style={{ width: 13, height: 13 }}
-                    />
-                  </div>
-                )
-              })}
+              team
+                .get('members')
+                .filter(user => {
+                  return !user.get('deleted')
+                })
+                .map(user => {
+                  const profilePic = user.get('image') || 'defaultProfile.jpg'
+                  return (
+                    <div
+                      key={user.get('_id')}
+                      className={'uk-float-left uk-position-relative mb-10'}
+                      data-uk-tooltip={'{pos: "bottom"}'}
+                      title={user.get('fullname')}
+                    >
+                      <img
+                        style={{ width: 25, height: 25, marginRight: 5 }}
+                        className={'round'}
+                        src={`/uploads/users/${profilePic}`}
+                        alt={user.get('fullname')}
+                      />
+                      <span
+                        data-user-status-id={user.get('_id')}
+                        className='user-offline uk-border-circle'
+                        style={{ width: 13, height: 13 }}
+                      />
+                    </div>
+                  )
+                })}
           </TableCell>
           <TableCell style={{ textAlign: 'right', paddingRight: 15 }}>
             <ButtonGroup>

diff --git a/src/client/containers/TicketsContainer.jsx b/src/client/containers/TicketsContainer.jsx
@@ -296,7 +296,7 @@ class TicketsContainer extends React.Component {
                   : '--'
 
                 const isOverdue = () => {
-                  if (!this.props.common.showOverdue || ticket.get('status') === 2) return false
+                  if (!this.props.common.showOverdue || [2, 3].indexOf(ticket.get('status')) !== -1) return false
                   const overdueIn = ticket.getIn(['priority', 'overdueIn'])
                   const now = moment()
                   let updated = ticket.get('updated')

diff --git a/src/client/reducers/accountsReducer.js b/src/client/reducers/accountsReducer.js
@@ -25,11 +25,19 @@ import {
 
 const initialState = {
   accounts: List([]),
-  type: 'customers'
+  type: 'customers',
+  loading: false
 }
 
 const reducer = handleActions(
   {
+    [FETCH_ACCOUNTS.PENDING]: state => {
+      return {
+        ...state,
+        loading: true
+      }
+    },
+
     [FETCH_ACCOUNTS.SUCCESS]: (state, action) => {
       let arr = state.accounts.toArray()
       action.payload.response.accounts.map(i => {
@@ -38,7 +46,8 @@ const reducer = handleActions(
       return {
         ...state,
         accounts: fromJS(arr),
-        type: action.payload.payload && action.payload.payload.type ? action.payload.payload.type : 'customers'
+        type: action.payload.payload && action.payload.payload.type ? action.payload.payload.type : 'customers',
+        loading: false
       }
     },
 

diff --git a/src/client/sagas/accounts/index.js b/src/client/sagas/accounts/index.js
@@ -28,6 +28,7 @@ import api from '../../api'
 import helpers from 'lib/helpers'
 
 function * fetchAccounts ({ payload, meta }) {
+  yield put({ type: FETCH_ACCOUNTS.PENDING })
   try {
     const response = yield call(api.accounts.getWithPage, payload)
     yield put({ type: FETCH_ACCOUNTS.SUCCESS, payload: { response, payload }, meta })

diff --git a/src/controllers/api/v1/tickets.js b/src/controllers/api/v1/tickets.js
@@ -1884,20 +1884,38 @@ apiTickets.getOverdue = function (req, res) {
     }
 
     var ticketSchema = require('../../../models/ticket')
+    var departmentSchema = require('../../../models/department')
     var groupSchema = require('../../../models/group')
-    groupSchema.getAllGroupsOfUser(req.user._id, function (err, grps) {
-      if (err) return res.status(400).json({ success: false, error: err.message })
-      grps = grps.map(function (g) {
-        return g._id.toString()
-      })
-      ticketSchema.getOverdue(grps, function (err, objs) {
-        if (err) return res.status(400).json({ success: false, error: err.message })
 
-        var sorted = _.sortBy(objs, 'uid').reverse()
+    async.waterfall(
+      [
+        function (next) {
+          if (!req.user.role.isAdmin && !req.user.role.isAgent) {
+            return groupSchema.getAllGroupsOfUserNoPopulate(req.user._id, next)
+          } else {
+            return departmentSchema.getDepartmentGroupsOfUser(req.user._id, next)
+          }
+        },
+        function (groups, next) {
+          var groupIds = groups.map(function (g) {
+            return g._id
+          })
 
-        return res.json({ success: true, tickets: sorted })
-      })
-    })
+          ticketSchema.getOverdue(groupIds, function (err, tickets) {
+            if (err) return next(err)
+
+            var sorted = _.sortBy(tickets, 'uid').reverse()
+
+            return next(null, sorted)
+          })
+        }
+      ],
+      function (err, overdueTickets) {
+        if (err) return res.status(400).json({ success: false, error: err.message })
+
+        return res.json({ success: true, tickets: overdueTickets })
+      }
+    )
   })
 }
 

diff --git a/src/controllers/api/v2/accounts.js b/src/controllers/api/v2/accounts.js
@@ -122,12 +122,13 @@ accountsApi.create = function (req, res) {
 accountsApi.get = function (req, res) {
   var query = req.query
   var type = query.type || 'customers'
-  var limit = query.limit ? Number(query.limit) : 10
+  var limit = query.limit ? Number(query.limit) : 25
   var page = query.page ? Number(query.page) : 0
 
   var obj = {
-    limit: limit,
-    page: page
+    limit: limit === -1 ? 999999 : limit,
+    page: page,
+    showDeleted: query.showDeleted && query.showDeleted === 'true'
   }
 
   switch (type) {