132 lines
5.5 KiB
HTML
132 lines
5.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<h2>{{ title }}</h2>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
{{ form.as_p }}
|
|
<hr>
|
|
<h4>Items</h4>
|
|
{{ formset.management_form }}
|
|
<div id="formset-container">
|
|
{% for form in formset %}
|
|
<div class="item-form row g-3 mb-3 align-items-end">
|
|
{{ form.id }}
|
|
<div class="col-md-2">
|
|
{{ form.make.label_tag }}
|
|
{{ form.make }}
|
|
</div>
|
|
<div class="col-md-2">
|
|
{{ form.model.label_tag }}
|
|
{{ form.model }}
|
|
</div>
|
|
<div class="col-md-2">
|
|
{{ form.serie.label_tag }}
|
|
{{ form.serie }}
|
|
</div>
|
|
<div class="col-md-2">
|
|
{{ form.trim.label_tag }}
|
|
{{ form.trim }}
|
|
</div>
|
|
<div class="col-md-1">
|
|
{{ form.year.label_tag }}
|
|
{{ form.year }}
|
|
</div>
|
|
<div class="col-md-2">
|
|
{{ form.color.label_tag }}
|
|
{{ form.color }}
|
|
</div>
|
|
<div class="col-md-2">
|
|
{{ form.expected_cost.label_tag }}
|
|
{{ form.expected_cost }}
|
|
</div>
|
|
<div class="col-md-1">
|
|
<button type="button" class="btn btn-phoenix-danger btn-sm remove-row">Remove</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button type="button"
|
|
id="add-item"
|
|
class="btn btn-phoenix-secondary btn-sm mb-3">+ Add Item</button>
|
|
<div class="mt-3">
|
|
<button type="submit" class="btn btn-phoenix-primary">Save</button>
|
|
<a href="{% url 'purchase_order_list' request.dealer.slug %}"
|
|
class="btn btn-phoenix-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const container = document.getElementById('formset-container');
|
|
const addBtn = document.getElementById('add-item');
|
|
const totalForms = document.querySelector('#id_form-TOTAL_FORMS');
|
|
const emptyForm = document.querySelector('.empty-form').cloneNode(true);
|
|
|
|
function updateFormIndex(formRow, index) {
|
|
formRow.querySelectorAll('input, select').forEach(input => {
|
|
input.name = input.name.replace('__prefix__', index);
|
|
input.id = input.id.replace('__prefix__', index);
|
|
});
|
|
}
|
|
|
|
addBtn.addEventListener('click', function () {
|
|
const currentCount = parseInt(totalForms.value);
|
|
const newForm = emptyForm.cloneNode(true);
|
|
updateFormIndex(newForm, currentCount);
|
|
newForm.classList.remove('empty-form');
|
|
|
|
// Attach remove handler
|
|
const removeBtn = newForm.querySelector('.remove-row');
|
|
removeBtn.addEventListener('click', function () {
|
|
newForm.remove();
|
|
totalForms.value = parseInt(totalForms.value) - 1;
|
|
});
|
|
|
|
container.appendChild(newForm);
|
|
totalForms.value = currentCount + 1;
|
|
});
|
|
|
|
document.querySelectorAll('.remove-row').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const row = this.closest('.item-form');
|
|
row.remove();
|
|
totalForms.value = parseInt(totalForms.value) - 1;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<!-- Empty form template -->
|
|
<div class="empty-form d-none">
|
|
<div class="item-form row g-3 mb-3 align-items-end">
|
|
<div class="col-md-2">
|
|
<select name="form-__prefix__-make" class="form-select make-select"></select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="form-__prefix__-model" class="form-select model-select"></select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="form-__prefix__-serie" class="form-select serie-select"></select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="form-__prefix__-trim" class="form-select trim-select"></select>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<input type="number" name="form-__prefix__-year" class="form-control">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<input type="text" name="form-__prefix__-color" class="form-control">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<input type="number"
|
|
step="0.01"
|
|
name="form-__prefix__-expected_cost"
|
|
class="form-control">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<button type="button" class="btn btn-phoenix-danger btn-sm remove-row">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|