From 097b638e6bca4b24de1123d8f823c47dfca33b17 Mon Sep 17 00:00:00 2001 From: Jonathan Labreuille Date: Tue, 25 Aug 2015 18:51:47 +0200 Subject: [PATCH] cleanup --- assets/css/src/admin.styl | 9 +- assets/js/src/subscribers/listing.jsx | 167 ++++++++++++++++++-------- assets/js/src/subscribers/table.jsx | 47 +++++++- lib/Config/Initializer.php | 1 + lib/Router/Subscribers.php | 21 +++- views/subscribers.html | 3 +- webpack.config.js | 3 +- 7 files changed, 182 insertions(+), 69 deletions(-) diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index ca620220fd..3574d36e50 100644 --- a/assets/css/src/admin.styl +++ b/assets/css/src/admin.styl @@ -7,11 +7,4 @@ @require 'notice' @require 'validation_engine' -@require 'form_editor' - - -.infinite-scroll-example__scrollable-parent { - height: 500px; - overflow-y: scroll; - position: relative; -} \ No newline at end of file +@require 'form_editor' \ No newline at end of file diff --git a/assets/js/src/subscribers/listing.jsx b/assets/js/src/subscribers/listing.jsx index 63ee998b90..de2e036d32 100644 --- a/assets/js/src/subscribers/listing.jsx +++ b/assets/js/src/subscribers/listing.jsx @@ -40,10 +40,11 @@ define('subscribers.listing', + id="search_input" + defaultValue={this.props.search} />

@@ -60,10 +61,80 @@ define('subscribers.listing', }); var ListingPages = React.createClass({ + setFirstPage: function() { + this.props.onSetPage(1); + }, + setLastPage: function() { + var last_page = Math.ceil(this.props.count / this.props.limit); + this.props.onSetPage(last_page); + }, + setPreviousPage: function() { + this.props.onSetPage(this.getPageValue(this.props.page - 1)); + }, + setNextPage: function() { + this.props.onSetPage(this.getPageValue(this.props.page + 1)); + }, + getPageValue: function(page) { + var last_page = Math.ceil(this.props.count / this.props.limit); + return Math.min(Math.max(1, Math.abs(~~page)), last_page); + }, + handleSetPage: function() { + this.props.onSetPage( + this.getPageValue(this.refs.page.getDOMNode().value) + ); + }, render: function() { return (
- {this.props.items.length} item(s) + {this.props.count} item(s) + + + + First page + + + + Previous page + + + + + + +  of  + + {Math.ceil(this.props.count / this.props.limit)} + + + + + Next page + + + + Last page + + +
); } @@ -148,7 +219,7 @@ define('subscribers.listing', Select { this.props.item.email } @@ -205,6 +276,7 @@ define('subscribers.listing', return { search: '', page: 1, + count: 0, limit: 10, sort_by: 'email', sort_order: 'asc', @@ -218,52 +290,47 @@ define('subscribers.listing', MailPoet.Ajax.post({ endpoint: 'subscribers', action: 'get', + data: { + offset: (this.state.page - 1) * this.state.limit, + limit: this.state.limit, + search: this.state.search, + sort_by: this.state.sort_by, + sort_order: this.state.sort_order + }, onSuccess: function(response) { if(this.isMounted()) { this.setState({ - items: response + items: response.items, + count: response.count }); } }.bind(this) }); }, handleSearch: function(search) { - this.setState({ search: search }); + this.setState({ search: search }, function() { + this.getItems(); + }.bind(this)); }, handleSort: function(sort_by, sort_order = 'asc') { this.setState({ sort_by: sort_by, sort_order: sort_order - }); + }, function() { + this.getItems(); + }.bind(this)); + }, + handleSetPage: function(page) { + this.setState({ page: page }, function() { + this.getItems(); + }.bind(this)); }, render: function() { var items = this.state.items, - search = this.state.search.trim().toLowerCase(), sort_by = this.state.sort_by, sort_order = this.state.sort_order; - // search - if(search.length > 0) { - items = items.filter(function(item){ - return item.email.toLowerCase().match(search) - || item.first_name.toLowerCase().match(search) - || item.last_name.toLowerCase().match(search); - }); - } - - // sorting - items = items.sort(function(a, b) { - if(a[sort_by] === b[sort_by]) { - return 0; - } else { - if(sort_order === 'asc') { - return (a[sort_by] > b[sort_by]) ? 1 : -1; - } else { - return (a[sort_by] < b[sort_by]) ? 1 : -1; - } - } - }); - + // set sortable columns columns = columns.map(function(column) { column.sorted = (column.name === sort_by) ? sort_order : false; return column; @@ -271,10 +338,18 @@ define('subscribers.listing', return (
- + +
- - + + +
@@ -299,8 +374,12 @@ define('subscribers.listing',
- - + +
); @@ -324,10 +403,6 @@ define('subscribers.listing', label: 'Lastname', sortable: true }, - { - name: 'status', - label: 'Status' - }, { name: 'created_at', label: 'Subscribed on', @@ -349,16 +424,4 @@ define('subscribers.listing', ); } } -); -/* - - - - - - - - - - -*/ \ No newline at end of file +); \ No newline at end of file diff --git a/assets/js/src/subscribers/table.jsx b/assets/js/src/subscribers/table.jsx index 79dfa09129..92575528b1 100644 --- a/assets/js/src/subscribers/table.jsx +++ b/assets/js/src/subscribers/table.jsx @@ -42,10 +42,50 @@ define('subscribers.table', }; }, + _renderLoadingMessage: function() { + if (this.state.loading) { + return ( +

+ Loading {this.state.limit} more items +

+ ); + } else { + return ( +

{this.state.items.length} items

+ ); + } + }, + _renderItems: function() { return this.state.items.map(function(subscriber, index) { return ( -

{subscriber.email}

+ + + + + + + + { subscriber.email } + + + + { subscriber.first_name } + + + { subscriber.last_name } + + + { subscriber.created_at } + + + { subscriber.updated_at } + + ); }); }, @@ -55,16 +95,15 @@ define('subscribers.table', return ( + threshold={0.8} /> ); } }, render: function() { - //MailPoet.Modal.loading(this.state.loading); return (
-

{this.state.items.length} items

+ {this._renderLoadingMessage()}
{this._renderItems()} diff --git a/lib/Config/Initializer.php b/lib/Config/Initializer.php index 4b2831305f..b87ded06dd 100644 --- a/lib/Config/Initializer.php +++ b/lib/Config/Initializer.php @@ -28,6 +28,7 @@ class Initializer { \ORM::configure(Env::$db_source_name); \ORM::configure('username', Env::$db_username); \ORM::configure('password', Env::$db_password); + \ORM::configure('logging', WP_DEBUG); $subscribers = Env::$db_prefix . 'subscribers'; $settings = Env::$db_prefix . 'settings'; diff --git a/lib/Router/Subscribers.php b/lib/Router/Subscribers.php index 278171e769..50baea3d9b 100644 --- a/lib/Router/Subscribers.php +++ b/lib/Router/Subscribers.php @@ -13,7 +13,26 @@ class Subscribers { $data = $_POST['data']; $offset = (isset($data['offset']) ? (int)$data['offset'] : 0); $limit = (isset($data['limit']) ? (int)$data['limit'] : 50); - $collection = Subscriber::offset($offset)->limit($limit)->find_array(); + $search = (isset($data['search']) ? $data['search'] : null); + $sort_by = (isset($data['sort_by']) ? $data['sort_by'] : 'id'); + $sort_order = (isset($data['sort_order']) ? $data['sort_order'] : 'desc'); + + $collection = Subscriber::{'order_by_'.$sort_order}($sort_by); + + if($search !== null) { + $collection->where_raw( + '(`email` LIKE ? OR `first_name` LIKE ? OR `last_name` LIKE ?)', + array('%'.$search.'%', '%'.$search.'%', '%'.$search.'%') + ); + } + + $collection = array( + 'count' => $collection->count(), + 'items' => $collection + ->offset($offset) + ->limit($limit) + ->find_array() + ); } else { $collection = Subscriber::find_array(); } diff --git a/views/subscribers.html b/views/subscribers.html index 1c441cc6af..1e0026463c 100644 --- a/views/subscribers.html +++ b/views/subscribers.html @@ -2,6 +2,5 @@ <% block content %>

<%= __('Subscribers') %>

- -
+
<% endblock %> diff --git a/webpack.config.js b/webpack.config.js index 7cfdf6e44b..1df76da9e1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -36,8 +36,7 @@ config.push(_.extend({}, baseConfig, { vendor: ['handlebars', 'handlebars_helpers'], mailpoet: ['mailpoet', 'ajax', 'modal', 'notice'], admin: [ - 'subscribers/table.jsx', - // 'subscribers/listing.jsx', + 'subscribers/listing.jsx', 'settings.jsx', 'subscribers.jsx', 'newsletters_list.jsx',