forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-08-01 08:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added support for title field in short URL table

Browse Source
This commit is contained in:
Alejandro Celaya
2021-03-05 14:20:49 +01:00
parent a665e96908
commit 3c9c0fe994
8 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/short-urls/ShortUrlsTable.tsx
View File

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
import { isEmpty } from 'ramda';
import classNames from 'classnames';
import { SelectedServer } from '../servers/data';
import { titleIsSupported } from '../utils/helpers/features';
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
import { OrderableFields } from './reducers/shortUrlsListParams';
@@ -25,10 +26,10 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
className,
}: ShortUrlsTableProps) => {
const { error, loading, shortUrls } = shortUrlsList;
const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
'short-urls-table__header-cell--with-action': !!orderByColumn,
});
const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
const tableClasses = classNames('table table-hover', className);
const supportsTitle = titleIsSupported(selectedServer);
const renderShortUrls = () => {
if (error) {
@@ -62,20 +63,34 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
<thead className="short-urls-table__header">
<tr>
<th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
{renderOrderIcon?.('dateCreated')}
Created at
{renderOrderIcon?.('dateCreated')}
</th>
<th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
{renderOrderIcon?.('shortCode')}
Short URL
{renderOrderIcon?.('shortCode')}
</th>
<th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
{renderOrderIcon?.('longUrl')}
Long URL
</th>
{!supportsTitle && (
<th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
Long URL
{renderOrderIcon?.('longUrl')}
</th>
) || (
<th className="short-urls-table__header-cell">
<span className={actionableFieldClasses} onClick={orderByColumn?.('title')}>
Title
{renderOrderIcon?.('title')}
</span>
&nbsp;&nbsp;/&nbsp;&nbsp;
<span className={actionableFieldClasses} onClick={orderByColumn?.('longUrl')}>
<span className="indivisible">Long URL</span>
{renderOrderIcon?.('longUrl')}
</span>
</th>
)}
<th className="short-urls-table__header-cell">Tags</th>
<th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
<span className="indivisible">{renderOrderIcon?.('visits')} Visits</span>
<span className="indivisible">Visits{renderOrderIcon?.('visits')}</span>
</th>
<th className="short-urls-table__header-cell">&nbsp;</th>
</tr>