mirror of
https://github.com/opensupports/opensupports.git
synced 2025-07-28 00:04:31 +02:00
Ivan - Add all tickets and new tickets[skip ci]
This commit is contained in:
parent
343b455905
commit
1966697a21
@ -20,5 +20,25 @@ export default {
|
||||
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: {}
|
||||
})
|
||||
};
|
||||
}
|
||||
};
|
@ -1,16 +1,19 @@
|
||||
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),
|
||||
@ -26,14 +29,51 @@ class TicketList extends React.Component {
|
||||
type: 'primary'
|
||||
};
|
||||
|
||||
state = {
|
||||
selectedDepartment: 0
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="ticket-list">
|
||||
{(this.props.type === 'secondary') ? this.renderDepartmentsDropDown() : null}
|
||||
<Table loading={this.props.loading} headers={this.getTableHeaders()} rows={this.getTableRows()} pageSize={10} comp={this.compareFunction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderDepartmentsDropDown() {
|
||||
return (
|
||||
<div className="ticket-list__department-selector">
|
||||
<DropDown {...this.getDepartmentDropdownProps()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 [
|
||||
@ -95,7 +135,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) {
|
||||
|
5
client/src/app-components/ticket-list.scss
Normal file
5
client/src/app-components/ticket-list.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.ticket-list {
|
||||
&__department-selector {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
@ -1,14 +1,47 @@
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
|
||||
import AdminDataAction from 'actions/admin-data-actions';
|
||||
import Header from 'core-components/header';
|
||||
import TicketList from 'app-components/ticket-list';
|
||||
|
||||
class AdminPanelAllTickets extends React.Component {
|
||||
|
||||
static defaultProps = {
|
||||
departments: [],
|
||||
tickets: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(AdminDataAction.retrieveAllTickets());
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
/admin/panel/tickets/all-tickets
|
||||
<div className="admin-panel-my-tickets">
|
||||
<Header title={i18n('ALL_TICKETS')} description={i18n('ALL_TICKETS_DESCRIPTION')} />
|
||||
<TicketList {...this.getProps()}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getProps() {
|
||||
return {
|
||||
departments: this.props.departments,
|
||||
tickets: this.props.tickets,
|
||||
type: 'secondary',
|
||||
loading: this.props.loading,
|
||||
ticketPath: '/admin/panel/tickets/view-ticket/'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminPanelAllTickets;
|
||||
export default connect((store) => {
|
||||
return {
|
||||
departments: store.session.userDepartments,
|
||||
tickets: store.adminData.newTickets,
|
||||
loading: !store.adminData.newTicketsLoaded
|
||||
};
|
||||
})(AdminPanelAllTickets);
|
||||
|
@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
|
||||
import AdminDataAction from 'actions/admin-data-actions';
|
||||
import Header from 'core-components/header';
|
||||
import DropDown from 'core-components/drop-down';
|
||||
import TicketList from 'app-components/ticket-list';
|
||||
|
||||
class AdminPanelMyTickets extends React.Component {
|
||||
@ -16,10 +14,6 @@ class AdminPanelMyTickets extends React.Component {
|
||||
tickets: []
|
||||
};
|
||||
|
||||
state = {
|
||||
selectedDepartment: 0
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(AdminDataAction.retrieveMyTickets());
|
||||
}
|
||||
@ -28,9 +22,6 @@ class AdminPanelMyTickets extends React.Component {
|
||||
return (
|
||||
<div className="admin-panel-my-tickets">
|
||||
<Header title={i18n('MY_TICKETS')} description={i18n('MY_TICKETS_DESCRIPTION')} />
|
||||
<div className="admin-panel-my-tickets__department-select">
|
||||
<DropDown {...this.getDropdownProps()} />
|
||||
</div>
|
||||
<TicketList {...this.getProps()}/>
|
||||
</div>
|
||||
);
|
||||
@ -38,50 +29,13 @@ class AdminPanelMyTickets extends React.Component {
|
||||
|
||||
getProps() {
|
||||
return {
|
||||
tickets: this.getTickets(),
|
||||
departments: this.props.departments,
|
||||
tickets: this.props.tickets,
|
||||
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) => {
|
||||
|
@ -1,6 +0,0 @@
|
||||
.admin-panel-my-tickets {
|
||||
|
||||
&__department-select {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
@ -1,14 +1,47 @@
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
|
||||
import AdminDataAction from 'actions/admin-data-actions';
|
||||
import Header from 'core-components/header';
|
||||
import TicketList from 'app-components/ticket-list';
|
||||
|
||||
class AdminPanelNewTickets extends React.Component {
|
||||
|
||||
static defaultProps = {
|
||||
departments: [],
|
||||
tickets: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(AdminDataAction.retrieveNewTickets());
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
/admin/panel/tickets/new-tickets
|
||||
<div className="admin-panel-my-tickets">
|
||||
<Header title={i18n('NEW_TICKETS')} description={i18n('NEW_TICKETS_DESCRIPTION')} />
|
||||
<TicketList {...this.getProps()}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getProps() {
|
||||
return {
|
||||
departments: this.props.departments,
|
||||
tickets: this.props.tickets,
|
||||
type: 'secondary',
|
||||
loading: this.props.loading,
|
||||
ticketPath: '/admin/panel/tickets/view-ticket/'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminPanelNewTickets;
|
||||
export default connect((store) => {
|
||||
return {
|
||||
departments: store.session.userDepartments,
|
||||
tickets: store.adminData.newTickets,
|
||||
loading: !store.adminData.newTicketsLoaded
|
||||
};
|
||||
})(AdminPanelNewTickets);
|
||||
|
@ -406,5 +406,183 @@ module.exports = [
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/staff/get-new-tickets',
|
||||
time: 300,
|
||||
response: function () {
|
||||
return {
|
||||
status: 'success',
|
||||
data: [
|
||||
{
|
||||
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: true,
|
||||
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: []
|
||||
},
|
||||
{
|
||||
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: true,
|
||||
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: []
|
||||
},
|
||||
{
|
||||
ticketNumber: '445441',
|
||||
title: 'Code jam is awesome',
|
||||
content: 'I had a problem with the installation of the php server',
|
||||
department: {
|
||||
id: 2,
|
||||
name: 'Technical Issues'
|
||||
},
|
||||
date: '20160416',
|
||||
file: 'http://www.opensupports.com/some_file.zip',
|
||||
language: 'en',
|
||||
unread: true,
|
||||
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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/staff/get-all-tickets',
|
||||
time: 300,
|
||||
response: function () {
|
||||
return {
|
||||
status: 'success',
|
||||
data: [
|
||||
{
|
||||
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: true,
|
||||
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: []
|
||||
},
|
||||
{
|
||||
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: true,
|
||||
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: []
|
||||
},
|
||||
{
|
||||
ticketNumber: '445441',
|
||||
title: 'Code jam is awesome',
|
||||
content: 'I had a problem with the installation of the php server',
|
||||
department: {
|
||||
id: 2,
|
||||
name: 'Technical Issues'
|
||||
},
|
||||
date: '20160416',
|
||||
file: 'http://www.opensupports.com/some_file.zip',
|
||||
language: 'en',
|
||||
unread: true,
|
||||
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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
@ -83,6 +83,8 @@ export default {
|
||||
'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
|
||||
'CUSTOM_RESPONSES_DESCRIPTION': 'Custom responses are automated responses for common problems',
|
||||
'MY_TICKETS_DESCRIPTION': 'Here you can view the tickets you are responsible for.',
|
||||
'NEW_TICKETS_DESCRIPTION': 'Here you can view all the new tickets that are not assigned by anyone.',
|
||||
'ALL_TICKETS_DESCRIPTION': 'Here you can view the tickets of the departments you are assigned.',
|
||||
'TICKET_VIEW_DESCRIPTION': 'This ticket has been sent by a customer. Here you can respond or assign the ticket',
|
||||
|
||||
//ERRORS
|
||||
|
@ -7,10 +7,14 @@ class AdminDataReducer extends Reducer {
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
customResponses: [],
|
||||
customResponsesLoaded: false,
|
||||
myTickets: [],
|
||||
myTicketsLoaded: false,
|
||||
customResponses: [],
|
||||
customResponsesLoaded: false
|
||||
newTickets: [],
|
||||
newTicketsLoaded: false,
|
||||
allTickets: [],
|
||||
allTicketsLoaded: false
|
||||
};
|
||||
}
|
||||
|
||||
@ -19,7 +23,11 @@ class AdminDataReducer extends Reducer {
|
||||
'CUSTOM_RESPONSES_FULFILLED': this.onCustomResponses,
|
||||
'SESSION_CHECKED': this.onSessionChecked,
|
||||
'MY_TICKETS_FULFILLED': this.onMyTicketsRetrieved,
|
||||
'MY_TICKETS_PENDING': this.onMyTicketsPending
|
||||
'MY_TICKETS_PENDING': this.onMyTicketsPending,
|
||||
'NEW_TICKETS_FULFILLED': this.onNewTicketsRetrieved,
|
||||
'NEW_TICKETS_PENDING': this.onNewTicketsPending,
|
||||
'ALL_TICKETS_FULFILLED': this.onAllTicketsRetrieved,
|
||||
'ALL_TICKETS_PENDING': this.onAllTicketsPending
|
||||
};
|
||||
}
|
||||
|
||||
@ -53,6 +61,32 @@ class AdminDataReducer extends Reducer {
|
||||
myTicketsLoaded: false
|
||||
})
|
||||
}
|
||||
|
||||
onNewTicketsRetrieved(state, payload) {
|
||||
return _.extend({}, state, {
|
||||
newTickets: payload.data,
|
||||
newTicketsLoaded: true
|
||||
})
|
||||
}
|
||||
|
||||
onNewTicketsPending(state) {
|
||||
return _.extend({}, state, {
|
||||
newTicketsLoaded: false
|
||||
})
|
||||
}
|
||||
|
||||
onAllTicketsRetrieved(state, payload) {
|
||||
return _.extend({}, state, {
|
||||
allTickets: payload.data,
|
||||
allTicketsLoaded: true
|
||||
})
|
||||
}
|
||||
|
||||
onAllTicketsPending(state) {
|
||||
return _.extend({}, state, {
|
||||
allTicketsLoaded: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminDataReducer.getInstance();
|
Loading…
x
Reference in New Issue
Block a user