From 6a255a5d7d729d7c1436eb0c9572bd52e6d58886 Mon Sep 17 00:00:00 2001 From: darkhorse-420 Date: Fri, 15 Nov 2024 17:29:04 +0530 Subject: [PATCH] feat: search --- src/ui/components/Filtering/Filtering.css | 55 ++++++++++++++++ src/ui/components/Filtering/Filtering.jsx | 65 +++++++++++++++++++ src/ui/components/Search/Search.jsx | 4 ++ .../OpenPushRequests/OpenPushRequests.jsx | 17 +++-- .../components/PushesTable.jsx | 6 ++ .../RepoList/Components/Repositories.jsx | 33 +++++++++- src/ui/views/User/User.jsx | 1 - 7 files changed, 174 insertions(+), 7 deletions(-) create mode 100644 src/ui/components/Filtering/Filtering.css create mode 100644 src/ui/components/Filtering/Filtering.jsx diff --git a/src/ui/components/Filtering/Filtering.css b/src/ui/components/Filtering/Filtering.css new file mode 100644 index 00000000..84f9258e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/ui/components/Filtering/Filtering.jsx b/src/ui/components/Filtering/Filtering.jsx new file mode 100644 index 00000000..872a27ee --- /dev/null +++ b/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 ( +
+
+ {/* Make the entire button clickable for toggling dropdown */} + + + {isOpen && ( +
+
handleOptionClick('Date Modified')} className="dropdown-item"> + Date Modified +
+
handleOptionClick('Date Created')} className="dropdown-item"> + Date Created +
+
handleOptionClick('Alphabetical')} className="dropdown-item"> + Alphabetical +
+
+ )} +
+
+ ); +}; + +export default Filtering; + + + diff --git a/src/ui/components/Search/Search.jsx b/src/ui/components/Search/Search.jsx index c424db9c..5e1cbf6b 100644 --- a/src/ui/components/Search/Search.jsx +++ b/src/ui/components/Search/Search.jsx @@ -31,3 +31,7 @@ export default function Search({ onSearch }) { ); } + + + + diff --git a/src/ui/views/OpenPushRequests/OpenPushRequests.jsx b/src/ui/views/OpenPushRequests/OpenPushRequests.jsx index f46f9671..9f5fcb24 100644 --- a/src/ui/views/OpenPushRequests/OpenPushRequests.jsx +++ b/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 (
+ ), }, { tabName: 'Approved', tabIcon: CheckCircle, - tabContent: , + tabContent: , }, { tabName: 'Canceled', tabIcon: Cancel, - tabContent: , + tabContent: , }, { tabName: 'Rejected', tabIcon: Block, - tabContent: , + tabContent: , }, ]} /> @@ -47,4 +56,4 @@ export default function Dashboard() {
); -} +} \ No newline at end of file diff --git a/src/ui/views/OpenPushRequests/components/PushesTable.jsx b/src/ui/views/OpenPushRequests/components/PushesTable.jsx index a01f169e..f940eb16 100644 --- a/src/ui/views/OpenPushRequests/components/PushesTable.jsx +++ b/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) { ); } + + + + diff --git a/src/ui/views/RepoList/Components/Repositories.jsx b/src/ui/views/RepoList/Components/Repositories.jsx index b0da9631..42a0b808 100644 --- a/src/ui/views/RepoList/Components/Repositories.jsx +++ b/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) { - + {/* Include the Filtering component */} @@ -139,3 +167,4 @@ function GetGridContainerLayOut(props) { ); } + diff --git a/src/ui/views/User/User.jsx b/src/ui/views/User/User.jsx index c8b46ebe..8362300f 100644 --- a/src/ui/views/User/User.jsx +++ b/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';