Add min max calendar hours, add event colors

frontend/src/views/coordinator/EditSchedule.tsx

@@ -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,9 +66,32 @@ 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>
+        <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">
@@ -100,6 +124,8 @@ const EditSchedule = ({
               </div>
             </div>
             <button className="btn btn-success mt-10">ZAPISZ</button>
+          </>
+        )}
       </form>
     </div>
   )

frontend/src/views/coordinator/Schedule.tsx

@@ -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

frontend/src/views/student/ScheduleAddGroup.tsx

@@ -46,6 +46,8 @@ 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>
+        {eventData.resource.committee.members.length > 0 && (
+          <>
             Komisja:{' '}
             <ul className="list-disc">
               {eventData.resource.committee.members.map((member: any) => (
@@ -57,6 +59,13 @@ const ScheduleAddGroup = ({
                 </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
@@ -69,6 +78,8 @@ const ScheduleAddGroup = ({
               />
             </div>
             <button className="btn btn-success mt-4">ZAPISZ</button>
+          </>
+        )}
       </form>
     </div>
   )

frontend/src/views/student/StudentSchedule.tsx

@@ -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