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): hide pagination if the page count is less than two (#2474)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-21 10:26:34 +08:00 committed by GitHub
parent ea0200b795
commit f2aa2d2d8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -139,18 +139,15 @@ const AuditLogTable = ({ userId }: Props) => {
</tbody>
</table>
</div>
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
updateQuery('page', String(page));
}}
/>
)}
</div>
<Pagination
pageIndex={pageIndex}
totalCount={totalCount ?? 0}
pageSize={pageSize}
className={styles.pagination}
onChange={(page) => {
updateQuery('page', String(page));
}}
/>
</>
);
};

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

@ -12,18 +12,23 @@ type Props = {
pageIndex: number;
totalCount: number;
pageSize: number;
className?: string;
onChange?: (pageIndex: number) => void;
};
const Pagination = ({ pageIndex, totalCount, pageSize, onChange }: Props) => {
const Pagination = ({ pageIndex, totalCount, pageSize, className, onChange }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const pageCount = Math.ceil(totalCount / pageSize);
if (pageCount <= 1) {
return null;
}
const min = (pageIndex - 1) * pageSize + 1;
const max = pageIndex * pageSize;
const max = Math.min(pageIndex * pageSize, totalCount);
return (
<div className={styles.container}>
<div className={classNames(styles.container, className)}>
<div className={styles.positionInfo}>
{t('general.page_info', { min, max, total: totalCount })}
</div>

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

@ -137,18 +137,15 @@ const ApiResources = () => {
</tbody>
</table>
</div>
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page) });
}}
/>
)}
</div>
<Pagination
pageIndex={pageIndex}
totalCount={totalCount ?? 0}
pageSize={pageSize}
className={styles.pagination}
onChange={(page) => {
setQuery({ page: String(page) });
}}
/>
</div>
);
};

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

@ -128,18 +128,15 @@ const Applications = () => {
</tbody>
</table>
</div>
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page) });
}}
/>
)}
</div>
<Pagination
pageIndex={pageIndex}
totalCount={totalCount ?? 0}
pageSize={pageSize}
className={styles.pagination}
onChange={(page) => {
setQuery({ page: String(page) });
}}
/>
</div>
);
};

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

@ -153,18 +153,15 @@ const Users = () => {
</tbody>
</table>
</div>
<div className={styles.pagination}>
{!!totalCount && (
<Pagination
pageIndex={pageIndex}
totalCount={totalCount}
pageSize={pageSize}
onChange={(page) => {
setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) });
}}
/>
)}
</div>
<Pagination
pageIndex={pageIndex}
totalCount={totalCount ?? 0}
pageSize={pageSize}
className={styles.pagination}
onChange={(page) => {
setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) });
}}
/>
</div>
);
};