s459309/system-pri
3
3
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add min max calendar hours, add event colors

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/views/coordinator/EditSchedule.tsx
View File

@ -1,3 +1,4 @@
import { DateTime } from 'luxon'
import { useState } from 'react'
import { Controller, NestedValue, useForm } from 'react-hook-form'
import { useMutation, useQuery } from 'react-query'
@ -65,41 +66,66 @@ const EditSchedule = ({
}
return (
<div style={{ width: '300px', height: '250px' }}>
<div style={{ width: '330px', height: '250px' }}>
<form className="w-full flex flex-col " onSubmit={handleSubmit(onSubmit)}>
<h3>Termin</h3>
<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',
}),
}}
<h3> Termin </h3>
<p className="mb-2">
{DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
- {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
</p>
{eventData.resource.committee.members.length ? (
<>
Komisja:{' '}
<ul className="list-disc">
{eventData.resource.committee.members.map((member: any) => (
<li
key={`${member.first_name} ${member.last_name}`}
className="ml-4"
>
{member.first_name} {member.last_name}
</li>
))}
</ul>
{eventData.resource.group && (
<p className="mt-4">Grupa: {eventData.resource.group.name}</p>
)}
</>
) : (
<>
<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>
<button className="btn btn-success mt-10">ZAPISZ</button>
</div>
</div>
<button className="btn btn-success mt-10">ZAPISZ</button>
</>
)}
</form>
</div>
)

20
frontend/src/views/coordinator/Schedule.tsx
View File

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

57
frontend/src/views/student/ScheduleAddGroup.tsx
View File

@ -46,29 +46,40 @@ const ScheduleAddGroup = ({
{DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
- {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
</h3>
Komisja:{' '}
<ul className="list-disc">
{eventData.resource.committee.members.map((member: any) => (
<li
key={`${member.first_name} ${member.last_name}`}
className="ml-4"
>
{member.first_name} {member.last_name}
</li>
))}
</ul>
<div className="form-control">
<label className="label" htmlFor="student_index">
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>
{eventData.resource.committee.members.length > 0 && (
<>
Komisja:{' '}
<ul className="list-disc">
{eventData.resource.committee.members.map((member: any) => (
<li
key={`${member.first_name} ${member.last_name}`}
className="ml-4"
>
{member.first_name} {member.last_name}
</li>
))}
</ul>
</>
)}
{eventData.resource.group && (
<p className="mt-4">Grupa: {eventData.resource.group.name}</p>
)}
{!eventData.resource.group && (
<>
<div className="form-control">
<label className="label" htmlFor="student_index">
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>
</div>
)

20
frontend/src/views/student/StudentSchedule.tsx
View File

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