Listing fixes

- fixed bulk actions - fixed paging behavior - fixed filtering issues
2015-10-21 12:56:24 +02:00
parent da322cae4b
commit d4bfb49415
24 changed files with 200 additions and 97 deletions
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@ -14,11 +14,29 @@ function(
      }
    },
    componentWillMount: function() {
-      this.loadCachedItems();
+
    },
    componentDidMount: function() {
-      jQuery('#'+this.props.field.id).select2()
-        .on('change', this.handleChange);
+      this.loadCachedItems();
+    },
+    setupSelect2: function() {
+      if(this.props.field.select2 && Object.keys(this.props.item).length > 0) {
+        console.log('do it!');
+        jQuery('#'+this.props.field.id).select2({
+          width: this.props.field.width
+        }).select2(
+          'val',
+          this.props.item[this.props.field.name]
+        ).on('change', this.handleChange);
+
+        // set values
+        /*jQuery('#'+this.props.field.id).select2(
+          'val',
+          this.props.item[this.props.field.name]
+        );*/
+
+        console.log(this.props.item[this.props.field.name]);
+      }
    },
    loadCachedItems: function() {
      if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
@ -29,14 +47,20 @@ function(
      }
    },
    handleChange: function() {
-      return this.props.onValueChange({
+      if(this.props.onValueChange !== undefined) {
+        this.props.onValueChange({
         target: {
            value: jQuery('#'+this.props.field.id).select2('val'),
            name: this.props.field.name
          }
        });
+      }
+      return true;
    },
    render: function() {
+      if(this.state.items.length === 0) {
+        return false;
+      } else {
        var options = this.state.items.map(function(item, index) {
          return (
            <option
@ -48,17 +72,25 @@ function(
          );
        });

+        var default_value = (
+          (this.props.item !== undefined && this.props.field.name !== undefined)
+          ? this.props.item[this.props.field.name]
+          : null
+        );
+
+        this.setupSelect2();
+
        return (
          <select
-          ref="selection"
            id={ this.props.field.id }
            placeholder={ this.props.field.placeholder }
            multiple={ this.props.field.multiple }
            onChange={ this.handleChange }
-          defaultValue={ this.props.item[this.props.field.name] }
+            defaultValue={ default_value }
          >{ options }</select>
        );
      }
+    }
  });

  return Selection;
--- a/assets/js/src/form/form.jsx
+++ b/assets/js/src/form/form.jsx
@ -37,7 +37,7 @@ define(
            loading: false,
            item: {}
          });
-          this.refs.form.getDOMNode().reset();
+          this.refs.form.reset();
        } else {
          this.loadItem(props.params.id);
        }
--- a/assets/js/src/listing/bulk_actions.jsx
+++ b/assets/js/src/listing/bulk_actions.jsx
@ -55,7 +55,7 @@ function(
      });
    },
    getSelectedAction: function() {
-      var selected_action = jQuery(this.refs.action.getDOMNode()).val();
+      var selected_action = this.refs.action.value;
      if(selected_action.length > 0) {
        var action = this.props.bulk_actions.filter(function(action) {
          return (action.name === selected_action);
--- a/assets/js/src/listing/filters.jsx
+++ b/assets/js/src/listing/filters.jsx
@ -7,7 +7,7 @@ function(
  var ListingFilters = React.createClass({
    handleFilterAction: function() {
      var filters = this.props.filters.map(function(filter, index) {
-        var value = this.refs['filter-'+index].getDOMNode().value;
+        var value = this.refs['filter-'+index].value;
        if(value) {
          return {
            'name': filter.name,
--- a/assets/js/src/listing/header.jsx
+++ b/assets/js/src/listing/header.jsx
@ -3,7 +3,7 @@ define(['react', 'classnames'], function(React, classNames) {
  var ListingHeader = React.createClass({
    handleSelectItems: function() {
      return this.props.onSelectItems(
-        this.refs.toggle.getDOMNode().checked
+        this.refs.toggle.checked
      );
    },
    render: function() {
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@ -161,7 +161,15 @@ define(
                    this.props.columns.length
                    + (this.props.is_selectable ? 1 : 0)
                  }>
-                  { MailPoetI18n.selectAllLabel }&nbsp;
+                  {
+                    (this.props.selection !== 'all')
+                    ? MailPoetI18n.selectAllLabel
+                    : MailPoetI18n.selectedAllLabel.replace(
+                      '%d',
+                      this.props.count
+                    )
+                  }
+                  &nbsp;
                  <a
                    onClick={ this.props.onSelectAll }
                    href="javascript:;">{
@ -202,7 +210,7 @@ define(
          search: '',
          page: 1,
          count: 0,
-          limit: 10,
+          limit: 5,
          sort_by: 'id',
          sort_order: 'desc',
          items: [],
@ -247,7 +255,10 @@ define(
        }.bind(this));
      },
      handleDeleteItem: function(id) {
-        this.setState({ loading: true });
+        this.setState({
+          loading: true,
+          page: 1
+        });

        MailPoet.Ajax.post({
          endpoint: this.props.endpoint,
@ -289,6 +300,7 @@ define(
      handleSearch: function(search) {
        this.setState({
          search: search,
+          page: 1,
          selection: false,
          selected_ids: []
        }, function() {
@ -340,6 +352,7 @@ define(
      },
      handleSelectAll: function() {
        if(this.state.selection === 'all') {
+          this.clearSelection();
        } else {
          this.setState({
            selection: 'all',
@ -375,6 +388,7 @@ define(
        }.bind(this));
      },
      handleSetPage: function(page) {
+        console.log('listing > handleSetPage('+page+')');
        this.setState({
          page: page,
          selection: false,
--- a/assets/js/src/listing/pages.jsx
+++ b/assets/js/src/listing/pages.jsx
@ -1,25 +1,39 @@
 define(['react', 'classnames'], function(React, classNames) {

  var ListingPages = React.createClass({
+    getInitialState: function() {
+      return {
+        page: null
+      }
+    },
+    setPage: function(page) {
+      this.props.onSetPage(page);
+    },
    setFirstPage: function() {
-      this.props.onSetPage(1);
+      this.setPage(1);
    },
    setLastPage: function() {
-      this.props.onSetPage(this.getLastPage());
+      this.setPage(this.getLastPage());
    },
    setPreviousPage: function() {
-      this.props.onSetPage(this.constrainPage(this.props.page - 1));
+      this.setPage(this.constrainPage(this.props.page - 1));
    },
    setNextPage: function() {
-      this.props.onSetPage(this.constrainPage(this.props.page + 1));
+      this.setPage(this.constrainPage(this.props.page + 1));
    },
    constrainPage: function(page) {
      return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
    },
-    handleSetPage: function() {
-      this.props.onSetPage(
-        this.constrainPage(this.refs.page.getDOMNode().value)
-      );
+    handleSetManualPage: function(e) {
+      if(e.which === 13) {
+        this.setPage(this.state.page);
+        this.setState({ page: null });
+      }
+    },
+    handleChangeManualPage: function(e) {
+      this.setState({
+        page: this.constrainPage(e.target.value)
+      });
    },
    getLastPage: function() {
      return Math.ceil(this.props.count / this.props.limit);
@ -46,7 +60,7 @@ define(['react', 'classnames'], function(React, classNames) {
          if(this.props.page > 1) {
            previousPage = (
              <a href="javascript:;"
-                onClick={this.setPreviousPage}
+                onClick={ this.setPreviousPage }
                className="prev-page">
                <span className="screen-reader-text">Previous page</span>
                <span aria-hidden="true">‹</span>
@ -57,7 +71,7 @@ define(['react', 'classnames'], function(React, classNames) {
          if(this.props.page > 2) {
            firstPage = (
              <a href="javascript:;"
-                onClick={this.setFirstPage}
+                onClick={ this.setFirstPage }
                className="first-page">
                <span className="screen-reader-text">First page</span>
                <span aria-hidden="true">«</span>
@ -68,7 +82,7 @@ define(['react', 'classnames'], function(React, classNames) {
          if(this.props.page < this.getLastPage()) {
            nextPage = (
              <a href="javascript:;"
-                onClick={this.setNextPage}
+                onClick={ this.setNextPage }
                className="next-page">
                <span className="screen-reader-text">Next page</span>
                <span aria-hidden="true">›</span>
@ -79,7 +93,7 @@ define(['react', 'classnames'], function(React, classNames) {
          if(this.props.page < this.getLastPage() - 1) {
            lastPage = (
              <a href="javascript:;"
-                onClick={this.setLastPage}
+                onClick={ this.setLastPage }
                className="last-page">
                <span className="screen-reader-text">Last page</span>
                <span aria-hidden="true">»</span>
@ -98,11 +112,12 @@ define(['react', 'classnames'], function(React, classNames) {
                  htmlFor="current-page-selector">Current Page</label>
                <input
                  type="text"
-                  onChange={this.handleSetPage}
+                  onChange={ this.handleChangeManualPage }
+                  onKeyUp={ this.handleSetManualPage }
                  aria-describedby="table-paging"
                  size="1"
                  ref="page"
-                  value={this.props.page}
+                  value={ this.state.page || this.props.page }
                  name="paged"
                  id="current-page-selector"
                  className="current-page" />
@ -124,7 +139,7 @@ define(['react', 'classnames'], function(React, classNames) {
        );

        return (
-          <div className={classes}>
+          <div className={ classes }>
            <span className="displaying-num">{ this.props.count } item(s)</span>
            { pagination }
          </div>
--- a/assets/js/src/listing/search.jsx
+++ b/assets/js/src/listing/search.jsx
@ -4,7 +4,7 @@ define(['react'], function(React) {
    handleSearch: function(e) {
      e.preventDefault();
      this.props.onSearch(
-        this.refs.search.getDOMNode().value
+        this.refs.search.value
      );
    },
    render: function() {
--- a/assets/js/src/newsletters/list.jsx
+++ b/assets/js/src/newsletters/list.jsx
@ -3,13 +3,15 @@ define(
    'react',
    'react-router',
    'listing/listing.jsx',
-    'classnames'
+    'classnames',
+    'jquery'
  ],
  function(
    React,
    Router,
    Listing,
-    classNames
+    classNames,
+    jQuery
  ) {
    var Link = Router.Link;

@ -19,6 +21,10 @@ define(
        label: 'Subject',
        sortable: true
      },
+      {
+        name: 'segments',
+        label: 'Lists'
+      },
      {
        name: 'created_at',
        label: 'Created on',
@ -60,6 +66,12 @@ define(
          'has-row-actions'
        );

+        var segments = mailpoet_segments.filter(function(segment) {
+          return (jQuery.inArray(segment.id, newsletter.segments) !== -1);
+        }).map(function(segment) {
+          return segment.name;
+        }).join(', ');
+
        return (
          <div>
            <td className={ rowClasses }>
@ -68,6 +80,9 @@ define(
              </strong>
              { actions }
            </td>
+            <td className="column" data-colname="Lists">
+              { segments }
+            </td>
            <td className="column-date" data-colname="Subscribed on">
              <abbr>{ newsletter.created_at }</abbr>
            </td>
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@ -15,7 +15,7 @@ const App = React.createClass({
  }
 });

-let container = document.getElementById('newsletters');
+let container = document.getElementById('newsletters_container');

 if(container) {
  ReactDOM.render((
--- a/assets/js/src/newsletters/send.jsx
+++ b/assets/js/src/newsletters/send.jsx
@ -34,7 +34,8 @@ define(
        placeholder: "Select a list",
        id: "mailpoet_segments",
        endpoint: "segments",
-        multiple: true
+        multiple: true,
+        select2: true
      },
      {
        name: 'sender',
--- a/assets/js/src/segments/segments.jsx
+++ b/assets/js/src/segments/segments.jsx
@ -13,7 +13,7 @@ const App = React.createClass({
  }
 });

-let container = document.getElementById('segments');
+let container = document.getElementById('segments_container');

 if(container) {
  ReactDOM.render((
--- a/assets/js/src/subscribers/list.jsx
+++ b/assets/js/src/subscribers/list.jsx
@ -42,7 +42,7 @@ define(
        sortable: true
      },
      {
-        name: 'lists',
+        name: 'segments',
        label: 'Lists',
        sortable: false
      },
@ -64,10 +64,13 @@ define(
        name: 'moveToList',
        label: 'Move to list...',
        onSelect: function() {
+          var field = {
+            id: 'move_to_segment',
+            endpoint: 'segments'
+          };
+
          return (
-            <Selection
-              endpoint="segments"
-              id="move_to_segment" />
+            <Selection field={ field }/>
          );
        },
        getData: function() {
@ -80,10 +83,13 @@ define(
        name: 'addToList',
        label: 'Add to list...',
        onSelect: function() {
+          var field = {
+            id: 'add_to_segment',
+            endpoint: 'segments'
+          };
+
          return (
-            <Selection
-              endpoint="segments"
-              id="add_to_segment" />
+            <Selection field={ field }/>
          );
        },
        getData: function() {
@ -96,10 +102,13 @@ define(
        name: 'removeFromList',
        label: 'Remove from list...',
        onSelect: function() {
+          var field = {
+            id: 'remove_from_segment',
+            endpoint: 'segments'
+          };
+
          return (
-            <Selection
-              endpoint="segments"
-              id="remove_from_segment" />
+            <Selection field={ field }/>
          );
        },
        getData: function() {
--- a/assets/js/src/subscribers/subscribers.jsx
+++ b/assets/js/src/subscribers/subscribers.jsx
@ -13,7 +13,7 @@ const App = React.createClass({
  }
 });

-let container = document.getElementById('subscribers');
+let container = document.getElementById('subscribers_container');

 if(container) {
  ReactDOM.render((
--- a/lib/Listing/BulkAction.php
+++ b/lib/Listing/BulkAction.php
@ -6,14 +6,14 @@ if(!defined('ABSPATH')) exit;
 class BulkAction {
  private $listing = null;
  private $data = null;
-  private $model = null;
+  private $model_class = null;

-  function __construct($model, $data) {
-    $this->model = $model;
+  function __construct($model_class, $data) {
+    $this->model_class = $model_class;
    $this->data = $data;

    $this->listing = new Handler(
-      \Model::factory($this->model),
+      $this->model_class,
      $this->data['listing']
    );
    return $this;
@ -21,7 +21,7 @@ class BulkAction {

  function apply() {
    return call_user_func_array(
-      array($this->model, $this->data['action']),
+      array($this->model_class, $this->data['action']),
      array($this->listing, $this->data)
    );
  }
--- a/lib/Listing/Handler.php
+++ b/lib/Listing/Handler.php
@ -8,8 +8,12 @@ class Handler {
  private $data = array();
  private $model = null;

-  function __construct($model, $data = array()) {
-    $this->model = $model;
+  function __construct($model_class, $data = array()) {
+    $class = new \ReflectionClass($model_class);
+    $this->table_name = $class->getStaticPropertyValue('_table');
+
+    $this->model = \Model::factory($model_class);
+
    $this->data = array(
      // pagination
      'offset' => (isset($data['offset']) ? (int)$data['offset'] : 0),
@ -27,7 +31,7 @@ class Handler {
      'selection' => (isset($data['selection']) ? $data['selection'] : null)
    );

-    $this->setFilter();
+    $this->model = $this->setFilter();
    $this->setSearch();
    $this->setGroup();
    $this->setOrder();
@ -42,10 +46,8 @@ class Handler {

  private function setOrder() {
    return $this->model
-      ->tableAlias('model')
      ->{'order_by_'.$this->data['sort_order']}(
-        'model.'.$this->data['sort_by']
-      );
+        $this->table_name.'.'.$this->data['sort_by']);
  }

  private function setGroup() {
@ -57,20 +59,20 @@ class Handler {

  private function setFilter() {
    if($this->data['filter'] === null) {
-      return;
+      return $this->model;
    }
    return $this->model->filter('filterBy', $this->data['filter']);
  }

  function getSelection() {
    if(!empty($this->data['selection'])) {
-      $this->model->whereIn('model.id', $this->data['selection']);
+      $this->model->whereIn('id', $this->data['selection']);
    }
    return $this->model;
  }

  function getSelectionIds() {
-    $models = $this->getSelection()->select('model.id')->findMany();
+    $models = $this->getSelection()->select('id')->findMany();
    return array_map(function($model) {
      return (int)$model->id;
    }, $models);
--- a/lib/Models/Newsletter.php
+++ b/lib/Models/Newsletter.php
@ -62,11 +62,11 @@ class Newsletter extends Model {
        $segment = Segment::findOne($filter['value']);
        if($segment !== false) {
          $orm = $orm
-          ->select('model.*')
+          ->select(MP_NEWSLETTERS_TABLE.'.*')
          ->select('newsletter_segment.id', 'newsletter_segment_id')
          ->join(
            MP_NEWSLETTER_SEGMENT_TABLE,
-            'model.id = newsletter_segment.newsletter_id',
+            MP_NEWSLETTERS_TABLE.'.id = newsletter_segment.newsletter_id',
            'newsletter_segment'
          )
          ->where('newsletter_segment.segment_id', (int)$filter['value']);
--- a/lib/Models/Subscriber.php
+++ b/lib/Models/Subscriber.php
@ -72,15 +72,16 @@ class Subscriber extends Model {

        $segment = Segment::findOne($filter['value']);
        if($segment !== false) {
-          $orm = $orm
-          ->select('model.*')
+          /*$orm = $orm
+          ->select(MP_SUBSCRIBERS_TABLE.'.*')
          ->select('subscriber_segment.id', 'subscriber_segment_id')
          ->join(
            MP_SUBSCRIBER_SEGMENT_TABLE,
-            'model.id = subscriber_segment.subscriber_id',
+            MP_SUBSCRIBERS_TABLE.'.id = subscriber_segment.subscriber_id',
            'subscriber_segment'
          )
-          ->where('subscriber_segment.segment_id', (int)$filter['value']);
+          ->where('subscriber_segment.segment_id', (int)$filter['value']);*/
+          $orm = $segment->subscribers();
        }
      }
    }
--- a/lib/Router/Newsletters.php
+++ b/lib/Router/Newsletters.php
@ -134,10 +134,23 @@ class Newsletters {

  function listing($data = array()) {
    $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Newsletter'),
+      '\MailPoet\Models\Newsletter',
      $data
    );
-    wp_send_json($listing->get());
+
+    $listing_data = $listing->get();
+
+    // fetch segments relations for each returned item
+    foreach($listing_data['items'] as &$item) {
+      $segments = NewsletterSegment::select('segment_id')
+        ->where('newsletter_id', $item['id'])
+        ->findMany();
+      $item['segments'] = array_map(function($relation) {
+        return $relation->segment_id;
+      }, $segments);
+    }
+
+    wp_send_json($listing_data);
  }

  function bulk_action($data = array()) {
--- a/lib/Router/Segments.php
+++ b/lib/Router/Segments.php
@ -22,7 +22,7 @@ class Segments {

  function listing($data = array()) {
    $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Segment'),
+      '\MailPoet\Models\Segment',
      $data
    );
    wp_send_json($listing->get());
--- a/lib/Router/Subscribers.php
+++ b/lib/Router/Subscribers.php
@ -24,7 +24,7 @@ class Subscribers {

  function listing($data = array()) {
    $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Subscriber'),
+      '\MailPoet\Models\Subscriber',
      $data
    );

--- a/views/newsletters.html
+++ b/views/newsletters.html
@ -1,7 +1,7 @@
 <% extends 'layout.html' %>

 <% block content %>
-  <div id="newsletters"></div>
+  <div id="newsletters_container"></div>

  <%= localize({
    'pageTitle': __('Newsletters'),
--- a/views/segments.html
+++ b/views/segments.html
@ -1,7 +1,7 @@
 <% extends 'layout.html' %>

 <% block content %>
-  <div id="segments"></div>
+  <div id="segments_container"></div>

  <%= localize({
    'pageTitle': __('Segments'),
--- a/views/subscribers.html
+++ b/views/subscribers.html
@ -1,7 +1,7 @@
 <% extends 'layout.html' %>

 <% block content %>
-  <div id="subscribers"></div>
+  <div id="subscribers_container"></div>

  <%= localize({
    'pageTitle': __('Subscribers'),
@ -9,6 +9,7 @@
    'loadingItems': __('Loading subscribers...'),
    'noItemsFound': __('No subscribers found.'),
    'selectAllLabel': __('All subscribers on this page are selected.'),
+    'selectedAllLabel': __('All %d subscribers are selected.'),
    'selectAllLink': __('Select all pages.'),
    'clearSelection': __('Clear selection.')
  }) %>