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

171
src/widgets/useNet/UsenetQueueList.tsx
View File

@@ -1,6 +1,7 @@
import {
ActionIcon,
Alert,
Button,
Center,
Code,
Group,
@@ -8,6 +9,7 @@ import {
Progress,
ScrollArea,
Skeleton,
Stack,
Table,
Text,
Title,
@@ -30,7 +32,7 @@ interface UsenetQueueListProps {
appId: string;
}
const PAGE_SIZE = 10;
const PAGE_SIZE = 13;
export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
const theme = useMantineTheme();
@@ -38,7 +40,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
const progressbarBreakpoint = theme.breakpoints.xs;
const progressBreakpoint = 400;
const sizeBreakpoint = 300;
const { ref, width, height } = useElementSize();
const { ref, width } = useElementSize();
const [page, setPage] = useState(1);
const { data, isLoading, isError, error } = useGetUsenetDownloads({
@@ -85,103 +87,102 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
);
}
// TODO: Set ScollArea dynamic height based on the widget size
return (
<>
<ScrollArea style={{ flex: 1 }}>
<Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
<thead>
<tr>
<th style={{ width: 32 }} />
<th style={{ width: '75%' }}>{t('queue.header.name')}</th>
<Stack justify="space-around" spacing="xs">
<Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
<thead>
<tr>
<th style={{ width: 32 }} />
<th style={{ width: '75%' }}>{t('queue.header.name')}</th>
{sizeBreakpoint < width ? (
<th style={{ width: 100 }}>{t('queue.header.size')}</th>
) : null}
<th style={{ width: 60 }}>{t('queue.header.eta')}</th>
{progressBreakpoint < width ? (
<th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
{t('queue.header.progress')}
</th>
) : null}
</tr>
</thead>
<tbody>
{data.items.map((nzb) => (
<tr key={nzb.id}>
<td>
{nzb.state === 'paused' ? (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
<IconPlayerPlay size="16" />
</ActionIcon>
</Tooltip>
) : (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
<IconPlayerPause size="16" />
</ActionIcon>
</Tooltip>
)}
</td>
<td>
<Tooltip position="top" label={nzb.name}>
<Text
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
size="xs"
color={nzb.state === 'paused' ? 'dimmed' : undefined}
>
{nzb.name}
</Text>
</Tooltip>
</td>
{sizeBreakpoint < width ? (
<th style={{ width: 100 }}>{t('queue.header.size')}</th>
<td>
<Text size="xs">{humanFileSize(nzb.size)}</Text>
</td>
) : null}
<th style={{ width: 60 }}>{t('queue.header.eta')}</th>
<td>
{nzb.eta <= 0 ? (
<Text size="xs" color="dimmed">
{t('queue.paused')}
</Text>
) : (
<Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
)}
</td>
{progressBreakpoint < width ? (
<th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
{t('queue.header.progress')}
</th>
<td style={{ display: 'flex', alignItems: 'center' }}>
<Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
{nzb.progress.toFixed(1)}%
</Text>
{width > progressbarBreakpoint ? (
<Progress
radius="lg"
color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
value={nzb.progress}
size="lg"
style={{ width: '100%' }}
/>
) : null}
</td>
) : null}
</tr>
</thead>
<tbody>
{data.items.map((nzb) => (
<tr key={nzb.id}>
<td>
{nzb.state === 'paused' ? (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
<IconPlayerPlay size="16" />
</ActionIcon>
</Tooltip>
) : (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
<IconPlayerPause size="16" />
</ActionIcon>
</Tooltip>
)}
</td>
<td>
<Tooltip position="top" label={nzb.name}>
<Text
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
size="xs"
color={nzb.state === 'paused' ? 'dimmed' : undefined}
>
{nzb.name}
</Text>
</Tooltip>
</td>
{sizeBreakpoint < width ? (
<td>
<Text size="xs">{humanFileSize(nzb.size)}</Text>
</td>
) : null}
<td>
{nzb.eta <= 0 ? (
<Text size="xs" color="dimmed">
{t('queue.paused')}
</Text>
) : (
<Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
)}
</td>
{progressBreakpoint < width ? (
<td style={{ display: 'flex', alignItems: 'center' }}>
<Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
{nzb.progress.toFixed(1)}%
</Text>
{width > progressbarBreakpoint ? (
<Progress
radius="lg"
color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
value={nzb.progress}
size="lg"
style={{ width: '100%' }}
/>
) : null}
</td>
) : null}
</tr>
))}
</tbody>
</Table>
</ScrollArea>
))}
</tbody>
</Table>
{totalPages > 1 && (
<Pagination
noWrap
size="sm"
position="center"
mt="md"
total={totalPages}
page={page}
onChange={setPage}
/>
)}
</>
</Stack>
);
};