diff --git a/client/src/actions/admin-data-actions.js b/client/src/actions/admin-data-actions.js
index 624f0b82..f9ac73f7 100644
--- a/client/src/actions/admin-data-actions.js
+++ b/client/src/actions/admin-data-actions.js
@@ -10,5 +10,35 @@ export default {
data: {}
})
};
+ },
+
+ retrieveMyTickets() {
+ return {
+ type: 'MY_TICKETS',
+ payload: API.call({
+ path: '/staff/get-tickets',
+ data: {}
+ })
+ };
+ },
+
+ retrieveNewTickets() {
+ return {
+ type: 'NEW_TICKETS',
+ payload: API.call({
+ path: '/staff/get-new-tickets',
+ data: {}
+ })
+ };
+ },
+
+ retrieveAllTickets() {
+ return {
+ type: 'ALL_TICKETS',
+ payload: API.call({
+ path: '/staff/get-all-tickets',
+ data: {}
+ })
+ };
}
};
\ No newline at end of file
diff --git a/client/src/actions/session-actions.js b/client/src/actions/session-actions.js
index 08c95be8..2d1b7995 100644
--- a/client/src/actions/session-actions.js
+++ b/client/src/actions/session-actions.js
@@ -1,9 +1,8 @@
import API from 'lib-app/api-call';
+import AdminDataActions from 'actions/admin-data-actions';
import sessionStore from 'lib-app/session-store';
import store from 'app/store';
-import ConfigActions from 'actions/config-actions';
-
export default {
login(loginData) {
return {
@@ -13,6 +12,10 @@ export default {
data: loginData
}).then((result) => {
store.dispatch(this.getUserData(result.data.userId, result.data.token, result.data.staff));
+
+ if(result.data.staff) {
+ store.dispatch(AdminDataActions.retrieveCustomResponses());
+ }
return result;
})
diff --git a/client/src/app-components/__tests__/ticket-list-test.js b/client/src/app-components/__tests__/ticket-list-test.js
new file mode 100644
index 00000000..8e591a48
--- /dev/null
+++ b/client/src/app-components/__tests__/ticket-list-test.js
@@ -0,0 +1,188 @@
+const _ = require('lodash');
+const TicketInfo = ReactMock();
+const Table = ReactMock();
+const Button = ReactMock();
+const Tooltip = ReactMock();
+const Dropdown = ReactMock();
+const i18n = stub().returnsArg(0);
+
+const TicketList = requireUnit('app-components/ticket-list', {
+ 'app-components/ticket-info': TicketInfo,
+ 'core-components/table': Table,
+ 'core-components/button': Button,
+ 'core-components/tooltip': Tooltip,
+ 'core-components/drop-down': Dropdown,
+ 'lib-app/i18n': i18n
+});
+
+describe('TicketList component', function () {
+ let ticketList, table, dropdown;
+ let tickets = (function() {
+ let ticket = {
+ unread: false,
+ closed: false,
+ title: 'This is not working',
+ ticketNumber: 123124,
+ date: '20160215',
+ department: {
+ id: 1,
+ name: 'Sales Support'
+ },
+ priority: 'low',
+ author: {
+ id: 3,
+ name: 'Francisco Villegas'
+ }
+ };
+ let list = _.range(5).map(() => ticket);
+
+ list = list.concat(_.range(5).map(() => {
+ return _.extend({}, ticket, {
+ department: {
+ id: 2,
+ name: 'Tech Help'
+ }
+ })
+ }));
+
+ return list;
+ })();
+
+ function renderTicketList(props = {}) {
+ ticketList = TestUtils.renderIntoDocument(
+
+ );
+
+ table = TestUtils.scryRenderedComponentsWithType(ticketList, Table);
+ dropdown = TestUtils.scryRenderedComponentsWithType(ticketList, Dropdown);
+ }
+
+ it('should pass correct props to Table', function () {
+ renderTicketList();
+ expect(table[0].props.loading).to.equal(false);
+ expect(table[0].props.pageSize).to.equal(10);
+ expect(table[0].props.headers).to.deep.equal([
+ {
+ key: 'number',
+ value: i18n('NUMBER'),
+ className: 'ticket-list__number col-md-1'
+ },
+ {
+ key: 'title',
+ value: i18n('TITLE'),
+ className: 'ticket-list__title col-md-6'
+ },
+ {
+ key: 'department',
+ value: i18n('DEPARTMENT'),
+ className: 'ticket-list__department col-md-3'
+ },
+ {
+ key: 'date',
+ value: i18n('DATE'),
+ className: 'ticket-list__date col-md-2'
+ }
+ ]);
+ });
+
+ it('should pass loading to Table', function () {
+ renderTicketList({loading: true});
+ expect(table[0].props.loading).to.equal(true);
+ });
+
+ it('should pass correct compare function to Table', function () {
+ let minCompare = table[0].props.comp;
+
+ let row1 = {
+ closed: false,
+ unread: false,
+ date: '20160405'
+ };
+ let row2 = {
+ closed: false,
+ unread: false,
+ date: '20160406'
+ };
+ expect(minCompare(row1, row2)).to.equal(1);
+
+ row1.unread = true;
+ expect(minCompare(row1, row2)).to.equal(-1);
+
+ row2.unread = true;
+ expect(minCompare(row1, row2)).to.equal(1);
+
+ row2.date = '20160401';
+ expect(minCompare(row1, row2)).to.equal(-1);
+ });
+
+ describe('when using secondary type', function () {
+ beforeEach(function () {
+ renderTicketList({
+ type: 'secondary',
+ departments: [
+ {id: 1, name: 'Sales Support'},
+ {id: 2, name: 'Tech Help'}
+ ]
+ });
+ });
+
+ it('should pass correct props to Table', function () {
+ expect(table[0].props.headers).to.deep.equal([
+ {
+ key: 'number',
+ value: i18n('NUMBER'),
+ className: 'ticket-list__number col-md-1'
+ },
+ {
+ key: 'title',
+ value: i18n('TITLE'),
+ className: 'ticket-list__title col-md-4'
+ },
+ {
+ key: 'priority',
+ value: i18n('PRIORITY'),
+ className: 'ticket-list__priority col-md-1'
+ },
+ {
+ key: 'department',
+ value: i18n('DEPARTMENT'),
+ className: 'ticket-list__department col-md-2'
+ },
+ {
+ key: 'author',
+ value: i18n('AUTHOR'),
+ className: 'ticket-list__author col-md-2'
+ },
+ {
+ key: 'date',
+ value: i18n('DATE'),
+ className: 'ticket-list__date col-md-2'
+ }
+ ]);
+ });
+
+ it('should pass correct props to dropdown', function () {
+ expect(dropdown[0].props.items).to.deep.equal([
+ {content: i18n('ALL_DEPARTMENTS')},
+ {content: 'Sales Support'},
+ {content: 'Tech Help'}
+ ]);
+ expect(dropdown[0].props.size).to.equal('medium');
+ });
+
+ it('should filter tickets by department when DropDown changes', function () {
+ dropdown[0].props.onChange({index: 1});
+ _.forEach(table[0].props.rows, function (row) {
+ expect(row.department).to.equal('Sales Support');
+ });
+
+ dropdown[0].props.onChange({index: 2});
+ _.forEach(table[0].props.rows, function (row) {
+ expect(row.department).to.equal('Tech Help');
+ });
+
+ dropdown[0].props.onChange({index: 0});
+ expect(table[0].props.rows.length).to.equal(10);
+ });
+ });
+});
\ No newline at end of file
diff --git a/client/src/app-components/ticket-event.js b/client/src/app-components/ticket-event.js
index dd99b24c..3130b91a 100644
--- a/client/src/app-components/ticket-event.js
+++ b/client/src/app-components/ticket-event.js
@@ -17,7 +17,7 @@ class TicketEvent extends React.Component {
]),
author: React.PropTypes.object,
content: React.PropTypes.string,
- date: React.PropTypes.number
+ date: React.PropTypes.string
};
render() {
diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js
index 14b8a99f..3f9b2e61 100644
--- a/client/src/app-components/ticket-list.js
+++ b/client/src/app-components/ticket-list.js
@@ -1,16 +1,20 @@
import React from 'react';
+import _ from 'lodash';
import i18n from 'lib-app/i18n';
+import DateTransformer from 'lib-core/date-transformer';
+import TicketInfo from 'app-components/ticket-info';
import Table from 'core-components/table';
import Button from 'core-components/button';
import Tooltip from 'core-components/tooltip';
-import TicketInfo from 'app-components/ticket-info';
-
-import DateTransformer from 'lib-core/date-transformer';
+import DropDown from 'core-components/drop-down';
class TicketList extends React.Component {
static propTypes = {
+ departments: React.PropTypes.array,
+ loading: React.PropTypes.bool,
+ ticketPath: React.PropTypes.string,
tickets: React.PropTypes.arrayOf(React.PropTypes.object),
type: React.PropTypes.oneOf([
'primary',
@@ -19,18 +23,58 @@ class TicketList extends React.Component {
};
static defaultProps = {
+ loading: false,
tickets: [],
+ departments: [],
+ ticketPath: '/dashboard/ticket/',
type: 'primary'
};
+ state = {
+ selectedDepartment: 0
+ };
+
render() {
return (
-
+ {(this.props.type === 'secondary') ? this.renderDepartmentsDropDown() : null}
+
);
}
+ renderDepartmentsDropDown() {
+ return (
+
+
+
+ );
+ }
+
+ getDepartmentDropdownProps() {
+ return {
+ items: this.getDepartments(),
+ onChange: (event) => {
+ this.setState({
+ selectedDepartment: event.index && this.props.departments[event.index - 1].id
+ });
+ },
+ size: 'medium'
+ };
+ }
+
+ getDepartments() {
+ let departments = this.props.departments.map((department) => {
+ return {content: department.name};
+ });
+
+ departments.unshift({
+ content: i18n('ALL_DEPARTMENTS')
+ });
+
+ return departments;
+ }
+
getTableHeaders() {
if (this.props.type == 'primary' ) {
return [
@@ -92,7 +136,13 @@ class TicketList extends React.Component {
}
getTableRows() {
- return this.props.tickets.map(this.gerTicketTableObject.bind(this));
+ return this.getTickets().map(this.gerTicketTableObject.bind(this));
+ }
+
+ getTickets() {
+ return (this.state.selectedDepartment) ? _.filter(this.props.tickets, (ticket) => {
+ return ticket.department.id == this.state.selectedDepartment
+ }) : this.props.tickets;
}
gerTicketTableObject(ticket) {
@@ -105,7 +155,7 @@ class TicketList extends React.Component {
),
title: (
-