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

Co-authored-by: Cursor <cursoragent@cursor.com>

HISTORY.md

@@ -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
 
 **Проблема**: Требовался современный тёмный интерфейс, минималистичный и удобный.

app/templates/documents/order_form.html

@@ -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() {
+(function() {
-  document.querySelectorAll('#order-items .item-row').forEach(function(row) {
+  var form = document.querySelector('.ws-form-card');
-    var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
+  var tbody = document.getElementById('order-items-body');
-    var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
+  var totalInput = form.querySelector('input[name$="-TOTAL_FORMS"]');
-    row.querySelector('.row-amount').textContent = (price * qty).toFixed(2);
+  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 %}

app/templates/documents/supplier_order_form.html

@@ -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() {
+(function() {
-  document.querySelectorAll('#supplier-order-items .item-row').forEach(function(row) {
+  var form = document.querySelector('.ws-form-card');
-    var price = parseFloat(row.querySelector('input[name$="-price"]')?.value) || 0;
+  var tbody = document.getElementById('supplier-order-items-body');
-    var qty = parseFloat(row.querySelector('input[name$="-quantity"]')?.value) || 0;
+  var totalInput = form.querySelector('input[name$="-TOTAL_FORMS"]');
-    row.querySelector('.row-amount').textContent = (price * qty).toFixed(2);
+  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 %}