feat: added answer field

This commit is contained in:
2025-05-31 01:14:49 +02:00
parent 51bf409e3c
commit aabf84ecc0
8 changed files with 128 additions and 10 deletions

View File

@@ -30,7 +30,7 @@
</div>
</nav>
<!-- Global Container -->
<div class="max-w-4xl mx-auto mt-8 px-4">
<div class="max-w-5xl mx-auto mt-8 px-4">
{% block content %}{% endblock %}
</div>
</body>

View File

@@ -2,7 +2,7 @@
{% block content %}
<!-- Messages -->
{% if messages %}
<div class="max-w-4xl mx-auto px-4 pt-4">
<div class="max-w-6xl mx-auto px-4 pt-4">
{% for message in messages %}
<div class="mb-4 p-3 rounded {% if message.tags == 'error' %}bg-red-100 text-red-700{% elif message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
{{ message }}
@@ -10,7 +10,7 @@
{% endfor %}
</div>
{% endif %}
<div class="max-w-4xl mx-auto px-4 py-6">
<div class="max-w-6xl mx-auto px-4 py-6">
<!-- Ticket Bearbeitung -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<h1 class="text-3xl font-bold mb-4">🎫 Ticket #{{ ticket.id }} {{ ticket.title }}</h1>
@@ -71,13 +71,50 @@
</select>
</div>
</div>
<!-- Zugewiesen an (Nur Anzeige) -->
<div>
<label class="block text-sm font-medium mb-1">Zugewiesen an:</label>
<div id="tutor_display" class="w-full p-2 border border-gray-300 bg-gray-100 rounded shadow-sm text-gray-300">
<div id="tutor_display" class="w-full p-2 border border-gray-300 bg-gray-300 rounded shadow-sm">
<span id="tutor_text">{% if ticket.assigned_to %}{{ ticket.assigned_to.username }}{% else %}Niemand zugewiesen{% endif %}</span>
</div>
<p class="text-xs text-gray-500 mt-1">Wird automatisch basierend auf dem ausgewählten Kurs zugewiesen</p>
</div>
<!-- Antwort/Lösung -->
<div>
<label class="block text-sm font-medium mb-1">
Antwort/Lösung:
{% if form.status.value == 'resolved' or ticket.status == 'resolved' %}
<span class="text-red-500">*</span>
{% endif %}
</label>
{% if ticket.answer and not view.can_edit %}
<!-- Nur Anzeige wenn bereits beantwortet und nicht editierbar -->
<div class="w-full p-3 border border-gray-300 bg-gray-50 rounded shadow-sm">
<div class="text-gray-700">{{ ticket.answer|linebreaks }}</div>
{% if ticket.answered_at %}
<div class="text-xs text-gray-500 mt-2">
Beantwortet am: {{ ticket.answered_at|date:"d.m.Y H:i" }}
</div>
{% endif %}
</div>
{% else %}
<!-- Bearbeitbares Feld -->
<textarea name="answer"
rows="4"
{% if not view.can_edit or ticket.status != 'resolved' %}disabled{% endif %}
placeholder="Beschreibe die Lösung des Problems..."
class="w-full p-2 border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-black {% if not view.can_edit or ticket.status != 'resolved' %}bg-gray-300 cursor-not-allowed{% endif %}">{{ ticket.answer|default:'' }}</textarea>
{% if form.answer.errors %}
<div class="text-red-600 text-sm mt-1">{{ form.answer.errors }}</div>
{% endif %}
<p class="text-xs text-gray-500 mt-1">
{% if ticket.status != 'resolved' %}
Eine Antwort ist erforderlich beim Setzen des Status auf "Gelöst"
{% endif %}
</p>
{% endif %}
</div>
{% if view.can_edit %}
<button type="submit"
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">💾 Speichern</button>
@@ -178,5 +215,40 @@
});
{% endif %}
});
// Answer Feld nur bei Status "resolved" aktivieren
{% if view.can_edit %}
document.addEventListener('DOMContentLoaded', function() {
const statusSelect = document.querySelector('select[name="status"]');
const answerField = document.querySelector('textarea[name="answer"]');
const answerLabel = answerField.previousElementSibling;
function toggleAnswerField() {
if (statusSelect.value === 'resolved') {
answerField.disabled = false;
answerField.classList.remove('bg-gray-100', 'cursor-not-allowed');
answerField.classList.add('bg-white');
answerField.required = true;
// Pflichtfeld-Stern anzeigen
if (!answerLabel.querySelector('.text-red-500')) {
answerLabel.innerHTML = answerLabel.textContent + ' <span class="text-red-500">*</span>';
}
} else {
answerField.disabled = true;
answerField.classList.add('bg-gray-100', 'cursor-not-allowed');
answerField.classList.remove('bg-white');
answerField.required = false;
// Pflichtfeld-Stern entfernen
answerLabel.innerHTML = answerLabel.textContent.replace(' *', '');
}
}
// Initial prüfen
toggleAnswerField();
// Bei Status-Änderung prüfen
statusSelect.addEventListener('change', toggleAnswerField);
});
{% endif %}
</script>
{% endblock %}

View File

@@ -1,6 +1,6 @@
{% extends "ticketsystem/base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-6">
<div class="max-w-6xl mx-auto px-4 py-6">
<!-- Header -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="flex justify-between items-center">

View File

@@ -1,6 +1,6 @@
{% extends "ticketsystem/base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto px-4 py-12">
<!-- Header -->
<div class="text-center mb-12">
<div class="text-6xl mb-4">🎫</div>

View File

@@ -2,7 +2,7 @@
{% block content %}
<!-- Messages -->
{% if messages %}
<div class="max-w-4xl mx-auto px-4 pt-4">
<div class="max-w-6xl mx-auto px-4 pt-4">
{% for message in messages %}
<div class="mb-4 p-3 rounded {% if message.tags == 'error' %}bg-red-100 text-red-700{% elif message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
{{ message }}
@@ -10,7 +10,7 @@
{% endfor %}
</div>
{% endif %}
<div class="max-w-4xl mx-auto px-4 py-6">
<div class="max-w-6xl mx-auto px-4 py-6">
<!-- Ticket Erstellen -->
<div class="bg-white rounded-lg shadow p-6">
<h1 class="text-3xl font-bold mb-4"> Neues Ticket erstellen</h1>