diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx index c04bb56b4..354ddd2e3 100644 --- a/forms-flow-admin/src/components/dashboard/dashboard.tsx +++ b/forms-flow-admin/src/components/dashboard/dashboard.tsx @@ -147,6 +147,17 @@ const InsightDashboard = React.memo((props: any) => { setErr ); }; + + const paginatedDashboard = authDashBoardList.slice( + (activePage - 1) * limit, + activePage * limit + ); + + const handleLimitChange = (newLimit: number) => { + setLimit(newLimit); + setActivePage(1); + }; + const noData = () => (

@@ -271,7 +282,7 @@ const InsightDashboard = React.memo((props: any) => {
{ limit={limit} activePage={activePage} totalCount={authDashBoardList.length} - handlePageChange={(page) => setActivePage(page)} - onLimitChange={setLimit} + handlePageChange={(page: number) => setActivePage(page)} + onLimitChange={handleLimitChange} pageOptions={getpageList()} /> diff --git a/forms-flow-admin/src/components/dashboard/insightDashboard.scss b/forms-flow-admin/src/components/dashboard/insightDashboard.scss index 5c820301a..3dca30d5e 100644 --- a/forms-flow-admin/src/components/dashboard/insightDashboard.scss +++ b/forms-flow-admin/src/components/dashboard/insightDashboard.scss @@ -6,12 +6,10 @@ .table-container-admin{ - min-height: 30rem; background: #FFFFFF; border: 1px solid #ECECEC; box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07); border-radius: 8px; - max-height: 32rem; overflow-y: scroll; } @@ -19,7 +17,3 @@ margin-top: 1rem; } -.table-container-admin tbody { - overflow-y: auto; - height: 360px; -} \ No newline at end of file diff --git a/forms-flow-admin/src/components/roles/roles.scss b/forms-flow-admin/src/components/roles/roles.scss index 842a514ea..c8f9caeab 100644 --- a/forms-flow-admin/src/components/roles/roles.scss +++ b/forms-flow-admin/src/components/roles/roles.scss @@ -1,5 +1,4 @@ .table-container{ - min-height: 30rem !important; background: #FFFFFF; border: 1px solid #ECECEC; @@ -8,9 +7,7 @@ overflow-y: scroll; max-height: 25rem; } -.table th{ - color: #646464; -} + .table th , .table tr { vertical-align: middle; @@ -53,10 +50,6 @@ .row{ align-items: center; } - tbody{ - overflow-y: auto; - height: 420px; - } } .formsflow-paginator{ text-align: center; diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx index c79d806f6..6cf406ed3 100644 --- a/forms-flow-admin/src/components/roles/roles.tsx +++ b/forms-flow-admin/src/components/roles/roles.tsx @@ -765,7 +765,7 @@ const Roles = React.memo((props: any) => { data-testid="admin-roles-table" /> - +
select { border: none; - width: max-content; -} + width: 50%; +} .success { color: var(--color-success); diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx index 13306d37d..9613f129d 100644 --- a/forms-flow-admin/src/components/users/users.tsx +++ b/forms-flow-admin/src/components/users/users.tsx @@ -112,12 +112,12 @@ const Users = React.memo((props: any) => { ); }; - const handleLimitChange = (sizePerPage, page) => { - setActivePage(page); - setSizePerPage(sizePerPage); + const handleLimitChange = (newLimit: number) => { + setSizePerPage(newLimit); + setActivePage(1); }; - const handlePageChange = (page) => { + const handlePageChange = (page: number) => { setActivePage(page); props.page.setPageNo(page); props.setInvalidated(true); @@ -362,6 +362,13 @@ const Users = React.memo((props: any) => { ); }; + const getPageList = () => [ + { text: '5', value: 5 }, + { text: '25', value: 25 }, + { text: '50', value: 50 }, + { text: '100', value: 100 }, + { text: 'All', value: roles.length }, + ]; return ( <> @@ -409,7 +416,7 @@ const Users = React.memo((props: any) => {
{t("Filter By:")} { @@ -514,14 +521,15 @@ const Users = React.memo((props: any) => { onTableChange={handleTableChange} data-testid="admin-users-table" /> -
+
diff --git a/forms-flow-admin/src/index.scss b/forms-flow-admin/src/index.scss index 0159334f7..9a9c83a8f 100644 --- a/forms-flow-admin/src/index.scss +++ b/forms-flow-admin/src/index.scss @@ -10,3 +10,11 @@ bottom: 0; .page-item .page-link { color: #0072ed !important; } + +.react-bootstrap-table table { + min-height: 60vh; + } + + .react-bootstrap-table{ + min-height: 65vh; + }