Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix usenet pageination

Browse Source
This commit is contained in:
ajnart
2023-01-06 13:39:45 +09:00
parent b333d6b0a6
commit 7a2a180d7f
3 changed files with 132 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/widgets/useNet/UsenetHistoryList.tsx
View File

@@ -4,8 +4,8 @@ import {
Code,
Group,
Pagination,
ScrollArea,
Skeleton,
Stack,
Table,
Text,
Title,
@@ -28,7 +28,7 @@ interface UsenetHistoryListProps {
appId: string;
}
const PAGE_SIZE = 10;
const PAGE_SIZE = 13;
export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ appId }) => {
const [page, setPage] = useState(1);
@@ -81,50 +81,49 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
}
return (
<>
<ScrollArea style={{ flex: 1 }}>
<Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
<thead>
<tr>
<th>{t('modules/usenet:history.header.name')}</th>
<th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
<Stack justify="space-around" spacing="xs">
<Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
<thead>
<tr>
<th>{t('modules/usenet:history.header.name')}</th>
<th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
{durationBreakpoint < width ? (
<th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
) : null}
</tr>
</thead>
<tbody>
{data.items.map((history) => (
<tr key={history.id}>
<td>
<Tooltip position="top" label={history.name}>
<Text
size="xs"
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{history.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{humanFileSize(history.size)}</Text>
</td>
{durationBreakpoint < width ? (
<th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
<td>
<Text size="xs">{parseDuration(history.time, t)}</Text>
</td>
) : null}
</tr>
</thead>
<tbody>
{data.items.map((history) => (
<tr key={history.id}>
<td>
<Tooltip position="top" label={history.name}>
<Text
size="xs"
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{history.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{humanFileSize(history.size)}</Text>
</td>
{durationBreakpoint < width ? (
<td>
<Text size="xs">{parseDuration(history.time, t)}</Text>
</td>
) : null}
</tr>
))}
</tbody>
</Table>
</ScrollArea>
))}
</tbody>
</Table>
{totalPages > 1 && (
<Pagination
noWrap
size="sm"
position="center"
mt="md"
@@ -133,6 +132,6 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
onChange={setPage}
/>
)}
</>
</Stack>
);
};