Merge pull request #1 from darkhorse-420/Search

Search

Author: darkhorse-420

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,39 @@
+/* Search.css */
+
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  margin-right: 10 px;
+}
+
+.search-input {
+  padding: 10px;
+  margin-right: 8px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  width: 200px; /* Adjust width as needed */
+  font-size: 14px;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #007bff; /* Change to your desired focus color */
+  outline: none; /* Remove default outline */
+}
+
+.search-button {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 10px;
+  background-color: #007bff; /* Change to your desired button color */
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.search-button:hover {
+  background-color: #0056b3; /* Darker shade for hover effect */
+}

src/ui/components/Search/Search.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Search.css';
+
+export default function Search({ placeholder = 'Search...', onSearch }) {
+  const [query, setQuery] = useState('');
+
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+  };
+
+  const handleSearch = () => {
+    onSearch(query);
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleSearch(); 
+    }
+  };
+
+  return (
+    <div className="search-container">
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={query}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown} 
+        className="search-input" 
+      />
+      <button onClick={handleSearch} className="search-button">
+        Search
+      </button>
+    </div>
+  );
+}
+
+Search.propTypes = {
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func.isRequired,
+};

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

@@ -5,6 +5,7 @@ import GridContainer from '../../../components/Grid/GridContainer';
 import GridItem from '../../../components/Grid/GridItem';
 import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';
 
+
 const colors = {
   '1C Enterprise': '#814CCC',
   '2-Dimensional Array': '#38761D',
@@ -671,4 +672,4 @@ export default function Repositories(props) {
       </TableCell>
     </TableRow>
   );
-}
+}

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

@@ -12,31 +12,59 @@ 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'; 
+
 
 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)
+        )
+      );
+    }
   };
+  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 +82,13 @@ 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} 
     />
   );
 }
@@ -65,13 +98,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} />
+
         <TableContainer
           style={{ background: 'transparent', borderRadius: '5px', border: '1px solid #d0d7de' }}
         >
@@ -86,6 +127,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>
   );
 }
+