jare2473/studentportalen-prototyping
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

eriks-booking-variant #6

Merged
jare2473 merged 13 commits from eriks-booking-variant into main 2025-09-22 11:16:13 +02:00
Conversation 0 Commits 13 Files Changed 29 +12 -25
2 changed files with 12 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4e86a1ded8 - Show all commits

33
my-app/src/components/booking/BookingsList.jsx
View File

@@ -5,12 +5,15 @@ import BookingCard from './BookingCard';
import NotificationBanner from '../common/NotificationBanner';
function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingDelete, showSuccessBanner, lastCreatedBooking, onDismissBanner, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner, showDevelopmentBanner, showBookingConfirmationBanner, showBookingDeleteBanner }) {
const [showAll, setShowAll] = useState(false);
const [expandedBookingId, setExpandedBookingId] = useState(null);
const INITIAL_DISPLAY_COUNT = 3;
const displayedBookings = showAll ? bookings : bookings.slice(0, INITIAL_DISPLAY_COUNT);
const hasMoreBookings = bookings.length > INITIAL_DISPLAY_COUNT;
// Sort bookings by date (earliest first)
const sortedBookings = [...bookings].sort((a, b) => {
// Convert dates to comparable values
const dateA = new Date(a.date.year, a.date.month - 1, a.date.day, 0, a.startTime * 0.5 + 8);
const dateB = new Date(b.date.year, b.date.month - 1, b.date.day, 0, b.startTime * 0.5 + 8);
return dateA - dateB;
});
function handleBookingClick(booking) {
setExpandedBookingId(expandedBookingId === booking.id ? null : booking.id);
@@ -68,9 +71,9 @@ function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingD
/>
)}
<div className={styles.bookingsContainer}>
{bookings.length > 0 ? (
{sortedBookings.length > 0 ? (
<>
{displayedBookings.map((booking, index) => (
{sortedBookings.map((booking, index) => (
<BookingCard
key={index}
booking={booking}
@@ -80,24 +83,6 @@ function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingD
onBookingDelete={onBookingDelete}
/>
))}
{hasMoreBookings && (
<button
className={styles.showMoreButton}
onClick={() => setShowAll(!showAll)}
>
{showAll ? (
<>
<span>Visa färre</span>
<span>↑</span>
</>
) : (
<>
<span>Visa {bookings.length - INITIAL_DISPLAY_COUNT} fler</span>
<span>↓</span>
</>
)}
</button>
)}
</>
) : (
<p className={styles.message}>Du har inga bokningar just nu</p>

4
my-app/src/pages/NewBooking.module.css
View File

@@ -1,6 +1,6 @@
.pageContainer {
padding: var(--container-padding);
background-color: var(--bg-tertiary);
background-color: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
}
@@ -32,6 +32,8 @@
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--bg-secondary);
padding-bottom: 2rem;
}
.headerAndFilter {