zu fabricjs gewechselt, noch nicht funktionsfähig

resources/js/admin/pages/EventFormPage.tsx

@@ -73,6 +73,7 @@ export default function EventFormPage() {
   });
   const [autoSlug, setAutoSlug] = React.useState(true);
   const [originalSlug, setOriginalSlug] = React.useState<string | null>(null);
+  const slugSuffixRef = React.useRef<string | null>(null);
   const [saving, setSaving] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [readOnlyPackageName, setReadOnlyPackageName] = React.useState<string | null>(null);
@@ -172,6 +173,7 @@ export default function EventFormPage() {
         }
       : null);
     setAutoSlug(false);
+    slugSuffixRef.current = null;
   }, [isEdit, loadedEvent]);
 
   React.useEffect(() => {
@@ -186,31 +188,41 @@ export default function EventFormPage() {
 
   const loading = isEdit ? eventLoading : false;
 
+  function ensureSlugSuffix(): string {
+    if (!slugSuffixRef.current) {
+      slugSuffixRef.current = Math.random().toString(36).slice(2, 7);
+    }
+
+    return slugSuffixRef.current;
+  }
+
+  function buildAutoSlug(value: string): string {
+    const base = slugify(value).replace(/^-+|-+$/g, '');
+    const suffix = ensureSlugSuffix();
+    const safeBase = base || 'event';
+
+    return `${safeBase}-${suffix}`;
+  }
+
   function handleNameChange(value: string) {
     setForm((prev) => ({ ...prev, name: value }));
     if (autoSlug) {
-      setForm((prev) => ({ ...prev, slug: slugify(value) }));
+      setForm((prev) => ({ ...prev, slug: buildAutoSlug(value) }));
     }
   }
 
-  function handleSlugChange(value: string) {
-    setAutoSlug(false);
-    setForm((prev) => ({ ...prev, slug: slugify(value) }));
-  }
-
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const trimmedName = form.name.trim();
-    const trimmedSlug = form.slug.trim();
 
     if (!trimmedName) {
       setError('Bitte gib einen Eventnamen ein.');
       return;
     }
 
-    if (!trimmedSlug) {
-      setError('Bitte wähle einen Slug für die Event-URL.');
-      return;
+    let finalSlug = form.slug.trim();
+    if (!finalSlug || autoSlug) {
+      finalSlug = buildAutoSlug(trimmedName);
     }
 
     if (!form.eventTypeId) {
@@ -230,7 +242,7 @@ export default function EventFormPage() {
 
     const payload = {
       name: trimmedName,
-      slug: trimmedSlug,
+      slug: finalSlug,
       event_type_id: form.eventTypeId,
       event_date: form.date || undefined,
       status,
@@ -376,18 +388,8 @@ export default function EventFormPage() {
                     onChange={(e) => handleNameChange(e.target.value)}
                     autoFocus
                   />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="event-slug">Slug / interne Kennung</Label>
-                  <Input
-                    id="event-slug"
-                    placeholder="sommerfest-2025"
-                    value={form.slug}
-                    onChange={(e) => handleSlugChange(e.target.value)}
-                  />
                   <p className="text-xs text-slate-500">
-                    Diese Kennung wird intern verwendet. Gäste betreten dein Event ausschließlich über ihre
-                    Einladungslinks und die dazugehörigen QR-Layouts.
+                    Die Kennung und Event-URL werden automatisch aus dem Namen generiert.
                   </p>
                 </div>
                 <div className="space-y-2">