Добавлен UI для создания временных комплектов в форме заказа
Шаблон order_form.html: - Кнопка "Создать и добавить комплект" рядом с "Добавить товар" - Модальное окно с формой создания временного комплекта: * Поле названия комплекта * Поле описания (опционально) * Динамическое добавление/удаление товаров с Select2 * Поле количества для каждого товара JavaScript функциональность: - addTempKitComponent() - добавление товара в комплект - Select2 с AJAX поиском только товаров (type='product') - Валидация (название обязательно, минимум 1 товар) - AJAX запрос к /orders/temporary-kits/create/ - Автоматическое добавление созданного комплекта в форму заказа - Закрытие модального окна после успешного создания Теперь флорист может: 1. Нажать "Создать и добавить комплект" 2. Ввести название (например "Букет для Анны") 3. Добавить товары с количествами через Select2 4. Нажать "Создать и добавить в заказ" 5. Комплект создается и автоматически добавляется в заказ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -243,6 +243,9 @@
|
||||
<button type="button" class="btn btn-secondary" id="add-item-btn">
|
||||
<i class="bi bi-plus-circle"></i> Добавить товар
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary ms-2" id="create-temp-kit-btn" data-bs-toggle="modal" data-bs-target="#tempKitModal">
|
||||
<i class="bi bi-flower1"></i> Создать и добавить комплект
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -531,6 +534,223 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// === ВРЕМЕННЫЕ КОМПЛЕКТЫ ===
|
||||
|
||||
// Модальное окно для создания временного комплекта
|
||||
const tempKitModal = document.getElementById('tempKitModal');
|
||||
const tempKitForm = document.getElementById('temp-kit-form');
|
||||
const tempKitComponentsContainer = document.getElementById('temp-kit-components');
|
||||
let tempKitComponentIndex = 0;
|
||||
|
||||
// Добавление компонента в временный комплект
|
||||
document.getElementById('add-temp-kit-component-btn').addEventListener('click', function() {
|
||||
addTempKitComponent();
|
||||
});
|
||||
|
||||
function addTempKitComponent(productId = '', productName = '', quantity = '1') {
|
||||
const componentHtml = `
|
||||
<div class="temp-kit-component border rounded p-3 mb-3" data-component-index="${tempKitComponentIndex}">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-7">
|
||||
<label class="form-label">Товар</label>
|
||||
<select class="form-select select2-temp-kit-product" data-component-index="${tempKitComponentIndex}">
|
||||
<option value=""></option>
|
||||
${productId ? `<option value="${productId}" selected>${productName}</option>` : ''}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Количество</label>
|
||||
<input type="number" class="form-control temp-kit-quantity" value="${quantity}" min="0.001" step="1" data-component-index="${tempKitComponentIndex}">
|
||||
</div>
|
||||
<div class="col-md-2 text-end">
|
||||
<button type="button" class="btn btn-danger btn-sm remove-temp-kit-component">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
tempKitComponentsContainer.insertAdjacentHTML('beforeend', componentHtml);
|
||||
|
||||
// Инициализация Select2 для нового компонента
|
||||
$(`.select2-temp-kit-product[data-component-index="${tempKitComponentIndex}"]`).select2({
|
||||
theme: 'bootstrap-5',
|
||||
width: '100%',
|
||||
placeholder: 'Выберите товар',
|
||||
language: 'ru',
|
||||
dropdownParent: $('#tempKitModal'),
|
||||
ajax: {
|
||||
url: '{% url "products:api-search-products-variants" %}',
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function(params) {
|
||||
return {
|
||||
q: params.term,
|
||||
type: 'product', // Только товары, не комплекты
|
||||
page: params.page || 1
|
||||
};
|
||||
},
|
||||
processResults: function(data) {
|
||||
return {
|
||||
results: data.results,
|
||||
pagination: {
|
||||
more: data.pagination.more
|
||||
}
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
}
|
||||
});
|
||||
|
||||
tempKitComponentIndex++;
|
||||
}
|
||||
|
||||
// Удаление компонента
|
||||
tempKitComponentsContainer.addEventListener('click', function(e) {
|
||||
if (e.target.closest('.remove-temp-kit-component')) {
|
||||
e.target.closest('.temp-kit-component').remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Добавляем первый компонент при открытии модального окна
|
||||
tempKitModal.addEventListener('show.bs.modal', function() {
|
||||
// Очищаем форму
|
||||
document.getElementById('temp-kit-name').value = '';
|
||||
document.getElementById('temp-kit-description').value = '';
|
||||
tempKitComponentsContainer.innerHTML = '';
|
||||
tempKitComponentIndex = 0;
|
||||
|
||||
// Добавляем первый пустой компонент
|
||||
addTempKitComponent();
|
||||
});
|
||||
|
||||
// Создание временного комплекта
|
||||
document.getElementById('save-temp-kit-btn').addEventListener('click', function() {
|
||||
const name = document.getElementById('temp-kit-name').value.trim();
|
||||
const description = document.getElementById('temp-kit-description').value.trim();
|
||||
|
||||
if (!name) {
|
||||
alert('Пожалуйста, укажите название комплекта');
|
||||
return;
|
||||
}
|
||||
|
||||
// Собираем компоненты
|
||||
const components = [];
|
||||
document.querySelectorAll('.temp-kit-component').forEach(function(component) {
|
||||
const select = component.querySelector('.select2-temp-kit-product');
|
||||
const quantity = component.querySelector('.temp-kit-quantity').value;
|
||||
const productId = $(select).val();
|
||||
|
||||
if (productId && quantity > 0) {
|
||||
// Убираем префикс "product_" если есть
|
||||
const cleanId = productId.replace('product_', '');
|
||||
components.push({
|
||||
product_id: parseInt(cleanId),
|
||||
quantity: quantity
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (components.length === 0) {
|
||||
alert('Добавьте хотя бы один товар в комплект');
|
||||
return;
|
||||
}
|
||||
|
||||
// Отправляем AJAX запрос
|
||||
fetch('{% url "orders:temporary-kit-create" %}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
description: description,
|
||||
order_id: {{ form.instance.pk|default:"null" }},
|
||||
components: components
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Закрываем модальное окно
|
||||
const modal = bootstrap.Modal.getInstance(tempKitModal);
|
||||
modal.hide();
|
||||
|
||||
// Добавляем созданный комплект в форму заказа
|
||||
addOrderItem(`kit_${data.kit_id}`, 'kit', data.kit_name, data.kit_price, 1);
|
||||
|
||||
// Показываем успешное сообщение
|
||||
alert(`Комплект "${data.kit_name}" создан и добавлен в заказ!`);
|
||||
} else {
|
||||
alert(`Ошибка: ${data.error}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Произошла ошибка при создании комплекта');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Модальное окно для создания временного комплекта -->
|
||||
<div class="modal fade" id="tempKitModal" tabindex="-1" aria-labelledby="tempKitModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="tempKitModalLabel">
|
||||
<i class="bi bi-flower1"></i> Создать временный комплект
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="temp-kit-form">
|
||||
<div class="mb-3">
|
||||
<label for="temp-kit-name" class="form-label">
|
||||
Название комплекта <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="text" class="form-control" id="temp-kit-name"
|
||||
placeholder='Например: "Букет для Анны"' required>
|
||||
<small class="form-text text-muted">
|
||||
Этот комплект будет создан только для этого заказа и не появится в общем каталоге
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="temp-kit-description" class="form-label">Описание (опционально)</label>
|
||||
<textarea class="form-control" id="temp-kit-description" rows="2"
|
||||
placeholder="Краткое описание комплекта"></textarea>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<label class="form-label mb-0">
|
||||
Товары в комплекте <span class="text-danger">*</span>
|
||||
</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="add-temp-kit-component-btn">
|
||||
<i class="bi bi-plus-circle"></i> Добавить товар
|
||||
</button>
|
||||
</div>
|
||||
<div id="temp-kit-components">
|
||||
<!-- Компоненты будут добавлены через JS -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x-circle"></i> Отмена
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" id="save-temp-kit-btn">
|
||||
<i class="bi bi-check-circle"></i> Создать и добавить в заказ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user