211 lines
10 KiB
HTML
211 lines
10 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Edit Template" %}{% endif %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Back Button -->
|
|
<div class="mb-6">
|
|
<a href="{% url 'projects:template_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
<span class="text-sm font-medium">{% trans "Back to Templates" %}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="mb-6">
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-3">
|
|
<i data-lucide="layout-template" class="w-6 h-6"></i>
|
|
{% if is_create %}{% trans "Create Project Template" %}{% else %}{% trans "Edit Project Template" %}{% endif %}
|
|
</h1>
|
|
<p class="text-sm text-slate mt-1">
|
|
{% if is_create %}
|
|
{% trans "Create a reusable template for quality improvement projects" %}
|
|
{% else %}
|
|
{% trans "Update template details and task templates" %}
|
|
{% endif %}
|
|
</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<!-- Main Form -->
|
|
<div class="col-span-2">
|
|
<div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b">
|
|
<h2 class="text-sm font-bold text-navy">{% trans "Template Information" %}</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="{{ form.name.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Template Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.name }}
|
|
{% if form.name.errors %}
|
|
<p class="text-red-500 text-xs mt-1">{{ form.name.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Is Active -->
|
|
<div>
|
|
<label for="{{ form.is_active.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Status" %}
|
|
</label>
|
|
{{ form.is_active }}
|
|
{% if form.is_active.errors %}
|
|
<p class="text-red-500 text-xs mt-1">{{ form.is_active.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mt-6">
|
|
<label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Description" %}
|
|
</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Task Templates Formset -->
|
|
<div class="mt-8">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="check-square" class="w-4 h-4"></i>
|
|
{% trans "Task Templates" %}
|
|
</h3>
|
|
|
|
{{ task_template_formset.management_form }}
|
|
|
|
<div id="task-templates-container" class="space-y-4">
|
|
{% for task_form in task_template_formset %}
|
|
<div class="task-template-item bg-slate-50 rounded-xl p-4 border">
|
|
<div class="grid grid-cols-12 gap-4 items-start">
|
|
<div class="col-span-5">
|
|
<label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
|
|
{% trans "Task Title" %}
|
|
</label>
|
|
{{ task_form.title }}
|
|
{% if task_form.title.errors %}
|
|
<p class="text-red-500 text-[10px] mt-0.5">{{ task_form.title.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-span-5">
|
|
<label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
|
|
{% trans "Description" %}
|
|
</label>
|
|
{{ task_form.description }}
|
|
</div>
|
|
<div class="col-span-2 flex items-center gap-2 pt-5">
|
|
{{ task_form.DELETE }}
|
|
<button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="{% trans 'Remove' %}">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button type="button" id="add-task-btn" class="mt-4 bg-slate-100 text-slate px-4 py-2 rounded-xl text-xs font-bold hover:bg-slate-200 flex items-center gap-2 transition">
|
|
<i data-lucide="plus" class="w-3 h-3"></i> {% trans "Add Task Template" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex items-center gap-3 mt-8 pt-6 border-t">
|
|
<button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Save Changes" %}{% endif %}
|
|
</button>
|
|
<a href="{% url 'projects:template_list' %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-span-1">
|
|
<div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b">
|
|
<h2 class="text-sm font-bold text-navy">{% trans "Help" %}</h2>
|
|
</div>
|
|
<div class="px-6 py-4 space-y-4">
|
|
<div>
|
|
<h3 class="text-xs font-bold text-navy mb-1">{% trans "What are templates?" %}</h3>
|
|
<p class="text-xs text-slate">{% trans "Templates let you define standard project structures that can be reused across your organization." %}</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xs font-bold text-navy mb-1">{% trans "Task Templates" %}</h3>
|
|
<p class="text-xs text-slate">{% trans "Add common tasks that should be created automatically when using this template." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Handle task template removal
|
|
document.querySelectorAll('.remove-task-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const item = this.closest('.task-template-item');
|
|
const deleteCheckbox = item.querySelector('input[name$="-DELETE"]');
|
|
if (deleteCheckbox) {
|
|
deleteCheckbox.checked = true;
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add new task template (simplified - in production you'd clone an empty form)
|
|
document.getElementById('add-task-btn')?.addEventListener('click', function() {
|
|
const container = document.getElementById('task-templates-container');
|
|
const totalForms = document.querySelector('#id_tasktemplate_set-TOTAL_FORMS');
|
|
const formCount = parseInt(totalForms.value);
|
|
|
|
const newForm = document.createElement('div');
|
|
newForm.className = 'task-template-item bg-slate-50 rounded-xl p-4 border';
|
|
newForm.innerHTML = `
|
|
<div class="grid grid-cols-12 gap-4 items-start">
|
|
<div class="col-span-5">
|
|
<label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Task Title</label>
|
|
<input type="text" name="tasktemplate_set-${formCount}-title" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
|
|
</div>
|
|
<div class="col-span-5">
|
|
<label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Description</label>
|
|
<input type="text" name="tasktemplate_set-${formCount}-description" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
|
|
</div>
|
|
<div class="col-span-2 flex items-center gap-2 pt-5">
|
|
<input type="checkbox" name="tasktemplate_set-${formCount}-DELETE" style="display:none">
|
|
<button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="Remove">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(newForm);
|
|
totalForms.value = formCount + 1;
|
|
|
|
// Initialize lucide icons for new elements
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
|
|
// Add remove handler
|
|
newForm.querySelector('.remove-task-btn').addEventListener('click', function() {
|
|
newForm.remove();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |