mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added support to filter by multiple tags

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-04 17:07:44 +02:00
parent 9aaa01e455
commit ee6193ace8
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/short-urls/SearchBar.js
View file

@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import Tag from '../utils/Tag'; import Tag from '../utils/Tag';
import { listShortUrls } from './reducers/shortUrlsList'; import { listShortUrls } from './reducers/shortUrlsList';
import './SearchBar.scss'; import './SearchBar.scss';
import { pick } from 'ramda'; import { pick, isEmpty } from 'ramda';
export class SearchBar extends React.Component { export class SearchBar extends React.Component {
state = { state = {
@ -16,7 +16,7 @@ export class SearchBar extends React.Component {
render() { render() {
const { listShortUrls, shortUrlsListParams } = this.props; const { listShortUrls, shortUrlsListParams } = this.props;
const selectedTag = shortUrlsListParams.tags ? shortUrlsListParams.tags[0] : ''; const selectedTags = shortUrlsListParams.tags || [];
return ( return (
<div className="serach-bar-container"> <div className="serach-bar-container">
@ -39,15 +39,20 @@ export class SearchBar extends React.Component {
</div> </div>
</div> </div>
{selectedTag && ( {!isEmpty(selectedTags) && (
<h4 className="search-bar__selected-tag mt-2"> <h4 className="search-bar__selected-tag mt-2">
<small>Filtering by tag:</small> <small>Filtering by tags:</small>
&nbsp; &nbsp;
<Tag {selectedTags.map(tag => <Tag
text={selectedTag} text={tag}
clearable clearable
onClose={() => listShortUrls({ ...shortUrlsListParams, tags: undefined })} onClose={() => listShortUrls(
/> {
...shortUrlsListParams,
tags: selectedTags.filter(selectedTag => selectedTag !== tag)
}
)}
/>)}
</h4> </h4>
)} )}
</div> </div>

3
src/short-urls/ShortUrlsList.js
View file

@ -94,7 +94,7 @@ export class ShortUrlsList extends React.Component {
} }
renderShortUrls() { renderShortUrls() {
const { shortUrlsList, selectedServer, loading, error } = this.props; const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
if (error) { if (error) {
return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>; return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>;
} }
@ -113,6 +113,7 @@ export class ShortUrlsList extends React.Component {
selectedServer={selectedServer} selectedServer={selectedServer}
key={shortUrl.shortCode} key={shortUrl.shortCode}
refreshList={this.refreshList} refreshList={this.refreshList}
shortUrlsListParams={shortUrlsListParams}
/> />
)); ));
} }

7
src/short-urls/helpers/ShortUrlsRow.js
View file

@ -13,8 +13,11 @@ export class ShortUrlsRow extends React.Component {
return <i className="nowrap"><small>No tags</small></i>; return <i className="nowrap"><small>No tags</small></i>;
} }
const { refreshList } = this.props; const { refreshList, shortUrlsListParams } = this.props;
return tags.map(tag => <Tag key={tag} text={tag} onClick={() => refreshList({ tags: [tag] })} />); const selectedTags = shortUrlsListParams.tags || [];
return tags.map(
tag => <Tag key={tag} text={tag} onClick={() => refreshList({tags: [ ...selectedTags, tag ] })} />
);
} }
render() { render() {