feat: search

Author: darkhorse-420

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,65 @@
+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/Search/Search.jsx

@@ -31,3 +31,7 @@ export default function Search({ onSearch }) {
     </div>
   );
 }
+
+
+
+

src/ui/views/OpenPushRequests/OpenPushRequests.jsx

@@ -4,13 +4,18 @@ import GridContainer from '../../components/Grid/GridContainer';
 import PushesTable from './components/PushesTable';
 import CustomTabs from '../../components/CustomTabs/CustomTabs';
 
+
 import { Visibility, CheckCircle, Cancel, Block } from '@material-ui/icons';
 
 export default function Dashboard() {
+
+
+
   return (
     <div>
       <GridContainer>
         <GridItem xs={12} sm={12} md={12}>
+        
           <CustomTabs
             headerColor='primary'
             tabs={[
@@ -23,28 +28,32 @@ export default function Dashboard() {
                     authorised={false}
                     rejected={false}
                     canceled={false}
+                    
                   />
                 ),
               },
               {
                 tabName: 'Approved',
                 tabIcon: CheckCircle,
-                tabContent: <PushesTable authorised={true} />,
+                tabContent: <PushesTable 
+                  authorised={true}
+                  
+                    />,
               },
               {
                 tabName: 'Canceled',
                 tabIcon: Cancel,
-                tabContent: <PushesTable authorised={false} rejected={false} canceled={true} />,
+                tabContent: <PushesTable authorised={false} rejected={false} canceled={true}  />,
               },
               {
                 tabName: 'Rejected',
                 tabIcon: Block,
-                tabContent: <PushesTable authorised={false} rejected={true} canceled={false} />,
+                tabContent: <PushesTable authorised={false} rejected={true} canceled={false}  />,
               },
             ]}
           />
         </GridItem>
       </GridContainer>
     </div>
   );
-}
+}

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

@@ -14,6 +14,8 @@ import styles from '../../../assets/jss/material-dashboard-react/views/dashboard
 import { getPushes } from '../../../services/git-push';
 import { KeyboardArrowRight } from '@material-ui/icons';
 
+
+
 export default function PushesTable(props) {
   const useStyles = makeStyles(styles);
   const classes = useStyles();
@@ -134,3 +136,7 @@ export default function PushesTable(props) {
     </div>
   );
 }
+
+
+
+

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

@@ -13,7 +13,8 @@ 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 Pagination from '../../../components/Pagination/Pagination';
+import Filtering from '../../../components/Filtering/Filtering'; 
 
 
 export default function Repositories(props) {
@@ -62,6 +63,32 @@ export default function Repositories(props) {
       );
     }
   };
+
+  // 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);
@@ -89,6 +116,7 @@ export default function Repositories(props) {
       totalItems={filteredData.length} 
       itemsPerPage={itemsPerPage} 
       onPageChange={handlePageChange} 
+      onFilterChange={handleFilterChange}  // Pass handleFilterChange as prop
     />
   );
 }
@@ -112,7 +140,7 @@ function GetGridContainerLayOut(props) {
       <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' }}
         >
@@ -139,3 +167,4 @@ function GetGridContainerLayOut(props) {
   );
 }
 
+

src/ui/views/User/User.jsx

@@ -8,7 +8,6 @@ import Button from '../../components/CustomButtons/Button';
 import FormLabel from '@material-ui/core/FormLabel';
 import { getUser, updateUser, getUserLoggedIn } from '../../services/user';
 import { makeStyles } from '@material-ui/core/styles';
-
 import { LogoGithubIcon } from '@primer/octicons-react';
 import CloseRounded from '@material-ui/icons/CloseRounded';
 import { Check, Save } from '@material-ui/icons';