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

improving-week-36 #1

Merged
jare2473 merged 41 commits from improving-week-36 into main 2025-09-04 10:49:05 +02:00
Conversation 0 Commits 41 Files Changed 65 +34 -69
9 changed files with 34 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8863b2a910 - Show all commits

65
my-app/src/components/BookingFormFields.jsx
View File

@@ -1,65 +0,0 @@
import React from 'react';
import Dropdown from './Dropdown';
import { ComboBox } from './ComboBox';
import { DEFAULT_BOOKING_TITLE, BOOKING_LENGTHS, SMALL_GROUP_ROOMS, PEOPLE } from '../constants/bookingConstants';
import { useBookingContext } from '../context/BookingContext';
import styles from './BookingFormFields.module.css';
export function BookingFormFields() {
const booking = useBookingContext();
return (
<>
<h3 className={styles.elementHeading}>Titel på bokning</h3>
<input
type="text"
value={booking.title}
onChange={(event) => booking.setTitle(event.target.value)}
placeholder={DEFAULT_BOOKING_TITLE}
className={styles.textInput}
/>
<h3 className={styles.elementHeading}>Deltagare</h3>
<ComboBox
items={PEOPLE}
onSelectionChange={booking.handleParticipantChange}
placeholder={"Lägg till deltagare"}
value={booking.participant}
>
</ComboBox>
{booking.participants.length > 0 && (
<div>
{booking.participants.map((participant, index) => (
<p key={index}>{participant}</p>
))}
</div>
)}
<div style={{ display: "flex", flexDirection: "row", alignItems: "center", gap: "1rem" }}>
<div>
<h3 className={styles.elementHeading}>Rum</h3>
<Dropdown
options={SMALL_GROUP_ROOMS}
onChange={(e) => booking.handleRoomChange(e)}
placeholder={{
label: "Alla rum",
value: "allRooms"
}}
/>
</div>
<div>
<h3 className={styles.elementHeading}>Längd</h3>
<Dropdown
options={BOOKING_LENGTHS}
value={booking.selectedBookingLength}
onChange={(e) => booking.handleLengthChange(Number(e.target.value))}
placeholder={{
label: "Alla tider",
value: 0
}}
disabledOptions={booking.disabledOptions}
/>
</div>
</div>
</>
);
}

2
my-app/src/components/BookingLengthField.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Dropdown from './Dropdown';
import { BOOKING_LENGTHS } from '../constants/bookingConstants';
import { useBookingContext } from '../context/BookingContext';
import styles from './BookingFormFields.module.css';
import styles from './BookingLengthField.module.css';
export function BookingLengthField() {
const booking = useBookingContext();

10
my-app/src/components/BookingLengthField.module.css Normal file
View File

@@ -0,0 +1,10 @@
.elementHeading {
margin: 0;
color: #8E8E8E;
font-size: 0.8rem;
font-style: normal;
font-weight: 520;
line-height: normal;
margin-bottom: 0.2rem;
margin-top: 1.5rem;
}

2
my-app/src/components/BookingTitleField.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { DEFAULT_BOOKING_TITLE } from '../constants/bookingConstants';
import { useBookingContext } from '../context/BookingContext';
import styles from './BookingFormFields.module.css';
import styles from './BookingTitleField.module.css';
export function BookingTitleField() {
const booking = useBookingContext();

0
my-app/src/components/BookingFormFields.module.css → my-app/src/components/BookingTitleField.module.css
View File

2
my-app/src/components/ParticipantsField.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { ComboBox } from './ComboBox';
import { PEOPLE } from '../constants/bookingConstants';
import { useBookingContext } from '../context/BookingContext';
import styles from './BookingFormFields.module.css';
import styles from './ParticipantsField.module.css';
export function ParticipantsField() {
const booking = useBookingContext();

10
my-app/src/components/ParticipantsField.module.css Normal file
View File

@@ -0,0 +1,10 @@
.elementHeading {
margin: 0;
color: #8E8E8E;
font-size: 0.8rem;
font-style: normal;
font-weight: 520;
line-height: normal;
margin-bottom: 0.2rem;
margin-top: 1.5rem;
}

2
my-app/src/components/RoomSelectionField.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Dropdown from './Dropdown';
import { SMALL_GROUP_ROOMS } from '../constants/bookingConstants';
import { useBookingContext } from '../context/BookingContext';
import styles from './BookingFormFields.module.css';
import styles from './RoomSelectionField.module.css';
export function RoomSelectionField() {
const booking = useBookingContext();

10
my-app/src/components/RoomSelectionField.module.css Normal file
View File

@@ -0,0 +1,10 @@
.elementHeading {
margin: 0;
color: #8E8E8E;
font-size: 0.8rem;
font-style: normal;
font-weight: 520;
line-height: normal;
margin-bottom: 0.2rem;
margin-top: 1.5rem;
}