feat: Добавлена фильтрация заказов с django-filter и календарный компонент

Основные изменения: - Установлен и настроен django-filter==24.3 - Создан OrderFilter с фильтрами по дате доставки, статусу, типу, оплате и поиску - Реализован переиспользуемый компонент календарного фильтра date_range_filter.html - Добавлены быстрые кнопки выбора дат (Сегодня, Завтра, Неделя) - Создан templatetag param_replace для сохранения фильтров при пагинации - Обновлен order_list view для использования django-filter - Полностью переработан шаблон order_list.html с интеграцией фильтров - Добавлены стили (date_filter.css) и логика (date_filter.js) для календаря Структура новых файлов: - orders/filters.py - FilterSet для заказов - orders/templatetags/filter_tags.py - кастомные теги для фильтров - orders/templates/orders/components/date_range_filter.html - компонент календаря - orders/static/orders/css/date_filter.css - стили - orders/static/orders/js/date_filter.js - JavaScript логика - requirements.txt - зависимости проекта Преимущества: - Чистая архитектура фильтрации - Автоматическое сохранение параметров при навигации - Переиспользуемый календарный компонент - Улучшенный UX с быстрыми фильтрами - Готовность к масштабированию на другие модели 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 18:22:57 +03:00
parent ec0557c8cf
commit d37a5df482
11 changed files with 576 additions and 59 deletions
--- a/myproject/orders/static/orders/js/date_filter.js
+++ b/myproject/orders/static/orders/js/date_filter.js
@@ -0,0 +1,131 @@
+/**
+ * Календарный фильтр для выбора диапазона дат
+ * Поддерживает быстрые фильтры (сегодня, завтра, неделя)
+ *
+ * Использование:
+ * Подключить этот файл в шаблоне после компонента date_range_filter.html
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Date filter initialized');
+
+    const quickDateButtons = document.querySelectorAll('.quick-date-btn');
+
+    quickDateButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+
+            const period = this.getAttribute('data-period');
+            const minInputId = this.getAttribute('data-min-input');
+            const maxInputId = this.getAttribute('data-max-input');
+
+            const minInput = document.getElementById(minInputId);
+            const maxInput = document.getElementById(maxInputId);
+
+            if (!minInput || !maxInput) {
+                console.error('Date inputs not found:', minInputId, maxInputId);
+                return;
+            }
+
+            const dates = getDateRange(period);
+
+            minInput.value = dates.min;
+            maxInput.value = dates.max;
+
+            // Визуальная обратная связь
+            this.classList.add('clicked');
+            setTimeout(() => this.classList.remove('clicked'), 300);
+
+            console.log(`Set date range: ${dates.min} - ${dates.max}`);
+        });
+    });
+
+    /**
+     * Вычисляет диапазон дат для выбранного периода
+     * @param {string} period - период (today, tomorrow, week)
+     * @returns {Object} объект с min и max датами в формате YYYY-MM-DD
+     */
+    function getDateRange(period) {
+        const today = new Date();
+        const tomorrow = new Date(today);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+
+        let minDate, maxDate;
+
+        switch(period) {
+            case 'today':
+                minDate = maxDate = formatDate(today);
+                break;
+            case 'tomorrow':
+                minDate = maxDate = formatDate(tomorrow);
+                break;
+            case 'week':
+                minDate = formatDate(today);
+                const weekEnd = new Date(today);
+                weekEnd.setDate(weekEnd.getDate() + 6);
+                maxDate = formatDate(weekEnd);
+                break;
+            case 'month':
+                minDate = formatDate(today);
+                const monthEnd = new Date(today);
+                monthEnd.setMonth(monthEnd.getMonth() + 1);
+                maxDate = formatDate(monthEnd);
+                break;
+            default:
+                minDate = maxDate = '';
+        }
+
+        return { min: minDate, max: maxDate };
+    }
+
+    /**
+     * Форматирует дату в формат YYYY-MM-DD для input[type="date"]
+     * @param {Date} date - объект даты
+     * @returns {string} дата в формате YYYY-MM-DD
+     */
+    function formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    /**
+     * Валидация диапазона дат (начало <= конец)
+     */
+    const dateInputs = document.querySelectorAll('.date-input');
+    dateInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            const container = this.closest('.date-range-filter');
+            if (!container) return;
+
+            const minInput = container.querySelector('.date-input[id$="_after"]');
+            const maxInput = container.querySelector('.date-input[id$="_before"]');
+
+            if (!minInput || !maxInput) return;
+
+            if (minInput.value && maxInput.value) {
+                const minDate = new Date(minInput.value);
+                const maxDate = new Date(maxInput.value);
+
+                if (minDate > maxDate) {
+                    alert('Дата начала не может быть позже даты окончания');
+                    this.value = '';
+                }
+            }
+        });
+    });
+
+    /**
+     * Сброс дат при клике на кнопку "Сбросить" формы
+     */
+    const resetButtons = document.querySelectorAll('a[href*="order-list"]:not([href*="?"])');
+    resetButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Очищаем все date inputs
+            dateInputs.forEach(input => {
+                input.value = '';
+            });
+        });
+    });
+});