Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

fixed selectAll in listings

Browse Source
This commit is contained in:
Jonathan Labreuille
2015-09-06 18:07:41 +02:00
parent 0063972a2d
commit 20e88afcd6
5 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/src/listing.styl
View File

@@ -1,2 +1,16 @@
.mailpoet_listing_loading tbody tr
opacity: 0.2;
.widefat tfoot td.mailpoet_check_column,
.widefat thead td.mailpoet_check_column
padding-top: 10px;
.widefat tbody th.mailpoet_check_column,
.widefat tfoot td.mailpoet_check_column,
.widefat thead td.mailpoet_check_column
padding: 11px 0 0 3px;
.widefat .mailpoet_check_column
padding: 6px 0 25px;
vertical-align: top;
width: 2.2em;

2
assets/js/src/listing/bulk_actions.jsx
View File

@@ -14,7 +14,7 @@ define('bulk_actions', ['react'], function(React) {
var action = this.getSelectedAction();
if(action !== null && action['onApply'] !== undefined) {
action.onApply(this.props.selected);
action.onApply();
}
},
getSelectedAction: function() {

2
assets/js/src/listing/groups.jsx
View File

@@ -1,7 +1,7 @@
define('groups', ['react', 'classnames'], function(React, classNames) {
var ListingGroups = React.createClass({
handleSelect: function(group) {
return this.props.onSelect(group);
return this.props.onSelectGroup(group);
},
render: function() {
var count = this.props.groups.length;

15
assets/js/src/listing/header.jsx
View File

@@ -2,7 +2,7 @@ define('header', ['react', 'classnames'], function(React, classNames) {
/*
props:
onSort: callback(sort_by, sort_order)
onSelectAll: callback(is_checked)
onSelectItems: callback(is_checked)
sort_by: (string) field name
columns -> (array)
column -> {
@@ -13,9 +13,9 @@ define('header', ['react', 'classnames'], function(React, classNames) {
}
*/
var ListingHeader = React.createClass({
handleSelectAll: function() {
return this.props.onSelectAll(
this.refs.select_all.getDOMNode().checked
handleSelectItems: function() {
return this.props.onSelectItems(
this.refs.toggle.getDOMNode().checked
);
},
render: function() {
@@ -32,14 +32,15 @@ define('header', ['react', 'classnames'], function(React, classNames) {
return (
<tr>
<td className="manage-column column-cb check-column" id="cb">
<td className="manage-column column-cb mailpoet_check_column">
<label className="screen-reader-text">
{ 'Select All' }
</label>
<input
type="checkbox"
ref="select_all"
onChange={this.handleSelectAll} />
ref="toggle"
checked={ this.props.selected }
onChange={ this.handleSelectItems } />
</td>
{columns}
</tr>

82
assets/js/src/listing/listing.jsx
View File

@@ -25,10 +25,10 @@ define(
ListingFilters
) {
var ListingItem = React.createClass({
handleSelect: function(e) {
handleSelectItem: function(e) {
var is_checked = jQuery(e.target).is(':checked');
this.props.onSelect(
this.props.onSelectItem(
parseInt(e.target.value, 10),
is_checked
);
@@ -38,14 +38,14 @@ define(
render: function() {
return (
<tr>
<th className="check-column" scope="row">
<th className="mailpoet_check_column" scope="row">
<label className="screen-reader-text">
{ 'Select ' + this.props.item.email }</label>
<input
type="checkbox"
defaultValue={ this.props.item.id }
defaultChecked={ this.props.item.selected }
onChange={ this.handleSelect } />
checked={ this.props.item.selected }
onChange={ this.handleSelectItem } />
</th>
{ this.props.onRenderItem(this.props.item) }
</tr>
@@ -76,11 +76,13 @@ define(
return (
<tbody>
{this.props.items.map(function(item) {
item.selected = (this.props.selected.indexOf(item.id) !== -1);
item.id = parseInt(item.id, 10);
item.selected = (this.props.selected_ids.indexOf(item.id) !== -1);
return (
<ListingItem
columns={ this.props.columns }
onSelect={ this.props.onSelect }
onSelectItem={ this.props.onSelectItem }
onRenderItem={ this.props.onRenderItem }
key={ 'item-' + item.id }
item={ item } />
@@ -106,7 +108,8 @@ define(
groups: [],
group: 'all',
filters: [],
selected: []
selected_ids: [],
selected: false
};
},
componentDidMount: function() {
@@ -131,18 +134,37 @@ define(
this.getItems();
}.bind(this));
},
handleSelect: function(id, is_checked) {
var selected = this.state.selected;
handleSelectItem: function(id, is_checked) {
var selected_ids = this.state.selected_ids;
if(is_checked) {
selected = jQuery.merge(selected, [ id ]);
selected_ids = jQuery.merge(selected_ids, [ id ]);
} else {
selected.splice(selected.indexOf(id), 1);
selected_ids.splice(selected_ids.indexOf(id), 1);
}
this.setState({
selected: selected
selected: false,
selected_ids: selected_ids
});
},
handleSelectItems: function(is_checked) {
if(is_checked === false) {
this.setState({
selected_ids: [],
selected: false
});
} else {
var selected_ids = this.state.items.map(function(item) {
return ~~item.id;
});
this.setState({
selected_ids: selected_ids,
selected: 'page'
});
}
},
handleGroup: function(group) {
// reset search
jQuery('#search_input').val('');
@@ -150,26 +172,14 @@ define(
this.setState({
group: group,
filters: [],
selected: [],
selected: false,
selected_ids: [],
search: '',
page: 1
}, function() {
this.getItems();
}.bind(this));
},
handleSelectAll: function(is_checked) {
if(is_checked === false) {
this.setState({ selected: [] });
} else {
var selected = this.state.items.map(function(item) {
return ~~item.id;
});
this.setState({
selected: selected
});
}
},
handleSetPage: function(page) {
this.setState({ page: page }, function() {
this.getItems();
@@ -201,14 +211,13 @@ define(
<ListingGroups
groups={ this.state.groups }
selected={ this.state.group }
onSelect={ this.handleGroup } />
onSelectGroup={ this.handleGroup } />
<ListingSearch
onSearch={ this.handleSearch }
search={ this.state.search } />
<div className="tablenav top clearfix">
<ListingBulkActions
actions={ this.props.actions }
selected={ this.state.selected } />
actions={ this.props.actions } />
<ListingFilters filters={ this.state.filters } />
<ListingPages
count={ this.state.count }
@@ -220,7 +229,8 @@ define(
<thead>
<ListingHeader
onSort={ this.handleSort }
onSelectAll={ this.handleSelectAll }
onSelectItems={ this.handleSelectItems }
selected={ this.state.selected }
sort_by={ this.state.sort_by }
sort_order={ this.state.sort_order }
columns={ this.props.columns } />
@@ -229,15 +239,16 @@ define(
<ListingItems
onRenderItem={ this.handleRenderItem }
columns={ this.props.columns }
selected={ this.state.selected }
onSelect={ this.handleSelect }
onSelectItem={ this.handleSelectItem }
selected_ids={ this.state.selected_ids }
loading= { this.state.loading }
items={ items } />
<tfoot>
<ListingHeader
onSort={ this.handleSort }
onSelectAll={ this.handleSelectAll }
onSelectItems={ this.handleSelectItems }
selected={ this.state.selected }
sort_by={ this.state.sort_by }
sort_order={ this.state.sort_order }
columns={ this.props.columns } />
@@ -246,8 +257,7 @@ define(
</table>
<div className="tablenav bottom">
<ListingBulkActions
actions={ this.props.actions }
selected={ this.state.selected } />
actions={ this.props.actions } />
<ListingPages
count={ this.state.count }
page={ this.state.page }