Skip to content

Commit

Permalink
feat: dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@darkhorse-420
darkhorse-420 committed Nov 15, 2024
1 parent fd1d2bf commit 03f0dba
Showing 1 changed file with 119 additions and 36 deletions.
155 changes: 119 additions & 36 deletions src/ui/views/OpenPushRequests/components/PushesTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,26 @@ import Paper from '@material-ui/core/Paper';
import styles from '../../../assets/jss/material-dashboard-react/views/dashboardStyle';
import { getPushes } from '../../../services/git-push';
import { KeyboardArrowRight } from '@material-ui/icons';
import Search from '../../../components/Search/Search'; // Import the Search component
import Pagination from '../../../components/Pagination/Pagination'; // Import Pagination component

export default function PushesTable(props) {
const useStyles = makeStyles(styles);
const classes = useStyles();
const [data, setData] = useState([]);
const [, setAuth] = useState(true);
const [filteredData, setFilteredData] = useState([]); // State for filtered data
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const navigate = useNavigate();

const [, setAuth] = useState(true);
const [currentPage, setCurrentPage] = useState(1); // State for current page
const itemsPerPage = 5;
const [searchTerm, setSearchTerm] = useState(''); // Define searchTerm state
const openPush = (push) => navigate(`/admin/push/${push}`, { replace: true });




useEffect(() => {
const query = {};

Expand All @@ -35,94 +43,161 @@ export default function PushesTable(props) {
getPushes(setIsLoading, setData, setAuth, setIsError, query);
}, [props]);


// useEffect(() => {
// setFilteredData(data); // Initialize filtered data with full data on load
// }, [data]);

useEffect(() => {
// Initialize filtered data with full data on load
const filtered = filterByStatus(data);
setFilteredData(filtered);
}, [props]);

const filterByStatus = (data) => {
if (props.authorised) {
return data.filter(item => item.status === 'approved');
}
if (props.rejected) {
return data.filter(item => item.status === 'rejected');
}
if (props.canceled) {
return data.filter(item => item.status === 'canceled');
}
if (props.blocked) {
return data.filter(item => item.status === 'pending');
}
return data;
};


// Apply search to the filtered data
useEffect(() => {
const filtered = filterByStatus(data); // Apply status filter first
if (searchTerm) {
const lowerCaseTerm = searchTerm.toLowerCase();
const searchFiltered = filtered.filter((item) =>
item.repo.toLowerCase().includes(lowerCaseTerm) ||
item.commitTo.toLowerCase().includes(lowerCaseTerm) ||

item.commitData[0].message.toLowerCase().includes(lowerCaseTerm)
);
setFilteredData(searchFiltered);
} else {
setFilteredData(filtered); // Reset to filtered data after clearing search
}
setCurrentPage(1); // Reset pagination on search
}, [searchTerm, props]); // Trigger on search or tab change

// Handler function for search input
const handleSearch = (searchTerm) => {
setSearchTerm(searchTerm); // Update search term state
};


const handlePageChange = (page) => {
setCurrentPage(page); // Update current page
};

// Logic for pagination (getting items for the current page)
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);

// Change page
const paginate = (pageNumber) => setCurrentPage(pageNumber);

if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Something went wrong ...</div>;

return (
<div>
<Search onSearch={handleSearch} /> {/* Use the Search component */}


<TableContainer component={Paper}>
<Table className={classes.table} aria-label='simple table'>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align='left'>Timestamp</TableCell>
<TableCell align='left'>Repository</TableCell>
<TableCell align='left'>Branch</TableCell>
<TableCell align='left'>Commit SHA</TableCell>
<TableCell align='left'>Committer</TableCell>
<TableCell align='left'>Author</TableCell>
<TableCell align='left'>Author E-mail</TableCell>
<TableCell align='left'>Commit Message</TableCell>
<TableCell align='left'>No. of Commits</TableCell>
<TableCell align='right'></TableCell>
<TableCell align="left">Timestamp</TableCell>
<TableCell align="left">Repository</TableCell>
<TableCell align="left">Branch</TableCell>
<TableCell align="left">Commit SHA</TableCell>
<TableCell align="left">Committer</TableCell>
<TableCell align="left">Author</TableCell>
<TableCell align="left">Author E-mail</TableCell>
<TableCell align="left">Commit Message</TableCell>
<TableCell align="left">No. of Commits</TableCell>
<TableCell align="right"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{[...data].reverse().map((row) => {
{currentItems.reverse().map((row) => {
const repoFullName = row.repo.replace('.git', '');
const repoBranch = row.branch.replace('refs/heads/', '');

return (
<TableRow key={row.id}>
<TableCell align='left'>
<TableCell align="left">
{moment
.unix(row.commitData[0].commitTs || row.commitData[0].commitTimestamp)
.toString()}
</TableCell>
<TableCell align='left'>
<a href={`https://github.com/${row.repo}`} rel='noreferrer' target='_blank'>
<TableCell align="left">
<a href={`https://github.com/${row.repo}`} rel="noreferrer" target="_blank">
{repoFullName}
</a>
</TableCell>
<TableCell align='left'>
<TableCell align="left">
<a
href={`https://github.com/${repoFullName}/tree/${repoBranch}`}
rel='noreferrer'
target='_blank'
rel="noreferrer"
target="_blank"
>
{repoBranch}
</a>
</TableCell>
<TableCell align='left'>
<TableCell align="left">
<a
href={`https://github.com/${repoFullName}/commit/${row.commitTo}`}
rel='noreferrer'
target='_blank'
rel="noreferrer"
target="_blank"
>
{row.commitTo.substring(0, 8)}
</a>
</TableCell>
<TableCell align='left'>
<TableCell align="left">
<a
href={`https://github.com/${row.commitData[0].committer}`}
rel='noreferrer'
target='_blank'
rel="noreferrer"
target="_blank"
>
{row.commitData[0].committer}
</a>
</TableCell>
<TableCell align='left'>
<TableCell align="left">
<a
href={`https://github.com/${row.commitData[0].author}`}
rel='noreferrer'
target='_blank'
rel="noreferrer"
target="_blank"
>
{row.commitData[0].author}
</a>
</TableCell>
<TableCell align='left'>
<TableCell align="left">
{row.commitData[0].authorEmail ? (
<a href={`mailto:${row.commitData[0].authorEmail}`}>
{row.commitData[0].authorEmail}
</a>
) : (
'No data...'
)}{' '}
)}
</TableCell>
<TableCell align='left'>{row.commitData[0].message}</TableCell>
<TableCell align='left'>{row.commitData.length}</TableCell>
<TableCell component='th' scope='row'>
<Button variant='contained' color='primary' onClick={() => openPush(row.id)}>
<KeyboardArrowRight></KeyboardArrowRight>
<TableCell align="left">{row.commitData[0].message}</TableCell>
<TableCell align="left">{row.commitData.length}</TableCell>
<TableCell component="th" scope="row">
<Button variant="contained" color="primary" onClick={() => openPush(row.id)}>
<KeyboardArrowRight />
</Button>
</TableCell>
</TableRow>
Expand All @@ -131,6 +206,14 @@ export default function PushesTable(props) {
</TableBody>
</Table>
</TableContainer>
{/* Pagination Component */}
<Pagination
itemsPerPage={itemsPerPage}
totalItems={filteredData.length}
paginate={paginate}
currentPage={currentPage}
onPageChange={handlePageChange}
/>
</div>
);
}
Expand Down

0 comments on commit 03f0dba

Please sign in to comment.