golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-03 13:01:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixes and enhancements to the client table. (#468)

Browse Source 
* Fix sorting and order for name.

* Add the ability to sort display names.

* Remove no-unstable-nested-components rule.

* Use includes() rather than startsWith() for better 'searching' semantics.
This commit is contained in:
funkyhippo
2022-04-23 11:37:28 -05:00
committed by GitHub
parent d78e28fd47
commit f625c31279
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/components/client-table.tsx
View File

@ -1,6 +1,7 @@
import { Table } from 'antd'; import { Input, Table } from 'antd';
import { SortOrder } from 'antd/lib/table/interface'; import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface';
import { ColumnsType } from 'antd/es/table'; import { ColumnsType } from 'antd/es/table';
import { SearchOutlined } from '@ant-design/icons';
import { formatDistanceToNow } from 'date-fns'; import { formatDistanceToNow } from 'date-fns';
import { Client } from '../types/chat'; import { Client } from '../types/chat';
import UserPopover from './user-popover'; import UserPopover from './user-popover';
@ -22,7 +23,22 @@ export default function ClientTable({ data }: ClientTableProps) {
</UserPopover> </UserPopover>
); );
}, },
sorter: (a: any, b: any) => a.user.displayName - b.user.displayName, sorter: (a: any, b: any) => b.user.displayName.localeCompare(a.user.displayName),
filterIcon: <SearchOutlined />,
// eslint-disable-next-line react/no-unstable-nested-components
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search display names..."
value={selectedKeys[0]}
onChange={e => {
setSelectedKeys(e.target.value ? [e.target.value] : []);
confirm({ closeDropdown: false });
}}
/>
</div>
),
onFilter: (value: string, record: Client) => record.user.displayName.includes(value),
sortDirections: ['descend', 'ascend'] as SortOrder[], sortDirections: ['descend', 'ascend'] as SortOrder[],
}, },
{ {
@ -42,7 +58,7 @@ export default function ClientTable({ data }: ClientTableProps) {
defaultSortOrder: 'ascend', defaultSortOrder: 'ascend',
render: (time: Date) => formatDistanceToNow(new Date(time)), render: (time: Date) => formatDistanceToNow(new Date(time)),
sorter: (a: any, b: any) => sorter: (a: any, b: any) =>
new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(), new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(),
sortDirections: ['descend', 'ascend'] as SortOrder[], sortDirections: ['descend', 'ascend'] as SortOrder[],
}, },
{ {

4
web/styles/ant-overrides.scss
View File

@ -308,6 +308,7 @@ textarea.ant-input {
// ANT TABLE // ANT TABLE
.ant-table-thead > tr > th, .ant-table-thead > tr > th,
.ant-table-filter-dropdown,
.ant-table-small .ant-table-thead > tr > th { .ant-table-small .ant-table-thead > tr > th {
transition-duration: var(--ant-transition-duration); transition-duration: var(--ant-transition-duration);
background-color: var(--purple-dark); background-color: var(--purple-dark);
@ -349,7 +350,8 @@ textarea.ant-input {
background-color: var(--textfield-border); background-color: var(--textfield-border);
} }
} }
.ant-table-thead th.ant-table-column-sort { .ant-table-thead th.ant-table-column-sort,
.ant-dropdown-trigger.active {
background-color: var(--owncast-purple-25); background-color: var(--owncast-purple-25);
opacity: 0.75; opacity: 0.75;
} }