start of eventsform

components/eventModal.jsx

+import { useTranslation } from "next-i18next";
+
+import { Grid, Modal, Text, Textarea, TextInput } from "@mantine/core";
+
+import { useForm } from "@mantine/form";
+//import { DateTimePicker } from '@mantine/dates';
+
+export default function EventModal({ open, close, event }) {
+  const { t } = useTranslation("common");
+
+  const initialValues = {
+    title: "",
+    description: "",
+    speaker: "",
+    start: null,
+    end: null,
+    place: "",
+    signUp: "",
+    isStammtisch: false,
+  };
+
+  const form = useForm({
+    initialValues: initialValues,
+
+    validate: {
+      title: (value) => (value ? null : t("ENotEmpty")),
+      description: (value) => (value ? null : t("ENotEmpty")),
+      speaker: (value) => (value ? null : t("ENotEmpty")),
+      start: (value) => (value ? null : t("ENotEmpty")),
+      end: (value) => (value ? null : t("ENotEmpty")),
+      place: (value) => (value ? null : t("ENotEmpty")),
+      signUp: (value) => (value ? null : t("ENotEmpty")),
+    },
+  });
+
+  const setEvent = () => {
+    if (event) {
+      form.setValues({ ...event });
+    } else {
+      form.setValues(initialValues);
+    }
+  };
+
+  return (
+    <Modal opened={open} onClose={close} fz="xl" size="xl">
+      <Text variant="h2" fw={700}>
+        {event ? t("editEvent") : t("addEvent")}
+      </Text>
+
+      <form onSubmit={form.onSubmit((values) => submit(values))}>
+        <Grid>
+          <Grid.Col sm={12} md={6}>
+            <TextInput
+              withAsterisk
+              label={t("title")}
+              placeholder="Introduction to Free Software"
+              {...form.getInputProps("title")}
+            />
+          </Grid.Col>
+          <Grid.Col sm={12} md={6}>
+            <TextInput
+              withAsterisk
+              label={t("speaker")}
+              placeholder="Maxime Musterfrau"
+              {...form.getInputProps("speaker")}
+            />
+          </Grid.Col>
+          <Grid.Col sm={12}>
+            <Textarea
+              withAsterisk
+              label={t("description")}
+              placeholder="Lorem Ipsum..."
+              {...form.getInputProps("description")}
+            />
+          </Grid.Col>
+          <Grid.Col sm={12} md={6}>
+            <TextInput
+              withAsterisk
+              label={t("place")}
+              placeholder="ETH HG F 7"
+              {...form.getInputProps("place")}
+            />
+          </Grid.Col>
+          <Grid.Col sm={12} md={6}></Grid.Col>
+          <Grid.Col sm={12} md={6}>
+            <TextInput
+              withAsterisk
+              label={t("signUp")}
+              placeholder="https://..."
+              {...form.getInputProps("signUp")}
+            />
+          </Grid.Col>
+        </Grid>
+      </form>
+    </Modal>
+  );
+}

components/events.jsx

+import { useState } from "react";
+
 import { useTranslation } from "next-i18next";
 
+import { Button } from "@mantine/core";
+
+import EventModal from "../components/eventModal";
+
 export default function Events() {
+  const [open, setOpen] = useState(false);
+  const [event, setEvent] = useState(null);
+
   const { t } = useTranslation("common");
+
   return (
     <>
       <h1>{t("events")}</h1>
+
+      <Button onClick={() => setOpen(true)} variant="light">
+        {t("addEvent")}
+      </Button>
+
+      <EventModal open={open} event={event} close={() => setOpen(false)} />
     </>
   );
 }

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.8.1",
+        "@mantine/form": "^6.0.20",
         "@mantine/notifications": "^5.10.5",
         "axios": "^1.5.0",
         "eslint": "8.48.0",
@@ -2601,6 +2602,18 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@mantine/form": {
+      "version": "6.0.20",
+      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.20.tgz",
+      "integrity": "sha512-htwFVfo60nYEMNwuBiYyJpqArwNnXIU7H70l8lZ+ie9QWERZCHgS7JVUBwFpS3n3iYArKbFBG13PnQAzPHMg2w==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "klona": "^2.0.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@mantine/hooks": {
       "version": "5.10.5",
       "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.5.tgz",
@@ -10192,6 +10205,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
+    "@mantine/form": "^6.0.20",
     "@mantine/notifications": "^5.10.5",
     "axios": "^1.5.0",
     "eslint": "8.48.0",

public/locales/de/common.json

@@ -18,5 +18,8 @@
   "mailSuccess": "Formular Versandt",
   "mailSuccessText": "Das Formular wurde erfolgreich versandt.",
   "mailFailure": "Fehler",
-  "mailFailureText": "Etwas ist beim Versand des Formulars schiefgelaufen."
+  "mailFailureText": "Etwas ist beim Versand des Formulars schiefgelaufen.",
+  "addEvent": "Event Hinzufügen",
+  "editEvent": "Event Bearbeiten",
+  "ENotEmpty": "Dieses Feld bitte ausfüllen"
 }
\ No newline at end of file

public/locales/en/common.json

@@ -18,5 +18,8 @@
   "mailSuccess": "Form Sent",
   "mailSuccessText": "The form was successfully sent",
   "mailFailure": "Error",
-  "mailFailureText": "Something went wrong when sending the form"
+  "mailFailureText": "Something went wrong when sending the form",
+  "addEvent": "Add Event",
+  "editEvent": "Edit Event",
+  "ENotEmpty": "Please fill out this field"
 }
\ No newline at end of file