chore(tickets): select all added to view

src/client/components/Table/TableHeader.jsx

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types'
 
 class TableHeader extends React.Component {
   render () {
-    const { width, height, padding, textAlign, text } = this.props
+    const { width, height, padding, textAlign, text, component } = this.props
 
     return (
       <th
@@ -31,6 +31,7 @@ class TableHeader extends React.Component {
           textAlign: textAlign
         }}
       >
+        {component}
         {text}
       </th>
     )
@@ -42,7 +43,8 @@ TableHeader.propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   textAlign: PropTypes.string,
-  text: PropTypes.string
+  text: PropTypes.string,
+  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 }
 
 TableHeader.defaultProps = {

src/client/containers/TicketsContainer.jsx

@@ -133,29 +133,33 @@ class TicketsContainer extends React.Component {
         statusText = 'Closed'
     }
 
-    each(this.selectedTickets, id => {
-      axios
-        .put(`/api/v1/tickets/${id}`, { status })
-        .then(res => {
-          if (res.data.success) {
-            helpers.UI.showSnackbar({ text: `Ticket status set to ${statusText}` })
-            this._clearChecked()
-          } else {
-            helpers.UI.showSnackbar('An unknown error occurred.', true)
-            Log.error(res.data.error)
-          }
-        })
-        .catch(error => {
-          Log.error(error)
-          helpers.UI.showSnackbar('An Error occurred. Please check console.', true)
-        })
+    const batch = this.selectedTickets.map(id => {
+      return { id, status }
     })
+
+    axios
+      .put(`/api/v2/tickets/batch`, { batch })
+      .then(res => {
+        if (res.data.success) {
+          helpers.UI.showSnackbar({ text: `Ticket status set to ${statusText}` })
+          this._clearChecked()
+        } else {
+          helpers.UI.showSnackbar('An unknown error occurred.', true)
+          Log.error(res.data.error)
+        }
+      })
+      .catch(error => {
+        Log.error(error)
+        helpers.UI.showSnackbar('An Error occurred. Please check console.', true)
+      })
   }
 
   onDeleteClicked () {
     each(this.selectedTickets, id => {
       this.props.deleteTicket({ id })
     })
+
+    this._clearChecked()
   }
 
   onSearchTermChanged (e) {
@@ -183,12 +187,30 @@ class TicketsContainer extends React.Component {
     // }
   }
 
+  _selectAll () {
+    this.selectedTickets = []
+    const checkboxes = this.ticketsTable.querySelectorAll('td > input[type="checkbox"]')
+    checkboxes.forEach(item => {
+      this.selectedTickets.push(item.dataset.ticket)
+      item.checked = true
+    })
+
+    this.selectedTickets = uniq(this.selectedTickets)
+  }
+
   _clearChecked () {
     this.selectedTickets = []
     const checkboxes = this.ticketsTable.querySelectorAll('td > input[type="checkbox"]')
     checkboxes.forEach(item => {
       item.checked = false
     })
+
+    this.selectAllCheckbox.checked = false
+  }
+
+  onSelectAll (e) {
+    if (e.target.checked) this._selectAll()
+    else this._clearChecked()
   }
 
   render () {
@@ -206,6 +228,25 @@ class TicketsContainer extends React.Component {
       loadingItems.push(<TableRow key={Math.random()}>{cells}</TableRow>)
     }
 
+    const selectAllCheckbox = (
+      <div style={{ marginLeft: 17 }}>
+        <input
+          type='checkbox'
+          id={'select_all'}
+          style={{ display: 'none' }}
+          className='svgcheckinput'
+          onChange={e => this.onSelectAll(e)}
+          ref={r => (this.selectAllCheckbox = r)}
+        />
+        <label htmlFor={'select_all'} className='svgcheck'>
+          <svg width='16px' height='16px' viewBox='0 0 18 18'>
+            <path d='M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' />
+            <polyline points='1 9 7 14 15 4' />
+          </svg>
+        </label>
+      </div>
+    )
+
     return (
       <div>
         <PageTitle
@@ -286,7 +327,7 @@ class TicketsContainer extends React.Component {
             stickyHeader={true}
             striped={true}
             headers={[
-              <TableHeader key={0} width={45} height={50} />,
+              <TableHeader key={0} width={45} height={50} component={selectAllCheckbox} />,
               <TableHeader key={1} width={60} text={'Status'} />,
               <TableHeader key={2} width={65} text={'#'} />,
               <TableHeader key={3} width={'23%'} text={'Subject'} />,
@@ -365,6 +406,7 @@ class TicketsContainer extends React.Component {
                       <input
                         type='checkbox'
                         id={`c_${ticket.get('_id')}`}
+                        data-ticket={ticket.get('_id')}
                         style={{ display: 'none' }}
                         onChange={e => this.onTicketCheckChanged(e, ticket.get('_id'))}
                         className='svgcheckinput'

src/client/reducers/ticketsReducer.js

@@ -38,6 +38,9 @@ function hasInView (view, status, assignee, userId, userGroupIds, groupId) {
   let hasView = false
   let hasGroup = false
   switch (view) {
+    case 'filter':
+      hasView = true
+      break
     case 'all':
       hasView = [0, 1, 2, 3].indexOf(status) !== -1
       break

src/controllers/api/v2/routes.js

@@ -34,6 +34,7 @@ module.exports = function (middleware, router, controllers) {
   router.get('/api/v2/tickets', apiv2Auth, apiv2.tickets.get)
   router.post('/api/v2/tickets', apiv2Auth, apiv2.tickets.create)
   router.get('/api/v2/tickets/:uid', apiv2Auth, apiv2.tickets.single)
+  router.put('/api/v2/tickets/batch', apiv2Auth, apiv2.tickets.batchUpdate)
   router.put('/api/v2/tickets/:uid', apiv2Auth, apiv2.tickets.update)
   router.delete('/api/v2/tickets/:uid', apiv2Auth, apiv2.tickets.delete)
 

src/controllers/api/v2/tickets.js

@@ -154,13 +154,46 @@ ticketsV2.update = function (req, res) {
   var putTicket = req.body.ticket
   if (!uid || !putTicket) return apiUtils.sendApiError(res, 400, 'Invalid Parameters')
 
+  // todo: complete this...
   Ticket.getTicketByUid(uid, function (err, ticket) {
     if (err) return apiUtils.sendApiError(res, 500, err.message)
 
     return apiUtils.sendApiSuccess(res, ticket)
   })
 }
 
+ticketsV2.batchUpdate = function (req, res) {
+  var batch = req.body.batch
+  if (!_.isArray(batch)) return apiUtils.sendApiError_InvalidPostData(res)
+
+  async.each(
+    batch,
+    function (batchTicket, next) {
+      Ticket.getTicketById(batchTicket.id, function (err, ticket) {
+        if (err) return next(err)
+
+        if (!_.isUndefined(batchTicket.status)) {
+          ticket.status = batchTicket.status
+          var HistoryItem = {
+            action: 'ticket:set:status',
+            description: 'status set to: ' + batchTicket.status,
+            owner: req.user._id
+          }
+
+          ticket.history.push(HistoryItem)
+        }
+
+        return ticket.save(next)
+      })
+    },
+    function (err) {
+      if (err) return apiUtils.sendApiError(res, 400, err.message)
+
+      return apiUtils.sendApiSuccess(res)
+    }
+  )
+}
+
 ticketsV2.delete = function (req, res) {
   var uid = req.params.uid
   if (!uid) return apiUtils.sendApiError(res, 400, 'Invalid Parameters')

src/emitter/events.js

@@ -373,14 +373,7 @@ var notifications = require('../notifications') // Load Push Events
   }
 
   emitter.on('ticket:updated', function (ticket) {
-    // io.sockets.emit('updateTicketStatus', {
-    //   tid: ticket._id,
-    //   owner: ticket.owner,
-    //   status: ticket.status
-    // })
-
     io.sockets.emit('$trudesk:client:ticket:updated', { ticket: ticket })
-    // io.sockets.emit('ticket:updategrid')
   })
 
   emitter.on('ticket:deleted', function (oId) {