forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-02-27 12:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved short URL ordering dropdown to ShortUrlsFilteringBar to simplify positioning

Browse Source
This commit is contained in:
Alejandro Celaya
2022-03-13 10:32:27 +01:00
parent 18f952f4fc
commit ef8db5e2cd
4 changed files with 51 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/short-urls/ShortUrlsFilteringBar.tsx
View File

@@ -15,18 +15,23 @@ import { supportsAllTagsFiltering } from '../utils/helpers/features';
import { SelectedServer } from '../servers/data';
import { TooltipToggleSwitch } from '../utils/TooltipToggleSwitch';
import { ExportBtn } from '../utils/ExportBtn';
import { OrderDir } from '../utils/helpers/ordering';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { useShortUrlsQuery } from './helpers/hooks';
import { SHORT_URLS_ORDERABLE_FIELDS, ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
import './ShortUrlsFilteringBar.scss';
export interface ShortUrlsFilteringProps {
selectedServer: SelectedServer;
order: ShortUrlsOrder;
handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
className?: string;
}
const dateOrNull = (date?: string) => date ? parseISO(date) : null;
const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilteringProps> => (
{ selectedServer, className },
{ selectedServer, className, order, handleOrderBy },
) => {
const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage ] = useShortUrlsQuery();
const selectedTags = tags?.split(',') ?? [];
@@ -73,7 +78,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
</Row>
{selectedTags.length > 0 && (
<h4 className="mt-3">
<h4 className="my-3">
{canChangeTagsMode && selectedTags.length > 1 && (
<div className="float-end ms-2 mt-1">
<TooltipToggleSwitch
@@ -90,6 +95,10 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
<Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
</h4>
)}
<div className="d-block d-lg-none mb-3">
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
</div>
);
};

13
src/short-urls/ShortUrlsList.tsx
View File

@@ -2,7 +2,6 @@ import { pipe } from 'ramda';
import { FC, useEffect, useMemo, useState } from 'react';
import { Card } from 'reactstrap';
import { useLocation, useParams } from 'react-router-dom';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
import { getServerId, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@@ -14,7 +13,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsTableProps } from './ShortUrlsTable';
import Paginator from './Paginator';
import { useShortUrlsQuery } from './helpers/hooks';
import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
import { ShortUrlsOrderableFields } from './data';
import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
interface ShortUrlsListProps {
@@ -65,10 +64,12 @@ const ShortUrlsList = (
return (
<>
<ShortUrlsFilteringBar selectedServer={selectedServer} className="mb-3" />
<div className="d-block d-lg-none mb-3">
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={actualOrderBy} onChange={handleOrderBy} />
</div>
<ShortUrlsFilteringBar
selectedServer={selectedServer}
order={actualOrderBy}
handleOrderBy={handleOrderBy}
className="mb-3"
/>
<Card body className="pb-1">
<ShortUrlsTable
selectedServer={selectedServer}