Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): add pagination item range info (#2454)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-16 19:43:04 +08:00 committed by GitHub
parent c7e1f5ee97
commit 891beed21d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 64 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/console/src/components/AuditLogTable/index.tsx
View file

@ -142,8 +142,9 @@ const AuditLogTable = ({ userId }: Props) => {
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageCount={Math.ceil(totalCount / pageSize)}
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
updateQuery('page', String(page));
}}

12
packages/console/src/components/Pagination/index.module.scss
View file

@ -1,9 +1,21 @@
@use '@/scss/underscore' as _;
.container {
display: flex;
justify-content: flex-end;
}
.positionInfo {
align-self: flex-end;
font: var(--font-body-medium);
color: var(--color-text-secondary);
}
.pagination {
display: flex;
justify-content: right;
margin: 0;
padding-inline-start: _.unit(4);
li {
list-style: none;

61
packages/console/src/components/Pagination/index.tsx
View file

@ -1,4 +1,5 @@
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import ReactPaginate from 'react-paginate';
import Button from '../Button';
@ -9,34 +10,46 @@ import * as styles from './index.module.scss';
type Props = {
pageIndex: number;
pageCount: number;
totalCount: number;
pageSize: number;
onChange?: (pageIndex: number) => void;
};
const Pagination = ({ pageIndex, pageCount, onChange }: Props) => {
const Pagination = ({ pageIndex, totalCount, pageSize, onChange }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const pageCount = Math.ceil(totalCount / pageSize);
const min = (pageIndex - 1) * pageSize + 1;
const max = pageIndex * pageSize;
return (
<ReactPaginate
className={styles.pagination}
pageCount={pageCount}
forcePage={pageIndex - 1}
pageLabelBuilder={(page: number) => (
<Button
type={page === pageIndex ? 'outline' : 'default'}
className={classNames(styles.button, page === pageIndex && styles.active)}
size="small"
title={<DangerousRaw>{page}</DangerousRaw>}
/>
)}
previousLabel={<Button className={styles.button} size="small" icon={<Previous />} />}
nextLabel={<Button className={styles.button} size="small" icon={<Next />} />}
breakLabel={
<Button className={styles.button} size="small" title={<DangerousRaw>...</DangerousRaw>} />
}
disabledClassName={styles.disabled}
onPageChange={({ selected }) => {
onChange?.(selected + 1);
}}
/>
<div className={styles.container}>
<div className={styles.positionInfo}>
{t('general.page_info', { min, max, total: totalCount })}
</div>
<ReactPaginate
className={styles.pagination}
pageCount={pageCount}
forcePage={pageIndex - 1}
pageLabelBuilder={(page: number) => (
<Button
type={page === pageIndex ? 'outline' : 'default'}
className={classNames(styles.button, page === pageIndex && styles.active)}
size="small"
title={<DangerousRaw>{page}</DangerousRaw>}
/>
)}
previousLabel={<Button className={styles.button} size="small" icon={<Previous />} />}
nextLabel={<Button className={styles.button} size="small" icon={<Next />} />}
breakLabel={
<Button className={styles.button} size="small" title={<DangerousRaw>...</DangerousRaw>} />
}
disabledClassName={styles.disabled}
onPageChange={({ selected }) => {
onChange?.(selected + 1);
}}
/>
</div>
);
};

3
packages/console/src/pages/ApiResources/index.tsx
View file

@ -140,8 +140,9 @@ const ApiResources = () => {
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageCount={Math.ceil(totalCount / pageSize)}
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page) });
}}

3
packages/console/src/pages/Applications/index.tsx
View file

@ -131,8 +131,9 @@ const Applications = () => {
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageCount={Math.ceil(totalCount / pageSize)}
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page) });
}}

3
packages/console/src/pages/Users/index.tsx
View file

@ -156,8 +156,9 @@ const Users = () => {
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageCount={Math.ceil(totalCount / pageSize)}
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) });
}}

1
packages/phrases/src/locales/de/translation/admin-console/general.ts
View file

@ -38,6 +38,7 @@ const general = {
stay_on_page: 'Auf Seite bleiben',
type_to_search: 'Tippe um zu suchen',
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
};
export default general;

1
packages/phrases/src/locales/en/translation/admin-console/general.ts
View file

@ -37,6 +37,7 @@ const general = {
stay_on_page: 'Stay on Page',
type_to_search: 'Type to search',
got_it: 'Got it',
page_info: '{{min, number}}-{{max, number}} of {{total, number}}',
};
export default general;

1
packages/phrases/src/locales/fr/translation/admin-console/general.ts
View file

@ -38,6 +38,7 @@ const general = {
stay_on_page: 'Rester sur la page',
type_to_search: 'Type to search', // UNTRANSLATED
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
};
export default general;

1
packages/phrases/src/locales/ko/translation/admin-console/general.ts
View file

@ -37,6 +37,7 @@ const general = {
stay_on_page: '페이지 유지하기',
type_to_search: 'Type to search', // UNTRANSLATED
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
};
export default general;

1
packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
View file

@ -37,6 +37,7 @@ const general = {
stay_on_page: 'Ficar na página',
type_to_search: 'Type to search', // UNTRANSLATED
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
};
export default general;

1
packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
View file

@ -38,6 +38,7 @@ const general = {
stay_on_page: 'Bu sayfada kal',
type_to_search: 'Type to search', // UNTRANSLATED
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
};
export default general;

1
packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
View file

@ -37,6 +37,7 @@ const general = {
stay_on_page: '留在此页',
type_to_search: '输入搜索',
got_it: 'Got it', // UNTRANSLATED
page_info: '{{min, number}}-{{max, number}} 共 {{total, number}} 条', // UNTRANSLATED
};
export default general;