Skip to content

Commit

Permalink
fixed pagination in Bp and disabled buttons (#215)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mubashirshariq
Mubashirshariq authored Feb 22, 2025
1 parent aaf79f9 commit 0b09191
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 26 deletions.
158 changes: 144 additions & 14 deletions src/components/BindingPolicy/BPPagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,174 @@
import React,{useContext} from "react";
import React, { useContext } from 'react';
import { Box, Typography, Button } from "@mui/material";
import { ThemeContext } from "../../context/ThemeContext";

interface BPPaginationProps {
interface PaginationProps {
filteredCount: number;
totalCount: number;
itemsPerPage?: number;
currentPage: number;
onPageChange: (page: number) => void;
}

const BPPagination: React.FC<BPPaginationProps> = ({
const BPPagination: React.FC<PaginationProps> = ({
filteredCount,
totalCount,
itemsPerPage = 10,
currentPage,
onPageChange
}) => {
const { theme } = useContext(ThemeContext);
const { theme } = useContext(ThemeContext);
const totalPages = Math.ceil(filteredCount / itemsPerPage);

const getPageNumbers = (): (number | string)[] => {
if (totalPages <= 1) return [1];

const range: (number | string)[] = [];
let lastNumber: number | null = null;

range.push(1);

for (let i = currentPage - 1; i <= currentPage + 1; i++) {
if (i > 1 && i < totalPages) {
if (lastNumber && i > lastNumber + 1) {
range.push('...');
}
range.push(i);
lastNumber = i;
}
}

if (lastNumber && totalPages > lastNumber + 1) {
range.push('...');
}
if (totalPages > 1) {
range.push(totalPages);
}

return range;
};

const handlePageChange = (page: number) => {
if (page >= 1 && page <= totalPages) {
onPageChange(page);
}
};

const startRange = ((currentPage - 1) * itemsPerPage) + 1;
const endRange = Math.min(currentPage * itemsPerPage, filteredCount);

return (
<Box
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mt: 2,
}}
>
<Typography variant="body2" color="text.secondary"
className={theme === "dark" ? "!text-white" : "" }>
Showing {filteredCount} of {totalCount} entries
<Typography
variant="body2"
sx={{
color: theme === "dark" ? "white" : "text.secondary"
}}
>
Showing {startRange} to {endRange} of {filteredCount} entries
{filteredCount !== totalCount && ` (filtered from ${totalCount} total entries)`}
</Typography>
<Box sx={{ display: "flex", gap: 1 }}>
{[1, 2, 3, "...", 40].map((page, index) => (

<Box sx={{ display: "flex", gap: 0.5 }}>
<Button
variant="outlined"
size="small"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
sx={{
minWidth: 'auto',
px: 1,
color: theme === "dark" ? "white" : "primary.main",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.23)" : "rgba(25, 118, 210, 0.5)",
'&:hover': {
borderColor: theme === "dark" ? "white" : "primary.main",
backgroundColor: theme === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(25, 118, 210, 0.04)"
},
'&.Mui-disabled': {
cursor: 'not-allowed',
pointerEvents: "all !important",
backgroundColor: theme === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.26)",
color: theme === "dark" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.26)"
}
}}
>
Prev
</Button>

{getPageNumbers().map((pageNumber, index) => (
<Button
key={index}
variant="outlined"
variant={pageNumber === currentPage ? "contained" : "outlined"}
size="small"
sx={{ minWidth: 40 }}
disabled={pageNumber === '...'}
onClick={() => typeof pageNumber === 'number' ? handlePageChange(pageNumber) : undefined}
sx={{
minWidth: 35,
px: 1,
color: pageNumber === currentPage
? "white"
: theme === "dark" ? "white" : "primary.main",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.23)" : "rgba(25, 118, 210, 0.5)",
backgroundColor: pageNumber === currentPage
? "primary.main"
: "transparent",
'&:hover': {
borderColor: theme === "dark" ? "white" : "primary.main",
backgroundColor: pageNumber === currentPage
? "primary.dark"
: theme === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(25, 118, 210, 0.04)"
},
'&.Mui-disabled': {
cursor: 'not-allowed',
pointerEvents: "all !important",
backgroundColor: pageNumber === '...'
? 'transparent'
: theme === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.26)",
color: theme === "dark" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.26)"
}
}}
>
{page}
{pageNumber}
</Button>
))}

<Button
variant="outlined"
size="small"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
sx={{
minWidth: 'auto',
px: 1,
color: theme === "dark" ? "white" : "primary.main",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.23)" : "rgba(25, 118, 210, 0.5)",
'&:hover': {
borderColor: theme === "dark" ? "white" : "primary.main",
backgroundColor: theme === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(25, 118, 210, 0.04)"
},
'&.Mui-disabled': {
cursor: 'not-allowed',
pointerEvents: "all !important",
backgroundColor: theme === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)",
borderColor: theme === "dark" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.26)",
color: theme === "dark" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.26)"
}
}}
>
Next
</Button>
</Box>
</Box>
);
};

export default BPPagination;
export default BPPagination;
2 changes: 1 addition & 1 deletion src/components/ClustersTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ const ClustersTable: React.FC<ClustersTableProps> = ({
},
}}
>
<MenuItem className={theme === "dark" ? "!bg-slate-800 !text-white hover:!bg-slate-900" : ""} value="">All</MenuItem>
<MenuItem className={theme === "dark" ? "!bg-slate-800 !text-white hover:!bg-slate-900" : ""} value="All">All</MenuItem>
<MenuItem className={theme === "dark" ? "!bg-slate-800 !text-white hover:!bg-slate-900" : ""} value="Active✓">Active</MenuItem>
<MenuItem className={theme === "dark" ? "!bg-slate-800 !text-white hover:!bg-slate-900" : ""} value="Inactive">Inactive</MenuItem>
<MenuItem className={theme === "dark" ? "!bg-slate-800 !text-white hover:!bg-slate-900" : ""} value="Pending">Pending</MenuItem>
Expand Down
43 changes: 42 additions & 1 deletion src/components/ImportClusters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,9 +271,24 @@ const ImportClusters = ({ activeOption, setActiveOption, onCancel }: Props) => {
<Button
variant="contained"
disabled={!editorContent}
sx={{
"&:disabled": {
cursor: "not-allowed",
pointerEvents: "all !important",
},
boxShadow: 2,
}}
className={`${
!editorContent
? theme === "dark"
? "!bg-gray-700 !text-gray-400"
: "!bg-gray-300 !text-gray-500"
: ""
}`}
>
Upload
</Button>

</DialogActions>
</Box>
)}
Expand Down Expand Up @@ -331,7 +346,20 @@ const ImportClusters = ({ activeOption, setActiveOption, onCancel }: Props) => {
variant="contained"
onClick={handleFileUpload}
disabled={!selectedFile}
sx={{ boxShadow: 2 }}
sx={{
"&:disabled": {
cursor: "not-allowed",
pointerEvents: "all !important",
},
boxShadow: 2,
}}
className={`${
!editorContent
? theme === "dark"
? "!bg-gray-700 !text-gray-400"
: "!bg-gray-300 !text-gray-500"
: ""
}`}
>
Upload & Import
</Button>
Expand Down Expand Up @@ -465,6 +493,19 @@ const ImportClusters = ({ activeOption, setActiveOption, onCancel }: Props) => {
variant="contained"
onClick={handleImportCluster}
disabled={!formData.clusterName || !formData.Region || !labels.length || !formData.node || loading}
sx={{
"&:disabled": {
cursor: "not-allowed",
pointerEvents: "all !important",
},
}}
className={`${
(!formData.clusterName || !formData.Region || !labels.length || !formData.node || loading)
? theme === "dark"
? "!bg-gray-700 !text-gray-400"
: "!bg-gray-300 !text-gray-500"
: ""
}`}
>
{loading ? <CircularProgress size={24} /> : "Import"}
</Button>
Expand Down
34 changes: 24 additions & 10 deletions src/pages/BP.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const BP = () => {
status?: "Active" | "Inactive";
}>({});
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;

useEffect(() => {
// Simulate loading initial data
Expand Down Expand Up @@ -219,14 +221,24 @@ spec:
setPreviewDialogOpen(true);
};

const filteredPolicies = bindingPolicies.filter((policy) => {
const searchLower = searchQuery.toLowerCase();
return (
policy.name.toLowerCase().includes(searchLower) ||
policy.workload.toLowerCase().includes(searchLower) ||
policy.status.toLowerCase().includes(searchLower)
);
});
const getFilteredPolicies = () => {
return bindingPolicies.filter((policy) => {
const searchLower = searchQuery.toLowerCase();
const matchesSearch = policy.name.toLowerCase().includes(searchLower) ||
policy.workload.toLowerCase().includes(searchLower) ||
policy.status.toLowerCase().includes(searchLower);

const matchesStatus = !activeFilters.status ||
policy.status === activeFilters.status;

return matchesSearch && matchesStatus;
});
};
const filteredPolicies = getFilteredPolicies();
const paginatedPolicies = filteredPolicies.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);

if (loading) {
return (
Expand Down Expand Up @@ -258,7 +270,7 @@ spec:
/>

<BPTable
policies={filteredPolicies}
policies={paginatedPolicies}
onPreviewMatches={(policy) => handlePreviewPolicy(policy)}
onDeletePolicy={handleDeletePolicy}
onEditPolicy={handleEditPolicy}
Expand All @@ -268,8 +280,10 @@ spec:
<BPPagination
filteredCount={filteredPolicies.length}
totalCount={bindingPolicies.length}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
onPageChange={setCurrentPage}
/>

<PreviewDialog
open={previewDialogOpen}
onClose={() => setPreviewDialogOpen(false)}
Expand Down

0 comments on commit 0b09191

Please sign in to comment.