Merge pull request #378 from Ajay-aot/bugfix/FWF-4101-admin-page-fixes

UI modifications in admin pages
AOT-Technologies · Dec 20, 2024 · 96e789d · 96e789d
2 parents 63448f5 + 000fae3
commit 96e789d
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 30 deletions.
diff --git 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
@@ -6,20 +6,14 @@
 
 
 .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;
 }
 
 .container-admin .react-bootstrap-table-pagination-list{
     margin-top: 1rem;
 } 
 
-.table-container-admin tbody {
-    overflow-y: auto;
-    height: 360px;
-}
diff --git 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
@@ -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
@@ -31,10 +31,8 @@
 
 
 .user-table-container {
-    min-height: 30rem !important;
 
     background: $white;
-    border: 1px solid $gray-200;
     box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
     border-radius: 8px;
 }
@@ -43,8 +41,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
@@ -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,15 +416,15 @@ 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"
             >
               <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
@@ -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;
+  }