Add form elements for event editing in Dialog

This will present the relevant values for the current event in input fields where the user can edit them.

There is a small change to the placeholder function `handleEventEditing` that now alerts the complete event data that will later be sent to the API.

I have removed `handleEventClick` as it is now unnecessary.

src/apps/opening-hours-editor/DialogFomular.tsx

@@ -1,34 +1,69 @@
-import React from "react";
+// I dont know why eslint is complaining about label-has-associated-control
+// as the label is associated with the input field. I will disable it for now.
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useState } from "react";
 import { EventImpl } from "@fullcalendar/core/internal";
+import { extractTime, updateEventTime } from "./helper";
 
 type DialogFomularProps = {
-  evnetInfo: EventImpl;
-  handleEventEditing: (title: string) => void;
+  eventInfo: EventImpl;
+  handleEventEditing: (eventInfo: EventImpl) => void;
 };
 
 const DialogFomular: React.FC<DialogFomularProps> = ({
-  evnetInfo,
+  eventInfo,
   handleEventEditing
 }) => {
+  const [title, setTitle] = useState(eventInfo.title);
+  const [startTime, setStartTime] = useState(extractTime(eventInfo.startStr));
+  const [endTime, setEndTime] = useState(extractTime(eventInfo.endStr));
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    eventInfo.setProp("title", title);
+    const startDate = updateEventTime(eventInfo.startStr, startTime);
+    const endDate = updateEventTime(eventInfo.endStr, endTime);
+    eventInfo.setDates(startDate, endDate);
+
+    handleEventEditing(eventInfo);
+  };
+
   return (
-    <>
-      <p>DialogFomular:</p>
-      <pre>{JSON.stringify(evnetInfo, null, 2)}</pre>
-      <form>
-        {/* Should be type submit */}
-        <button
-          type="button"
-          onClick={() => handleEventEditing(evnetInfo.title)}
-          style={{
-            border: "1px solid black",
-            padding: "5px",
-            background: "grey"
-          }}
-        >
-          Show title btn
-        </button>
-      </form>
-    </>
+    <form
+      onSubmit={handleSubmit}
+      style={{ display: "grid", marginTop: "20px" }}
+    >
+      <label htmlFor="title">Title:</label>
+      <input
+        id="title"
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <label htmlFor="start-time">Start Time: {startTime}</label>
+      <input
+        id="start-time"
+        type="time"
+        value={startTime}
+        onChange={(e) => setStartTime(e.target.value)}
+      />
+      <label htmlFor="end-time">End Time:</label>
+      <input
+        id="end-time"
+        type="time"
+        value={endTime}
+        onChange={(e) => setEndTime(e.target.value)}
+        min={startTime}
+        max="00:00"
+      />
+      <button
+        type="submit"
+        style={{ backgroundColor: "green", marginTop: "20px" }}
+      >
+        Submit
+      </button>
+    </form>
   );
 };
 

src/apps/opening-hours-editor/OpeningHoursEditor.tsx

@@ -37,7 +37,7 @@ const OpeningHoursEditor: React.FC = () => {
         eventClick={(clickInfo) =>
           openDialogWithContent(
             <DialogFomular
-              evnetInfo={clickInfo.event}
+              eventInfo={clickInfo.event}
               handleEventEditing={handleEventEditing}
             />
           )

src/apps/opening-hours-editor/helper.ts

@@ -27,3 +27,17 @@ export const formatCmsEventsToFullCalendar = (
 export const isSameDay = (startDay: Date, endDay: Date) => {
   return startDay.toDateString() === endDay.toDateString();
 };
+
+export const extractTime = (dateStr: string) => {
+  const date = new Date(dateStr);
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  return `${hours}:${minutes}`;
+};
+
+export const updateEventTime = (dateStr: string, timeStr: string) => {
+  const [hours, minutes] = timeStr.split(":").map(Number);
+  const date = new Date(dateStr);
+  date.setHours(hours, minutes);
+  return date;
+};

src/apps/opening-hours-editor/useOpeningHours.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-import { EventInput, DateSelectArg, EventClickArg } from "@fullcalendar/core";
+import { EventInput, DateSelectArg } from "@fullcalendar/core";
+import { EventImpl } from "@fullcalendar/core/internal";
 import {
   createCmsEventId,
   formatCmsEventsToFullCalendar,
@@ -53,22 +54,9 @@ const useOpeningHours = () => {
     calendarApi.unselect();
   };
 
-  // This will probably be replaced with handleEventEditing
-  const handleEventClick = (clickInfo: EventClickArg) => {
+  const handleEventEditing = (eventInfo: EventImpl) => {
     // eslint-disable-next-line no-alert
-    const newTitle = prompt(
-      "Enter a new title for this event",
-      clickInfo.event.title
-    );
-
-    if (newTitle) {
-      clickInfo.event.setProp("title", newTitle);
-    }
-  };
-
-  const handleEventEditing = (string: string) => {
-    // eslint-disable-next-line no-alert
-    alert(string);
+    alert(JSON.stringify(eventInfo, null, 2));
   };
 
   const handleEventRemove = (eventToRemove: EventInput) => {
@@ -78,7 +66,6 @@ const useOpeningHours = () => {
   return {
     events,
     handleEventSelect,
-    handleEventClick,
     handleEventRemove,
     handleEventEditing
   };