From 3cb15f171f0c5bf943bb54cab69b071477aba11a Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 17:17:08 +0000 Subject: [PATCH 1/7] FeatureSortTableColumnsNSDone --- src/components/SearchResult/SearchResult.jsx | 60 +++++++++++++++----- src/components/SearchResult/TableHead.jsx | 2 + 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx index 66b9d6c..71a8d0c 100644 --- a/src/components/SearchResult/SearchResult.jsx +++ b/src/components/SearchResult/SearchResult.jsx @@ -1,3 +1,4 @@ +import React, { useState } from 'react'; import "./SearchResult.scss"; import FakeBookings from "@/data/fakeBookings.json"; import TableBody from "./TableBody"; @@ -5,36 +6,65 @@ import TableHead from "./TableHead"; import dayjs from "dayjs"; const Bookings = FakeBookings; + function SearchResult() { + const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' }); + + // Function to handle sorting when a column header is clicked + const handleSort = (key) => { + let direction = 'ascending'; + if (sortConfig.key === key && sortConfig.direction === 'ascending') { + direction = 'descending'; + } + setSortConfig({ key, direction }); + }; + + // Sorting function based on the current sort configuration + const sortedBookings = [...Bookings].sort((a, b) => { + if (sortConfig.key === null) return 0; + + const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1; + return a[sortConfig.key].localeCompare(b[sortConfig.key]) * sortOrder; + }); + return ( - + + + + + + + + + + - {Bookings.map((book) => { + {sortedBookings.map((book) => { const stayNightsTotal = dayjs(book.checkOutDate).diff( dayjs(book.checkInDate), "day" ); return ( - + ); })}
handleSort('id')}>ID handleSort('title')}>Title handleSort('firstName')}>First Name handleSort('surname')}>Surname handleSort('email')}>Email handleSort('roomId')}>Room ID handleSort('checkInDate')}>Check In Date handleSort('checkOutDate')}>Check Out Date
); } -export default SearchResult; +export default SearchResult; diff --git a/src/components/SearchResult/TableHead.jsx b/src/components/SearchResult/TableHead.jsx index 9afda64..9de1575 100644 --- a/src/components/SearchResult/TableHead.jsx +++ b/src/components/SearchResult/TableHead.jsx @@ -2,6 +2,7 @@ function TableHead() { return ( <> + ID Title First name @@ -11,6 +12,7 @@ function TableHead() { Check in date Check out date Total Nights to Stay + ); From 93d386088c734ed12cc666cdb1a7152ee5cda553 Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 17:18:07 +0000 Subject: [PATCH 2/7] done my feature sort table column NS From 07ae1d09e31257aba4488e5f3284ab9e80513dc1 Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 21:13:00 +0000 Subject: [PATCH 3/7] done Sort table column --- src/components/SearchButton/SearchButton.test.jsx | 2 ++ src/components/SearchResult/SearchResult.scss | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SearchButton/SearchButton.test.jsx b/src/components/SearchButton/SearchButton.test.jsx index aacf48e..97acb8d 100644 --- a/src/components/SearchButton/SearchButton.test.jsx +++ b/src/components/SearchButton/SearchButton.test.jsx @@ -13,3 +13,5 @@ describe("Search Button", () => { // expect(searchButton).toBeInTheDocument(); // }); }); + + diff --git a/src/components/SearchResult/SearchResult.scss b/src/components/SearchResult/SearchResult.scss index 4a2e035..49f4be7 100644 --- a/src/components/SearchResult/SearchResult.scss +++ b/src/components/SearchResult/SearchResult.scss @@ -4,8 +4,8 @@ table { } thead { - background-color: rgb(31, 11, 31); - color: white; + background-color: rgb(37, 12, 37); + color: rgb(248, 230, 230); } th, @@ -22,5 +22,5 @@ th { cursor: pointer; } .selected { - background-color: skyblue; + background-color: rgb(241, 176, 249); } From 1696f026bfa3e0a99564823fd097f5ca0c341e21 Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 22:48:33 +0000 Subject: [PATCH 4/7] roomId fix --- src/components/SearchResult/SearchResult.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx index 71a8d0c..c8cb62d 100644 --- a/src/components/SearchResult/SearchResult.jsx +++ b/src/components/SearchResult/SearchResult.jsx @@ -4,6 +4,7 @@ import FakeBookings from "@/data/fakeBookings.json"; import TableBody from "./TableBody"; import TableHead from "./TableHead"; import dayjs from "dayjs"; +import { b } from 'vitest/dist/suite-dF4WyktM'; const Bookings = FakeBookings; @@ -20,9 +21,19 @@ function SearchResult() { }; // Sorting function based on the current sort configuration - const sortedBookings = [...Bookings].sort((a, b) => { + const sortedBookings = [...Bookings].sort((a, b)) => { if (sortConfig.key === null) return 0; + let aValue = a[sortConfig.key]; + let bValue = b[sortConfig.key]; + + //special handling for 'roomId' sorting + if (sortConfig.key === 'roomId') { + //convert string room IDs to numbers for proper sorting + aValue = parseInt(aValue); + bValue = parsInt(bValue); + } + const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1; return a[sortConfig.key].localeCompare(b[sortConfig.key]) * sortOrder; }); From 56dd0a96bbed96513dd01479eda484bb9416cac8 Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 23:00:38 +0000 Subject: [PATCH 5/7] fix room ID --- src/components/SearchResult/SearchResult.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx index c8cb62d..8f1d5f3 100644 --- a/src/components/SearchResult/SearchResult.jsx +++ b/src/components/SearchResult/SearchResult.jsx @@ -4,7 +4,6 @@ import FakeBookings from "@/data/fakeBookings.json"; import TableBody from "./TableBody"; import TableHead from "./TableHead"; import dayjs from "dayjs"; -import { b } from 'vitest/dist/suite-dF4WyktM'; const Bookings = FakeBookings; @@ -21,21 +20,21 @@ function SearchResult() { }; // Sorting function based on the current sort configuration - const sortedBookings = [...Bookings].sort((a, b)) => { + const sortedBookings = [...Bookings].sort((a, b) => { if (sortConfig.key === null) return 0; let aValue = a[sortConfig.key]; let bValue = b[sortConfig.key]; - //special handling for 'roomId' sorting + // Special handling for 'roomId' sorting if (sortConfig.key === 'roomId') { - //convert string room IDs to numbers for proper sorting + // Convert string room IDs to numbers for proper sorting aValue = parseInt(aValue); - bValue = parsInt(bValue); + bValue = parseInt(bValue); } const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1; - return a[sortConfig.key].localeCompare(b[sortConfig.key]) * sortOrder; + return aValue - bValue * sortOrder; }); return ( From b55f0aaa93b8f48198f4f2425e3f69954e7a2e7a Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 23:04:50 +0000 Subject: [PATCH 6/7] fix_roomID_NS --- src/components/SearchResult/SearchResult.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx index 8f1d5f3..b058e89 100644 --- a/src/components/SearchResult/SearchResult.jsx +++ b/src/components/SearchResult/SearchResult.jsx @@ -18,6 +18,7 @@ function SearchResult() { } setSortConfig({ key, direction }); }; + // Sorting function based on the current sort configuration const sortedBookings = [...Bookings].sort((a, b) => { From 7bca420a4cae9149745c49b5dfb456cc017b8f67 Mon Sep 17 00:00:00 2001 From: Nazanin Saedi Date: Wed, 20 Mar 2024 23:05:08 +0000 Subject: [PATCH 7/7] fix roomID