mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-29 22:35:50 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

History pagination (#58)

Browse source 
Adds pagination for the history page. fixes #32
This commit is contained in:
mrdrogdrog 2020-05-24 15:27:16 +02:00 • committed by GitHub
parent 70ab02431c
commit 11f01094b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 185 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/landing/pages/history/history-card/history-card-list.tsx
View file

@ -1,18 +1,23 @@
import React, {Fragment} from 'react'
import React from 'react'
import {HistoryEntriesProps} from "../history-content/history-content";
import {HistoryCard} from "./history-card";
import {Pager} from '../../../../pagination/pager';
import {Row} from 'react-bootstrap';
export const HistoryCardList: React.FC<HistoryEntriesProps> = ({entries, onPinClick, pageIndex, onLastPageIndexChange}) => {
export const HistoryCardList: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
return (
<Fragment>
{
entries.map((entry) => (
<HistoryCard
key={entry.id}
entry={entry}
onPinClick={onPinClick}
/>))
}
</Fragment>
)
<Row className="justify-content-center">
<Pager numberOfElementsPerPage={6} pageIndex={pageIndex} onLastPageIndexChange={onLastPageIndexChange}>
{
entries.map((entry) => (
<HistoryCard
key={entry.id}
entry={entry}
onPinClick={onPinClick}
/>))
}
</Pager>
</Row>
);
}

43
src/components/landing/pages/history/history-content/history-content.tsx
View file

@ -1,10 +1,11 @@
import React from "react";
import React, {Fragment, useState} from "react";
import {HistoryEntry, pinClick} from "../history";
import {HistoryTable} from "../history-table/history-table";
import {Alert} from "react-bootstrap";
import {Alert, Row} from "react-bootstrap";
import {Trans} from "react-i18next";
import {HistoryCardList} from "../history-card/history-card-list";
import {ViewStateEnum} from "../history-toolbar/history-toolbar";
import {PagerPagination} from "../../../../pagination/pager-pagination";
export interface HistoryContentProps {
viewState: ViewStateEnum
@ -20,23 +21,43 @@ export interface HistoryEntryProps {
export interface HistoryEntriesProps {
entries: HistoryEntry[]
onPinClick: pinClick
pageIndex: number
onLastPageIndexChange: (lastPageIndex: number) => void
}
export const HistoryContent: React.FC<HistoryContentProps> = ({viewState, entries, onPinClick}) => {
const [pageIndex, setPageIndex] = useState(0);
const [lastPageIndex, setLastPageIndex] = useState(0);
if (entries.length === 0) {
return (
<Alert variant={"secondary"}>
<Trans i18nKey={"noHistory"}/>
</Alert>
<Row className={"justify-content-center"}>
<Alert variant={"secondary"}>
<Trans i18nKey={"noHistory"}/>
</Alert>
</Row>
);
}
switch (viewState) {
default:
case ViewStateEnum.card:
return <HistoryCardList entries={entries} onPinClick={onPinClick}/>
case ViewStateEnum.table:
return <HistoryTable entries={entries} onPinClick={onPinClick}/>;
const mapViewStateToComponent = (viewState: ViewStateEnum) => {
switch (viewState) {
default:
case ViewStateEnum.card:
return <HistoryCardList entries={entries} onPinClick={onPinClick} pageIndex={pageIndex}
onLastPageIndexChange={setLastPageIndex}/>
case ViewStateEnum.table:
return <HistoryTable entries={entries} onPinClick={onPinClick} pageIndex={pageIndex}
onLastPageIndexChange={setLastPageIndex}/>
}
}
return (
<Fragment>
{mapViewStateToComponent(viewState)}
<Row className="justify-content-center">
<PagerPagination numberOfPageButtonsToShowAfterAndBeforeCurrent={2} lastPageIndex={lastPageIndex}
onPageChange={setPageIndex}/>
</Row>
</Fragment>);
}

23
src/components/landing/pages/history/history-table/history-table.tsx
View file

@ -3,8 +3,9 @@ import {Table} from "react-bootstrap"
import {HistoryTableRow} from "./history-table-row";
import {HistoryEntriesProps} from "../history-content/history-content";
import {Trans} from "react-i18next";
import {Pager} from "../../../../pagination/pager";
const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
export const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick, pageIndex, onLastPageIndexChange}) => {
return (
<Table striped bordered hover size="sm" variant="dark">
<thead>
@ -16,17 +17,17 @@ const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
</tr>
</thead>
<tbody>
{
entries.map((entry) =>
<HistoryTableRow
key={entry.id}
entry={entry}
onPinClick={onPinClick}
/>)
}
<Pager numberOfElementsPerPage={6} pageIndex={pageIndex} onLastPageIndexChange={onLastPageIndexChange}>
{
entries.map((entry) =>
<HistoryTableRow
key={entry.id}
entry={entry}
onPinClick={onPinClick}
/>)
}
</Pager>
</tbody>
</Table>
)
}
export {HistoryTable}

2
src/components/landing/pages/history/history.tsx
View file

@ -57,11 +57,9 @@ export const History: React.FC = () => {
<Row className={"justify-content-center mb-3"}>
<HistoryToolbar onSettingsChange={setViewState} tags={tags}/>
</Row>
<div className="d-flex flex-wrap justify-content-center">
<HistoryContent viewState={viewState.viewState}
entries={entriesToShow}
onPinClick={pinClick}/>
</div>
</Fragment>
)
}