Add min max calendar hours, add event colors

This commit is contained in:
adam-skowronek 2022-11-12 23:50:29 +01:00
parent c29c2a9236
commit bcd06d85bd
4 changed files with 131 additions and 58 deletions

View File

@ -1,3 +1,4 @@
import { DateTime } from 'luxon'
import { useState } from 'react' import { useState } from 'react'
import { Controller, NestedValue, useForm } from 'react-hook-form' import { Controller, NestedValue, useForm } from 'react-hook-form'
import { useMutation, useQuery } from 'react-query' import { useMutation, useQuery } from 'react-query'
@ -65,41 +66,66 @@ const EditSchedule = ({
} }
return ( return (
<div style={{ width: '300px', height: '250px' }}> <div style={{ width: '330px', height: '250px' }}>
<form className="w-full flex flex-col " onSubmit={handleSubmit(onSubmit)}> <form className="w-full flex flex-col " onSubmit={handleSubmit(onSubmit)}>
<h3>Termin</h3> <h3> Termin </h3>
<div className="form-control"> <p className="mb-2">
<div className="form-control"> {DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
<label className="label" htmlFor="committee"> - {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
Komisja </p>
</label> {eventData.resource.committee.members.length ? (
<Controller <>
control={control} Komisja:{' '}
name="committee" <ul className="list-disc">
rules={{ required: true }} {eventData.resource.committee.members.map((member: any) => (
render={({ field: { onChange, onBlur } }) => ( <li
<Select key={`${member.first_name} ${member.last_name}`}
closeMenuOnSelect={false} className="ml-4"
options={committeeOptions} >
placeholder="Wybierz komisje" {member.first_name} {member.last_name}
isMulti </li>
onChange={(values) => ))}
onChange(values.map((value) => value.value)) </ul>
} {eventData.resource.group && (
onBlur={onBlur} <p className="mt-4">Grupa: {eventData.resource.group.name}</p>
styles={{ )}
control: (styles) => ({ </>
...styles, ) : (
padding: '0.3rem', <>
borderRadius: '0.5rem', <div className="form-control">
}), <div className="form-control">
}} <label className="label" htmlFor="committee">
Komisja
</label>
<Controller
control={control}
name="committee"
rules={{ required: true }}
render={({ field: { onChange, onBlur } }) => (
<Select
closeMenuOnSelect={false}
options={committeeOptions}
placeholder="Wybierz komisje"
isMulti
onChange={(values) =>
onChange(values.map((value) => value.value))
}
onBlur={onBlur}
styles={{
control: (styles) => ({
...styles,
padding: '0.3rem',
borderRadius: '0.5rem',
}),
}}
/>
)}
/> />
)} </div>
/> </div>
</div> <button className="btn btn-success mt-10">ZAPISZ</button>
</div> </>
<button className="btn btn-success mt-10">ZAPISZ</button> )}
</form> </form>
</div> </div>
) )

View File

@ -66,11 +66,12 @@ const Schedule = () => {
}) => { }) => {
return { return {
id, id,
title: `Obrona ${group?.name ?? ''}`, title: `${group?.name ?? '-'}`,
start: new Date(start_date), start: new Date(start_date),
end: new Date(end_date), end: new Date(end_date),
resource: { resource: {
committee, committee,
group,
}, },
} }
}, },
@ -153,6 +154,20 @@ const Schedule = () => {
} }
} }
const eventGetter = (event: any) => {
return event?.resource?.group
? {
style: {
backgroundColor: '#3174ad',
},
}
: {
style: {
backgroundColor: '#329f32',
},
}
}
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<button <button
@ -172,6 +187,9 @@ const Schedule = () => {
events={events} events={events}
onView={onView} onView={onView}
view={view} view={view}
eventPropGetter={eventGetter}
min={DateTime.fromObject({ hour: 8, minute: 0 }).toJSDate()}
max={DateTime.fromObject({ hour: 16, minute: 0 }).toJSDate()}
/> />
<Modal <Modal

View File

@ -46,29 +46,40 @@ const ScheduleAddGroup = ({
{DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '} {DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
- {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')} - {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
</h3> </h3>
Komisja:{' '} {eventData.resource.committee.members.length > 0 && (
<ul className="list-disc"> <>
{eventData.resource.committee.members.map((member: any) => ( Komisja:{' '}
<li <ul className="list-disc">
key={`${member.first_name} ${member.last_name}`} {eventData.resource.committee.members.map((member: any) => (
className="ml-4" <li
> key={`${member.first_name} ${member.last_name}`}
{member.first_name} {member.last_name} className="ml-4"
</li> >
))} {member.first_name} {member.last_name}
</ul> </li>
<div className="form-control"> ))}
<label className="label" htmlFor="student_index"> </ul>
Indeks </>
</label> )}
<input {eventData.resource.group && (
className="input input-bordered" <p className="mt-4">Grupa: {eventData.resource.group.name}</p>
id="to" )}
type="text" {!eventData.resource.group && (
{...register('student_index', { required: true })} <>
/> <div className="form-control">
</div> <label className="label" htmlFor="student_index">
<button className="btn btn-success mt-4">ZAPISZ</button> Indeks
</label>
<input
className="input input-bordered"
id="to"
type="text"
{...register('student_index', { required: true })}
/>
</div>
<button className="btn btn-success mt-4">ZAPISZ</button>
</>
)}
</form> </form>
</div> </div>
) )

View File

@ -69,11 +69,12 @@ const StudentSchedule = () => {
}) => { }) => {
return { return {
id, id,
title: `Obrona ${group?.name ?? ''}`, title: `${group?.name ?? '-'}`,
start: new Date(start_date), start: new Date(start_date),
end: new Date(end_date), end: new Date(end_date),
resource: { resource: {
committee, committee,
group,
}, },
} }
}, },
@ -107,6 +108,20 @@ const StudentSchedule = () => {
} }
const onSubmit = async (data: any) => {} const onSubmit = async (data: any) => {}
const eventGetter = (event: any) => {
return event?.resource?.group
? {
style: {
backgroundColor: '#3174ad',
},
}
: {
style: {
backgroundColor: '#329f32',
},
}
}
return ( return (
<div> <div>
<h1 className="text-2xl font-bold mb-2 text-center"> <h1 className="text-2xl font-bold mb-2 text-center">
@ -122,6 +137,9 @@ const StudentSchedule = () => {
events={events} events={events}
onView={onView} onView={onView}
view={view} view={view}
eventPropGetter={eventGetter}
min={DateTime.fromObject({ hour: 8, minute: 0 }).toJSDate()}
max={DateTime.fromObject({ hour: 16, minute: 0 }).toJSDate()}
/> />
<Modal <Modal