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

Added sorting dropdown for tags, that can be used regardless the display mode

Browse source
This commit is contained in:
Alejandro Celaya 2021-11-06 11:03:56 +01:00
parent daf076a57e
commit 7a2d0e5dee
2 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/tags/TagsList.tsx
View file

@ -12,8 +12,9 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
import { Topics } from '../mercure/helpers/Topics';
import { Settings, TagsMode } from '../settings/reducers/settings';
import { determineOrderDir, sortList } from '../utils/helpers/ordering';
import SortingDropdown from '../utils/SortingDropdown';
import { TagsList as TagsListState } from './reducers/tagsList';
import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import { OrderableFields, SORTABLE_FIELDS, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import { TagsModeDropdown } from './TagsModeDropdown';
import { NormalizedTag } from './data';
import { TagsTableProps } from './TagsTable';
@ -55,6 +56,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
() => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field &&
<FontAwesomeIcon icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
const renderContent = () => {
if (tagsList.error) {
return (
@ -84,9 +86,17 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
<>
<SearchField className="mb-3" onChange={filterTags} />
<Row className="mb-3">
<div className="col-lg-6 offset-lg-6">
<div className="col-lg-6">
<TagsModeDropdown mode={mode} onChange={setMode} />
</div>
<div className="col-lg-6 mt-3 mt-lg-0">
<SortingDropdown
items={SORTABLE_FIELDS}
orderField={order.field}
orderDir={order.dir}
onChange={(field, dir) => setOrder({ field, dir })}
/>
</div>
</Row>
{renderContent()}
</>

8
src/tags/data/TagsListChildrenProps.ts
View file

@ -2,7 +2,13 @@ import { SelectedServer } from '../../servers/data';
import { Order } from '../../utils/helpers/ordering';
import { NormalizedTag } from './index';
export type OrderableFields = 'tag' | 'shortUrls' | 'visits';
export const SORTABLE_FIELDS = {
tag: 'Tag',
shortUrls: 'Short URLs',
visits: 'Visits',
};
export type OrderableFields = keyof typeof SORTABLE_FIELDS;
export type TagsOrder = Order<OrderableFields>;