Ivan - Add all tickets and new tickets[skip ci]

client/src/actions/admin-data-actions.js

@@ -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: {}
+            })
+        };
     }
 };

client/src/app-components/ticket-list.js

@@ -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 DropDown from 'core-components/drop-down';
-
-import DateTransformer from 'lib-core/date-transformer';
 
 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) {

client/src/app-components/ticket-list.scss

@@ -0,0 +1,5 @@
+.ticket-list {
+    &__department-selector {
+        margin-bottom: 25px;
+    }
+}

client/src/app/admin/panel/tickets/admin-panel-all-tickets.js

@@ -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>
+            <div className="admin-panel-my-tickets">
-                /admin/panel/tickets/all-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);

client/src/app/admin/panel/tickets/admin-panel-my-tickets.js

@@ -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) => {

client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss

@@ -1,6 +0,0 @@
-.admin-panel-my-tickets {
-
-    &__department-select {
-        margin-bottom: 25px;
-    }
-}

client/src/app/admin/panel/tickets/admin-panel-new-tickets.js

@@ -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>
+            <div className="admin-panel-my-tickets">
-                /admin/panel/tickets/new-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);

client/src/data/fixtures/staff-fixtures.js

@@ -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: []
+                    }
+                ]
+            }
+        }
     }
 ];

client/src/data/languages/en.js

@@ -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

client/src/reducers/admin-data-reducer.js

@@ -7,10 +7,14 @@ class AdminDataReducer extends Reducer {
 
     getInitialState() {
         return {
+            customResponses: [],
+            customResponsesLoaded: false,
             myTickets: [],
             myTicketsLoaded: false,
-            customResponses: [],
+            newTickets: [],
-            customResponsesLoaded: false
+            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();