FossilRepo

fossilrepo / templates / fossil / ticket_fields_form.html

Source Blame History 87 lines

c588255…	ragelink	1	{% extends "base.html" %}
c588255…	ragelink	2	{% block title %}{{ form_title }} — {{ project.name }} — Fossilrepo{% endblock %}
c588255…	ragelink	3
c588255…	ragelink	4	{% block content %}
c588255…	ragelink	5	<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
c588255…	ragelink	6	{% include "fossil/_project_nav.html" %}
c588255…	ragelink	7
c588255…	ragelink	8	<div class="mb-4">
c588255…	ragelink	9	<a href="{% url 'fossil:ticket_fields' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">← Back to Custom Fields</a>
c588255…	ragelink	10	</div>
c588255…	ragelink	11
c588255…	ragelink	12	<div class="mx-auto max-w-2xl">
c588255…	ragelink	13	<h2 class="text-xl font-bold text-gray-100 mb-4">{{ form_title }}</h2>
c588255…	ragelink	14
c588255…	ragelink	15	<form method="post" class="space-y-4 rounded-lg bg-gray-800 p-6 shadow border border-gray-700">
c588255…	ragelink	16	{% csrf_token %}
c588255…	ragelink	17
c588255…	ragelink	18	<div class="grid grid-cols-2 gap-4">
c588255…	ragelink	19	<div>
c588255…	ragelink	20	<label class="block text-sm font-medium text-gray-300 mb-1">Field Name <span class="text-red-400">*</span></label>
c588255…	ragelink	21	<input type="text" name="name" required placeholder="e.g. component"
c588255…	ragelink	22	value="{% if field_def %}{{ field_def.name }}{% endif %}"
c588255…	ragelink	23	pattern="[a-zA-Z_][a-zA-Z0-9_]*"
c588255…	ragelink	24	title="Letters, numbers, and underscores only. Must start with a letter or underscore."
c588255…	ragelink	25	class="w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm font-mono">
c588255…	ragelink	26	<p class="mt-1 text-xs text-gray-500">Internal name used in the Fossil ticket table. Alphanumeric and underscores only.</p>
c588255…	ragelink	27	</div>
c588255…	ragelink	28	<div>
c588255…	ragelink	29	<label class="block text-sm font-medium text-gray-300 mb-1">Display Label <span class="text-red-400">*</span></label>
c588255…	ragelink	30	<input type="text" name="label" required placeholder="e.g. Component"
c588255…	ragelink	31	value="{% if field_def %}{{ field_def.label }}{% endif %}"
c588255…	ragelink	32	class="w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
c588255…	ragelink	33	</div>
c588255…	ragelink	34	</div>
c588255…	ragelink	35
c588255…	ragelink	36	<div class="grid grid-cols-2 gap-4">
c588255…	ragelink	37	<div>
c588255…	ragelink	38	<label class="block text-sm font-medium text-gray-300 mb-1">Field Type</label>
c588255…	ragelink	39	<select name="field_type" id="field-type-select"
c588255…	ragelink	40	class="w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
c588255…	ragelink	41	{% for value, label in field_type_choices %}
c588255…	ragelink	42	<option value="{{ value }}" {% if field_def and field_def.field_type == value %}selected{% endif %}>{{ label }}</option>
c588255…	ragelink	43	{% endfor %}
c588255…	ragelink	44	</select>
c588255…	ragelink	45	</div>
c588255…	ragelink	46	<div>
c588255…	ragelink	47	<label class="block text-sm font-medium text-gray-300 mb-1">Sort Order</label>
c588255…	ragelink	48	<input type="number" name="sort_order" value="{% if field_def %}{{ field_def.sort_order }}{% else %}0{% endif %}"
c588255…	ragelink	49	class="w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
c588255…	ragelink	50	<p class="mt-1 text-xs text-gray-500">Lower numbers appear first.</p>
c588255…	ragelink	51	</div>
c588255…	ragelink	52	</div>
c588255…	ragelink	53
c588255…	ragelink	54	<div x-data="{ showChoices: '{% if field_def %}{{ field_def.field_type }}{% else %}text{% endif %}' === 'select' }">
c588255…	ragelink	55	<div x-show="showChoices" x-transition>
c588255…	ragelink	56	<label class="block text-sm font-medium text-gray-300 mb-1">Choices</label>
c588255…	ragelink	57	<textarea name="choices" rows="5" placeholder="One option per line"
c588255…	ragelink	58	class="w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm font-mono">{% if field_def %}{{ field_def.choices }}{% endif %}</textarea>
c588255…	ragelink	59	<p class="mt-1 text-xs text-gray-500">One option per line. Only used for Select fields.</p>
c588255…	ragelink	60	</div>
c588255…	ragelink	61	<script>
c588255…	ragelink	62	document.getElementById('field-type-select').addEventListener('change', function() {
c588255…	ragelink	63	const comp = document.querySelector('[x-data]').__x.$data;
c588255…	ragelink	64	comp.showChoices = this.value === 'select';
c588255…	ragelink	65	});
c588255…	ragelink	66	</script>
c588255…	ragelink	67	</div>
c588255…	ragelink	68
c588255…	ragelink	69	<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
c588255…	ragelink	70	<input type="checkbox" name="is_required"
c588255…	ragelink	71	{% if field_def and field_def.is_required %}checked{% endif %}
c588255…	ragelink	72	class="rounded border-gray-600 bg-gray-900 text-brand focus:ring-brand">
c588255…	ragelink	73	Required field
c588255…	ragelink	74	</label>
c588255…	ragelink	75
c588255…	ragelink	76	<div class="flex justify-end gap-3 pt-2">
c588255…	ragelink	77	<a href="{% url 'fossil:ticket_fields' slug=project.slug %}"
c588255…	ragelink	78	class="rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
c588255…	ragelink	79	Cancel
c588255…	ragelink	80	</a>
c588255…	ragelink	81	<button type="submit" class="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
c588255…	ragelink	82	{{ submit_label }}
c588255…	ragelink	83	</button>
c588255…	ragelink	84	</div>
c588255…	ragelink	85	</form>
c588255…	ragelink	86	</div>
c588255…	ragelink	87	{% endblock %}

FossilRepo

Keyboard Shortcuts