smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Refactor order edit page layout and payment UI

Browse Source 
- Move order form scope to left column only to avoid nested forms
- Place payment/refund forms in right column within same grid row
- Remove transaction delete button - use refunds instead for audit trail
- Simplify transaction history table: show only Date, Payment Method, Amount, and Created By
- Fix form submit buttons to use form attribute for proper association
- Improve visual alignment of two-column layout without empty gaps

This ensures valid HTML (no nested forms), clean financial audit history, and better UX with aligned columns.
This commit is contained in:
Andrey Smakotin
2025-11-29 15:12:07 +03:00
parent c1351e1f49
commit 2ec6d1935d
1 changed files with 119 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
myproject/orders/templates/orders/order_form.html
View File

@@ -111,13 +111,12 @@
</div> </div>
</div> </div>
<form method="post" id="order-form"> <!-- Две колонки -->
{% csrf_token %} <div class="row">
<!-- Левая колонка: Заказ -->
<!-- Две колонки --> <div class="col-lg-7">
<div class="row"> <form method="post" id="order-form">
<!-- Левая колонка: Заказ --> {% csrf_token %}
<div class="col-lg-7">
<!-- Основная информация --> <!-- Основная информация -->
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header"> <div class="card-header">
@@ -590,8 +589,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </form>
<!-- Конец левой колонки --> </div>
<!-- Конец левой колонки -->
<!-- Правая колонка: Оплата --> <!-- Правая колонка: Оплата -->
<div class="col-lg-5"> <div class="col-lg-5">
@@ -657,13 +657,10 @@
<table class="table table-sm table-hover mb-0"> <table class="table table-sm table-hover mb-0">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
<th width="15%">Дата</th> <th width="25%">Дата</th>
<th width="10%">Тип</th> <th width="30%">Способ оплаты</th>
<th width="20%">Способ оплаты</th> <th width="25%" class="text-end">Сумма</th>
<th width="12%" class="text-end">Сумма</th> <th width="20%">Кем</th>
<th width="30%">Примечания</th>
<th width="8%">Кем</th>
<th width="5%"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -674,24 +671,12 @@
{{ transaction.transaction_date|date:"d.m.Y H:i" }} {{ transaction.transaction_date|date:"d.m.Y H:i" }}
</small> </small>
</td> </td>
<td>
{% if transaction.transaction_type == 'payment' %}
<span class="badge bg-success">Платёж</span>
{% else %}
<span class="badge bg-warning text-dark">Возврат</span>
{% endif %}
</td>
<td>{{ transaction.payment_method.name }}</td> <td>{{ transaction.payment_method.name }}</td>
<td class="text-end"> <td class="text-end">
<strong class="{% if transaction.transaction_type == 'payment' %}text-success{% else %}text-danger{% endif %}"> <strong class="{% if transaction.transaction_type == 'payment' %}text-success{% else %}text-danger{% endif %}">
{% if transaction.transaction_type == 'refund' %}−{% else %}+{% endif %}{{ transaction.amount|floatformat:2 }} {% if transaction.transaction_type == 'refund' %}−{% else %}+{% endif %}{{ transaction.amount|floatformat:2 }}
</strong> </strong>
</td> </td>
<td>
<small class="text-muted">
{{ transaction.notes|default:transaction.reason|default:"—"|truncatewords:8 }}
</small>
</td>
<td> <td>
<small class="text-muted"> <small class="text-muted">
{% if transaction.created_by %} {% if transaction.created_by %}
@@ -701,16 +686,6 @@
{% endif %} {% endif %}
</small> </small>
</td> </td>
<td class="text-end">
<form method="post" action="{% url 'orders:transaction-delete' order.order_number transaction.id %}" style="display: inline;">
{% csrf_token %}
<button type="submit" class="btn btn-outline-danger btn-sm"
onclick="return confirm('⚠️ Удаление нарушает историю транзакций!\n\nВместо удаления рекомендуется создать возврат.\n\nУдалить транзакцию {{ transaction.get_transaction_type_display }} на сумму {{ transaction.amount|floatformat:2 }} руб.?');"
title="Удалить транзакцию">
<i class="bi bi-trash"></i>
</button>
</form>
</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
@@ -732,12 +707,12 @@
<div class="card-header"> <div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist"> <ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="payment-tab" data-bs-toggle="tab" data-bs-target="#payment-form" type="button" role="tab"> <button class="nav-link active" id="payment-tab-real" data-bs-toggle="tab" data-bs-target="#payment-form-real" type="button" role="tab">
<i class="bi bi-plus-circle"></i> Добавить платёж <i class="bi bi-plus-circle"></i> Добавить платёж
</button> </button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="refund-tab" data-bs-toggle="tab" data-bs-target="#refund-form" type="button" role="tab" {% if order.amount_paid <= 0 %}disabled{% endif %}> <button class="nav-link" id="refund-tab-real" data-bs-toggle="tab" data-bs-target="#refund-form-real" type="button" role="tab" {% if order.amount_paid <= 0 %}disabled{% endif %}>
<i class="bi bi-arrow-return-left"></i> Создать возврат <i class="bi bi-arrow-return-left"></i> Создать возврат
</button> </button>
</li> </li>
@@ -746,21 +721,96 @@
<div class="card-body"> <div class="card-body">
<div class="tab-content"> <div class="tab-content">
<!-- Форма добавления платежа --> <!-- Форма добавления платежа -->
<div class="tab-pane fade show active" id="payment-form" role="tabpanel"> <div class="tab-pane fade show active" id="payment-form-real" role="tabpanel">
<div class="row align-items-end"> <form method="post" action="{% url 'orders:transaction-add-payment' order.order_number %}" id="payment-add-form">
<div class="col-12 mb-2"> {% csrf_token %}
<p class="text-muted"><i class="bi bi-info-circle"></i> Используйте форму ниже после сохранения заказа</p> <div class="row align-items-end">
<div class="col-12 mb-2">
<label class="form-label fw-bold">Способ оплаты <span class="text-danger">*</span></label>
<select name="payment_method" class="form-select" required>
<option value="">Выберите способ...</option>
{% load orders_tags %}
{% get_payment_methods as payment_methods %}
{% for pm in payment_methods %}
<option value="{{ pm.id }}">{{ pm.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-2">
<label class="form-label fw-bold">Сумма <span class="text-danger">*</span></label>
<div class="input-group">
<input type="number" name="amount" step="0.01" min="0.01"
class="form-control" placeholder="0.00"
{% if order.amount_due > 0 %}value="{{ order.amount_due|unlocalize }}"{% endif %} required>
<span class="input-group-text">руб.</span>
</div>
</div>
<div class="col-md-6 mb-2">
<label class="form-label fw-bold">Остаток</label>
<div class="form-control-plaintext fw-bold text-warning">
{{ order.amount_due|floatformat:2 }} руб.
</div>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Примечания</label>
<input type="text" name="notes" class="form-control" placeholder="Опционально">
</div>
<div class="col-12">
<button type="submit" class="btn btn-success w-100">
<i class="bi bi-check-lg"></i> Добавить платёж
</button>
</div>
</div> </div>
</div> </form>
</div> </div>
<!-- Форма создания возврата --> <!-- Форма создания возврата -->
<div class="tab-pane fade" id="refund-form" role="tabpanel"> <div class="tab-pane fade" id="refund-form-real" role="tabpanel">
<div class="alert alert-warning mb-3"> <form method="post" action="{% url 'orders:transaction-add-refund' order.order_number %}" id="refund-add-form">
<i class="bi bi-exclamation-triangle"></i> {% csrf_token %}
<strong>Возврат средств клиенту</strong><br> <div class="alert alert-warning mb-3">
<small>Используйте форму ниже после сохранения заказа</small> <i class="bi bi-exclamation-triangle"></i>
</div> <strong>Возврат средств клиенту</strong><br>
<small>Можно вернуть любую сумму до {{ order.amount_paid|floatformat:2 }} руб. Возврат на кошелёк произойдёт автоматически при выборе соответствующего способа оплаты.</small>
</div>
<div class="row align-items-end">
<div class="col-12 mb-2">
<label class="form-label fw-bold">Способ возврата <span class="text-danger">*</span></label>
<select name="refund_payment_method" class="form-select" required>
<option value="">Выберите способ...</option>
{% load orders_tags %}
{% get_payment_methods as payment_methods %}
{% for pm in payment_methods %}
<option value="{{ pm.id }}">{{ pm.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Сумма возврата <span class="text-danger">*</span></label>
<div class="input-group">
<input type="number" name="refund_amount" step="0.01" min="0.01"
max="{{ order.amount_paid|unlocalize }}" class="form-control"
placeholder="0.00" required>
<span class="input-group-text">руб.</span>
</div>
<small class="text-muted">Макс: {{ order.amount_paid|floatformat:2 }}</small>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Причина <span class="text-danger">*</span></label>
<input type="text" name="refund_reason" class="form-control"
placeholder="Укажите причину возврата" required>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Примечания</label>
<input type="text" name="refund_notes" class="form-control" placeholder="Опционально">
</div>
<div class="col-12">
<button type="submit" class="btn btn-warning w-100 text-dark">
<i class="bi bi-arrow-return-left"></i> Вернуть средства
</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@@ -770,156 +820,31 @@
<!-- Конец правой колонки --> <!-- Конец правой колонки -->
</div> </div>
<!-- Конец двух колонок --> <!-- Конец двух колонок -->
</div>
<!-- Кнопки --> <!-- Кнопки -->
<div class="row">
<div class="col">
<div class="d-flex gap-2">
{% if is_create_page %}
<!-- На странице создания показываем одну кнопку -->
<button type="submit" class="btn btn-primary btn-lg">
<i class="bi bi-check-circle"></i> Создать заказ
</button>
{% else %}
<!-- Для любых заказов - только сохранение -->
<button type="submit" class="btn btn-primary btn-lg">
<i class="bi bi-save"></i> {{ button_text }}
</button>
{% endif %}
<a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary btn-lg">
<i class="bi bi-x-circle"></i> Отмена
</a>
</div>
</div>
</div>
</form>
</div>
<!-- Формы добавления платежа и возврата (ВЫНЕСЕНЫ ЗА ПРЕДЕЛЫ ОСНОВНОЙ ФОРМЫ) -->
{% if order.pk %}
<div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-7"> <div class="col-lg-7">
<!-- Пустое место для выравнивания --> <div class="d-flex gap-2">
</div> {% if is_create_page %}
<div class="col-lg-5"> <!-- На странице создания показываем одну кнопку -->
<div class="card mb-3"> <button type="submit" form="order-form" class="btn btn-primary btn-lg">
<div class="card-header"> <i class="bi bi-check-circle"></i> Создать заказ
<ul class="nav nav-tabs card-header-tabs" role="tablist"> </button>
<li class="nav-item" role="presentation"> {% else %}
<button class="nav-link active" id="payment-tab-real" data-bs-toggle="tab" data-bs-target="#payment-form-real" type="button" role="tab"> <!-- Для любых заказов - только сохранение -->
<i class="bi bi-plus-circle"></i> Добавить платёж <button type="submit" form="order-form" class="btn btn-primary btn-lg">
</button> <i class="bi bi-save"></i> {{ button_text }}
</li> </button>
<li class="nav-item" role="presentation"> {% endif %}
<button class="nav-link" id="refund-tab-real" data-bs-toggle="tab" data-bs-target="#refund-form-real" type="button" role="tab" {% if order.amount_paid <= 0 %}disabled{% endif %}>
<i class="bi bi-arrow-return-left"></i> Создать возврат
</button>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<!-- Форма добавления платежа -->
<div class="tab-pane fade show active" id="payment-form-real" role="tabpanel">
<form method="post" action="{% url 'orders:transaction-add-payment' order.order_number %}" id="payment-add-form">
{% csrf_token %}
<div class="row align-items-end">
<div class="col-12 mb-2">
<label class="form-label fw-bold">Способ оплаты <span class="text-danger">*</span></label>
<select name="payment_method" class="form-select" required>
<option value="">Выберите способ...</option>
{% load orders_tags %}
{% get_payment_methods as payment_methods %}
{% for pm in payment_methods %}
<option value="{{ pm.id }}">{{ pm.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-2">
<label class="form-label fw-bold">Сумма <span class="text-danger">*</span></label>
<div class="input-group">
<input type="number" name="amount" step="0.01" min="0.01"
class="form-control" placeholder="0.00"
{% if order.amount_due > 0 %}value="{{ order.amount_due|unlocalize }}"{% endif %} required>
<span class="input-group-text">руб.</span>
</div>
</div>
<div class="col-md-6 mb-2">
<label class="form-label fw-bold">Остаток</label>
<div class="form-control-plaintext fw-bold text-warning">
{{ order.amount_due|floatformat:2 }} руб.
</div>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Примечания</label>
<input type="text" name="notes" class="form-control" placeholder="Опционально">
</div>
<div class="col-12">
<button type="submit" class="btn btn-success w-100">
<i class="bi bi-check-lg"></i> Добавить платёж
</button>
</div>
</div>
</form>
</div>
<!-- Форма создания возврата --> <a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary btn-lg">
<div class="tab-pane fade" id="refund-form-real" role="tabpanel"> <i class="bi bi-x-circle"></i> Отмена
<form method="post" action="{% url 'orders:transaction-add-refund' order.order_number %}" id="refund-add-form"> </a>
{% csrf_token %}
<div class="alert alert-warning mb-3">
<i class="bi bi-exclamation-triangle"></i>
<strong>Возврат средств клиенту</strong><br>
<small>Можно вернуть любую сумму до {{ order.amount_paid|floatformat:2 }} руб. Возврат на кошелёк произойдёт автоматически при выборе соответствующего способа оплаты.</small>
</div>
<div class="row align-items-end">
<div class="col-12 mb-2">
<label class="form-label fw-bold">Способ возврата <span class="text-danger">*</span></label>
<select name="refund_payment_method" class="form-select" required>
<option value="">Выберите способ...</option>
{% load orders_tags %}
{% get_payment_methods as payment_methods %}
{% for pm in payment_methods %}
<option value="{{ pm.id }}">{{ pm.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Сумма возврата <span class="text-danger">*</span></label>
<div class="input-group">
<input type="number" name="refund_amount" step="0.01" min="0.01"
max="{{ order.amount_paid|unlocalize }}" class="form-control"
placeholder="0.00" required>
<span class="input-group-text">руб.</span>
</div>
<small class="text-muted">Макс: {{ order.amount_paid|floatformat:2 }}</small>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Причина <span class="text-danger">*</span></label>
<input type="text" name="refund_reason" class="form-control"
placeholder="Укажите причину возврата" required>
</div>
<div class="col-12 mb-2">
<label class="form-label fw-bold">Примечания</label>
<input type="text" name="refund_notes" class="form-control" placeholder="Опционально">
</div>
<div class="col-12">
<button type="submit" class="btn btn-warning w-100 text-dark">
<i class="bi bi-arrow-return-left"></i> Вернуть средства
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endif %}
<script> <script>
// Добавляем логирование для кнопки сохранения // Добавляем логирование для кнопки сохранения
@@ -2211,3 +2136,4 @@ if (!document.getElementById('notification-styles')) {
})(); })();
</script> </script>
{% endblock %} {% endblock %}