Merge pull request #36 from smswithoutborders/staging

feat(pages): enhance data grids with toolbar and refetch button
smswithoutborders · May 28, 2024 · 05b76e2 · 05b76e2
2 parents 35c2b64 + 09dce24
commit 05b76e2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 22 deletions.
diff --git a/src/Pages/Reliability.js b/src/Pages/Reliability.js
@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
 import {
 	Grid,
 	Box,
 	Card,
 	Typography,
 	LinearProgress,
 	CircularProgress,
-	Button
+	Button,
+	Stack
 } from "@mui/material";
 import CountrySearch from "../Components/CountrySearch";
 import OperatorSearch from "../Components/OperatorSearch";
@@ -179,6 +180,7 @@ const Reliability = () => {
 			headerName: "Reliability",
 			minWidth: 100,
 			flex: 0.6,
+			valueFormatter: ({ value }) => `${value}%`,
 			renderCell: renderReliabilityCell
 		},
 		{
@@ -262,12 +264,19 @@ const Reliability = () => {
 						<Grid item md={3} xs={6}>
 							<DateSearch onSelectDate={setSelectedDate} />
 						</Grid>
-						<Grid item md={3} xs={6}>
-							<Button variant="contained" onClick={handleRefresh} disabled={clientDataLoading}>
-								Refresh {clientDataLoading && <CircularProgress size={24} />}
-							</Button>
-						</Grid>
 					</Grid>
+					<Stack
+						spacing={1}
+						direction="row"
+						alignItems="center"
+						sx={{ mb: 1 }}
+						useFlexGap
+						flexWrap="wrap"
+					>
+						<Button variant="outlined" onClick={handleRefresh} disabled={clientDataLoading}>
+							Refetch data {clientDataLoading && <CircularProgress size={24} sx={{ ml: 2 }} />}
+						</Button>
+					</Stack>
 					<DataGrid
 						loading={clientDataLoading}
 						rows={data}
@@ -281,7 +290,8 @@ const Reliability = () => {
 						onPaginationModelChange={setPaginationModel}
 						slots={{
 							noRowsOverlay: CustomNoRowsOverlay,
-							loadingOverlay: LinearProgress
+							loadingOverlay: LinearProgress,
+							toolbar: GridToolbar
 						}}
 						sx={{ height: 550 }}
 					/>

diff --git a/src/Pages/Resilience.js b/src/Pages/Resilience.js
@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
 import {
 	Grid,
 	Box,
 	Card,
 	Typography,
 	LinearProgress,
 	CircularProgress,
-	Button
+	Button,
+	Stack
 } from "@mui/material";
 import CountrySearch from "../Components/CountrySearch";
 import OperatorSearch from "../Components/OperatorSearch";
@@ -203,12 +204,19 @@ const Resilience = () => {
 						<Grid item md={3} xs={6}>
 							<DateSearch onSelectDate={setSelectedDate} />
 						</Grid>
-						<Grid item md={3} xs={6}>
-							<Button variant="contained" onClick={handleRefresh} disabled={clientDataLoading}>
-								Refresh {clientDataLoading && <CircularProgress size={24} />}
-							</Button>
-						</Grid>
 					</Grid>
+					<Stack
+						spacing={1}
+						direction="row"
+						alignItems="center"
+						sx={{ mb: 1 }}
+						useFlexGap
+						flexWrap="wrap"
+					>
+						<Button variant="outlined" onClick={handleRefresh} disabled={clientDataLoading}>
+							Refetch data {clientDataLoading && <CircularProgress size={24} sx={{ ml: 2 }} />}
+						</Button>
+					</Stack>
 					<DataGrid
 						loading={clientDataLoading}
 						rows={data}
@@ -221,7 +229,8 @@ const Resilience = () => {
 						onPaginationModelChange={setPaginationModel}
 						slots={{
 							noRowsOverlay: CustomNoRowsOverlay,
-							loadingOverlay: LinearProgress
+							loadingOverlay: LinearProgress,
+							toolbar: GridToolbar
 						}}
 						sx={{ height: 550 }}
 					/>

diff --git a/src/Pages/TableDialog.js b/src/Pages/TableDialog.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { DataGrid } from "@mui/x-data-grid";
-import { Box, Grid, LinearProgress, Button, CircularProgress } from "@mui/material";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import { Box, Grid, LinearProgress, Button, CircularProgress, Stack } from "@mui/material";
 import { FaChevronLeft } from "react-icons/fa6";
 import { Link, useLocation } from "react-router-dom";
 import CustomNoRowsOverlay from "../Components/CustomNoRowsOverlay";
@@ -158,10 +158,19 @@ export default function Data() {
 						<Link to="/">
 							<FaChevronLeft /> Back
 						</Link>
-						<Button variant="contained" onClick={handleRefresh} disabled={testDataLoading}>
-							Refresh {testDataLoading && <CircularProgress size={24} />}
-						</Button>
 					</Grid>
+					<Stack
+						spacing={1}
+						direction="row"
+						alignItems="center"
+						sx={{ mb: 1 }}
+						useFlexGap
+						flexWrap="wrap"
+					>
+						<Button variant="outlined" onClick={handleRefresh} disabled={testDataLoading}>
+							Refetch data {testDataLoading && <CircularProgress size={24} sx={{ ml: 2 }} />}
+						</Button>
+					</Stack>
 					<DataGrid
 						loading={testDataLoading}
 						rows={data}
@@ -173,7 +182,8 @@ export default function Data() {
 						onPaginationModelChange={setPaginationModel}
 						slots={{
 							noRowsOverlay: CustomNoRowsOverlay,
-							loadingOverlay: LinearProgress
+							loadingOverlay: LinearProgress,
+							toolbar: GridToolbar
 						}}
 						sx={{ height: 550 }}
 					/>