Feature: кнопка «Добавить строку» в табличной части заказов
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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
|
||||
|
||||
**Проблема**: Требовался современный тёмный интерфейс, минималистичный и удобный.
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user