Skip to content

Commit 0f589c8

Browse files
author
Alexandra Zwinger
committed
Add some more details to SearchMeetingForm & refactor fetchMeetings
1 parent d66fdeb commit 0f589c8

File tree

5 files changed

+126
-61
lines changed

5 files changed

+126
-61
lines changed

‎src/api/MeetingApi.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,13 @@ export function getMeetingsOfWeek(axios: AxiosInstance): Promise<MeetingDto[]> {
3434
.then((listRes) => {
3535
return listRes;
3636
});
37+
}
38+
39+
export function getMeetingsForModule(axios: AxiosInstance, module: string): Promise<MeetingDto[]> {
40+
const url = `/${Resources.MEETING}?module=${module}`;
41+
return axios.get(url)
42+
.then(handleSuccessResponse, handleErrorResponse)
43+
.then((listRes) => {
44+
return listRes;
45+
});
3746
}

‎src/components/CalendarComponent.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,39 @@ import useMediaQuery from '@mui/material/useMediaQuery';
99
import {getMeetings} from "../api/MeetingApi";
1010
import axiosInstance from "../AxiosConfig";
1111
import {CreateOrUpdateMeetingForm} from "../form/CreateOrUpdateMeetingForm";
12+
import {EventSourceInput} from '@fullcalendar/core';
1213

1314
export default function CalendarComponent(props: { isDialogOpen: boolean }) {
1415
const [selectedMeeting, setSelectedMeeting] = useState<MeetingDto | null>(null);
1516
const [isModalOpen, setIsModalOpen] = useState(false);
1617
const [isMeetingFormOpen, setIsMeetingFormOpen] = useState(false);
17-
const [events, setEvents] = useState<any[]>([]);
18+
const [events, setEvents] = useState<MeetingDto[]>([]);
1819
const mdAndUp = useMediaQuery(useTheme().breakpoints.up('md'));
1920

2021
const fetchMeetings = async () => {
2122
try {
2223
const response = await getMeetings(axiosInstance);
23-
24-
setEvents(response.map(({
25-
id,
26-
title,
27-
date_from,
28-
date_until,
29-
description,
30-
place,
31-
repeatable,
32-
member,
33-
creator
34-
}: MeetingDto) => ({
35-
id: id,
36-
title,
37-
start: new Date(date_from).toISOString(),
38-
end: new Date(date_until).toISOString(),
39-
description,
40-
room: place,
41-
repeatable: repeatable,
42-
creator: creator,
43-
member: member,
44-
})));
24+
setEvents(response);
4525
} catch (error) {
4626
alert(error);
4727
}
4828
};
4929

30+
function mapMeetingsToEvents(meetings: MeetingDto[]): EventSourceInput {
31+
return meetings.map(meeting => ({
32+
id: meeting.id.toString(),
33+
title: meeting.title,
34+
start: new Date(meeting.date_from).toISOString(),
35+
end: new Date(meeting.date_until).toISOString(),
36+
description: meeting.description,
37+
room: meeting.place,
38+
repeatable: meeting.repeatable,
39+
creator: meeting.creator,
40+
member: meeting.member,
41+
}))
42+
}
43+
44+
5045
useEffect(() => {
5146
fetchMeetings();
5247
}, [props.isDialogOpen, isMeetingFormOpen]);
@@ -107,7 +102,7 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
107102
day: 'Tag',
108103
week: 'Woche',
109104
}}
110-
events={events}
105+
events={mapMeetingsToEvents(events)}
111106
eventClick={Eventhandler}
112107
/>
113108
{selectedMeeting && (

‎src/components/MeetingSearchResult.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {MeetingDto} from "../dtos/MeetingDto";
2+
import {CuteButton} from "./CuteButton";
3+
import React from "react";
4+
5+
export default function MeetingSearchResult(props: { meeting: MeetingDto }) {
6+
return (
7+
<div className="bg-[#333C4F] p-4 flex flex-col gap-4">
8+
<div>
9+
<div className="text-white">
10+
{new Date(props.meeting.date_from).toLocaleString('de-DE', {
11+
day: '2-digit',
12+
month: '2-digit',
13+
year: 'numeric',
14+
hour: '2-digit',
15+
minute: '2-digit',
16+
})}
17+
{" - "}
18+
{new Date(props.meeting.date_until).toLocaleString('de-DE', {
19+
day: '2-digit',
20+
month: '2-digit',
21+
year: 'numeric',
22+
hour: '2-digit',
23+
minute: '2-digit',
24+
})}
25+
</div>
26+
<div className="text-white space-y-1">
27+
<p>{props.meeting.description}</p>
28+
<p>{props.meeting.member}</p>
29+
<p>{props.meeting.place}</p>
30+
</div>
31+
</div>
32+
<div className="flex flex-col">
33+
<CuteButton onClick={() => {
34+
}} text={"Teilnehmen"} textColor={"#e8fcf6"}
35+
bgColor={"#56A095"}
36+
classname={"text-sm"}/>
37+
</div>
38+
</div>
39+
)
40+
}

‎src/form/SearchMeetingForm.tsx‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React, {useEffect, useState} from 'react';
2-
import {Dialog, DialogTitle, DialogContent, IconButton, Select, MenuItem} from "@mui/material";
2+
import {
3+
Dialog,
4+
DialogTitle,
5+
DialogContent,
6+
IconButton,
7+
Select,
8+
MenuItem,
9+
SelectChangeEvent,
10+
Grid2
11+
} from "@mui/material";
312
import CloseIconPath from '../data/close_icon_red.png';
413
import {getModules} from "../api/ModuleApi";
514
import axiosInstance from "../AxiosConfig";
15+
import {getMeetingsForModule} from "../api/MeetingApi";
16+
import {MeetingDto} from "../dtos/MeetingDto";
17+
import MeetingSearchResult from "../components/MeetingSearchResult";
618

719
interface MeetingFormProps {
820
open: boolean;
@@ -11,19 +23,42 @@ interface MeetingFormProps {
1123

1224
export function SearchMeetingForm({open, onClose}: MeetingFormProps) {
1325
const [modulNames, setModuleNames] = useState<string[]>([]);
26+
const [meetings, setMeetings] = useState<MeetingDto[]>([]);
27+
const [module, setModule] = useState<string | undefined>();
1428

1529
const fetchModuleNames = async () => {
1630
try {
31+
setModuleNames(["GDI", "AlgoDat"]);
1732
const response = await getModules(axiosInstance);
1833
setModuleNames(response);
1934
} catch (error) {
2035
//alert("Error fetching user modules:" + error);
2136
}
2237
}
2338

39+
const fetchMeetings = async () => {
40+
try {
41+
if (module === undefined) {
42+
return;
43+
}
44+
const response = await getMeetingsForModule(axiosInstance, module);
45+
setMeetings(response);
46+
} catch (error) {
47+
alert("Fehler beim Abrufen der Meetings: " + error);
48+
}
49+
};
50+
2451
useEffect(() => {
2552
fetchModuleNames();
26-
})
53+
}, [])
54+
55+
useEffect(() => {
56+
fetchMeetings();
57+
}, [module])
58+
59+
const handleSelectChange = (event: SelectChangeEvent) => {
60+
setModule(event.target.value as string);
61+
};
2762

2863
return <Dialog open={open} onClose={onClose} sx={{
2964
"& .MuiDialog-container": {
@@ -50,7 +85,7 @@ export function SearchMeetingForm({open, onClose}: MeetingFormProps) {
5085
</DialogTitle>
5186

5287
<DialogContent>
53-
<form className={"overflow-x-hidden"} onSubmit={(e) => {
88+
<form className={"overflow-y-visible"} onSubmit={(e) => {
5489
e.preventDefault();
5590
const form = e.currentTarget;
5691
if (!form.checkValidity()) {
@@ -61,9 +96,11 @@ export function SearchMeetingForm({open, onClose}: MeetingFormProps) {
6196
<Select
6297
labelId="demo-simple-select-label"
6398
id="demo-simple-select"
64-
variant={"filled"}
99+
variant={"outlined"}
65100
label="Modul"
66-
sx={{width: "50%", minWidth: "240px", color: "#ffffff", bgcolor: "#333C4F"}}
101+
value={module ? module : ""}
102+
onChange={handleSelectChange}
103+
sx={{width: "50%", minWidth: "240px", color: "#ffffff", bgcolor: "#333C4F", borderColor: "#333C4F"}}
67104
>
68105
{modulNames.map((module, i) => (
69106
<MenuItem
@@ -73,8 +110,15 @@ export function SearchMeetingForm({open, onClose}: MeetingFormProps) {
73110
{module}
74111
</MenuItem>
75112
))}
76-
77113
</Select>
114+
<Grid2 container spacing={3} className={"my-5 overflow-y-scroll"}>
115+
{meetings.map((meeting) => (
116+
<Grid2 size={{xs: 12, lg: 4, md: 6}} key={meeting.id}>
117+
<MeetingSearchResult meeting={meeting}/>
118+
</Grid2>
119+
))}
120+
</Grid2>
121+
78122
</form>
79123
</DialogContent>
80124
</Dialog>

‎src/pages/YourStudies.tsx‎

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,14 @@ const subjects = [
1616
];
1717

1818
export default function YourStudies() {
19-
const [weeklyMeetings, setWeeklyMeetings] = useState<any[]>([]);
19+
const [weeklyMeetings, setWeeklyMeetings] = useState<MeetingDto[]>([]);
2020
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
2121
const [user, setUser] = useState<UserDto | undefined>();
2222

2323
const fetchMeetings = async () => {
2424
try {
2525
const response = await getMeetingsOfWeek(axiosInstance);
26-
27-
const meetings = response.map(({
28-
id,
29-
title,
30-
date_from,
31-
date_until,
32-
description,
33-
place,
34-
repeatable,
35-
member,
36-
creator
37-
}: MeetingDto) => ({
38-
id: id,
39-
title,
40-
start: new Date(date_from).toISOString(),
41-
end: new Date(date_until).toISOString(),
42-
description,
43-
room: place,
44-
repeatable: repeatable,
45-
creator: creator,
46-
member: member,
47-
}));
48-
49-
setWeeklyMeetings(meetings);
26+
setWeeklyMeetings(response);
5027
} catch (error) {
5128
alert("Fehler beim Abrufen der Meetings: " + error);
5229
}
@@ -151,15 +128,15 @@ export default function YourStudies() {
151128
<tr key={index}>
152129
<td className="px-1 py-1 text-[#9B9B9B]">{meeting.title}</td>
153130
<td className="px-1 py-1 text-[#2AB19D]">
154-
{new Date(meeting.start).toLocaleDateString()}
131+
{new Date(meeting.date_from).toLocaleDateString()}
155132
</td>
156133
<td className="px-1 py-1 text-[#9B9B9B]">
157-
{new Date(meeting.start).toLocaleTimeString([], {
134+
{new Date(meeting.date_from).toLocaleTimeString([], {
158135
hour: '2-digit',
159136
minute: '2-digit'
160137
})}
161138
</td>
162-
<td className="px-1 py-1 text-[#9B9B9B]">{meeting.room}</td>
139+
<td className="px-1 py-1 text-[#9B9B9B]">{meeting.place}</td>
163140
</tr>
164141
))}
165142
</tbody>
@@ -172,13 +149,13 @@ export default function YourStudies() {
172149
{meeting.title}
173150
</p>
174151
<p className="text-[#2AB19D] inline">
175-
{new Date(meeting.start).toLocaleDateString()}
152+
{new Date(meeting.date_from).toLocaleDateString()}
176153
</p>
177154
<p className="text-[#9B9B9B] inline ml-2">
178-
{new Date(meeting.start).toLocaleTimeString([], {
155+
{new Date(meeting.date_from).toLocaleTimeString([], {
179156
hour: '2-digit',
180157
minute: '2-digit'
181-
})} {meeting.room}
158+
})} {meeting.place}
182159
</p>
183160
</div>
184161
))}

0 commit comments

Comments
 (0)