Feature: кнопка «Добавить строку» в табличной части заказов

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-02-25 15:34:31 +00:00
parent a684bede12
commit 0da095f657
3 changed files with 112 additions and 14 deletions

View File

@@ -1,5 +1,13 @@
# История изменений ERP WaterSurf
## 2025-02-25 19:00 UTC Кнопка «Добавить строку» в табличной части заказов
**Проблема**: В форме заказа клиента (и заказа поставщику) нельзя было добавить более одной строки товаров — formset показывал только одну пустую строку (extra=1).
**Решение**: Под таблицей товаров добавлена кнопка «+ Добавить строку». По нажатию скрипт клонирует последнюю строку, подменяет в ней индексы полей (items-N-…) и значение TOTAL_FORMS в management form, очищает значения и добавляет строку в таблицу. Аналогично реализовано для заказа поставщику.
---
## 2025-02-25 18:45 UTC Тёмная тема и обновлённый UI/UX
**Проблема**: Требовался современный тёмный интерфейс, минималистичный и удобный.

View File

@@ -27,7 +27,7 @@
<th>Удалить</th>
</tr>
</thead>
<tbody>
<tbody id="order-items-body">
{% for f in formset %}
<tr class="item-row">
<td>{{ f.id }}{{ f.product }}</td>
@@ -41,6 +41,9 @@
</tbody>
</table>
</div>
<div class="ws-btn-group" style="margin-top: 0.75rem;">
<button type="button" class="btn btn-ws-secondary" id="add-order-row">+ Добавить строку</button>
</div>
</div>
<div class="ws-btn-group" style="margin-top: 1.25rem;">
<button type="submit" class="btn btn-ws-primary">Сохранить</button>
@@ -50,13 +53,55 @@
</div>
{% block extra_js %}
<script>
document.querySelector('.ws-form-card').addEventListener('input', function() {
document.querySelectorAll('#order-items .item-row').forEach(function(row) {
var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
row.querySelector('.row-amount').textContent = (price * qty).toFixed(2);
(function() {
var form = document.querySelector('.ws-form-card');
var tbody = document.getElementById('order-items-body');
var totalInput = form.querySelector('input[name$="-TOTAL_FORMS"]');
if (!totalInput || !tbody) return;
function getPrefix() {
var name = totalInput.getAttribute('name');
return name.replace(/-TOTAL_FORMS$/, '');
}
function updateRowAmounts() {
document.querySelectorAll('#order-items .item-row').forEach(function(row) {
var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
var el = row.querySelector('.row-amount');
if (el) el.textContent = (price * qty).toFixed(2);
});
}
form.addEventListener('input', updateRowAmounts);
document.getElementById('add-order-row').addEventListener('click', function() {
var rows = tbody.querySelectorAll('.item-row');
var lastRow = rows[rows.length - 1];
if (!lastRow) return;
var prefix = getPrefix();
var nextIndex = parseInt(totalInput.value, 10);
var clone = lastRow.cloneNode(true);
clone.querySelectorAll('input, select').forEach(function(el) {
var name = el.getAttribute('name');
if (name && name.indexOf(prefix) === 0) {
el.setAttribute('name', name.replace(new RegExp('^' + prefix + '\\d+-'), prefix + nextIndex + '-'));
el.setAttribute('id', (el.getAttribute('id') || '').replace(new RegExp(prefix + '\\d+-'), prefix + nextIndex + '-'));
}
if (el.name && el.name.indexOf('-DELETE') !== -1) {
el.checked = false;
} else if (el.name && el.name.indexOf('-id') !== -1) {
el.value = '';
} else if (el.type !== 'hidden') {
el.value = '';
}
});
var amountCell = clone.querySelector('.row-amount');
if (amountCell) amountCell.textContent = '—';
tbody.appendChild(clone);
totalInput.value = nextIndex + 1;
});
});
})();
</script>
{% endblock %}
{% endblock %}

View File

@@ -27,7 +27,7 @@
<th>Удалить</th>
</tr>
</thead>
<tbody>
<tbody id="supplier-order-items-body">
{% for f in formset %}
<tr class="item-row">
<td>{{ f.id }}{{ f.product }}</td>
@@ -41,6 +41,9 @@
</tbody>
</table>
</div>
<div class="ws-btn-group" style="margin-top: 0.75rem;">
<button type="button" class="btn btn-ws-secondary" id="add-supplier-order-row">+ Добавить строку</button>
</div>
</div>
<div class="ws-btn-group" style="margin-top: 1.25rem;">
<button type="submit" class="btn btn-ws-primary">Сохранить</button>
@@ -49,12 +52,54 @@
</form>
</div>
<script>
document.querySelector('.ws-form-card').addEventListener('input', function() {
document.querySelectorAll('#supplier-order-items .item-row').forEach(function(row) {
var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
row.querySelector('.row-amount').textContent = (price * qty).toFixed(2);
(function() {
var form = document.querySelector('.ws-form-card');
var tbody = document.getElementById('supplier-order-items-body');
var totalInput = form.querySelector('input[name$="-TOTAL_FORMS"]');
if (!totalInput || !tbody) return;
function getPrefix() {
var name = totalInput.getAttribute('name');
return name.replace(/-TOTAL_FORMS$/, '');
}
function updateRowAmounts() {
document.querySelectorAll('#supplier-order-items .item-row').forEach(function(row) {
var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
var el = row.querySelector('.row-amount');
if (el) el.textContent = (price * qty).toFixed(2);
});
}
form.addEventListener('input', updateRowAmounts);
document.getElementById('add-supplier-order-row').addEventListener('click', function() {
var rows = tbody.querySelectorAll('.item-row');
var lastRow = rows[rows.length - 1];
if (!lastRow) return;
var prefix = getPrefix();
var nextIndex = parseInt(totalInput.value, 10);
var clone = lastRow.cloneNode(true);
clone.querySelectorAll('input, select').forEach(function(el) {
var name = el.getAttribute('name');
if (name && name.indexOf(prefix) === 0) {
el.setAttribute('name', name.replace(new RegExp('^' + prefix + '\\d+-'), prefix + nextIndex + '-'));
el.setAttribute('id', (el.getAttribute('id') || '').replace(new RegExp(prefix + '\\d+-'), prefix + nextIndex + '-'));
}
if (el.name && el.name.indexOf('-DELETE') !== -1) {
el.checked = false;
} else if (el.name && el.name.indexOf('-id') !== -1) {
el.value = '';
} else if (el.type !== 'hidden') {
el.value = '';
}
});
var amountCell = clone.querySelector('.row-amount');
if (amountCell) amountCell.textContent = '—';
tbody.appendChild(clone);
totalInput.value = nextIndex + 1;
});
});
})();
</script>
{% endblock %}