Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +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 =

11
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,8 +81,7 @@ 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>
@@ -122,9 +121,9 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
))} ))}
</tbody> </tbody>
</Table> </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>
); );
}; };

15
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,9 +87,9 @@ 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>
@@ -171,17 +173,16 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
))} ))}
</tbody> </tbody>
</Table> </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>
); );
}; };