Добавлен 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">
|
<button type="button" class="btn btn-secondary" id="add-item-btn">
|
||||||
<i class="bi bi-plus-circle"></i> Добавить товар
|
<i class="bi bi-plus-circle"></i> Добавить товар
|
||||||
</button>
|
</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>
|
||||||
</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>
|
</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 %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user