Skip to content

Commit 03f0dba

Browse files
darkhorse-420darkhorse-420
committed
feat: dashboard
1 parent fd1d2bf commit 03f0dba

File tree

1 file changed

+119
-36
lines changed

1 file changed

+119
-36
lines changed

‎src/ui/views/OpenPushRequests/components/PushesTable.jsx

Lines changed: 119 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,26 @@ import Paper from '@material-ui/core/Paper';
1313
import styles from '../../../assets/jss/material-dashboard-react/views/dashboardStyle';
1414
import { getPushes } from '../../../services/git-push';
1515
import { KeyboardArrowRight } from '@material-ui/icons';
16+
import Search from '../../../components/Search/Search'; // Import the Search component
17+
import Pagination from '../../../components/Pagination/Pagination'; // Import Pagination component
1618

1719
export default function PushesTable(props) {
1820
const useStyles = makeStyles(styles);
1921
const classes = useStyles();
2022
const [data, setData] = useState([]);
21-
const [, setAuth] = useState(true);
23+
const [filteredData, setFilteredData] = useState([]); // State for filtered data
2224
const [isLoading, setIsLoading] = useState(false);
2325
const [isError, setIsError] = useState(false);
2426
const navigate = useNavigate();
25-
27+
const [, setAuth] = useState(true);
28+
const [currentPage, setCurrentPage] = useState(1); // State for current page
29+
const itemsPerPage = 5;
30+
const [searchTerm, setSearchTerm] = useState(''); // Define searchTerm state
2631
const openPush = (push) => navigate(`/admin/push/${push}`, { replace: true });
2732

33+
34+
35+
2836
useEffect(() => {
2937
const query = {};
3038

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

46+
47+
// useEffect(() => {
48+
// setFilteredData(data); // Initialize filtered data with full data on load
49+
// }, [data]);
50+
51+
useEffect(() => {
52+
// Initialize filtered data with full data on load
53+
const filtered = filterByStatus(data);
54+
setFilteredData(filtered);
55+
}, [props]);
56+
57+
const filterByStatus = (data) => {
58+
if (props.authorised) {
59+
return data.filter(item => item.status === 'approved');
60+
}
61+
if (props.rejected) {
62+
return data.filter(item => item.status === 'rejected');
63+
}
64+
if (props.canceled) {
65+
return data.filter(item => item.status === 'canceled');
66+
}
67+
if (props.blocked) {
68+
return data.filter(item => item.status === 'pending');
69+
}
70+
return data;
71+
};
72+
73+
74+
// Apply search to the filtered data
75+
useEffect(() => {
76+
const filtered = filterByStatus(data); // Apply status filter first
77+
if (searchTerm) {
78+
const lowerCaseTerm = searchTerm.toLowerCase();
79+
const searchFiltered = filtered.filter((item) =>
80+
item.repo.toLowerCase().includes(lowerCaseTerm) ||
81+
item.commitTo.toLowerCase().includes(lowerCaseTerm) ||
82+
83+
item.commitData[0].message.toLowerCase().includes(lowerCaseTerm)
84+
);
85+
setFilteredData(searchFiltered);
86+
} else {
87+
setFilteredData(filtered); // Reset to filtered data after clearing search
88+
}
89+
setCurrentPage(1); // Reset pagination on search
90+
}, [searchTerm, props]); // Trigger on search or tab change
91+
92+
// Handler function for search input
93+
const handleSearch = (searchTerm) => {
94+
setSearchTerm(searchTerm); // Update search term state
95+
};
96+
97+
98+
const handlePageChange = (page) => {
99+
setCurrentPage(page); // Update current page
100+
};
101+
102+
// Logic for pagination (getting items for the current page)
103+
const indexOfLastItem = currentPage * itemsPerPage;
104+
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
105+
const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);
106+
107+
// Change page
108+
const paginate = (pageNumber) => setCurrentPage(pageNumber);
109+
38110
if (isLoading) return <div>Loading...</div>;
39111
if (isError) return <div>Something went wrong ...</div>;
40112

41113
return (
42114
<div>
115+
<Search onSearch={handleSearch} /> {/* Use the Search component */}
116+
117+
43118
<TableContainer component={Paper}>
44-
<Table className={classes.table} aria-label='simple table'>
119+
<Table className={classes.table} aria-label="simple table">
45120
<TableHead>
46121
<TableRow>
47-
<TableCell align='left'>Timestamp</TableCell>
48-
<TableCell align='left'>Repository</TableCell>
49-
<TableCell align='left'>Branch</TableCell>
50-
<TableCell align='left'>Commit SHA</TableCell>
51-
<TableCell align='left'>Committer</TableCell>
52-
<TableCell align='left'>Author</TableCell>
53-
<TableCell align='left'>Author E-mail</TableCell>
54-
<TableCell align='left'>Commit Message</TableCell>
55-
<TableCell align='left'>No. of Commits</TableCell>
56-
<TableCell align='right'></TableCell>
122+
<TableCell align="left">Timestamp</TableCell>
123+
<TableCell align="left">Repository</TableCell>
124+
<TableCell align="left">Branch</TableCell>
125+
<TableCell align="left">Commit SHA</TableCell>
126+
<TableCell align="left">Committer</TableCell>
127+
<TableCell align="left">Author</TableCell>
128+
<TableCell align="left">Author E-mail</TableCell>
129+
<TableCell align="left">Commit Message</TableCell>
130+
<TableCell align="left">No. of Commits</TableCell>
131+
<TableCell align="right"></TableCell>
57132
</TableRow>
58133
</TableHead>
59134
<TableBody>
60-
{[...data].reverse().map((row) => {
135+
{currentItems.reverse().map((row) => {
61136
const repoFullName = row.repo.replace('.git', '');
62137
const repoBranch = row.branch.replace('refs/heads/', '');
63138

64139
return (
65140
<TableRow key={row.id}>
66-
<TableCell align='left'>
141+
<TableCell align="left">
67142
{moment
68143
.unix(row.commitData[0].commitTs || row.commitData[0].commitTimestamp)
69144
.toString()}
70145
</TableCell>
71-
<TableCell align='left'>
72-
<a href={`https://github.com/${row.repo}`} rel='noreferrer' target='_blank'>
146+
<TableCell align="left">
147+
<a href={`https://github.com/${row.repo}`} rel="noreferrer" target="_blank">
73148
{repoFullName}
74149
</a>
75150
</TableCell>
76-
<TableCell align='left'>
151+
<TableCell align="left">
77152
<a
78153
href={`https://github.com/${repoFullName}/tree/${repoBranch}`}
79-
rel='noreferrer'
80-
target='_blank'
154+
rel="noreferrer"
155+
target="_blank"
81156
>
82157
{repoBranch}
83158
</a>
84159
</TableCell>
85-
<TableCell align='left'>
160+
<TableCell align="left">
86161
<a
87162
href={`https://github.com/${repoFullName}/commit/${row.commitTo}`}
88-
rel='noreferrer'
89-
target='_blank'
163+
rel="noreferrer"
164+
target="_blank"
90165
>
91166
{row.commitTo.substring(0, 8)}
92167
</a>
93168
</TableCell>
94-
<TableCell align='left'>
169+
<TableCell align="left">
95170
<a
96171
href={`https://github.com/${row.commitData[0].committer}`}
97-
rel='noreferrer'
98-
target='_blank'
172+
rel="noreferrer"
173+
target="_blank"
99174
>
100175
{row.commitData[0].committer}
101176
</a>
102177
</TableCell>
103-
<TableCell align='left'>
178+
<TableCell align="left">
104179
<a
105180
href={`https://github.com/${row.commitData[0].author}`}
106-
rel='noreferrer'
107-
target='_blank'
181+
rel="noreferrer"
182+
target="_blank"
108183
>
109184
{row.commitData[0].author}
110185
</a>
111186
</TableCell>
112-
<TableCell align='left'>
187+
<TableCell align="left">
113188
{row.commitData[0].authorEmail ? (
114189
<a href={`mailto:${row.commitData[0].authorEmail}`}>
115190
{row.commitData[0].authorEmail}
116191
</a>
117192
) : (
118193
'No data...'
119-
)}{' '}
194+
)}
120195
</TableCell>
121-
<TableCell align='left'>{row.commitData[0].message}</TableCell>
122-
<TableCell align='left'>{row.commitData.length}</TableCell>
123-
<TableCell component='th' scope='row'>
124-
<Button variant='contained' color='primary' onClick={() => openPush(row.id)}>
125-
<KeyboardArrowRight></KeyboardArrowRight>
196+
<TableCell align="left">{row.commitData[0].message}</TableCell>
197+
<TableCell align="left">{row.commitData.length}</TableCell>
198+
<TableCell component="th" scope="row">
199+
<Button variant="contained" color="primary" onClick={() => openPush(row.id)}>
200+
<KeyboardArrowRight />
126201
</Button>
127202
</TableCell>
128203
</TableRow>
@@ -131,6 +206,14 @@ export default function PushesTable(props) {
131206
</TableBody>
132207
</Table>
133208
</TableContainer>
209+
{/* Pagination Component */}
210+
<Pagination
211+
itemsPerPage={itemsPerPage}
212+
totalItems={filteredData.length}
213+
paginate={paginate}
214+
currentPage={currentPage}
215+
onPageChange={handlePageChange}
216+
/>
134217
</div>
135218
);
136219
}

0 commit comments

Comments
 (0)