From ee8bc9d05468b1c0d16d21e03d2a35af97ec97db Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Tue, 17 Dec 2024 21:51:59 +0530
Subject: [PATCH] admin UI modifications
---
.../src/components/dashboard/dashboard.tsx | 17 ++++++++++---
.../dashboard/insightDashboard.scss | 6 -----
.../src/components/roles/roles.scss | 9 +------
.../src/components/roles/roles.tsx | 2 +-
.../src/components/users/users.scss | 7 +++---
.../src/components/users/users.tsx | 24 ++++++++++++-------
forms-flow-admin/src/index.scss | 8 +++++++
7 files changed, 43 insertions(+), 30 deletions(-)
diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
index 4715783c2..cf0311ddc 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 = () => (
<div data-testid="dashboard-no-data-msg">
<h3 className="text-center">
@@ -271,7 +282,7 @@ const InsightDashboard = React.memo((props: any) => {
<div>
<BootstrapTable
keyField="resourceId"
- data={authDashBoardList}
+ data={paginatedDashboard}
columns={columns}
bordered={false}
wrapperClasses="table-container-admin mb-3 px-4"
@@ -288,8 +299,8 @@ 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()}
/>
</tfoot>
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 d52c63dc8..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: 24rem !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: 300px;
- }
}
.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 ded4a2bfd..d624c29e0 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"
/>
- <table className="table">
+ <table className="table mt-3">
<tfoot>
<TableFooter
limit={sizePerPage}
diff --git a/forms-flow-admin/src/components/users/users.scss b/forms-flow-admin/src/components/users/users.scss
index a95b4091c..ab945d02e 100644
--- a/forms-flow-admin/src/components/users/users.scss
+++ b/forms-flow-admin/src/components/users/users.scss
@@ -31,10 +31,9 @@
.user-table-container {
- min-height: 25rem !important;
+
background: $white;
- border: 1px solid $gray-200;
box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
border-radius: 8px;
}
@@ -43,8 +42,8 @@
.user-filter-container>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 47a3686ee..29b6fd767 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) => {
<div className="user-filter-container col-lg-4 col-xl-4 col-md-4 col-sm-6 col-12 d-flex justify-content-end gap-2">
<span className="my-2">{t("Filter By:")} </span>
<Form.Select
- className="bg-light text-dark"
+ className="bg-light text-dark w-0"
onChange={handleSelectFilter}
title={t("Filter here")}
data-testid="users-roles-filter-select"
@@ -417,7 +424,7 @@ const Users = React.memo((props: any) => {
<option
value="ALL"
selected={!props.filter}
- data-testid="users-roles-filter-option-all"
+ data-testid="users-roles-filter-option-all"
>
{t("All roles")}
</option>
@@ -514,14 +521,15 @@ const Users = React.memo((props: any) => {
onTableChange={handleTableChange}
data-testid="admin-users-table"
/>
- <table className="table">
+ <table className="table mt-3">
<tfoot>
<TableFooter
limit={sizePerPage}
- activePage={activePage}
+ activePage={activePage}
totalCount={props.total}
handlePageChange={handlePageChange}
onLimitChange={handleLimitChange}
+ pageOptions={getPageList()}
/>
</tfoot>
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;
+ }