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

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

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

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

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

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

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

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

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

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

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