Redesign listing search [MAILPOET-2778]

This commit is contained in:
wxa
2020-06-29 13:55:44 +03:00
committed by Veljko V
parent 73db70c335
commit 6faf149e15
5 changed files with 29 additions and 16 deletions

View File

@ -74,6 +74,10 @@
}
}
.mailpoet-listing-search {
display: inline-block;
}
.mailpoet_listing_loading tbody tr,
.mailpoet_form_loading tbody tr {
opacity: .2;

View File

@ -0,0 +1,7 @@
import React from 'react';
export default (
<svg viewBox="3 3 18 18">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
);

View File

@ -595,8 +595,7 @@ class Listing extends React.Component {
{ this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
<div className="mailpoet-listing">
{ groups }
{ search }
<div className="tablenav top clearfix">
<div>
<ListingBulkActions
count={this.state.count}
bulk_actions={bulkActions}
@ -604,6 +603,7 @@ class Listing extends React.Component {
selected_ids={this.state.selected_ids}
onBulkAction={this.handleBulkAction}
/>
{ search }
<ListingFilters
filters={this.state.filters}
filter={this.state.filter}

View File

@ -1,6 +1,9 @@
import React from 'react';
import MailPoet from 'mailpoet';
import _ from 'underscore';
import PropTypes from 'prop-types';
import Input from 'common/form/input/input.tsx';
import icon from './assets/search_icon.tsx';
class ListingSearch extends React.Component {
constructor(props) {
@ -9,6 +12,7 @@ class ListingSearch extends React.Component {
search: '',
};
this.handleSearch = this.handleSearch.bind(this);
this.debouncedHandleSearch = _.debounce(this.handleSearch, 300);
this.onChange = this.onChange.bind(this);
}
@ -22,10 +26,10 @@ class ListingSearch extends React.Component {
onChange(e) {
this.setState({ search: e.target.value });
this.debouncedHandleSearch();
}
handleSearch(e) {
e.preventDefault();
handleSearch() {
this.props.onSearch(
this.state.search.trim()
);
@ -36,25 +40,23 @@ class ListingSearch extends React.Component {
return false;
}
return (
<form name="search" onSubmit={this.handleSearch}>
<p className="search-box">
<div className="mailpoet-listing-search">
<form name="search" onSubmit={(e) => { e.preventDefault(); this.handleSearch(); }}>
<label htmlFor="search_input" className="screen-reader-text">
{MailPoet.I18n.t('searchLabel')}
</label>
<input
<Input
dimension="small"
iconStart={icon}
type="search"
id="search_input"
name="s"
onChange={this.onChange}
value={this.state.search}
placeholder={MailPoet.I18n.t('searchLabel')}
/>
<input
type="submit"
value={MailPoet.I18n.t('searchLabel')}
className="button"
/>
</p>
</form>
</form>
</div>
);
}
}

View File

@ -190,12 +190,12 @@ class AcceptanceTester extends \Codeception\Actor {
expect($attributeValue)->notContains($notContains);
}
public function searchFor($query, $element = '#search_input', $button = 'Search') {
public function searchFor($query, $element = '#search_input') {
$i = $this;
$i->waitForElement($element);
$i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
$i->fillField($element, $query);
$i->click($button);
$i->pressKey($element, \WebDriverKeys::ENTER);
$i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
}