Make Meeting edit-able & delete-able

Alexandra Zwinger · Alexandra Zwinger · commit 95bf204cc533 · 2025-03-26T11:47:13.000+01:00
diff --git a/src/api/MeetingApi.tsx b/src/api/MeetingApi.tsx
@@ -1,15 +1,25 @@
-import {MeetingDto} from "../dtos/MeetingDto";
-import { AxiosInstance } from "axios";
+import {CreateMeetingDto, MeetingDto} from "../dtos/MeetingDto";
+import {AxiosInstance} from "axios";
 import {handleErrorResponse, handleSuccessResponse} from "./ErrorHandling";
 import {Resources} from "../App";
 
-export function createMeeting(axios: AxiosInstance, meetingDto: MeetingDto): Promise<MeetingDto> {
+export function createMeeting(axios: AxiosInstance, meetingDto: CreateMeetingDto): Promise<CreateMeetingDto> {
     return axios.post(`/${Resources.MEETING}`, meetingDto)
         .then(handleSuccessResponse, handleErrorResponse);
 }
 
+export function updateMeeting(axios: AxiosInstance, meetingId: number, meetingDto: CreateMeetingDto): Promise<CreateMeetingDto> {
+    return axios.put(`/${Resources.MEETING}?id=${meetingId}`, meetingDto)
+        .then(handleSuccessResponse, handleErrorResponse);
+}
+
+export function deleteMeeting(axios: AxiosInstance, meetingId: number): Promise<CreateMeetingDto> {
+    return axios.delete(`/${Resources.MEETING}?id=${meetingId}`)
+        .then(handleSuccessResponse, handleErrorResponse);
+}
+
 export function getMeetings(axios: AxiosInstance): Promise<MeetingDto[]> {
-    const url = "/meeting";
+    const url = `/${Resources.MEETING}`;
     return axios.get(url)
         .then(handleSuccessResponse, handleErrorResponse)
         .then((listRes) => {
diff --git a/src/components/CalendarComponent.tsx b/src/components/CalendarComponent.tsx
@@ -8,23 +8,27 @@ import {useTheme} from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import {getMeetings} from "../api/MeetingApi";
 import axiosInstance from "../AxiosConfig";
+import {MeetingForm} from "../form/MeetingForm";
 
 export default function CalendarComponent(props: { isDialogOpen: boolean }) {
     const [selectedMeeting, setSelectedMeeting] = useState<MeetingDto | null>(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isMeetingFormOpen, setIsMeetingFormOpen] = useState(false);
     const [events, setEvents] = useState<any[]>([]);
     const mdAndUp = useMediaQuery(useTheme().breakpoints.up('md'));
 
     const fetchMeetings = async () => {
         try {
             const response = await getMeetings(axiosInstance);
 
-            setEvents(response.map(({title, date_from, date_until, description, place}: any) => ({
+            setEvents(response.map(({id, title, date_from, date_until, description, place, repeatable}: MeetingDto) => ({
+                id,
                 title,
                 start: new Date(date_from).toISOString(),
                 end: new Date(date_until).toISOString(),
                 description,
                 room: place,
+                repeatable: repeatable
             })));
         } catch (error) {
             alert(error);
@@ -33,22 +37,25 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
 
     useEffect(() => {
         fetchMeetings();
-    }, [props.isDialogOpen]);
+    }, [props.isDialogOpen, isMeetingFormOpen]);
 
     const Eventhandler = (info: any) => {
         const {event} = info;
+        const id = event.id;
         const title = event.title;
         const date_from = new Date(event.start).toLocaleString();
         const date_until = new Date(event.end).toLocaleString();
         const description = event.extendedProps?.description || '';
         const place = event.extendedProps?.room || '';
+        const repeatable = event.extendedProps?.repeatable || 'never';
         setSelectedMeeting({
+            id,
             title,
             date_from,
             date_until,
             description,
             place,
-            repeatable: 'false',
+            repeatable: repeatable,
         });
         setIsModalOpen(true);
     };
@@ -92,8 +99,13 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
                     isOpen={isModalOpen}
                     meeting={selectedMeeting}
                     onClose={closeModal}
+                    setIsMeetingFormOpen={setIsMeetingFormOpen}
                 />
             )}
+            {selectedMeeting && isMeetingFormOpen &&
+                <MeetingForm open={true} onClose={() => setIsMeetingFormOpen(false)} meeting={selectedMeeting}/>
+            }
+
         </div>
     );
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
 import '../styles/Modal.css';
-import { CuteButton } from "./CuteButton";
-import { MeetingDto } from "../dtos/MeetingDto"; 
+import {CuteButton} from "./CuteButton";
+import {CreateMeetingDto} from "../dtos/MeetingDto";
 
 interface ModalProps {
     isOpen: boolean;
-    meeting: MeetingDto | null; 
+    meeting: CreateMeetingDto | null;
     onClose: () => void;
+    setIsMeetingFormOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, meeting, onClose }) => {
-    if (!isOpen || !meeting) return null; 
+const Modal: React.FC<ModalProps> = ({isOpen, meeting, onClose, setIsMeetingFormOpen}) => {
+    if (!isOpen || !meeting) return null;
     return (
         <div className="modal-overlay" onClick={onClose}>
-            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-content max-w-[90%] w-[450px]" onClick={(e) => e.stopPropagation()}>
 
                 <h2 className="font-bold text-2xl text-white mb-4">{meeting.title}</h2>
 
-                <div className="flex flex-wrap gap-4 mb-4">
+                <div className="flex flex-col gap-4 mb-4">
                     <p className="text-bs font-medium text-white">
                         <strong className="text-[#CAE8FF] font-semibold">Start:</strong> {meeting.date_from}
                     </p>
@@ -32,8 +33,21 @@ const Modal: React.FC<ModalProps> = ({ isOpen, meeting, onClose }) => {
                     </p>
                 </div>
 
-                <div className="mt-auto flex justify-end">
-                    <CuteButton onClick={onClose} text={"Schließen"} textColor={"#CAE8FF"} bgColor={"#425E74"} classname={"text-base"} />
+                <div className="flex flex-row gap-4 mb-4 justify-end mt-auto">
+                    <div>
+                        <CuteButton onClick={onClose} text={"Abbrechen"} textColor={"#CAE8FF"} bgColor={"#425E74"}
+                                    classname={"text-base"}/>
+                    </div>
+                    <div>
+                        <CuteButton
+                            onClick={() => {
+                                onClose();
+                                setIsMeetingFormOpen(true)
+                            }}
+                            text={"Meeting Bearbeiten"} textColor={"#e3f1ef"}
+                            bgColor={"#506D69"}
+                            classname={"text-base"}/>
+                    </div>
                 </div>
 
             </div>
diff --git a/src/dtos/MeetingDto.tsx b/src/dtos/MeetingDto.tsx
@@ -1,4 +1,4 @@
-export type MeetingDto = {
+export type CreateMeetingDto = {
     title: string,
     description: string,
     date_from: string,
@@ -7,19 +7,12 @@ export type MeetingDto = {
     place: string
 }
 
-export interface Meeting {
-    title: string;
-    start: string;
-    end: string;
-    description: string;
-    room: string;
-  }
-  
-export const defaultMeetingDto: MeetingDto = ({
-    title: "",
-    description: "",
-    date_from: "",
-    date_until: "",
-    repeatable: "",
-    place: ""
-});
+export type MeetingDto = {
+    id: number,
+    title: string,
+    description: string,
+    date_from: string,
+    date_until: string,
+    repeatable: string,
+    place: string
+}
diff --git a/src/form/MeetingForm.tsx b/src/form/MeetingForm.tsx
@@ -10,40 +10,31 @@ import {Dayjs} from 'dayjs';
 import dayjs from 'dayjs';
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {deDE} from "@mui/x-date-pickers/locales";
-import {createMeeting} from "../api/MeetingApi";
-import {useForm} from "@pankod/refine-react-hook-form";
-import {defaultMeetingDto, MeetingDto} from "../dtos/MeetingDto";
-import {HttpError} from "@refinedev/core";
+import {createMeeting, deleteMeeting, updateMeeting} from "../api/MeetingApi";
+import {CreateMeetingDto, MeetingDto} from "../dtos/MeetingDto";
 import axiosInstance from "../AxiosConfig";
 
 interface MeetingFormProps {
     open: boolean;
     onClose: () => void;
+    meeting?: MeetingDto;
 }
 
 dayjs.locale('de');
 
-export function MeetingForm({open, onClose}: MeetingFormProps) {
+export function MeetingForm({open, onClose, meeting}: MeetingFormProps) {
+    const dateFrom = dayjs(meeting?.date_from, "D.M.YYYY, H:mm:ss");
+    const dateUntil = dayjs(meeting?.date_until, "D.M.YYYY, H:mm:ss");
 
-    const [meetingTitle, setMeetingTitle] = useState('');
-    const [repeatable, setRepeatable] = useState('never');
-    const [meetingDescription, setMeetingDescription] = useState('');
-    const [meetingRoom, setMeetingRoom] = useState('');
-    const [date1, setDate1] = useState<Dayjs>(dayjs());
-    const [time1, setTime1] = useState<Dayjs>(dayjs().hour(12).minute(0).second(0));
-    const [date2, setDate2] = useState<Dayjs>(dayjs());
-    const [time2, setTime2] = useState<Dayjs>(dayjs().hour(12).minute(0).second(0));
+    const [meetingTitle, setMeetingTitle] = useState(meeting ? meeting.title : "");
+    const [repeatable, setRepeatable] = useState(meeting ? meeting.repeatable : "never");
+    const [meetingDescription, setMeetingDescription] = useState(meeting ? meeting.description : '');
+    const [meetingRoom, setMeetingRoom] = useState(meeting ? meeting.place : '');
+    const [date1, setDate1] = useState<Dayjs>(meeting ? dateFrom : dayjs());
+    const [time1, setTime1] = useState<Dayjs>(meeting ? dateFrom : dayjs().hour(12).minute(0).second(0));
+    const [date2, setDate2] = useState<Dayjs>(meeting ? dateUntil : dayjs());
+    const [time2, setTime2] = useState<Dayjs>(meeting ? dateUntil : dayjs().hour(13).minute(0).second(0));
 
-    const methods = useForm<MeetingDto, HttpError>({
-        refineCoreProps: {
-            redirect: "show",
-        },
-        defaultValues: defaultMeetingDto
-    });
-    const {
-        handleSubmit,
-        refineCore: {onFinish},
-    } = methods;
 
     const handleDate1Change = (newDate: Dayjs | null) => {
         if (newDate) {
@@ -60,7 +51,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
     const handleTime1Change = (newTime: Dayjs | null) => {
         if (newTime) {
             setTime1(newTime);
-            setTime2(newTime);
+            setTime2(newTime.add(1, 'hour'));
         }
     };
 
@@ -74,14 +65,18 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
         setRepeatable(event.target.value);
     };
 
-    const handleClick = async () => {
-        await handleSubmit(async (values) => {
-            await onFinish({
-                ...values,
-            });
-        })();
+    const handleDelete = async () => {
+        try {
+            await deleteMeeting(axiosInstance, meeting!!.id);
+            onClose();
+        } catch (error) {
+            console.error('Fehler:', error);
+            alert('Es gab einen Fehler beim Löschen des Meetings.');
+        }
+    }
 
-        const meetingData: MeetingDto = {
+    const handleSave = async () => {
+        const meetingData: CreateMeetingDto = {
             title: meetingTitle,
             description: meetingDescription,
             place: meetingRoom,
@@ -91,7 +86,11 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
         };
 
         try {
-            await createMeeting(axiosInstance, meetingData);
+            if (meeting) {
+                await updateMeeting(axiosInstance, meeting.id, meetingData);
+            } else {
+                await createMeeting(axiosInstance, meetingData);
+            }
             onClose();
         } catch (error) {
             console.error('Fehler:', error);
@@ -133,8 +132,9 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
                        className="font-semibold block text-lg text-white">Beschreibung</label>
                 <textarea
                     id="meeting-description"
+                    rows={3}
                     placeholder="Hier könnte Ihre Beschreibung stehen"
-                    className="ml-5 mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-10 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs placeholder:py-1 py-2"
+                    className="ml-5 resize-none mt-1 text-gray-300 block bg-[#333C4F] w-11/12 px-10 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs placeholder:py-1 py-2"
                     value={meetingDescription}
                     onChange={(e) => setMeetingDescription(e.target.value)}
                 />
@@ -281,10 +281,19 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
             </form>
         </DialogContent>
         <DialogActions>
-            <CuteButton onClick={onClose} text={"Abbrechen"} textColor={"#CAE8FF"} bgColor={"#425E74"}
-                        classname={"text-base"}/>
-            <CuteButton onClick={handleClick} text={"Speichern"} textColor={"#e3f1ef"} bgColor={"#506D69"}
-                        classname={"text-2xl"}/>
+            <div className={"flex flex-row gap-4 w-full items-center"}>
+                {meeting && (
+                    <CuteButton onClick={handleDelete} text={"Meeting Löschen"} textColor={"#f2f2f2"}
+                                bgColor={"#974242"}
+                                classname={"text-xl"}/>
+                )}
+                <div className={"gap-2 ml-auto flex items-center"}>
+                    <CuteButton onClick={onClose} text={"Abbrechen"} textColor={"#CAE8FF"} bgColor={"#425E74"}
+                                classname={"text-base"}/>
+                    <CuteButton onClick={handleSave} text={"Speichern"} textColor={"#e3f1ef"} bgColor={"#506D69"}
+                                classname={"text-2xl"}/>
+                </div>
+            </div>
         </DialogActions>
     </Dialog>
 }
