From 3179b29158b51d28cb1915f6e5dc101a90503dd3 Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 28 Oct 2016 03:28:11 -0300 Subject: [PATCH] Ivan - Add my tickets department dropdown, fix loading, add filter, merge master[skip ci] --- client/src/app-components/ticket-list.js | 4 +- .../panel/tickets/admin-panel-my-tickets.js | 69 ++++++++++++++++--- .../panel/tickets/admin-panel-my-tickets.scss | 6 ++ client/src/app/demo/components-demo-page.js | 2 +- client/src/core-components/table.scss | 2 + client/src/core-components/tooltip.scss | 1 + client/src/data/fixtures/staff-fixtures.js | 44 +++++++++--- client/src/data/languages/en.js | 1 + client/src/reducers/admin-data-reducer.js | 8 +-- 9 files changed, 110 insertions(+), 27 deletions(-) create mode 100644 client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js index 7fe0f5d0..e9c140fd 100644 --- a/client/src/app-components/ticket-list.js +++ b/client/src/app-components/ticket-list.js @@ -12,6 +12,7 @@ import DateTransformer from 'lib-core/date-transformer'; class TicketList extends React.Component { static propTypes = { loading: React.PropTypes.bool, + ticketPath: React.PropTypes.string, tickets: React.PropTypes.arrayOf(React.PropTypes.object), type: React.PropTypes.oneOf([ 'primary', @@ -21,6 +22,7 @@ class TicketList extends React.Component { static defaultProps = { tickets: [], + ticketPath: '/dashboard/ticket/', type: 'primary' }; @@ -106,7 +108,7 @@ class TicketList extends React.Component { ), title: ( - ), diff --git a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js index 02f5fc80..95e3214f 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js +++ b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js @@ -1,4 +1,5 @@ import React from 'react'; +import _ from 'lodash'; import {connect} from 'react-redux'; import i18n from 'lib-app/i18n'; @@ -9,6 +10,15 @@ import DropDown from 'core-components/drop-down'; import TicketList from 'app-components/ticket-list'; class AdminPanelMyTickets extends React.Component { + + static defaultProps = { + departments: [], + tickets: [] + }; + + state = { + selectedDepartment: 0 + }; componentDidMount() { this.props.dispatch(AdminDataAction.retrieveMyTickets()); @@ -16,31 +26,68 @@ class AdminPanelMyTickets extends React.Component { render() { return ( -
+
- - +
+ +
+
); } getProps() { - console.log(this.props.tickets); - return { - items: this.props.departments.map(function (obj) { - return { - content: obj.name - }; - }), + tickets: this.getTickets(), + type: 'secondary', + loading: this.props.loading, + ticketPath: '/admin/panel/tickets/view-ticket/' + }; + } + + getDropdownProps() { + return { + items: this.getDepartments(), + onChange: this.changeSelectedDepartment.bind(this), size: 'medium' }; } + + getTickets() { + return (this.state.selectedDepartment) ? _.filter(this.props.tickets, (ticket) => { + return ticket.department.id == this.state.selectedDepartment + }) : this.props.tickets; + } + + getDepartments() { + let departments = this.props.departments.map((department) => { + return {content: department.name}; + }); + + departments.unshift({ + content: i18n('ALL_DEPARTMENTS') + }); + + return departments; + } + + changeSelectedDepartment(event) { + if(event.index === 0) { + this.setState({ + selectedDepartment: 0 + }); + } else { + this.setState({ + selectedDepartment: this.props.departments[event.index - 1].id + }); + } + } } export default connect((store) => { return { departments: store.session.userDepartments, - tickets: store.adminData.myTickets + tickets: store.adminData.myTickets, + loading: !store.adminData.myTicketsLoaded }; })(AdminPanelMyTickets); diff --git a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss new file mode 100644 index 00000000..1a79e191 --- /dev/null +++ b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss @@ -0,0 +1,6 @@ +.admin-panel-my-tickets { + + &__department-select { + margin-bottom: 25px; + } +} \ No newline at end of file diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 1d5da38f..a2dd7b7f 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -166,7 +166,7 @@ let DemoPage = React.createClass({ else if(a.title1 > b.title1) ans = 1; return ans; - }}/> + }} loading/> ) } ], diff --git a/client/src/core-components/table.scss b/client/src/core-components/table.scss index 62dd409c..54a73615 100644 --- a/client/src/core-components/table.scss +++ b/client/src/core-components/table.scss @@ -51,6 +51,8 @@ &__loading-wrapper { min-height: 200px; + position: relative; + background-color: $grey; } &__loading { diff --git a/client/src/core-components/tooltip.scss b/client/src/core-components/tooltip.scss index 50bd126d..bbe42bdb 100644 --- a/client/src/core-components/tooltip.scss +++ b/client/src/core-components/tooltip.scss @@ -17,6 +17,7 @@ background-color: #F7F7F7; color: black; padding: 10px; + z-index: 1000; } &__pointer { diff --git a/client/src/data/fixtures/staff-fixtures.js b/client/src/data/fixtures/staff-fixtures.js index 69272f39..5b94d0b1 100644 --- a/client/src/data/fixtures/staff-fixtures.js +++ b/client/src/data/fixtures/staff-fixtures.js @@ -13,9 +13,7 @@ module.exports = [ staff: true, departments: [ {id: 1, name: 'Sales Support'}, - {id: 2, name: 'Technical Issues'}, - {id: 3, name: 'System and Administration'}, - {id: 4, name: 'Guillermo\'s department'} + {id: 2, name: 'Technical Issues'} ] } }; @@ -23,7 +21,7 @@ module.exports = [ }, { path: '/staff/get-tickets', - time: 2000, + time: 300, response: function () { return { status: 'success', @@ -34,7 +32,7 @@ module.exports = [ content: 'I had a problem with the installation of the php server', department: { id: 2, - name: 'Environment Setup' + name: 'Technical Issues' }, date: '20160416', file: 'http://www.opensupports.com/some_file.zip', @@ -52,7 +50,7 @@ module.exports = [ name: 'Steve Jobs', email: 'steve@jobs.com' }, - actions: [ + events: [ { type: 'ASSIGN', date: '20150409', @@ -153,7 +151,7 @@ module.exports = [ content: 'I had a problem with the installation of the php server', department: { id: 2, - name: 'Environment Setup' + name: 'Technical Issues' }, date: '20160415', file: 'http://www.opensupports.com/some_file.zip', @@ -168,7 +166,7 @@ module.exports = [ owner: { name: 'Steve Jobs' }, - actions: [ + events: [ { type: 'ASSIGN', date: '20150409', @@ -269,7 +267,7 @@ module.exports = [ content: 'I had a problem with the installation of the php server', department: { id: 2, - name: 'Environment Setup' + name: 'Technical Issues' }, date: '20150409', file: 'http://www.opensupports.com/some_file.zip', @@ -284,7 +282,7 @@ module.exports = [ owner: { name: 'Steve Jobs' }, - actions: [ + events: [ { type: 'ASSIGN', date: '20150409', @@ -378,6 +376,32 @@ module.exports = [ } } ] + }, + { + ticketNumber: '445441', + title: 'Inscription ACM ICPC', + content: 'I had a problem with the installation of the php server', + department: { + id: 1, + name: 'Sales Support' + }, + date: '20160416', + file: 'http://www.opensupports.com/some_file.zip', + language: 'en', + unread: false, + closed: false, + priority: 'low', + author: { + id: 12, + name: 'Haskell Curry', + email: 'haskell@lambda.com' + }, + owner: { + id: 15, + name: 'Steve Jobs', + email: 'steve@jobs.com' + }, + events: [] } ] } diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 338452aa..93501689 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -72,6 +72,7 @@ export default { 'UN_ASSIGN': 'Unassign', 'VIEW_TICKET': 'View Ticket', 'SELECT_CUSTOM_RESPONSE': 'Select a custom response...', + 'ALL_DEPARTMENTS': 'All Departments', //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.', diff --git a/client/src/reducers/admin-data-reducer.js b/client/src/reducers/admin-data-reducer.js index d0695811..32e2fe24 100644 --- a/client/src/reducers/admin-data-reducer.js +++ b/client/src/reducers/admin-data-reducer.js @@ -17,7 +17,7 @@ class AdminDataReducer extends Reducer { getTypeHandlers() { return { 'CUSTOM_RESPONSES_FULFILLED': this.onCustomResponses, - 'SESSION_CHECKED': this.onSessionChecked + 'SESSION_CHECKED': this.onSessionChecked, 'MY_TICKETS_FULFILLED': this.onMyTicketsRetrieved, 'MY_TICKETS_PENDING': this.onMyTicketsPending }; @@ -44,13 +44,13 @@ class AdminDataReducer extends Reducer { onMyTicketsRetrieved(state, payload) { return _.extend({}, state, { myTickets: payload.data, - customResponsesLoaded: true + myTicketsLoaded: true }) } onMyTicketsPending(state) { - return _.extennd({}, state, { - myTicketsLoaded: true + return _.extend({}, state, { + myTicketsLoaded: false }) } }