Ivan - Add my tickets department dropdown, fix loading, add filter, merge master[skip ci]
This commit is contained in:
parent
22cd244846
commit
3179b29158
|
@ -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 {
|
|||
</Tooltip>
|
||||
),
|
||||
title: (
|
||||
<Button className="ticket-list__title-link" type="clean" route={{to: '/dashboard/ticket/' + ticket.ticketNumber}}>
|
||||
<Button className="ticket-list__title-link" type="clean" route={{to: this.props.ticketPath + ticket.ticketNumber}}>
|
||||
{titleText}
|
||||
</Button>
|
||||
),
|
||||
|
|
|
@ -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 (
|
||||
<div>
|
||||
<div className="admin-panel-my-tickets">
|
||||
<Header title={i18n('MY_TICKETS')} description={i18n('MY_TICKETS_DESCRIPTION')} />
|
||||
<DropDown {...this.getProps()} />
|
||||
<TicketList tickets={this.props.tickets} type="secondary" loading={true} />
|
||||
<div className="admin-panel-my-tickets__department-select">
|
||||
<DropDown {...this.getDropdownProps()} />
|
||||
</div>
|
||||
<TicketList {...this.getProps()}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
.admin-panel-my-tickets {
|
||||
|
||||
&__department-select {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
|
@ -166,7 +166,7 @@ let DemoPage = React.createClass({
|
|||
else if(a.title1 > b.title1)
|
||||
ans = 1;
|
||||
return ans;
|
||||
}}/>
|
||||
}} loading/>
|
||||
)
|
||||
}
|
||||
],
|
||||
|
|
|
@ -51,6 +51,8 @@
|
|||
|
||||
&__loading-wrapper {
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
background-color: #F7F7F7;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
&__pointer {
|
||||
|
|
|
@ -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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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.',
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue