feat: Implemented search and pagination in Dashboard

src/ui/components/Filtering/Filtering.css

@@ -0,0 +1,55 @@
+.filtering-container {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 10px;
+}
+
+.dropdown-toggle {
+  padding: 10px 10px;
+  padding-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #fff;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  width: 130px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dropdown-toggle:hover {
+  background-color: #f0f0f0;
+}
+
+.dropdown-arrow {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 15px;
+  margin-left: 1px;
+  margin-right: 10px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-top: 5px;
+  z-index: 1000;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-item {
+  padding: 10px 15px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+}
+
+.dropdown-item:hover {
+  background-color: #f0f0f0;
+}

src/ui/components/Filtering/Filtering.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import './Filtering.css';
+
+const Filtering = ({ onFilterChange }) => {
+  const [isOpen, setIsOpen] = useState(false); // State to toggle dropdown open/close
+  const [selectedOption, setSelectedOption] = useState('Sort by'); // Initial state
+  const [sortOrder, setSortOrder] = useState('asc'); // Track sort order (asc/desc)
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen); // Toggle dropdown open/close state
+  };
+
+  const toggleSortOrder = () => {
+    // Toggle sort order only if an option is selected
+    if (selectedOption !== 'Sort by') {
+      const newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+      setSortOrder(newSortOrder);
+      onFilterChange(selectedOption, newSortOrder); // Trigger filtering with new order
+    }
+  };
+
+  const handleOptionClick = (option) => {
+    // Handle filter option selection
+    setSelectedOption(option);
+    onFilterChange(option, sortOrder); // Call the parent function with selected filter and order
+    setIsOpen(false); // Collapse the dropdown after selection
+  };
+
+  return (
+    <div className="filtering-container">
+      <div className="dropdown">
+        {/* Make the entire button clickable for toggling dropdown */}
+        <button onClick={toggleDropdown} className="dropdown-toggle">
+          {selectedOption}
+          {/* Render the up/down arrow next to selected option */}
+          {selectedOption !== 'Sort by' && (
+            <span onClick={(e) => { e.stopPropagation(); toggleSortOrder(); }}>
+              {sortOrder === 'asc' ? ' ↑' : ' ↓'}
+            </span>
+          )}
+          <span className="dropdown-arrow">▼</span>
+        </button>
+
+        {isOpen && (
+          <div className="dropdown-menu">
+            <div onClick={() => handleOptionClick('Date Modified')} className="dropdown-item">
+              Date Modified
+            </div>
+            <div onClick={() => handleOptionClick('Date Created')} className="dropdown-item">
+              Date Created
+            </div>
+            <div onClick={() => handleOptionClick('Alphabetical')} className="dropdown-item">
+              Alphabetical
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Filtering;
+
+
+
+

src/ui/components/Pagination/Pagination.css

@@ -0,0 +1,28 @@
+.paginationContainer {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  margin-top: 20px;
+  gap: 10px;
+}
+
+.pageButton {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #333;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.pageButton:hover {
+  background-color: #e2e6ea;
+}
+
+.activeButton {
+  background-color: #007bff;
+  color: #fff;
+  border-color: #007bff;
+}

src/ui/components/Pagination/Pagination.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './Pagination.css'; 
+
+export default function Pagination({ currentPage, totalItems = 0, itemsPerPage, onPageChange }) {
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const handlePageClick = (page) => {
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+
+  return (
+    <div className='paginationContainer'>
+      <button
+        className='pageButton'
+        onClick={() => handlePageClick(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        Previous
+      </button>
+
+      <span>
+        Page {currentPage} of {totalPages}
+      </span>
+
+      <button
+        className='pageButton'
+        onClick={() => handlePageClick(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

src/ui/components/Search/Search.css

@@ -0,0 +1,18 @@
+.search-bar {
+  width: 100%;
+  max-width:100%; 
+  margin: 0 auto 20px auto; 
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box; 
+}
+
+.search-input:focus {
+  border-color: #007bff; 
+}

src/ui/components/Search/Search.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import './Search.css';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import SearchIcon from '@material-ui/icons/Search'; 
+
+
+export default function Search({ onSearch }) {
+  const handleSearchChange = (event) => {
+    const query = event.target.value;
+    onSearch(query);  
+  };
+
+  return (
+    <div style={{ margin: '20px 0' }}>
+      <TextField
+        label="Search"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        onChange={handleSearchChange}  
+        placeholder="Search..."
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </div>
+  );
+}
+
+
+
+

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

@@ -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 = {};
 
@@ -35,94 +43,158 @@ export default function PushesTable(props) {
     getPushes(setIsLoading, setData, setAuth, setIsError, query);
   }, [props]);
 
+
+
+  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>
@@ -131,6 +203,18 @@ export default function PushesTable(props) {
           </TableBody>
         </Table>
       </TableContainer>
+  {/* Pagination Component */}
+  <Pagination
+        itemsPerPage={itemsPerPage}
+        totalItems={filteredData.length}
+        paginate={paginate}
+        currentPage={currentPage}
+        onPageChange={handlePageChange} 
+      />
     </div>
   );
 }
+
+
+
+

src/ui/views/RepoList/Components/Repositories.jsx

@@ -12,32 +12,87 @@ import NewRepo from './NewRepo';
 import RepoOverview from './RepoOverview';
 import { UserContext } from '../../../../context';
 import PropTypes from 'prop-types';
+import Search from '../../../components/Search/Search';
+import Pagination from '../../../components/Pagination/Pagination';
+import Filtering from '../../../components/Filtering/Filtering'; 
+
 
 export default function Repositories(props) {
   const useStyles = makeStyles(styles);
   const classes = useStyles();
   const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; 
   const navigate = useNavigate();
-  const openRepo = (repo) => navigate(`/admin/repo/${repo}`, { replace: true });
   const { user } = useContext(UserContext);
+  const openRepo = (repo) => navigate(`/admin/repo/${repo}`, { replace: true });
 
   useEffect(() => {
     const query = {};
     for (const k in props) {
       if (!k) continue;
       query[k] = props[k];
     }
-    getRepos(setIsLoading, setData, setAuth, setIsError, query);
+    getRepos(setIsLoading, (data) => {
+      setData(data);
+      setFilteredData(data); 
+    }, setAuth, setIsError, query);
   }, [props]);
 
   const refresh = async (repo) => {
-    console.log('refresh:', repo);
-    setData([...data, repo]);
+    const updatedData = [...data, repo];
+    setData(updatedData);
+    setFilteredData(updatedData);
   };
 
+  const handleSearch = (query) => {
+    setCurrentPage(1); 
+    if (!query) {
+      setFilteredData(data);
+    } else {
+      const lowercasedQuery = query.toLowerCase();
+      setFilteredData(
+        data.filter(repo =>
+          repo.name.toLowerCase().includes(lowercasedQuery) ||
+          repo.project.toLowerCase().includes(lowercasedQuery)
+        )
+      );
+    }
+  };
+
+  // New function for handling filter changes
+  const handleFilterChange = (filterOption, sortOrder) => {
+    const sortedData = [...data];
+    switch (filterOption) {
+      case 'dateModified':
+        sortedData.sort((a, b) => new Date(a.lastModified) - new Date(b.lastModified));
+        break;
+      case 'dateCreated':
+        sortedData.sort((a, b) => new Date(a.dateCreated) - new Date(b.dateCreated));
+        break;
+      case 'alphabetical':
+        sortedData.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+      default:
+        break;
+    }
+
+    if (sortOrder === 'desc') {
+      sortedData.reverse();
+    }
+
+    setFilteredData(sortedData);
+  };
+
+
+  const handlePageChange = (page) => setCurrentPage(page); 
+  const startIdx = (currentPage - 1) * itemsPerPage;
+  const paginatedData = filteredData.slice(startIdx, startIdx + itemsPerPage);
+
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Something went wrong ...</div>;
 
@@ -54,8 +109,14 @@ export default function Repositories(props) {
       key='x'
       classes={classes}
       openRepo={openRepo}
-      data={data}
+      data={paginatedData} 
       repoButton={addrepoButton}
+      onSearch={handleSearch} 
+      currentPage={currentPage} 
+      totalItems={filteredData.length} 
+      itemsPerPage={itemsPerPage} 
+      onPageChange={handlePageChange} 
+      onFilterChange={handleFilterChange}  // Pass handleFilterChange as prop
     />
   );
 }
@@ -65,13 +126,21 @@ GetGridContainerLayOut.propTypes = {
   openRepo: PropTypes.func.isRequired,
   data: PropTypes.array,
   repoButton: PropTypes.object,
+  onSearch: PropTypes.func.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  itemsPerPage: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
 };
 
 function GetGridContainerLayOut(props) {
   return (
     <GridContainer>
       {props.repoButton}
       <GridItem xs={12} sm={12} md={12}>
+
+        <Search onSearch={props.onSearch} />
+        <Filtering onFilterChange={props.onFilterChange} />  {/* Include the Filtering component */}
         <TableContainer
           style={{ background: 'transparent', borderRadius: '5px', border: '1px solid #d0d7de' }}
         >
@@ -86,6 +155,15 @@ function GetGridContainerLayOut(props) {
           </Table>
         </TableContainer>
       </GridItem>
+      <GridItem xs={12} sm={12} md={12}>
+        <Pagination
+          currentPage={props.currentPage}
+          totalItems={props.totalItems}
+          itemsPerPage={props.itemsPerPage}
+          onPageChange={props.onPageChange}
+        />
+      </GridItem>
     </GridContainer>
   );
 }
+

src/ui/views/UserList/Components/UserList.jsx

@@ -13,20 +13,27 @@ import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import styles from '../../../assets/jss/material-dashboard-react/views/dashboardStyle';
 import { getUsers } from '../../../services/user';
-
+import Pagination from '../../../components/Pagination/Pagination';
 import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
+import Search from '../../../components/Search/Search';
+
+const useStyles = makeStyles(styles);
 
 export default function UserList(props) {
-  const useStyles = makeStyles(styles);
+
   const classes = useStyles();
   const [data, setData] = useState([]);
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; 
+  const [searchQuery, setSearchQuery] = useState('');
 
   const openUser = (username) => navigate(`/admin/user/${username}`, { replace: true });
 
+
   useEffect(() => {
     const query = {};
 
@@ -40,9 +47,32 @@ export default function UserList(props) {
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Something went wrong...</div>;
 
+
+  const filteredUsers = data.filter(user =>
+  user.displayName && user.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+  user.username && user.username.toLowerCase().includes(searchQuery.toLowerCase())
+);
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
+  const totalItems = filteredUsers.length;
+
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    setCurrentPage(1); 
+  };
+
   return (
     <GridContainer>
       <GridItem xs={12} sm={12} md={12}>
+        <Search onSearch={handleSearch} placeholder="Search users..." />
         <TableContainer component={Paper}>
           <Table className={classes.table} aria-label='simple table'>
             <TableHead>
@@ -56,30 +86,20 @@ export default function UserList(props) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {data.map((row) => (
+              {currentItems.map((row) => (
                 <TableRow key={row.username}>
                   <TableCell align='left'>{row.displayName}</TableCell>
                   <TableCell align='left'>{row.title}</TableCell>
                   <TableCell align='left'>
                     <a href={`mailto:${row.email}`}>{row.email}</a>
                   </TableCell>
                   <TableCell align='left'>
-                    <a
-                      href={`https://github.com/${row.gitAccount}`}
-                      rel='noreferrer'
-                      target='_blank'
-                    >
+                    <a href={`https://github.com/${row.gitAccount}`} target='_blank' rel='noreferrer'>
                       {row.gitAccount}
                     </a>
                   </TableCell>
                   <TableCell align='left'>
-                    {row.admin ? (
-                      <span style={{ color: 'green' }}>
-                        <Check fontSize='small' />
-                      </span>
-                    ) : (
-                      <CloseRounded color='error' />
-                    )}
+                    {row.admin ? <Check fontSize='small' color='primary' /> : <CloseRounded color='error' />}
                   </TableCell>
                   <TableCell component='th' scope='row'>
                     <Button
@@ -95,7 +115,14 @@ export default function UserList(props) {
             </TableBody>
           </Table>
         </TableContainer>
+        <Pagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+          onPageChange={handlePageChange}
+        />
       </GridItem>
     </GridContainer>
   );
 }
+