Projekte/web-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination fix

Browse Source
This commit is contained in:
Roman 2024-05-02 16:40:06 +02:00
parent 8f4650227f
commit 3a639d9a3c
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Core/Localization/de_DE/general.php
View File

@ -64,8 +64,9 @@ return [
"overwrite" => "Überschreiben", "overwrite" => "Überschreiben",
# data table # data table
"showing_x_of_y_entries" => "Zeige %d von %d Einträgen", "showing_x_to_y_of_z_entries" => "Zeige %d bis %d von %d Einträgen",
"controls" => "Steuerung", "controls" => "Steuerung",
"entries_per_page" => "pro Seite",
# date / time # date / time
"date" => "Datum", "date" => "Datum",

3
Core/Localization/en_US/general.php
View File

@ -64,8 +64,9 @@ return [
"overwrite" => "Overwrite", "overwrite" => "Overwrite",
# data table # data table
"showing_x_of_y_entries" => "Showing %d of %d entries", "showing_x_to_y_of_z_entries" => "Showing %d to %d of %d entries",
"controls" => "Controls", "controls" => "Controls",
"entries_per_page" => "per Page",
# date / time # date / time
"date" => "Date", "date" => "Date",

5
react/shared/elements/data-table.css
View File

@ -33,9 +33,12 @@
.pagination-controls { .pagination-controls {
margin-top: 6px; margin-top: 6px;
display: grid;
grid-template-columns: 75px auto;
align-items: center;
} }
.pagination-page-size > div { .pagination-controls select {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }

12
react/shared/hooks/pagination.js
View File

@ -1,5 +1,5 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {FormControl, Box, Select, Pagination as MuiPagination} from "@mui/material"; import {FormControl, Box, Select, Pagination as MuiPagination, InputLabel} from "@mui/material";
import {sprintf} from "sprintf-js"; import {sprintf} from "sprintf-js";
class Pagination { class Pagination {
@ -55,14 +55,18 @@ class Pagination {
renderPagination(L, numEntries, options = null) { renderPagination(L, numEntries, options = null) {
options = options || [10, 25, 50, 100]; options = options || [10, 25, 50, 100];
let start = (this.getPage() - 1) * this.data.pageSize + 1;
let end = Math.min(this.data.total, start + numEntries - 1);
return <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}> return <Box className={"pagination-controls"}>
<FormControl> <FormControl>
<InputLabel id="page-size-label">{L("general.entries_per_page")}</InputLabel>
<Select <Select
native native
labelId="page-size-label"
label={L("general.entries_per_page")}
value={this.data.pageSize} value={this.data.pageSize}
className={"pagination-page-size"} className={"pagination-page-size"}
label={L("general.entries_per_page")}
onChange={(e) => this.setPageSize(parseInt(e.target.value))} onChange={(e) => this.setPageSize(parseInt(e.target.value))}
size={"small"} size={"small"}
> >
@ -74,7 +78,7 @@ class Pagination {
onChange={(_, page) => this.setPage(page)} onChange={(_, page) => this.setPage(page)}
/> />
<Box gridColumn={"1 / 3"} mt={1}> <Box gridColumn={"1 / 3"} mt={1}>
{sprintf(L("general.showing_x_of_y_entries"), numEntries, this.data.total)} {sprintf(L("general.showing_x_to_y_of_z_entries"), start, end, this.data.total)}
</Box> </Box>
</Box> </Box>
} }