feat: add ParticipantListEntry component and integrate draft into event form
This commit is contained in:
parent
f5450d9b4f
commit
8369a92520
2 changed files with 41 additions and 2 deletions
|
@ -9,6 +9,7 @@ import {
|
|||
useGetApiUserMe,
|
||||
usePostApiEvent,
|
||||
} from '@/generated/api/default/default';
|
||||
import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
|
||||
|
||||
type eventFormProps = {
|
||||
type?: 'create' | 'edit';
|
||||
|
@ -22,6 +23,10 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
|
|||
const [startTime, setStartTime] = React.useState<string>('12:00');
|
||||
const [endDate, setEndDate] = React.useState<Date | undefined>();
|
||||
const [endTime, setEndTime] = React.useState<string>('13:00');
|
||||
const [selectedParticipants, setSelectedParticipants] = React.useState<{ [name: string]: boolean }>({
|
||||
'Max Muster': false,
|
||||
// Add more participants as needed
|
||||
});
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
|
@ -161,8 +166,17 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label>Participants here</Label>{' '}
|
||||
{/* TODO: add participants input */}
|
||||
<Label>Participants</Label> {/* TODO: add participants input */}
|
||||
<ParticipantListEntry
|
||||
participant="Max Muster"
|
||||
checked={selectedParticipants['Max Muster']}
|
||||
onCheck={checked =>
|
||||
setSelectedParticipants(prev => ({
|
||||
...prev,
|
||||
['Max Muster']: checked,
|
||||
}))
|
||||
}
|
||||
></ParticipantListEntry>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
25
src/components/custom-ui/participantListEntry.tsx
Normal file
25
src/components/custom-ui/participantListEntry.tsx
Normal file
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
|
||||
type ParticipantListEntryProps = {
|
||||
participant: string;
|
||||
checked?: boolean;
|
||||
onCheck?: (checked: boolean) => void;
|
||||
};
|
||||
|
||||
export default function ParticipantListEntry({
|
||||
participant,
|
||||
checked = false,
|
||||
onCheck,
|
||||
}: ParticipantListEntryProps) {
|
||||
return (
|
||||
<div className='flex items-center gap-2 py-1 ml-5'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={checked}
|
||||
onChange={(e) => onCheck?.(e.target.checked)}
|
||||
className='accent-primary cursor-pointer'
|
||||
/>
|
||||
<span>{participant}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue