Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00: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
Show Stats 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 { SortOrder } from 'antd/lib/table/interface';
import { Input, Table } from 'antd';
import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface';
import { ColumnsType } from 'antd/es/table';
import { SearchOutlined } from '@ant-design/icons';
import { formatDistanceToNow } from 'date-fns';
import { Client } from '../types/chat';
import UserPopover from './user-popover';
@ -22,7 +23,22 @@ export default function ClientTable({ data }: ClientTableProps) {
</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[],
},
{
@ -42,7 +58,7 @@ export default function ClientTable({ data }: ClientTableProps) {
defaultSortOrder: 'ascend',
render: (time: Date) => formatDistanceToNow(new Date(time)),
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[],
},
{

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

@ -308,6 +308,7 @@ textarea.ant-input {
// ANT TABLE
.ant-table-thead > tr > th,
.ant-table-filter-dropdown,
.ant-table-small .ant-table-thead > tr > th {
transition-duration: var(--ant-transition-duration);
background-color: var(--purple-dark);
@ -349,7 +350,8 @@ textarea.ant-input {
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);
opacity: 0.75;
}