diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js index c3d95be4..9739e4ce 100644 --- a/client/src/app-components/ticket-list.js +++ b/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 (
- {(this.props.type === 'secondary' && this.props.showDepartmentDropdown) ? this.renderDepartmentsDropDown() : null} +
+ {(this.props.type === 'secondary' && this.props.showDepartmentDropdown) ? this.renderDepartmentsDropDown() : null} + {this.props.filterClosedTickets ? this.renderFilterCheckbox() : null} +
); } + + renderFilterCheckbox() { + return + } + renderDepartmentsDropDown() { return (
diff --git a/client/src/app-components/ticket-list.scss b/client/src/app-components/ticket-list.scss index e0cb9ceb..7e8c6d81 100644 --- a/client/src/app-components/ticket-list.scss +++ b/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; } -} \ No newline at end of file +} diff --git a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js index 2b85418b..35c47b26 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js +++ b/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(