Adds a button to filter opened/closed tickets to ticket-list and shows it under 'my-tickets'

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

@@ -9,6 +9,7 @@ import Table from 'core-components/table';
 import Button from 'core-components/button';
 import Tooltip from 'core-components/tooltip';
 import DropDown from 'core-components/drop-down';
+import Checkbox from 'core-components/checkbox';
 
 class TicketList extends React.Component {
     static propTypes = {
@@ -21,7 +22,10 @@ class TicketList extends React.Component {
         type: React.PropTypes.oneOf([
             'primary',
             'secondary'
-        ])
+        ]),
+        showClosedTickets: React.PropTypes.bool,
+        filterClosedTickets: React.PropTypes.bool,
+        onShowClosedTicketsChange: React.PropTypes.func
     };
 
     static defaultProps = {
@@ -30,7 +34,9 @@ class TicketList extends React.Component {
         tickets: [],
         departments: [],
         ticketPath: '/dashboard/ticket/',
-        type: 'primary'
+        type: 'primary',
+        showClosedTickets: false,
+        filterClosedTickets: false
     };
 
     state = {
@@ -40,12 +46,20 @@ class TicketList extends React.Component {
     render() {
         return (
             <div className="ticket-list">
-                {(this.props.type === 'secondary' && this.props.showDepartmentDropdown) ? this.renderDepartmentsDropDown() : null}
+                <div className="ticket-list__filters"> 
+                    {(this.props.type === 'secondary' && this.props.showDepartmentDropdown) ? this.renderDepartmentsDropDown() : null}
+                    {this.props.filterClosedTickets ? this.renderFilterCheckbox() : null}
+                </div>
                 <Table {...this.getTableProps()} />
             </div>
         );
     }
 
+
+    renderFilterCheckbox() {
+        return <Checkbox className="ticket-list__checkbox" label="Show Closed Tickets" value={this.props.showClosedTickets} onChange={this.props.onShowClosedTicketsChange} wrapInLabel/>
+    }
+
     renderDepartmentsDropDown() {
         return (
             <div className="ticket-list__department-selector">

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

@@ -2,10 +2,19 @@
 
 .ticket-list {
 
-    &__department-selector {
+    &__filters {
         margin-bottom: 25px;
     }
 
+    &__department-selector {
+        display: inline-block;
+    }
+
+    &__checkbox {
+        display: inline-block;
+        margin-left: 25px;
+    }
+
     &__number {
         text-align: left;
     }
@@ -52,4 +61,4 @@
     &__priority-high {
         background-color: $primary-red;
     }
-}
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect}  from 'react-redux';
+import _ from 'lodash';
 
 import i18n from 'lib-app/i18n';
 
@@ -21,6 +22,10 @@ class AdminPanelMyTickets extends React.Component {
         tickets: []
     };
 
+    state = {
+        showClosedTickets: false
+    };
+
     componentDidMount() {
         this.props.dispatch(AdminDataAction.retrieveMyTickets());
     }
@@ -39,17 +44,34 @@ class AdminPanelMyTickets extends React.Component {
         );
     }
 
+    filterOpenedTickets(tickets){
+        return _.filter(tickets, (ticket) => {
+            return !ticket.closed
+        });
+    }
+
     getProps() {
         return {
             userId: this.props.userId,
             departments: this.props.departments,
-            tickets: this.props.tickets,
+            tickets: this.state.showClosedTickets ? this.props.tickets : this.filterOpenedTickets(this.props.tickets),
             type: 'secondary',
             loading: this.props.loading,
-            ticketPath: '/admin/panel/tickets/view-ticket/'
+            ticketPath: '/admin/panel/tickets/view-ticket/',
+            filterClosedTickets: true,
+            showClosedTickets: this.state.showClosedTickets,
+            onShowClosedTicketsChange: this.onShowClosedTicketsChange.bind(this) 
         };
     }
 
+    onShowClosedTicketsChange() {
+        this.setState(function(state) {
+            return {
+                showClosedTickets: !state.showClosedTickets
+            };
+        });
+    }
+
     onCreateTicket() {
         ModalContainer.openModal(
             <div>