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

8
src/widgets/useNet/UseNetTile.tsx
View File

@@ -46,11 +46,13 @@ const definition = defineWidget({
}, },
}); });
export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>; export type IUsenetWidget = IWidget<typeof definition['id'], typeof definition>;
interface UseNetTileProps {} interface UseNetTileProps {
widget: IUsenetWidget;
}
function UseNetTile({}: UseNetTileProps) { function UseNetTile({ widget }: UseNetTileProps) {
const { t } = useTranslation('modules/usenet'); const { t } = useTranslation('modules/usenet');
const { config } = useConfigContext(); const { config } = useConfigContext();
const downloadApps = const downloadApps =

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

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

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

@@ -1,6 +1,7 @@
import { import {
ActionIcon, ActionIcon,
Alert, Alert,
Button,
Center, Center,
Code, Code,
Group, Group,
@@ -8,6 +9,7 @@ import {
Progress, Progress,
ScrollArea, ScrollArea,
Skeleton, Skeleton,
Stack,
Table, Table,
Text, Text,
Title, Title,
@@ -30,7 +32,7 @@ interface UsenetQueueListProps {
appId: string; appId: string;
} }
const PAGE_SIZE = 10; const PAGE_SIZE = 13;
export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => { export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
const theme = useMantineTheme(); const theme = useMantineTheme();
@@ -38,7 +40,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
const progressbarBreakpoint = theme.breakpoints.xs; const progressbarBreakpoint = theme.breakpoints.xs;
const progressBreakpoint = 400; const progressBreakpoint = 400;
const sizeBreakpoint = 300; const sizeBreakpoint = 300;
const { ref, width, height } = useElementSize(); const { ref, width } = useElementSize();
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const { data, isLoading, isError, error } = useGetUsenetDownloads({ 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 ( return (
<> <Stack justify="space-around" spacing="xs">
<ScrollArea style={{ flex: 1 }}> <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
<Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}> <thead>
<thead> <tr>
<tr> <th style={{ width: 32 }} />
<th style={{ width: 32 }} /> <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
<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 ? ( {sizeBreakpoint < width ? (
<th style={{ width: 100 }}>{t('queue.header.size')}</th> <td>
<Text size="xs">{humanFileSize(nzb.size)}</Text>
</td>
) : null} ) : 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 ? ( {progressBreakpoint < width ? (
<th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}> <td style={{ display: 'flex', alignItems: 'center' }}>
{t('queue.header.progress')} <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
</th> {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} ) : null}
</tr> </tr>
</thead> ))}
<tbody> </tbody>
{data.items.map((nzb) => ( </Table>
<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>
{totalPages > 1 && ( {totalPages > 1 && (
<Pagination <Pagination
noWrap
size="sm" size="sm"
position="center" position="center"
mt="md"
total={totalPages} total={totalPages}
page={page} page={page}
onChange={setPage} onChange={setPage}
/> />
)} )}
</> </Stack>
); );
}; };