Skip to content

added sort and search for driverlist #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Khennee merged 1 commit into from
Dec 6, 2024
Merged

added sort and search for driverlist #139

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 70 additions & 148 deletions frontend/src/pages/DriverList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useState, useEffect } from "react";

import AdminHeader from "../components/AdminHeader";
import DriverListCard from "../components/DriversListCard";
Expand All @@ -10,8 +10,13 @@ import { DriverWithVandC } from "../types/datatypes.ts";
const DriversList = () => {
const { data: Drivers, loading } = useDrivers();
const [selectedDriver, setSelectedDriver] = useState<DriverWithVandC>();
const [sortedDrivers, setSortedDrivers] = useState<DriverWithVandC[]>([]);
const [isSorted, setIsSorted] = useState(false); // Tracks toggle state
const [originalDrivers, setOriginalDrivers] = useState<DriverWithVandC[]>([]); // Stores the original list
const [searchQuery, setSearchQuery] = useState(""); // Tracks the search input

const navigate = useNavigate();

// Handle driver click to show more details
const handleDriverClick = (driver: DriverWithVandC) => {
setSelectedDriver(driver);
Expand All @@ -23,6 +28,46 @@ const DriversList = () => {
navigate(`/view-profile/${selectedDriver.id}`);
};

// Toggle sorting between alphabetical and default
const handleSortToggle = () => {
if (!Drivers) return;

if (isSorted) {
setSortedDrivers(originalDrivers); // Reset to original order
} else {
const sorted = [...Drivers].sort((a, b) => {
const nameA = `${a.first_name} ${a.last_name}`.toLowerCase();
const nameB = `${b.first_name} ${b.last_name}`.toLowerCase();
return nameA.localeCompare(nameB);
});
setSortedDrivers(sorted);
}
setIsSorted(!isSorted); // Toggle the sort state
};

// Filter drivers based on search query
const handleSearch = (query: string) => {
setSearchQuery(query);
if (!query) {
setSortedDrivers(isSorted ? sortedDrivers : originalDrivers); // Reset to original or sorted list
return;
}

const filtered = Drivers?.filter((driver) => {
const fullName = `${driver.first_name} ${driver.last_name}`.toLowerCase();
return fullName.includes(query.toLowerCase());
});
setSortedDrivers(filtered || []);
};

// Initialize drivers and store the original list
useEffect(() => {
if (Drivers) {
setOriginalDrivers(Drivers);
setSortedDrivers(Drivers); // Default display
}
}, [Drivers]);

if (loading) return <Loading loading={loading} />;

return (
Expand Down Expand Up @@ -110,8 +155,8 @@ const DriversList = () => {
</div>
<div>
<button
onClick={handleViewProfile}
className="p-2 px-4 m-2 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold"
onClick={handleViewProfile}
className="p-2 px-4 m-2 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold"
>
View Profile
</button>
Expand All @@ -130,18 +175,35 @@ const DriversList = () => {
<div className="w-[50%] h-full p-6 rounded-md">
<div className="text-left rounded-xl bg-clip-padding">
<div className="text-left font-syke-light text-white">
<div className="text-textgreen py-3">
<h1 className="text-4xl font-syke-bold">Driver's List</h1>
<div>List of Drivers within the university.</div>
<div className="text-textgreen py-3 flex justify-between items-center">
<div>
<h1 className="text-4xl font-syke-bold">Driver's List</h1>
<div>List of Drivers within the university.</div>
</div>
<div className="flex items-center space-x-2">
<input
type="text"
placeholder="Search..."
value={searchQuery}
onChange={(e) => handleSearch(e.target.value)}
className="p-2 rounded-md bg-white text-black"
/>
<button
className="text-white bg-textgreen w-20 h-8 rounded-md"
onClick={handleSortToggle}
>
{isSorted ? "Default" : "Sort"}
</button>
</div>
</div>
</div>
<div
className="w-full h-[20rem] overflow-y-auto"
id="listcontainer"
>
<div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
{Drivers && Drivers.length > 0 ? (
Drivers.map((driver) => (
{sortedDrivers && sortedDrivers.length > 0 ? (
sortedDrivers.map((driver) => (
<div
key={driver.id}
className="cursor-pointer hover:bg-secondgrey"
Expand All @@ -164,150 +226,10 @@ const DriversList = () => {
</div>
</div>
</div>

{/* <div className="w-[50%] h-full p-6 rounded-r-md bg-gray-400 rounded-l-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
<div className="text-left rounded-xl bg-clip-padding">
<div className="text-left font-syke-light text-white">
<div className="text-textgreen py-3">
<h1 className="text-4xl font-syke-bold">Driver's List</h1>
<div>List of Registered Drivers.</div>
</div>
</div>
<div
className="w-full h-[23rem] overflow-y-auto rounded-md scrollbar"
id="listcontainer"
>

<div className="flex justify-between font-syke-medium items-center border-b-2 pb-2 mb-2 border-white text-white text-xl">
<div className="flex-1 text-center">First Name</div>
<div className="flex-1 text-center">Last Name</div>
<div className="flex-1 text-center">License No.</div>
</div>

<div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
{Drivers && Drivers.length > 0 ? (
Drivers.map((driver) => (
<div
key={driver.id}
className="cursor-pointer hover:bg-gray-700"
onClick={() => handleDriverClick(driver)} // Show more details on click
>
<DriverListCard
key={driver.id}
id={driver.id!}
firstname={driver.first_name!}
lastname={driver.last_name!}
driver_type={driver.driver_type!}
license_no={driver.license_number!}
/>
</div>
))
) : (
<p className="text-white text-center">No drivers found.</p>
)}
</div>
</div>
</div>
</div> */}
</div>
</div>
</div>
);
};

export default DriversList;

// import { useState } from "react";
// import { Spinner } from "react-activity";
// import AdminHeader from "../components/AdminHeader";
// import DriverListCard from "../components/DriversListCard";
// import useDrivers from "../hooks/useDrivers";

// const DriversList = () => {
// const { data: Drivers, loading } = useDrivers();
// const [selectedDriver, setSelectedDriver] = useState<any>(null);

// // Handle driver click to show more details
// const handleDriverClick = (driver: any) => {
// setSelectedDriver(driver);
// };

// if (loading)
// return (
// <div className="flex justify-center items-center h-screen">
// <Spinner size={50} color="#008000" animating={loading} />
// </div>
// );

// return (
// <div className="flex flex-col items-center bg-login-bg bg-cover bg-no-repeat sm:bg-top md:bg-right lg:bg-left h-screen">
// <div>
// <AdminHeader />
// </div>

// {/* Main Content */}
// {/* drivers info left side */}
// <div className="flex flex-col lg:flex-row items-center justify-center lg:space-x-10 w-full px-5">
// <div className="bg-[rgba(34,38,41,0.66)] opacity-99 w-full lg:w-2/5 p-6 rounded-lg shadow-md mb-5 lg:mb-0">
// <h1 className="text-xl text-center text-textgreen font-syke-bold mb-4">
// Drivers Info
// </h1>
// {selectedDriver ? (
// <div>
// <p className="text-white">
// <strong>Email:</strong> {selectedDriver.email}
// </p>
// <p className="text-white">
// <strong>Sex:</strong> {selectedDriver.sex}
// </p>
// <p className="text-white">
// <strong>License Expiration:</strong> {selectedDriver.license_expiration_date}
// </p>
// </div>
// ) : (
// <p className="text-white">Click a driver to see more details.</p>
// )}
// </div>

// {/* Drivers List Section */}
// <div className="bg-[rgba(34,38,41,0.66)] opacity-99 w-full lg:w-3/5 p-4 rounded-lg shadow-md overflow-hidden">
// <h1 className="text-xl text-center text-textgreen font-syke-bold">
// Drivers List
// </h1>

// {/* drivers list header */}
// <div className="flex justify-between items-center border-b-2 pb-2 mb-2 border-gray-400 text-white text-sm">
// <div className="flex-1 text-center font-bold">First Name</div>
// <div className="flex-1 text-center font-bold">Last Name</div>
// <div className="flex-1 text-center font-bold">Driver Type</div>
// <div className="flex-1 text-center font-bold">License No.</div>
// </div>

// {/* Scrollable Driver List */}
// <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-300 text-white">
// {Drivers && Drivers.length > 0 ? (
// Drivers.map((driver) => (
// <div
// key={driver.license_number}
// className="cursor-pointer hover:bg-gray-700 p-2"
// onClick={() => handleDriverClick(driver)} // Show more details on click
// >
// <DriverListCard
// firstname={driver.first_name!}
// lastname={driver.last_name!}
// driver_type={driver.driver_type!}
// license_no={driver.license_number!}
// />
// </div>
// ))
// ) : (
// <p className="text-white text-center">No drivers found.</p>
// )}
// </div>
// </div>
// </div>
// </div>
// );
// };

// export default DriversList;
Loading