Перестроена структура формы доставки: создана секция Получатель

- Удален выбор режима адреса (История/Новый/Пусто)
- Поля адреса теперь показаны сразу под кнопками доставки
- Создана новая секция "Получатель" под полями адреса с бордюром сверху
- Перемещен чекбокс "Покупатель является получателем" в секцию Получатель
- Поля получателя (имя и телефон) теперь в той же секции
- Удалены CSS стили для скрытого/видимого режимов адреса
- Удалена функция initAddressModeToggle()
- Упрощена UX: доставка → адрес → получатель

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-11 11:37:50 +03:00
parent 2b652253fe
commit 6c207e9451

View File

@@ -16,23 +16,6 @@
pointer-events: none; pointer-events: none;
} }
/* Явное управление видимостью режимов адреса */
#address-history-mode {
display: none !important;
}
#address-new-mode {
display: none !important;
}
#address-history-mode.visible {
display: block !important;
}
#address-new-mode.visible {
display: block !important;
}
/* Стили для поиска клиента */ /* Стили для поиска клиента */
.customer-option { .customer-option {
padding: 5px 0; padding: 5px 0;
@@ -225,77 +208,7 @@
<!-- Поля доставки (показываются только если выбрана доставка) --> <!-- Поля доставки (показываются только если выбрана доставка) -->
<div id="delivery-mode-fields" style="display: block;"> <div id="delivery-mode-fields" style="display: block;">
<!-- Чекбокс "Покупатель = получатель" --> <!-- Поля ввода адреса доставки -->
<div class="mb-3 form-check">
{{ form.customer_is_recipient }}
<label class="form-check-label" for="{{ form.customer_is_recipient.id_for_label }}">
Покупатель является получателем
</label>
</div>
<!-- Поля получателя (показываются когда покупатель != получатель) -->
<div class="row" id="recipient-fields" style="display: none;">
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.recipient_name.id_for_label }}" class="form-label">
Имя получателя <span class="text-danger">*</span>
</label>
{{ form.recipient_name }}
{% if form.recipient_name.errors %}
<div class="text-danger">{{ form.recipient_name.errors }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.recipient_phone.id_for_label }}" class="form-label">
Телефон получателя <span class="text-danger">*</span>
</label>
{{ form.recipient_phone }}
{% if form.recipient_phone.errors %}
<div class="text-danger">{{ form.recipient_phone.errors }}</div>
{% endif %}
</div>
</div>
</div>
<!-- Способ указания адреса -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="form-label">{{ form.address_mode.label }}</label>
<div class="mt-2">
{% for choice in form.address_mode %}
<div class="form-check">
{{ choice.tag }}
<label class="form-check-label" for="{{ choice.id_for_label }}">
{{ choice.choice_label }}
</label>
</div>
{% endfor %}
</div>
{% if form.address_mode.errors %}
<div class="text-danger">{{ form.address_mode.errors }}</div>
{% endif %}
</div>
</div>
<!-- Режим 1: Выбор из истории -->
<div class="col-md-6" id="address-history-mode">
<div class="mb-3">
<label for="{{ form.address_from_history.id_for_label }}" class="form-label">
{{ form.address_from_history.label }}
</label>
{{ form.address_from_history }}
{% if form.address_from_history.errors %}
<div class="text-danger">{{ form.address_from_history.errors }}</div>
{% endif %}
<small class="text-muted d-block mt-2">Загрузка адресов из истории...</small>
</div>
</div>
<!-- Режим 2: Ввод нового адреса -->
<div class="col-12" id="address-new-mode">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="mb-3"> <div class="mb-3">
@@ -392,9 +305,48 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Получатель -->
<div class="border-top pt-3 mt-3">
<h6 class="mb-3">Получатель</h6>
<!-- Чекбокс "Покупатель = получатель" -->
<div class="mb-3 form-check">
{{ form.customer_is_recipient }}
<label class="form-check-label" for="{{ form.customer_is_recipient.id_for_label }}">
Покупатель является получателем
</label>
</div>
<!-- Поля получателя (показываются когда покупатель != получатель) -->
<div class="row" id="recipient-fields" style="display: none;">
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.recipient_name.id_for_label }}" class="form-label">
Имя получателя <span class="text-danger">*</span>
</label>
{{ form.recipient_name }}
{% if form.recipient_name.errors %}
<div class="text-danger">{{ form.recipient_name.errors }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.recipient_phone.id_for_label }}" class="form-label">
Телефон получателя <span class="text-danger">*</span>
</label>
{{ form.recipient_phone }}
{% if form.recipient_phone.errors %}
<div class="text-danger">{{ form.recipient_phone.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div> </div>
<!-- Стоимость доставки --> <!-- Стоимость доставки -->
<div class="row mt-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="mb-3"> <div class="mb-3">
<label for="{{ form.delivery_cost.id_for_label }}" class="form-label">Стоимость доставки</label> <label for="{{ form.delivery_cost.id_for_label }}" class="form-label">Стоимость доставки</label>
@@ -405,6 +357,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row" id="pickup-fields" style="display: none;"> <div class="row" id="pickup-fields" style="display: none;">
<div class="col-md-6"> <div class="col-md-6">
@@ -859,115 +812,6 @@ window.openCreateCustomerModal = function(searchText = '') {
createCustomerModal.show(); createCustomerModal.show();
}; };
// === ИНИЦИАЛИЗАЦИЯ РЕЖИМОВ АДРЕСА (вне jQuery зависимости) ===
function initAddressModeToggle() {
console.log('[ADDRESS MODE] Initializing address mode toggle');
const addressModeRadios = document.querySelectorAll('input[name="address_mode"]');
const addressHistoryMode = document.getElementById('address-history-mode');
const addressNewMode = document.getElementById('address-new-mode');
const customerSelect = document.getElementById('id_customer');
if (!addressHistoryMode || !addressNewMode) {
console.error('[ADDRESS MODE] address-history-mode or address-new-mode not found in DOM');
return;
}
function toggleAddressMode() {
console.log('[ADDRESS MODE] toggleAddressMode() called');
const checkedRadio = document.querySelector('input[name="address_mode"]:checked');
if (!checkedRadio) {
console.log('[ADDRESS MODE] No radio checked, setting default to "empty"');
const emptyRadio = document.querySelector('input[name="address_mode"][value="empty"]');
if (emptyRadio) {
emptyRadio.checked = true;
}
}
const selectedMode = document.querySelector('input[name="address_mode"]:checked').value;
console.log('[ADDRESS MODE] Selected mode:', selectedMode);
// Убираем класс visible со всех режимов
addressHistoryMode.classList.remove('visible');
addressNewMode.classList.remove('visible');
if (selectedMode === 'history') {
console.log('[ADDRESS MODE] Showing history mode');
addressHistoryMode.classList.add('visible');
loadAddressHistory();
} else if (selectedMode === 'new') {
console.log('[ADDRESS MODE] Showing new address mode');
addressNewMode.classList.add('visible');
} else {
console.log('[ADDRESS MODE] Empty mode - hiding all sections');
}
}
function loadAddressHistory() {
console.log('[ADDRESS MODE] loadAddressHistory() called');
const customerId = customerSelect.value;
console.log('[ADDRESS MODE] Customer ID:', customerId);
if (!customerId) {
const addressSelect = document.getElementById('id_address_from_history');
addressSelect.innerHTML = '<option value="">-- История недоступна (клиент не выбран) --</option>';
return;
}
fetch(`{% url 'orders:api-customer-address-history' %}?customer_id=${customerId}`)
.then(response => response.json())
.then(data => {
console.log('[ADDRESS MODE] Address history data:', data);
const addressSelect = document.getElementById('id_address_from_history');
if (!data.success || data.count === 0) {
addressSelect.innerHTML = '<option value="">-- История адресов не найдена --</option>';
return;
}
let optionsHTML = '<option value="">-- Выберите адрес --</option>';
data.addresses.forEach(addr => {
optionsHTML += `<option value="${addr.id}">${addr.display}</option>`;
});
addressSelect.innerHTML = optionsHTML;
// Если есть Select2, обновляем его
if (typeof $ !== 'undefined' && $(addressSelect).data('select2')) {
$(addressSelect).trigger('change');
}
})
.catch(error => {
console.error('[ADDRESS MODE] Error loading address history:', error);
const addressSelect = document.getElementById('id_address_from_history');
addressSelect.innerHTML = '<option value="">-- Ошибка загрузки --</option>';
});
}
// Добавляем обработчики на radio кнопки
addressModeRadios.forEach(radio => {
console.log('[ADDRESS MODE] Adding listener to radio:', radio.value);
radio.addEventListener('change', function() {
console.log('[ADDRESS MODE] Radio changed to:', this.value);
toggleAddressMode();
});
});
// Загружаем адреса при изменении клиента
if (customerSelect) {
customerSelect.addEventListener('change', function() {
console.log('[ADDRESS MODE] Customer changed');
loadAddressHistory();
});
}
// Инициализация при загрузке
console.log('[ADDRESS MODE] Initial toggle call');
toggleAddressMode();
}
// Вызываем инициализацию адреса СРАЗУ (не зависит от jQuery)
initAddressModeToggle();
// Вызываем инициализацию Select2 для customer // Вызываем инициализацию Select2 для customer
initCustomerSelect2(); initCustomerSelect2();