Ivan - Add my tickets department dropdown, fix loading, add filter, merge master[skip ci]

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 {
                 </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>
             ),

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 (
-            <div>
+            <div className="admin-panel-my-tickets">
                 <Header title={i18n('MY_TICKETS')} description={i18n('MY_TICKETS_DESCRIPTION')} />
-                <DropDown {...this.getProps()} />
+                <div className="admin-panel-my-tickets__department-select">
-                <TicketList tickets={this.props.tickets} type="secondary" loading={true} />
+                    <DropDown {...this.getDropdownProps()} />
+                </div>
+                <TicketList {...this.getProps()}/>
             </div>
         );
     }
 
     getProps() {
-        console.log(this.props.tickets);
-
         return {
-            items: this.props.departments.map(function (obj) {
+            tickets: this.getTickets(),
-                return {
+            type: 'secondary',
-                    content: obj.name
+            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);

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

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

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/>
             )
         }
 	],

client/src/core-components/table.scss

@@ -51,6 +51,8 @@
 
     &__loading-wrapper {
         min-height: 200px;
+        position: relative;
+        background-color: $grey;
     }
 
     &__loading {

client/src/core-components/tooltip.scss

@@ -17,6 +17,7 @@
         background-color: #F7F7F7;
         color: black;
         padding: 10px;
+        z-index: 1000;
     }
 
     &__pointer {

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: 2, name: 'Technical Issues'}
-                        {id: 3, name: 'System and Administration'},
-                        {id: 4, name: 'Guillermo\'s department'}
                     ]
                 }
             };
@@ -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: []
                     }
                 ]
             }

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.',

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, {
+        return _.extend({}, state, {
-            myTicketsLoaded: true
+            myTicketsLoaded: false
         })
     }
 }