115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import React, { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { useAuth } from "@/lib/auth-context"
|
|
import { Send, CheckCircle2 } from "lucide-react"
|
|
|
|
export function CreateTicketForm() {
|
|
const { createTicket, rooms } = useAuth()
|
|
const [roomId, setRoomId] = useState<string>("")
|
|
const [title, setTitle] = useState("")
|
|
const [description, setDescription] = useState("")
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [showSuccess, setShowSuccess] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!roomId || !title || !description) return
|
|
|
|
setIsSubmitting(true)
|
|
|
|
await createTicket({
|
|
roomId: parseInt(roomId),
|
|
title,
|
|
description
|
|
})
|
|
|
|
setRoomId("")
|
|
setTitle("")
|
|
setDescription("")
|
|
setIsSubmitting(false)
|
|
setShowSuccess(true)
|
|
|
|
setTimeout(() => setShowSuccess(false), 3000)
|
|
}
|
|
|
|
return (
|
|
<Card className="border-border/60">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Neues Ticket erstellen</CardTitle>
|
|
<CardDescription>Melden Sie ein technisches Problem oder fordern Sie Hilfe an</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{showSuccess && (
|
|
<div className="mb-4 flex items-center gap-2 rounded-lg bg-status-done/20 p-3 text-sm text-status-done-foreground">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
Ticket erfolgreich erstellt!
|
|
</div>
|
|
)}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="room">Raum</Label>
|
|
<Select value={roomId} onValueChange={setRoomId} required>
|
|
<SelectTrigger id="room">
|
|
<SelectValue placeholder="Raum auswählen" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{rooms.map((r) => (
|
|
<SelectItem key={r.id} value={String(r.id)}>
|
|
{r.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Titel</Label>
|
|
<Input
|
|
id="title"
|
|
placeholder="Kurze Beschreibung des Problems"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Problembeschreibung</Label>
|
|
<Textarea
|
|
id="description"
|
|
placeholder="Beschreiben Sie das Problem im Detail..."
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={4}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
|
{isSubmitting ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
|
|
Senden...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2">
|
|
<Send className="h-4 w-4" />
|
|
Ticket erstellen
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|