sankalp
e1f1d4a4fc
Refactor page templates into pages/ and introduce a create modal for ticket creation
64 lines
4.5 KiB
HTML
64 lines
4.5 KiB
HTML
<!-- Create Ticket Modal -->
|
|
<div x-cloak x-show="createTicketOpen" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="fixed inset-0 bg-black/50" @click="createTicketOpen = false"></div>
|
|
<div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-4xl mx-auto my-auto max-h-[90vh] overflow-y-auto z-10 p-6 md:p-8">
|
|
<div class="px-8 py-5 flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Create Ticket</h3>
|
|
<button @click="createTicketOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
<form method="post" action="{% url 'ticket-create' %}">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="project" {% if project %}value="{{ project.id }}"{% else %}:value="createTicketData.project"{% endif %}>
|
|
<input type="hidden" name="epic" :value="createTicketData.epic">
|
|
|
|
<div class="px-8 pb-6 space-y-5">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="col-span-2">
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Ticket Name<span class="text-red-500">*</span></label>
|
|
<input type="text" name="name" x-model="createTicketData.name" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Status</label>
|
|
<select name="status" x-model="createTicketData.status_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
{% for s in statuses %}
|
|
<option value="{{ s.id }}">{{ s.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Priority</label>
|
|
<select name="priority" x-model="createTicketData.priority_id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">— None —</option>
|
|
{% for p in priorities %}
|
|
<option value="{{ p.id }}">{{ p.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Start Date</label>
|
|
<input type="date" name="start_date" x-model="createTicketData.start_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Due Date</label>
|
|
<input type="date" name="due_date" x-model="createTicketData.due_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Description</label>
|
|
{% include "components/rich_text_editor.html" with input_name="description" alpine_model="createTicketData.description" %}
|
|
</div>
|
|
</div>
|
|
<div class="px-8 py-5 flex justify-start gap-3">
|
|
<button type="submit" class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">Create Ticket</button>
|
|
<button type="button" @click="createTicketOpen = false" class="px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|