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",
# 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",
"entries_per_page" => "pro Seite",
# date / time
"date" => "Datum",

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

@ -64,8 +64,9 @@ return [
"overwrite" => "Overwrite",
# 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",
"entries_per_page" => "per Page",
# date / time
"date" => "Date",

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

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

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

@ -1,5 +1,5 @@
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";
class Pagination {
@ -55,14 +55,18 @@ class Pagination {
renderPagination(L, numEntries, options = null) {
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>
<InputLabel id="page-size-label">{L("general.entries_per_page")}</InputLabel>
<Select
native
labelId="page-size-label"
label={L("general.entries_per_page")}
value={this.data.pageSize}
className={"pagination-page-size"}
label={L("general.entries_per_page")}
onChange={(e) => this.setPageSize(parseInt(e.target.value))}
size={"small"}
>
@ -74,7 +78,7 @@ class Pagination {
onChange={(_, page) => this.setPage(page)}
/>
<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>
}